I am developing a website with a mobile menu where three underlying elements should appear when hovering over another menu item (not a parent!)
I have tried css but that was not possible without altering the html structure, so I left that for now. I also tried onclick function but the mobile menu disappears after a click so that doesn't work either. Therefore, onmouseover javascript would be preferable.
The javascript code I have so far:
<script type='text/javascript'>
document.getElementsByClassName("holder").onmouseover = function(){mouseOver()};
document.getElementsByClassName("holder").onmouseout = function() {mouseOut()};
function mouseOver() {
document.getElementsByClassName("helper").style.display=="block";}
function mouseOut() {
document.getElementsByClassName("helper").style.display=="none";}
</script>
The html is as follows:
<ul class="mm-listview">
<li class="holder menu-item menu-item-type-custom menu-item-object-custom">Holder</li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon">Example</li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon">Example
</li></ul>
Modified HTML below.
<ul class="mm-listview">
<li id="holder">Holder</li>
<li id="helper1">Example</li>
<li id="helper2">Example
</li></ul>
Modified JS below.
<script type='text/javascript'>
document.getElementById("holder").onmouseover = function(){mouseOver()};
document.getElementById("holder").onmouseout = function() {mouseOut()};
function mouseOver() {
document.getElementById("helper1").style.display=="block";}
function mouseOut() {
document.getElementById("helper").style.display=="none";}
</script>
This should work.
getElementsByClassName will return an array with all elements with class helper. You need to change the display of each of those elements, something like this:
function mouseOver() {
var myList = document.getElementsByClassName("helper");
myList.forEach(function(item){
item.style.display="block";
});
}
Related
I'm rather new to coding and my understanding is limited.
But I'm using Slicknav for mobile screen sizes, however according to the author of the plug in.
"SlickNav menu items are created Dynamically" so I need to use delegated click events or attach event handlers after SlickNav is created.
My SlickNav post
I need some help with this. According to This, I tried making a delegated events.
Here is the original code which is a " direct" event handler (I think)
menuitem.eq(0).on('click', function(){
status = 1;
clearBox();
statusCheck();
});
BTW all my code is trying to do is 1. Clear out a Container which is a display window for content. And 2. Append the correct content to that window based on the menu item that is clicked.
Here is my attempt at a delegated event:
$('#navMenu').on('click',menuitem.eq(0), function(){
status = 1;
clearBox();
statusCheck();
});
Also tried replacing .on() with .delegate(), no dice.
For completeness ill including the functions that the cick events are calling
function clearBox(){
$("#display_box").children().fadeOut(1000).appendTo(".holding");
};
function statusCheck(){
if (status == 1){
displaycontent.eq(0).fadeIn(1000).appendTo("#display_box");
displaycontent.eq(0).removeClass("hide");
$("#display_box").animate({scrollTop:0},500);
} else{}
if (status == 2){
displaycontent.eq(25).fadeIn(1000).appendTo("#display_box");
displaycontent.eq(25).removeClass("hide");
$("#display_box").animate({scrollTop:0},500);
} else{}
// Etc Etc Etc
Edit: Provided HTML for the Menu
<div class ="menu_wrap">
<nav id = "navMenu">
<ul class ="clearfix menu">
<li>General
<ul class="subMenu1">
<li class ="menu_item">Introduction</li>
<li class ="menu_item"> What you need</li>
<li class ="menu_item">House Rules</li>
<li class ="menu_item">Running the Game</li>
<li class ="menu_item">Survival</li>
<li class ="menu_item">Encounters</li>
</ul>
</li>
<li>The World
<ul class ="subMenu1">
<li class ="menu_item">Nol</li>
<li class ="menu_item">Wol</li>
<li class ="menu_item">Sol</li>
<li class ="menu_item">Eol</li>
</ul>
</li>
<li>Locations and Maps</li>
<li>Races and Cultures
<ul class ="subMenu1">
<li> <a class="allow_default" href="index_npcs.html" target="blank">NPC Creatures</a></li>
<li class ="menu_item"> Voran Kingdom</li>
<li class ="menu_item">Doval Empire</li>
<li class ="menu_item">Salatai Sultanate</li>
<li class ="menu_item">Gamoran Republic</li>
<li class ="menu_item">Elandel</li>
<li class ="menu_item">Kingdom of Night</li>
<li class ="menu_item">Halflings</li>
<li class ="menu_item">Aiur' Dun</li>
<li class ="menu_item">Half-Elves</li>
<li class ="menu_item">Half-Orcs</li>
<li class ="menu_item">Dryads</li>
</ul>
</li>
<li> Organizations
<ul class ="subMenu1">
<li class="menu_item">Information</li>
<li class ="menu_item">The Green Wardens</li>
<li class ="menu_item">The Temple of Light</li>
<li class ="menu_item">The Black Hand</li>
<li class ="menu_item">The Stone Priests</li>
<li class ="menu_item">The Golden Company</li>
<li class ="menu_item">The Dread Guards</li>
</ul>
</li>
<li class ="menu_item">Character Creation
<ul class ="subMenu1">
<li class ="menu_item"> <a class="allow_default" href="index_personality_test.html" target="blank">Creation Test</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Try something like this:
<nav id="navMenu">
<ul class="clearfix menu">
<li>General
<ul class="subMenu1">
<li class="menu_item" data-item="intro">Introduction</li>
<li class="menu_item" data-item="requirements">What you need</li>
<li class="menu_item" data-item="rules">House Rules</li>
...
And this for the JavaScript:
$('#navMenu, .slicknav_menu').on('click', '.menu_item', function() {
clearBox();
switch($(this).attr('data-item')) {
case 'intro': {
// Do something here.
break;
}
case 'requirements': {
// Do something here.
break;
}
case 'rules': {
// Do something here.
break;
}
// More cases...
}
});
It appears the cloned menu created by SlickNav is placed directly under the <body> element, so you cannot call .on() only on your #navMenu element. You could call it on the body element, but the code above calls it on both the #navMenu and .slicknav_menu elements. The <ul> element generated by SlickNav has the slicknav_menu class on it.
As written, the code above has to be called after you call .slicknav() since it requires the cloned menu exist when it is called. Otherwise, you would have to change to $('body').on(....
As for the rest, the selector '.menu_item' identifies all the menu item elements, so the click-event handler will execute for all of them. But each menu item element has a different value for the data-item attribute. That way you can do something different for each one.
jsfiddle
I want add class to clicked li and delete other li class
<ul>
<li onclick="s()"><span>خانه</span></li>
<li onclick="s()"><span>سفارش</span></li>
<li onclick="s()" class="selected"><span>آپلود</span></li>
<li onclick="s()"><span>درباره ما</span></li>
<li onclick="s()"><span>تنظیمات</span></li>
</ul>
I can do it with jquery but now i want do this with javascript?
Don't use inline click handlers. Instead, attach a handler from JavaScript.
<ul id="myUL"> <!-- This is just for example, to make it easier to select -->
<li><span>خانه</span></li>
<li><span>سفارش</span></li>
<li class="selected"><span>آپلود</span></li>
<li><span>درباره ما</span></li>
<li><span>تنظیمات</span></li>
</ul>
Then, in JavaScript:
var myUL = document.querySelector('#myUL');
// Attach one event listener on the parent, instead of one for each element.
// It's more performant and will work with dynamically added entries!
myUL.addEventListener('click', function(event) {
// Here, event.target is the actual event clicked.
// Remove class from selected one.
document.querySelector('#myUL .selected').classList.remove('selected');
// And add it to the current one
event.target.classList.add('selected');
});
Working Example
This is a quick fix and this way is not recommended. But in your case, you need to use this way:
function s (which) {
document.querySelectorAll(".clicked")[0].classList.remove("selected");
which.classList.add("selected");
}
And change the call this way:
<ul>
<li onclick="s(this)"><span>خانه</span></li>
<li onclick="s(this)"><span>سفارش</span></li>
<li onclick="s(this)" class="selected"><span>آپلود</span></li>
<li onclick="s(this)"><span>درباره ما</span></li>
<li onclick="s(this)"><span>تنظیمات</span></li>
</ul>
The right way is to use eventListeners and bind the events to an ID.
var list = document.querySelector('#menu');
list.addEventListener('click', function(event) {
list.querySelector('.selected').classList.remove('selected');
event.target.classList.add('selected');
});
And add the ID to the <ul>:
<ul id="menu">
<li>خانه</li>
<li>سفارش</li>
<li class="selected">آپلود</li>
<li>درباره ما</li>
<li>تنظیمات</li>
</ul>
Hello I need help with my menu if it shows more than 10 on dropdown menu in my exaple below.I want that when I click on ... button (see in example) show the other six languages. I am not good at javascript. Here is the example of the menu where ... is I want on click to show the other Language.
HTML code
<li>
<div class="buttonbg gradient_button">Language</div>
<ul class="gradient_menu">
<li class="gradient_menuitem first">Arabic</li>
<li class="gradient_menuitem">Brazilian</li>
<li class="gradient_menuitem">Dutch</li>
<li class="gradient_menuitem">English</li>
<li class="gradient_menuitem">French</li>
<li class="gradient_menuitem">German</li>
<li class="gradient_menuitem">Greek</li>
<li class="gradient_menuitem">Indonesian</li>
<li class="gradient_menuitem">Malay</li>
<li class="gradient_menuitem">...</li>
<li class="gradient_menuitem">Romanian</li>
<li class="gradient_menuitem">Spanish</li>
<li class="gradient_menuitem">Swedish</li>
<li class="gradient_menuitem">Thai</li>
<li class="gradient_menuitem">Turkish</li>
<li class="gradient_menuitem last">Vietnamese</li>
</ul>
</li>
Example url with css
http://jsfiddle.net/6pxaE/10/
Or with javascript example and all menu show the example that's I want to be the ...
http://myseacheck.besaba.com/ScrollDown.htm
Try this js:
$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
});
/* update */
$("#mbmcpebul_table").hover( function () {
$(".gradient_menuitem:gt(9)").css("display","none");
});
Updated DEMO
$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
$(".gradient_menuitem:eq(9)").hide();
});
$(".gradient_menu").mouseleave(function(){
$(".gradient_menuitem:gt(9)").hide();
$(".gradient_menuitem:eq(9)").show();
});
Use this jQuery, it works fine for me.
Here is a Fiddle DEMO
Im trying to rearrange a list. I've got for example a list with categories:
<ul class="category">
<li class="cat1 active">cat1</li>
<li class="cat2 active">cat2</li>
<li class="cat3">cat3</li>
<li class="cat4">cat4</li>
</ul>
and a list with subjects
<ul class="subjects">
<li class="sub1">sub1</li>
<li class="sub2">sub2</li>
<li class="sub3">sub3</li>
<li class="sub4">sub4</li>
<li class="sub5">sub5</li>
<li class="sub6">sub7</li>
<li class="sub7">sub7</li>
<li class="sub8">sub8</li>
</ul>
What I want to do is when a certain category has the class active, some subjects will go to the top of the list. for example like this:
<ul class="subjects">
<li class="sub3">sub3</li>
<li class="sub5">sub5</li>
<li class="sub8">sub8</li>
<li class="sub1">sub1</li>
<li class="sub2">sub2</li>
<li class="sub4">sub4</li>
<li class="sub6">sub6</li>
<li class="sub7">sub7</li>
</ul>
I can do this with this code:
if($('li.cat1').hasClass('active')){
$('.sub3, .sub5, .sub8').insertBefore($('.subjects li:first-child'));
}
But then the real problem starts when multiple categories is active. I have done it like so:
if($('li.cat1').hasClass('active')){
$('.sub3, .sub5, .sub8').insertBefore($('.subjects li:first-child'));
}
if($('li.cat2').hasClass('active')){
$('.sub3, .sub4, .sub7').insertBefore($('.subjects li:first-child'));
}
The result is this:
<ul class="subjects">
<li class="sub4">sub4</li>
<li class="sub7">sub7</li>
<li class="sub3">sub3</li>
<li class="sub5">sub5</li>
<li class="sub8">sub8</li>
<li class="sub1">sub1</li>
<li class="sub2">sub2</li>
<li class="sub6">sub6</li>
</ul>
the order is now 4,7,3,5,8. Those are the numbers that have been selected but how do I rearrange them into: 3,4,5,7,8,1,2,6? Could someone help me with this? Here is the JsFiddle http://jsfiddle.net/NTPd4/2/
You could do 2 things to make it ALL good. First, make an sort method to suit your needs (i went by alpha of inner html, pik your poison). Second, make a variable for a jQuery object you can simply add elements too.
Next, use the variable in your if statements to gather the elements you want. Then before inserting, sort them!
Example
function sortAlpha(a,b){
return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
};
var activeSubjects = $();
if ($('li.cat1').hasClass('active')) {
activeSubjects = activeSubjects.add($('.sub5, .sub3, .sub8'))
}
if ($('li.cat2').hasClass('active')) {
activeSubjects = activeSubjects.add($('.sub3, .sub4, .sub7'))
}
activeSubjects.sort(sortAlpha).insertBefore($('.subjects li:first-child'));
I think the .add will sort them automigikally, but keep in mind, you could also use the sort function straightforward, like:
$('.sub5, .sub3, .sub8').sort(sortAlpha);
Also, for your current setup (where all text is same except for number) you could use a sort function like:
function sortNum(a,b) {
return parseInt($(a).text().substring(3)) - parseInt($(b).text().substring(3));
}
However, the sortAlpha will probably better suite your needs in the long run. As I mentioned before, you can arrange your sort function how you like.
If you want all five elements in their original order, you need to move them at the same time. Use .add() to combine them:
$('.sub3, .sub5, .sub8').add('.sub3, .sub4, .sub7').prependTo($('.subjects'));
Or, integrating it into your code:
var $selector = $();
if ($('li.cat1').hasClass('active')) {
$selector = $selector.add('.sub3, .sub5, .sub8');
}
if ($('li.cat2').hasClass('active')) {
$selector = $selector.add('.sub3, .sub4, .sub7');
}
$selector.prependTo('.subjects');
http://jsfiddle.net/mblase75/GYfpv/
I was kindly helped by Jonathan over here simple javascript question-linking button state to image swap?
The problem is that this makes the "active" class the same class for both list items.
Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).
Can you please help me modify the script so that I can do that?
Here is Jonathans provided code:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
I understand that the problem is here:
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
but I don't know enough to separate that into two different classes.
Just add an extra parameter to the function:
function make_active(el, classname) {
deactivate_buttons();
el.setAttribute("class",classname);
}
Then change your calls just a bit. Here is the completed code. Note I changed all calls of setAttribute to .className instead. This was just so you don't run into any trouble with IE6:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this,'active_class_1');"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this,'active_class_2');"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el, classname) {
deactivate_buttons();
el.className = classname;
}
function deactivate_buttons() {
buttons[0].className = "inactive_class_1";
buttons[1].className = "inactive_class_2";
}
</script>