I have a select box to categorize images but once I applied styling on it, the select box stops directing users to the categories.
When I delete the class=desktop in the head of my HTML, the select box works again.
Here is a jsbin of the below:
function shuffle(e){var t=e.length,n,r;while(0!==t){r=Math.floor(Math.random()*t);t-=1;n=e[t];e[t]=e[r];e[r]=n}return e}function is(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return t!==undefined&&t!==null&&n===e}function updateVideosList(e){var t;var n=[];$.map(videos,function(r){if(is("String",r.category)){if(r.category===e){n.push(r)}}else{for(t=0;t<r.category.length;t++){if(r.category[t]===e){n.push(r)}}}});var r=shuffle(n.length>0?n:videos);var i=$("div#videos > ul");i.html("");r.forEach(function(e,t){var n=$("<li>");var r="";e.sources.forEach(function(e){r+=e.type+": "+e.src+"; "});n.text(r);i.append(n)});return r}function chooseRandomVideoFromList(){var e=Math.floor(Math.random()*currentList.length);var t=currentList[e];var n=$("video");n.html("");t.sources.forEach(function(e){var t=$("<source>").attr("type",e.type).attr("src",e.src);n.append(t)});$(".video-label").html(n.get(0).outerHTML)}function updateCategoryLabel(e){var t=$(".category-label");t.text(e||"All")}function updateView(e){updateCategoryLabel(e);currentList=updateVideosList(e);chooseRandomVideoFromList()}var videos=[{category:["landscape","abstract","technology"],sources:[{type:"video/webm",src:"http://zippy.gfycat.com/MinorGregariousGrub.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/MinorGregariousGrub.mp4"}]},{category:"abstract",sources:[{type:"video/webm",src:"http://zippy.gfycat.com/SpottedDefensiveAbalone.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4"}]},{category:"technology",sources:[{type:"video/webm",src:"http://zippy.gfycat.com/ViciousUglyArabianoryx.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/ViciousUglyArabianoryx.mp4"}]}];var currentList;$(function(){updateView();$("select").on("change",function(){updateView(this.value)});$("a.play-video").on("click",function(){chooseRandomVideoFromList()})});(function(e,t,n,r){function o(t,n){this.element=t;this.options=e.extend({},s,n);this._defaults=s;this._name=i;this.instance;this.callbackManager=new Array;this.elem_isVisible="";this.init()}var i="heapbox",s={effect:{type:"slide",speed:"fast"},insert:"before",heapsize:r,emptyMessage:"Empty",tabindex:"undefined",title:r,showFirst:true,inheritVisibility:true,openStart:function(){},openComplete:function(){},closeStart:function(){},closeComplete:function(){},onChange:function(){}};o.prototype={init:function(){this._hideSourceElement();this._isSourceSelectbox();this.instance=this.createInstance();this._createElements();this._setDefaultValues()},createInstance:function(){return{heapId:e(this.element).attr("id")||Math.round(Math.random()*99999999),state:false}},_setEvents:function(){var t=this;this._setControlsEvents();e(n).on("click","html",function(e){e.stopPropagation();t._closeheap(true,function(){},function(){})})},_setSliderEvents:function(){var t=this;this.scrollingStatus=false;heap=e("#heapbox_"+this.instance.heapId+" .heap");heap.find(".sliderDown").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus()});heap.find(".sliderDown").mousedown(function(n){t.scrollingStatus=true;t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");t.interval=setInterval(function(){t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down")},300)}).mouseup(function(e){clearInterval(t.interval);t.scrollingStatus=false}).mouseout(function(e){clearInterval(t.interval);t.scrollingStatus=false});heap.find(".sliderUp").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus()});heap.find(".sliderUp").mousedown(function(n){t.scrollingStatus=true;t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");t.interval=setInterval(function(){t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up")},300)}).mouseup(function(e){clearInterval(t.interval);t.scrollingStatus=false}).mouseout(function(e){clearInterval(t.interval);t.scrollingStatus=false})},_setViewPosition:function(t){heap=e("div#heapbox_"+this.instance.heapId+" .heap");heap.show();var n=this;selected=t.find(".heapOptions li a.selected");firstTop=t.find(".heapOptions li a").first().offset().top;actTop=e(selected).offset().top;newTop=firstTop-actTop+this.sliderUpHeight;heapHeight=e("div#heapbox_"+this.instance.heapId+" .heapOptions").height();maxPosition=heapHeight-parseInt(this.options.heapsize,10)+this.sliderDownHeight;minPosition=0+this.sliderUpHeight;if(-1*newTop>maxPosition)newTop=-1*maxPosition;t.find(".heapOptions").css("top",newTop);if(!this.instance.state)heap.hide()},_setKeyboardEvents:function(){var t=this;heapbox=e("#heapbox_"+this.instance.heapId);heapbox.keydown(function(n){switch(n.which){case 13:t._handlerClicked();return false;break;case 27:t._closeheap();break;case 37:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");n.preventDefault();break;case 39:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");n.preventDefault();break;case 38:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");n.preventDefault();break;case 40:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");n.preventDefault();break}})},_setMouseWheelEvents:function(){var t=this,n=e("div#heapbox_"+this.instance.heapId+" .handler"),r=n.find("div.heap");n.on("mousewheel",function(e,t){e.preventDefault();if(t==-1){r.find(".sliderDown").mousedown().mouseup()}else{r.find(".sliderUp").mousedown().mouseup()}})},_keyArrowHandler:function(t,n){var r=this;var i=false;t.find("div.heap ul li").each(function(){if(e(this).find("a").hasClass("selected")){i=true;selectItem=n=="down"?r._findNext(e(this)):r._findPrev(e(this));if(selectItem){r._heapChanged(r,selectItem,true);return false}}});if(i==false){selectItem=e("div#heapbox_"+r.instance.heapId+" .heapOptions .heapOption").first().find("a").addClass("selected");r._heapChanged(r,selectItem,true)}r._setViewPosition(e("#heapbox_"+r.instance.heapId))},_setMouseWheelEvents:function(){var t=this,n=e("div#heapbox_"+this.instance.heapId),r=n.find("div.heap");n.on("mousewheel",function(e,t){e.preventDefault();if(t==-1){r.find(".sliderDown").mousedown().mouseup()}else{r.find(".sliderUp").mousedown().mouseup()}})},_findPrev:function(e){if(e.prev().length>0){if(!e.prev().find("a").hasClass("disabled")){return e.prev().find("a")}else{return this._findPrev(e.prev())}}},_findNext:function(e){if(e.next().length>0){if(!e.next().find("a").hasClass("disabled")){return e.next().find("a")}else{return this._findNext(e.next())}}},_createElements:function(){var t=this;heapBoxEl=e("<div/>",{id:"heapbox_"+this.instance.heapId,"class":"heapBox",data:{sourceElement:this.element}});if(t.options.inheritVisibility==true&&t.elem_isVisible==false){heapBoxEl.css("display","none")}heapBoxHolderEl=e("<a/>",{href:"","class":"holder"});heapBoxHandlerEl=e("<a/>",{href:"","class":"handler"});heapBoxheapEl=e("<div/>",{"class":"heap"});heapBoxEl.append(heapBoxHolderEl);heapBoxEl.append(heapBoxHandlerEl);heapBoxEl.append(heapBoxheapEl);this.heapBoxEl=heapBoxEl;this._insertHeapbox(this.heapBoxEl)},_insertHeapbox:function(t){if(this.isSourceElementSelect&&this.options.insert=="inside")this.options.insert="before";switch(this.options.insert){case"before":e(this.element).before(t);break;case"after":e(this.element).after(t);break;case"inside":e(this.element).html(t);this._showSourceElement();break;default:e(this.element).before(t);break}},_setDefaultValues:function(){this._initHeap();this._initView(heapBoxEl);this._setHolderTitle();this._setTabindex();this._setEvents();this._handleFirst()},_setHeapboxFocus:function(){heapbox=e("div#heapbox_"+this.instance.heapId+" .handler");heapbox.focus()},_setHeapSize:function(){if(this.options.heapsize){if(heapBoxheapEl.height()<parseInt(this.options.heapsize,10)){delete this.options.heapsize;return}else{heapBoxheapEl.css("height",this.options.heapsize)}}},_initHeap:function(){var e;if(this.isSourceElementSelect){e=this._optionsToJson();this._setData(e)}},_initView:function(e){if(this._isHeapEmpty()){return}else{this._setViewPosition(e)}},_handleFirst:function(){if(!this.options.showFirst){e("div#heapbox_"+this.instance.heapId+" .heapOptions .heapOption").first().remove()}},_setHolderTitle:function(){var t=this;holderEl=e("#heapbox_"+this.instance.heapId).find(".holder");selectedEl=e("#heapbox_"+this.instance.heapId).find(".heap ul li a.selected").last();if(selectedEl.length!=0){if(this.options.title){holderEl.text(this.options.title)}else{holderEl.text(selectedEl.text())}holderEl.attr("rel",selectedEl.attr("rel"));if(selectedEl.attr("data-icon-src")){iconEl=this._createIconElement(selectedEl.attr("data-icon-src"));holderEl.append(iconEl)}}else{holderEl.text(this.options.emptyMessage);this._removeHeapboxHolderEvents();this._removeHeapboxHandlerEvents()}},_setTabindex:function(){var t;t=this.options.tabindex!="undefined"?this.options.tabindex:e(this.element).attr("tabindex");if(t!="undefined"){e("#heapbox_"+this.instance.heapId).attr("tabindex",t)}},_setData:function(t){var n=this;var r=jQuery.parseJSON(t);var i=false;heapBoxheapOptionsEl=e("<ul/>",{"class":"heapOptions"});e.each(r,function(){if(this.selected){i=true}heapBoxOptionLiEl=e("<li/>",{"class":"heapOption"});heapBoxheapOptionAEl=e("<a/>",{href:"",rel:this.value,title:this.text,text:this.text,"class":this.selected?"selected":"",click:function(e){e.preventDefault();e.stopPropagation();n._heapChanged(n,this)}});if(this.disabled){heapBoxheapOptionAEl.unbind("click");heapBoxheapOptionAEl.addClass("disabled");heapBoxheapOptionAEl.click(function(e){e.preventDefault();e.stopPropagation()})}if(this.icon){heapBoxheapOptionAEl.attr("data-icon-src",this.icon);heapBoxOptionIcon=n._createIconElement(this.icon);heapBoxheapOptionAEl.append(heapBoxOptionIcon)}heapBoxOptionLiEl.append(heapBoxheapOptionAEl);heapBoxheapOptionsEl.append(heapBoxOptionLiEl)});e("div#heapbox_"+this.instance.heapId+" .heap ul").remove();e("div#heapbox_"+this.instance.heapId+" .heap").append(heapBoxheapOptionsEl);this._setHeapSize();if(this._isHeapsizeSet()){this._createSliderUpElement();this._createSliderDownElement()}if(i!=true){e("div#heapbox_"+this.instance.heapId+" .heap ul li a").first().addClass("selected")}},_createSliderUpElement:function(){slideUp=e("<a/>",{"class":"sliderUp",href:""});e("div#heapbox_"+this.instance.heapId+" .heap .heapOptions").before(slideUp);sliderUp=e("#heapbox_"+this.instance.heapId+" .sliderUp");this.sliderUpHeight=parseInt(sliderUp.css("height"),10)+parseInt(sliderUp.css("border-top-width"),10)+parseInt(sliderUp.css("border-bottom-width"),10);e("#heapbox_"+this.instance.heapId+" .heapOptions").css("top",this.sliderUpHeight)},_createSliderDownElement:function(){slideDown=e("<a/>",{"class":"sliderDown",href:""});e("div#heapbox_"+this.instance.heapId+" .heap .heapOptions").after(slideDown);sliderDown=e("#heapbox_"+this.instance.heapId+" .sliderDown");this.sliderDownHeight=parseInt(sliderDown.css("height"),10)+parseInt(sliderDown.css("border-top-width"))+parseInt(sliderDown.css("border-bottom-width"))},_createIconElement:function(t){heapBoxOptionIcon=e("<img/>",{src:t,alt:t});return heapBoxOptionIcon},_optionsToJson:function(){var t=[];e(this.element).find("option").each(function(){t.push({value:e(this).attr("value"),text:e(this).text(),icon:e(this).attr("data-icon-src"),disabled:e(this).attr("disabled"),selected:e(this).is(":selected")?"selected":""})});var n=JSON.stringify(t);return n},_heapboxToJson:function(){var t=[];e("div#heapbox_"+this.instance.heapId+" .heap ul li a").each(function(){t.push({value:e(this).attr("rel"),text:e(this).text(),selected:e(this).is(":selected")?"selected":""})});var n=JSON.stringify(t);return n},_isHeapEmpty:function(){var t=e("div#heapbox_"+this.instance.heapId+" .heap ul li").length;return t==0},_setControlsEvents:function(){if(!this._isHeapEmpty()){this._setHeapboxHolderEvents();this._setHeapboxHandlerEvents();this._setKeyboardEvents();this._setSliderEvents();if(typeof e.event.special.mousewheel=="object"){this._setMouseWheelEvents()}}},_isSourceSelectbox:function(){this.isSourceElementSelect=e(this.element).is("select")},_isHeapsizeSet:function(){return this.options.heapsize?true:false},_refreshSourceSelectbox:function(t){var n=this;var r=false;e(this.element).find("option").remove();e.each(t,function(){option=e("<option/>",{value:this.value,text:this.text});if(this.selected){option.attr("selected","selected");r=true}e(n.element).append(option)});if(r!=true)e(n.element).find("option").first().attr("selected","selected")},_setSelectedOption:function(t){var n=this;this._deselectSelectedOptions();e(this.element).val(t);e(this.element).find("option[value='"+t+"']").attr("selected","selected")},_deselectSelectedOptions:function(){select=e(this.element).find("option");select.each(function(){e(this).removeAttr("selected")})},_setHeapboxHolderEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".holder").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus();t._handlerClicked()})},_setHeapboxHandlerEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".handler").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus();t._handlerClicked()})},_removeHeapboxHolderEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".holder").unbind("click");heapBoxEl.find(".holder").click(function(e){e.preventDefault()});heapBoxEl.unbind("keydown")},_removeHeapboxHandlerEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".handler").unbind("click");heapBoxEl.find(".handler").click(function(e){e.preventDefault()})},_handlerClicked:function(e){if(this.instance.state){this._closeheap()}else{if(!e)this._closeOthers();else this._openheap()}},_heapChanged:function(t,n,r){if(!r)this._closeheap(true,function(){},function(){});this._setSelected(e(n));this._setHolderTitle();this._setHeapboxFocus();this._setSelectedOption(e(n).attr("rel"));this.options.onChange(e(n).attr("rel"),e(this.element))},_setSelected:function(e){this._deselectAll();e.addClass("selected")},_deselectAll:function(t){heapLinks=e("#heapbox_"+this.instance.heapId).find(".heap ul li a");heapLinks.each(function(){e(this).removeClass("selected")})},_closeheap:function(t,n,r){heapEl=e("#heapbox_"+this.instance.heapId).removeClass("open").find(".heap");if(heapEl.is(":animated")&&!t)return false;this.instance.state=false;if(t){n=n;r=r}else{n=this.options.closeStart;r=this.options.closeComplete}n.call();switch(this.options.effect.type){case"fade":heapEl.fadeOut(this.options.effect.speed,r);break;case"slide":heapEl.slideUp(this.options.effect.speed,r);break;case"standard":heapEl.css("display","none");r.call();break;default:heapEl.slideUp(this.options.effect.speed,r);break}},_openheap:function(){if(this._isHeapsizeSet()){this._setViewPosition(e("div#heapbox_"+this.instance.heapId))}heapEl=e("#heapbox_"+this.instance.heapId).addClass("open").find(".heap");if(heapEl.is(":animated"))return false;this.instance.state=true;this.options.openStart.call();switch(this.options.effect.type){case"fade":heapEl.fadeIn(this.options.effect.speed,this.options.openComplete);break;case"slide":heapEl.slideDown(this.options.effect.speed,this.options.openComplete);break;case"standard":heapEl.css("display","block");this.options.openComplete.call();break;default:heapEl.slideDown(this.options.effect.speed,this.options.openComplete);break}},_closeOthers:function(){var t=this;e("div[id^=heapbox_]").each(function(n){el=e("div#"+e(this).attr("id"));if(el.data("sourceElement")){sourceEl=e.data(this,"sourceElement");heapBoxInst=e.data(sourceEl,"plugin_"+i);if(t.instance.heapId!=heapBoxInst.instance.heapId){if(heapBoxInst.instance.state){t._callbackManager("change","_closeOthers",true);heapBoxInst._closeheap(true,function(){},function(){t._callbackManager("change","_closeOthers",false)})}}}});t._callbackManager("test","_closeOthers")},_callbackManager:function(e,t,n){if(!this.callbackManager[t])this.callbackManager[t]=0;if(e=="change"){n?this.callbackManager[t]++:this.callbackManager[t]--;this._callbackManager("test",t)}else if(e=="test"){if(this.callbackManager[t]==0)this._handlerClicked(true)}},set:function(e){this._setData(e);this._setHolderTitle();this._setEvents()},select:function(t){heapBoxEl=e("div#heapbox_"+this.instance.heapId);this._heapChanged(this,heapBoxEl.find('.heapOptions [rel="'+t+'"]'))},update:function(){this._setDefaultValues()},_hideSourceElement:function(){this.elem_isVisible=e(this.element).is(":visible");e(this.element).css("display","none")},_showSourceElement:function(){e(this.element).css("display","block")},hide:function(){e("div#heapbox_"+this.instance.heapId).css("visibility","hidden")},show:function(){e("div#heapbox_"+this.instance.heapId).css("visibility","visible")},disable:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.addClass("disabled");this._removeHeapboxHandlerEvents();this._removeHeapboxHolderEvents();return this},enable:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.removeClass("disabled");this._setEvents();return this},_remove:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.remove();this._showSourceElement()}};e.fn[i]=function(t,n){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}else{heapBoxInst=e.data(this,"plugin_"+i);switch(t){case"select":heapBoxInst.select(n);break;case"update":heapBoxInst.update();break;case"set":heapBoxInst.set(n);break;case"hide":heapBoxInst.hide();break;case"show":heapBoxInst.show();break;case"disable":heapBoxInst.disable();break;case"enable":heapBoxInst.enable();break;case"remove":heapBoxInst._remove();break}}})}})(jQuery,window,document)
.heapContainer{width:100%}.heapBox{clear:both;display:inline-block;line-height:35px;position:absolute;font-family:Arial,sans-serif;font-size:12px;font-weight:400;left:1%;top:2%;opacity:.5;z-index:1000;max-width:100%}.heapBox:hover{opacity:1}.heapBox *{margin:0;padding:0;outline:0}.heapBox.disabled .holder{color:#E64937}.heapBox a{text-decoration:none;color:#fff}.heapBox .holder{width:150px;overflow:hidden;background:#FF69B4;text-indent:20px;height:35px}.heapBox .handler{width:25px;background:url(gfx/heapbox_handler_bg.jpg) #FF69B4;height:35px}.heapBox .handler,.heapBox .holder{float:left;position:relative;text-align:left;z-index:10}.heapBox div.heap{display:none;position:absolute;list-style-type:none;left:0;width:175px;top:37px;overflow:hidden}.heapBox .heap .heapOptions{display:block;overflow:hidden;z-index:20;position:relative}.heapBox .heap a.sliderUp{display:block;width:100%;height:15px;background:url(gfx/slider_arrow_up.png) left left no-repeat #FF69B4;border-bottom:1px solid #CD6090;position:absolute;top:0;z-index:30}.heapBox .heap a.sliderDown{display:block;width:100%;height:15px;background:url(gfx/slider_arrow_down.png) left left no-repeat #FF69B4;border-top:1px solid #CD6090;position:absolute;bottom:0;z-index:30}.heapBox .heap .heapOptions .heapOption{z-index:20;position:relative;display:block;height:35px}.heapBox .heap .heapOptions .heapOption a{width:100%;display:block;background:#FF69B4;text-indent:20px;text-align:left}.heapBox .heap .heapOptions .heapOption a.selected,.heapBox .heap .heapOptions .heapOption a:hover{background:#CD6090;text-align:left}.heapBox .heap .heapOptions .heapOption a.disabled{color:#DA695D;text-align:left}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".desktop").heapbox();
});
</script>
<select class="desktop" name="select">
<option value="" selected>All</option>
<option value="landscape">Landscape</option>
<option value="technology">Technology</option>
<option value="abstract">Abstract</option>
</select>
<hr>
<h4>"<span class="category-label"></span>" videos</h4>
<div id="videos">
<ul></ul>
</div>
<hr>
<a href="#" class="play-video">
<div class="video-label">
<video loop autoplay controls>
Your browser does not support the <code>video</code> element.
</video>
</div>
</a>
According to the Heapbox documentation, in the 'Events and callbacks' section, you should create your event handlers when you first declare the heapbox. So in your HTML file, adjust your .heapbox() call to look like this
$(document).ready(function() {
$(".desktop").heapbox({
'onChange':function() {
updateView(this.value);
}
});
});
I create one page transitions in jquery like "http://support.microsoft.com/" this.
My problem is when page transitions done, it start from left. Please refer this fiddle (Working Code) and you can understand what happen. First I click on "Page 1" from drop down menu. First div comes from right to left (←) and its perfect, then after I click on text from First Div and Second Div comes from right to left (←), this also perfect. after that I click on text from second Div and third Div come from right to left (←) and Div 1 and 2 goes hide # left side, that's fine. but now problem start. when I click on "page 1" from navigation, My hidden divs come from left to right (→) in place of right to left (←). What I should I do ?
Here Is my Code
HTML
<div class="codrops-top clearfix">
<!-- <a class="codrops-icon codrops-icon-prev" href=""><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href=""><span>Back to the Codrops Article</span></a></span> -->
</div>
<div class="pt-wrapper">
<div class="pt-trigger-container">
<div class="navigation right">
<ul>
<li><img src = "menu.png" width = "25">
<div style = "margin-left:10px">
<ul>
<li id = "page1"><a>Page 1</a></li>
</ul>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div id = "container1" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
<ul id = "contaoneritem1">
<li><a>Content 1</a></li>
<li><a>Content 2</a></li>
<li><a>Content 3</a></li>
<li><a>Content 4</a></li>
<li><a>Content 5</a></li>
<li><a>Content 6</a></li>
</ul>
</div>
<div id = "container2" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
<ul id = "contaoneritem2">
<li><a>Content 1.1</a></li>
<li><a>Content 1.2</a></li>
<li><a>Content 1.3</a></li>
<li><a>Content 1.4</a></li>
<li><a>Content 1.5</a></li>
<li><a>Content 1.6</a></li>
</ul>
</div>
<div id = "container3" style="left:80%;background:#98bf21;height:100%;width:600px;position:absolute;display:none">
<ul id = "contaoneritem3">
<li><a>Content 1.1.1</a></li>
<li><a>Content 1.2.1</a></li>
<li><a>Content 1.3.1</a></li>
<li><a>Content 1.4.1</a></li>
<li><a>Content 1.5.1</a></li>
<li><a>Content 1.6.1</a></li>
</ul>
</div>
CSS
body{overflow:hidden}
.navigation ul{ float:right;}
.navigation ul li{ float:left; padding:0px 300px 0px 5px;cursor:pointer}
.navigation ul li a{cursor:pointer}
.navigation ul li div{ display:none;}
.navigation ul li:hover div{ display:block; position:absolute;z-index:9999}
.navigation ul li:hover div ul{ float:none; margin-left:-30px;}
.navigation ul li:hover div ul li{ float:none; text-align:left; padding:0px; background:#110000; border-bottom:#dddddd solid 1px;}
.navigation ul li:hover div ul li:hover a{ background:#fff; color:black}
.navigation ul li:hover div ul li a{ padding:3px 5px; display:block; width:100%;color:white}
JS
$(document).ready(function(){
$("#page1").click(function(){
var div3=$("#container3");
div3.animate({left:'120%'},"slow");
$("#container1").show();
var div=$("#container1");
div.animate({left:'20%'},"slow");
});
});
$(document).ready(function(){
$("#contaoneritem1").click(function(){
$("#container2").show();
var div=$("#container2");
div.animate({left:'40%'},"slow");
});
});
$(document).ready(function(){
$("#contaoneritem2 li a").click(function(){
var div=$("#container2");
var div1=$("#container1");
div.animate({left:'-100%'},"slow");
div1.animate({left:'-100%'},"slow");
$("#container3").show();
var div3=$("#container3");
div3.animate({left:'20%'},"slow");
});
});
You are moving the container 1& 2 to extrem left thats why it start coming from left to right, do following changes :
$(document).ready(function(){
$("#page1").click(function(){
var div3=$("#container3");
div3.animate({left:'120%'},"slow");
var div2=$("#container2");
var div1=$("#container1");
div2.css("left", "100%");
div1.css("left", "80%");
$("#container1").show();
var div=$("#container1");
div.animate({left:'20%'},"slow");
});
});
Fiddle DEMO
On my page I have an unordered list with some list items that serve as links to load content into a div.
The art direction requires that the list items be fully justified to the left and right. I've written some JavaScript to figure out how wide the ul is and calculate the width of the individual li elements, divide the remaining space and push the elements to the left and right respectively. It works great.
Now we want to add another ul under the first with another set of links.
How can I repurpose my code to do the same work as before?
All the list items are styled display:inline; and they need to be fluid in width in the event a font on one browser is a little bigger than another.
Here's my HTML: (It's all run together to overcome the spacing issue with inline list elements)
<div id="portfolio">
<ul class="stacked-nav-top">
<li class="project_link">
<a href="#" class="project_class planning" id="commercial-industrial" title="Commercial Industrial Projects">
Commercial & Industrial
</a>
</li>
<li class="breaker">//</li>
<li class="project_link">
<a href="#" class="project_class planning" id="government-institutional" title="Government Institutional Projects">
Government & Institutional
</a>
</li>
<li class="breaker">//</li>
<li class="project_link">
<a href="#" class="project_class planning" id="affordable-housing" title="Affordable Housing Projects">
Affordable Housing
</a>
</li>
<li class="breaker">//</li>
<li class="project_link">
<a href="#" class="project_class planning" id="multi-family-housing" title="Multi-family Housing Projects">
Multi-family Housing
</a>
</li>
</ul>
</div>
And my JavaScript:
$(function()
{
var linkwidth = 0;
$('#portfolio ul li.project_link').each(function()
{
linkwidth += $(this).outerWidth()
});
var leftover = ($('#portfolio ul').outerWidth() - linkwidth);
var breakerwidth = Math.floor((leftover / 3));
$('#portfolio ul li.breaker').css('width', breakerwidth);
});
EDIT
My CSS:
section#portfolio ul {
display:block;
width:820px;
text-align:center;
}
.stacked-nav-top {
border-top:solid 1px rgba(97,58,17,.3);
margin:0px;
background:transparent url(images/dotted_line_820.png) center 19px no-repeat;
padding:10px 0px;
}
.stacked-nav-bottom {
border-bottom:solid 1px rgba(97,58,17,.3);
padding-bottom:10px;
margin:10px 0px 15px 0px;
}
section#portfolio ul li {
display:inline;
font:lighter .65em "Tahoma", "Geneva", sans-serif;
color:rgb(145,145,145);
text-transform:uppercase;
}
section#portfolio ul li.breaker {
display:inline-block;
text-align:center;
}
I've tried wrapping all the JavaScript in a $('#portfolio ul').each(... but that doesn't seem to work. It sets the spacing according to the first ul not both individually.
I'm not really sure to understand what do you want but,
if you want to repeat the operation on each ul of your section, you have to loop on each ul, then do your calculations.
Demo here, respecting your HTML inline syntax (inline-block problem).
http://jsfiddle.net/ggX2r/2/
// Inside a document.ready scope of couse...
$('#portfolio ul').each(function () {
var linkwidth = 0,
leftover,
breakerwidth;
// *this* refers to your current <ul> child of your #portfolio.
$('li.project_link', this).each(function() {
// *this* refers now to your current <li.project_link> element
linkwidth += $(this).outerWidth();
});
leftover = ($('#portfolio ul').outerWidth() - linkwidth);
breakerwidth = Math.floor((leftover / 3));
$('li.breaker', this).css('width', breakerwidth);
});