Reversing an ordered list that is created by JQuery -
Reversing an ordered list that is created by JQuery -
i have jquery script creating ordered list image slider's navigation , i'm trying float these numbers right. when this, numbers in reverse order , seek might, can't seem them original order.
i've tried using 'reverse' attribute, doesn't seem anything. unfortunately can't utilize margin either because force images across well.
is there way reverse these damn numbers!?
i'm using tpi's alteration of easy slider 1.7: [http://www.thoughtprocessinteractive.com/blog/combining-navigation-on-the-easyslider-jquery-plugin][1].
html:
<div id="content-slider"> <div id="content"> <div id="slider"> <ul> <li><img src="../images/events_2/events2_1.jpg" /></br></br><p>caption</p></li> <li><img src="../images/events_2/events2_2.jpg" /></br></br><p>caption</p></li> <li><img src="../images/events_2/events2_3.jpg" /></br></br><p>caption</p></li> </ul> </div> </div> </div> css:
#slider p { margin-left:1px; } #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ /* define width , height of list item (slide) entire slider area adjust according parameters provided here */ width:756px; height:530px; overflow:hidden; } #prevbtn, #nextbtn, #slider1next, #slider1prev{ display:block; width:22px; height:22px; position:absolute; left:; top:539px; z-index:1000; } #nextbtn, #slider1next{ left:30px; } #prevbtn a, #nextbtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:13px; height:11px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #prevbtn a:hover, #nextbtn a:hover, #slider1next a:hover, #slider1prev a:hover{ background-position:right; } #nextbtn a, #slider1next a{ background:url(../images/btn_next.gif) no-repeat 0 0; } #nextbtn a:hover, #slider1next a:hover{ background-position:right; } /* numeric controls */ ol#controls{ margin:1px 0; margin-left:4em; padding:0; height:28px; } ol#controls li{ margin:0 10px 0 0; padding:0; float:right; list-style:none; height:28px; line-height:28px; } ol#controls li a{ height:28px; line-height:28px; color:#ccc; padding:0 5px; text-decoration:none; } ol#controls li.current a{ color:#e99878; } ol#controls li a:focus, #prevbtn a:focus, #nextbtn a:focus{outline:none;} jquery:
if(options.numeric){ for(var i=0;i<s;i++){ $(document.createelement("li")) .attr('id',options.numericid + (i+1)) .html('<a rel='+ +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') .appendto($("#"+ options.numericid)) .click(function(){ animate($("a",$(this)).attr('rel'),true); }); }; $("a","#"+options.nextid).click(function(){ animate("next",true); }); $("a","#"+options.previd).click(function(){ animate("prev",true); }); $("a","#"+options.firstid).click(function(){ animate("first",true); }); $("a","#"+options.lastid).click(function(){ animate("last",true); }); } else { $("a","#"+options.nextid).click(function(){ animate("next",true); }); $("a","#"+options.previd).click(function(){ animate("prev",true); }); $("a","#"+options.firstid).click(function(){ animate("first",true); }); $("a","#"+options.lastid).click(function(){ animate("last",true); }); }; apologies if there isn't plenty info here (or much), i'm new this. allow me know if there can improve post.
update: ol beingness created jquery additional ul , li items. want reverse ol items beingness created.
jquery html-lists
Comments
Post a Comment