Reversing order of ordered list counter in CSS -


i have snippet let better understand question: 

$(window).load(function() {    var total;      $(document).ready(function() {      $('#dupe').click(function() {        $('#uploadforms').prepend($('#htmltemplate').html());        $($('#uploadforms .upload_form')[0]).animate({          height: $($('#uploadforms .upload_form')[$('#uploadforms .upload_form').size() - 1]).css('height'),          opacity: 1        }, 500);        totalforms();          $(".upload_form").each(function() {          if (typeof $(this).find('a.close')[0] === 'undefined') {            if ($('#uploadforms .upload_form').size() > 1) $(this).prepend('<a class="close">x</a>');          }        });          $(".upload_form").on("click", ".close", function() {          $(this).parent().animate({            height: 0,            opacity: 0,            paddingtop: 0,            paddingbottom: 0          }, 500, function() {            $(this).parent().remove();            totalforms()          });          if ($('#uploadforms .upload_form').size() - 1 <= 1) $('#uploadforms .upload_form').find('a.close').remove();        });      });        function totalforms() {        total = $('#uploadforms .upload_form').size();        $('#total').html(total);      }    });  });
.upload_form {    background-color: rgba(0, 0, 0, .3);    padding: 16px 64px 10px 76px;    border-bottom-left-radius: 15px;    border-bottom-right-radius: 15px;    margin-bottom: 10px;  }  .coverart {    margin-right: 48px;    margin-bottom: 36px;  }  label input,  label textarea {    width: 252px;  }  .info {    display: block;    vertical-align: top;  }  .close {    float: right;    color: white;    margin: 10px;    display: block;    cursor: hand;    border-radius: 100%;    cursor: pointer;    width: 18px;    height: 18px;    text-align: center;    -moz-user-select: none;    -webkit-user-select: none;  }  .close:hover {    background-color: rgba(0, 0, 0, 0.5);  }  ol {    counter-reset: li;    margin-left: 0;    padding-left: 0;  }  ol > li {    position: relative;    margin: 0 0 6px 2em;    padding: 0px 0px 8px;    list-style: none;    border-top: 2px solid #666;  }  ol > li:before {    content: counter(li);    counter-increment: li;    position: absolute;    top: -2px;    left: -2em;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;    width: 2em;    margin-right: 8px;    padding: 4px;    border-top: 2px solid #666;    color: #fff;    background: #666;    font-weight: bold;    font-family: "helvetica neue", arial, sans-serif;    text-align: center;  }  li ol,  li ul {    margin-top: 6px;  }  ol ol li:last-child {    margin-bottom: 0;  }  .template {    display: none  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <input type="button" value="add file..." id="dupe">  <input type="button" value="upload file(s)" id="dupe">    <hr>    <p>total: <span id="total">1</span></p>    <div id="htmltemplate" class="template">    <li>      <div class="upload_form" style="height:0;opacity:0;">        <span class="number"></span>        <a class="close">x</a>        <div class="info">          <p>filler</p>        </div>      </div>    </li>  </div>    <ol id="uploadforms">    <li>      <div class="upload_form">        <span class="number"></span>        <a class="close">x</a>        <div class="info">          <p>filler</p>        </div>      </div>    </li>  </ol>

in demo if click "add file..." new list element added new <div> inside. question is: how reverse order of counter?

related css:

ol {     counter-reset:li; } ol > li {     position:relative;     margin:0 0 6px 2em;     padding: 0px 0px 8px;     list-style:none;     border-top:2px solid #666; } ol > li:before {     content: counter(li);     counter-increment:li;     position:absolute;     top:-2px;     left:-2em;     box-sizing:border-box;     width:2em;     margin-right:8px;     padding:4px;     border-top:2px solid #666;     color:#fff;     background:#666;     font-weight:bold;     font-family:"helvetica neue", arial, sans-serif;     text-align:center; }

i don't have pure css solution, page quite js-heavy, think okay.

for li add

counter-increment: li -1;

to make count backwards. means can't reset @ 0, has reset @ total elements.

for ol start with

counter-reset:li 2;

and update js:

$('#total').html(total); $("ol").css('counter-reset', 'li ' + (+total + 1));

http://jsfiddle.net/explosionpills/arzuw/1/


Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more