How to change submenus of menu to the bottom of each parent - javascript

i have a menu that contains 3 levels . it works good and show the both 2 first level.
but not shows the third level because i define overflow in second level to show it with a scroll bar.
my question : is there a way to keep the scroll bar of without hide the 3rd level.
if not how can i show the 3rd level at bottom of each parent when hovered?
here is my snippet:
#menuindez{width:17%;height:100%;position:fixed;z-index:999999;top:0px;height:100%;position:fixed;top:0px;right:0;z-index:1001;}
#menuindez2{border-top:5px solid #d3b564;height:100%;position:relative;padding:20px 0 0;width:98%;margin:0 auto}
.menuindex.hvr-bounce-to-left > a{width:270px;display:block;clear:both;text-align:center;padding:8px 0;margin:0;font-size:17px;}
ul.css3menu1, ul.css3menu1 ul, ul#css3menu2, ul#css3menu2 ul, ul.css3menu1 ul ul{margin:0;list-style:none;padding:0;border-width:0;border-style:solid;font-size:17px;}
ul.css3menu1 ul, ul#css3menu2 ul, ul.css3menu1 ul ul{top:0px;font-size:17px;cursor:pointer;visibility:hidden;position:absolute;right:200%;}
ul.css3menu1 li:hover>ul, ul#css3menu2 li:hover>ul{visibility:visible;}
ul.css3menu1 li, ul#css3menu2 li{font-size:16px;transition:all 0.66s !important;position:relative;display:block;white-space:nowrap;font-size:0;}
ul.css3menu1 li:hover, ul#css3menu2 li:hover{font-size:17px;z-index:1;}
ul.css3menu1 ul ul, ul#css3menu2 ul ul{position:absolute;right:200%;}
ul.css3menu1>li:hover>ul, ul#css3menu2>li:hover>ul, ul.css3menu1>li ul li:hover>ul{font-size:17px;right:100%;width:250px;z-index:9999999;background:#031430}
ul.css3menu1 ul li:hover>ul{font-size:17px;right:100%;}
ul.css3menu1{width:100%;font-size:17px;font-size:0;z-index:999;position:relative;display:inline-block;padding:0;margin-top:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;float:right;}
ul.css3menu1>li{margin:0;}
ul.css3menu1 a:active, ul.css3menu1 a:focus{outline-style:none;font-size:17px;}
ul.css3menu1 a{display:block;vertical-align:middle;text-decoration:none;font:15px Trebuchet MS;color:#fff;cursor:default;padding:8px 0;text-align:center;background-repeat:repeat;border-width:0px;border-style:none;transition:margin 0.44s;}
ul.css3menu1 ul li, ul.css3menu1 ul li ul li{height:35px;transition:margin 0.44s;float:none;margin:0px 0 0;border-bottom:1px solid #010B1B;}
.car-brand{width:100%;float:right;box-sizing:border-box;direction:rtl;height:457px;overflow:auto;}
.car-list{width:75%;float:left;overflow:hidden;position:relative;padding-bottom:20px;}
.car-brand-item{height:43px;line-height:43px;font-size:14px;border-bottom:none;padding-right:10px;cursor:pointer;}
.car-brand-img{width:43px;height:43px;float:right;margin-left:10px;direction:rtl;text-align:center;vertical-align:middle;display:table-cell;}
.car-brand-img img{position:relative;top:4px;}
.car-brand-item:hover a{font-size:17px;font-family:'W_yekan';color:#78c8e4;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.aysham.com/js/menu.js"></script>
<div id="menuindez" style="background:green;" >
<div id="menuindez2">
<div class="menuindex hvr-bounce-to-left">
<ul class="css3menu1 topmenu">
<li class="topmenu hvr-bounce-to-left"><a href="">
<h1>Level 1</h1>
</a>
<ul>
<div id="car-brand-list">
<div class="car-brand mCustomScrollbar" id="content-1" style="position:relative;" >
<li>
<div class="car-brand-item" data-id="26709"> Level2</div>
<ul>
<li >
<div class="car-brand-item" data-id="34310"> Level3</div>
</li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>

You can use plain old CSS for the hover on the 3rd level by using the nth-child-selector. See below as an example:
.car-brand-item:nth-child(3){ display:block }
Or you can use the index property and get the 3rd index in js.
document.getElementsByClassName('car-brand-item')[2];

Related

Select box loses functionality when css/javascript applied

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);
}
});
});

Add PlusMinus to Accordion Menu

My Accordion Menu has a Counter to count the Submenus. I want to change it to Plus Minus.
If there is a Submenu than "Plus" should be add if is closed, if is opened than a Minus.
If there is no SubMenu than nothing should be added.
The Counter code
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
jsFiddle Demo
Well you could achieve this by first getting two icons 1. Plus 2. Minus and putting something like this in your css:
#cssmenu > ul > li.has-sub > a span {
background: url(images/icon_plus.png) 90% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(images/icon_minus.png) 90% center no-repeat;
}
Here my menu is as follows:
<div id="cssmenu">
<ul>
<li><span>Products</span>
<ul>
<li>Widgets</li>
<li>Menus</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
Now with jquery check if your menu has a submenu using:
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
And add the two css classes you made and drop down using jquery. I made a jfiddle as that would be too much to put here.
Here you go Jfiddle - accordian plus minus
Hope this helps! Not all of the code is mine. Cheers!
I would suggest you to use the Accordion Jquery-Ui for that
Jquery-ui

Jquery Div slide transitions From Right To Left not working Properly

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

Repurposing some Javascript for a similar DOM element

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);
});

2 column layout for submenus

I am trying to create sort of Jquery Ui megamenu's or even suckerfish style. But can not use them as a plugin in my code.
I have a 2 column layout in my sub menus. How do I tweak the existing code to show it in a 2 column layout? Here's my jsfiddle.
To my understanding, i will have to play a lot with css in this. As I tried doing it by having 2 Unordered list in the main list and gave float right and left consecutively and used clear both.
As you can find that one column already exists.the other column would be dynamically updated through ajax call.
Any help would be appreciated.
Here's a simple demo:
http://jsfiddle.net/brvX3/11/
html:
<ul>
<li>Menu item
<div style="display:none">
<ul>
<li>Menu2 item1</li>
<li>Menu2 item1</li>
</ul>
<ul>
<li>Menu2 item2</li>
<li>Menu2 item2</li>
</ul>
</div>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
CSS:
body {
font-family:arial;
font-size:10px;
}
ul, li {
margin:0;
passing:0
}
ul > li {
float:left;
position:relative;
}
ul li a {
display:block;
padding:3px;
width:80px;
background-color:#e0e0e0
}
ul div {
position:absolute;
width:180px;
background-color:#e0e0e0
}
ul ul {
float:left;
width:90px
}
ul li a:hover > div {
display:block;
}
JS:
$("ul a").hover(
function(){ $(this).next().show() },
function() { $(this).next().hide() }
);
$("ul div").hover(
function(){ $(this).show() },
function() { $(this).hide() }
)

Categories