We Keep Coding

Select box loses functionality when css/javascript applied - javascript

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

Related

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];

There is already a similiar question here, but the solution didn't helped me out. to the question
i have a li, inside it is a div. Inside that div is a loginform.
If i hover over the li the div appears via jQuery.
Now - if i select the first suggestion from the browser-autocomplete, mouseleave is fired an the div disapears. But its only at the first suggestion. If i select the second or thrid suggestion from it, the div stays and all is alright, as long as the selected suggestion is within/over the div (obvious).
jQuery: 1.10.2
tested in Chrome 40.0.2214.111 m
$(document).on("mouseenter", "li.menu-item", function() {
$(this).addClass("hover");
}).on("mouseleave", "li.menu-item", function() {
$(this).removeClass("hover");
});
li{
padding-left: 0;
float:left;
width:100px;
list-style: none;
}
ul li.menu-item .login-layer{
display:none;
width:100px;
height:100px;
border:1px solid #000;
}
ul li.menu-item.hover .login-layer{
display:block;
}
input{
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li class="menu-item">
<p>login</p>
<div class="login-layer">
<form>
<input type="text" placeholder="E-Mail" id="email" name="login" class="EMAIL"/><br/>
</form>
</div>
</li>
</ul>
http://jsfiddle.net/adzrn7tt/

Add a condition if your input is focus:
if(!$('input').is(':focus')) {
$(this).removeClass("hover");
}

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

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

Thanks in advance. I have actually tried several javascript scripts to get this to work and none have, but my understanding of javascript is pretty rudimentary.
I cannot adjust the code of the link itself - it is being generated. But it is generated with an id and a class. I would like to have a script in the document that references the link's id so that when the user rolls over the link, a hidden ul (or div) appears - like a normal css navigation dropdown but, again, i cannot alter the code of the actual links. I can only alter the CSS in general.
Is there javascript that can do this? I can do query..
Thank you again!
bb

Here i have done drop down menu using HTML and CSS only, which show/hide on menu link hover state.
HTML:
<div id="menu1" class="menu">
<a href="#" id="link1">
Menu-1
</a>
<div id="menulist1" class="menulist">
<div>
Option1
</div>
<div>
Option2
</div>
<div>
Option3
</div>
<div>
Option4
</div>
<div>
Option5
</div>
</div>
</div>
<div id="menu2" class="menu">
<a href="#" id="link2">
Menu-2
</a>
<ul id="menulist2" class="menulist">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
<li>
Option4
</li>
<li>
Option5
</li>
</ul>
</div>
CSS:
.menu{
font-size:15px;
display:inline-block;
margin:0px;
padding:0px;
}
.menu a{
display:block;
width:120px;
text-align:center;
background-color:#2211ce;
color:#dccb00;
text-decoration:none;
}
#menulist1{
position:absolute;
top:33px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menulist2{
position:absolute;
top:20px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menu1:hover #menulist1{
display:block;
}
#menu2:hover #menulist2{
margin-top:13px;
display:block;
}
.menulist div{
margin-left:0px;
padding:3px;
width:112px;
}
.menulist li{
list-style:none;
width:72px;
padding:3px;
margin-left:0px;
display:block;
}
.menulist div:hover,.menulist li:hover{
background-color:#1155ac;
color:#dccb00;
}
I have also done bins for above example, please click on http://codebins.com/codes/home/4ldqpbo