I have an accordion menu in my website top page.
when click primary menus, accordion toggles using jQuery.
But when link to it from primary menus in another page, it doesn't work.
primary-menu
<ul id="menu-aaa" class="primary-menu">
<li id="menu-item-1">
home</li>
<li id="menu-item-2">
aaa</li>
<li id="menu-item-3">
bbb</li>
</ul>
accordion menu
<div id="aaa" class="testmenu">
<label for="testmenu_bar01"></label>
<input type="checkbox" id="testmenu_bar01" class="accordion">
<ul id="links01">
<li class="testmenu01-li-01">link1</li>
<li class="testmenu01-li-02">link2</li>
<li class="testmenu01-li-03">link3</li>
<li class="testmenu01-li-04">link4</li>
</ul>
</div>
<div id="bbb" class="testmenu">
<label for="testmenu_bar02"></label>
<input type="checkbox" id="testmenu_bar02" class="accordion">
<ul id="links02">
<li class="testmenu02-li-01">link1</li>
<li class="testmenu02-li-02">link1</li>
<li class="testmenu02-li-03">link1</li>
<li class="testmenu02-li-04">link1</li>
</ul>
</div>
jQuery
$(function($){
$("ul.primary-menu > li.menu-item-2 > a").click(function() {
$('input#testmenu_bar01').prop('checked',true);
})
$("ul.primary-menu > li.menu-item-3 > a").click(function() {
$('input#testmenu_bar02').prop('checked',true);
$('li.testmenu01-li-02').css('margin-top','2vh');
})
});
I read this
How open my toggle-accordion from another page?
and I tried to add
$(location.hash).find(.accordion).prop('checked', true);
to my cord, but it was wrong.
Then, I tried this (in my wordpress site)
jQuery(function($){
var url = $(window.location.href);
var hash = url.substring(url.indexOf('#'));
$(hash).find('input[type=checkbox]').prop('checked', true);
});
But it was something wrong, it doesn't work.
I solved the problem by use this jQuery code;
$(location.hash).find('input[type=checkbox]').prop('checked', true);
Thank you.
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I got a multi-select drop-down ordered as a like this:
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>
What I am aiming for is to disable the continents (Africa, Asia, Europe) so that they are not selectable.
I have figured that if I completely remove the aria-selected="false" attribute + value and add aria-disabled="true" for the continents the become un-selectable.
I thought this was the way to do it for a single continent:
(Preferably there should be a more dynamic way so I don't have to repeat this for each continent)
jQuery( document ).ready(function($) {
$("ul li[title='Africa']").removeAttr("aria-selected");
$("ul li[title='Africa']").attr("aria-disabled","true");
});
..but nothing happens. What am I doing wrong?
try this instead,
I created a array for hidden items
var titles= ["Africa", "Asia", "Europe"];
jQuery( document ).ready(function($) {
var titles= ["Africa", "Asia", "Europe"];
for(var i=0;i<=titles.length;i++){
$("ul li[title="+titles[i]+"]").removeAttr("aria-selected");
$("ul li[title="+titles[i]+"]").attr("aria-disabled","true");
}
});
li[aria-disabled="true"]{
color:#888;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>
This is my html as a second menu in a page.
<ul class="nav-tabs text-center" role="tablist">
<li class="active">Lunch</li>
<li class="diner">Diner</li>
<li class="pannenkoek">Pannenkoek</li>
<li class="borrel">Borrel</li>
</ul>
Now when i want to click on a li there has to show an image. When you click on the second link there has to show another image. The problem now is when i click on a link, it doesn't matter which one, it shows al the images on the page of all the divs.
<div class="active"><img src="images/themenu/lunchkaart-november.jpg" alt="lunchkaart" /> </div>
<div class="diner"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>
How te create when click on li lunch, it show image lunch.
When click on li diner, it show image diner.
What did i do wrong?
You need jQuery for that. Use this or maybe add class active for clicked element div. Also active class most be display:block or display:inline-block;
<ul class="nav-tabs text-center" role="tablist">
<li class="lunch">Lunch</li>
<li class="diner">Diner</li>
<li class="pannenkoek">Pannenkoek</li>
<li class="borrel">Borrel</li>
</ul>
<div class="content">
<div class="lunch" style="display:none"><img src="images/themenu/lunchkaart-november.jpg" alt="lunchkaart" /> </div>
<div class="diner" style="display:none"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>
</div>
jQuery(document).ready(function(){
jQuery('.nav-tabs li').click(function(){
var elementClass = jQuery(this).attr("class").toString();
console.log(elementClass);
jQuery('.content div').hide();
jQuery('.'+elementClass,'.content').show();
});
});
http://jsfiddle.net/e79g4p1p/14/
I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected
thanks guys,
yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??
I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}
You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)
I'm trying to get the code below to execute an event that triggers once a user has hovered over a link. The event I'd like to be triggered is for a DIV to appear once the user had hovered over the link and disappear once the user has moved the mouse away from the menu. (it's supposed to for sub menus on a top level navigation.) However the 'mouseover' event gets fired, but not the 'mouseout' event. It's been confusing me for a little bit.
function menuBehavior() {
var subMenu = $$('.has_menu').getChildren('A')[0];
window.addEvent('domready',
function() {
subMenu.addEvent('mouseover',
function() {
this.getSiblings('.menu-level_2').addEvent('mouseover',
function(e) {
this.getSiblings('.menu-level_2').setStyle('opacity', 1);
e.stop();
});
this.getSiblings('.menu-level_2').addEvent('mouseout',
function(e) {
this.getSiblings('.menu-level_2').setStyle('opacity', 0);
e.stop();
});
});
});
} // end of FUNCTION menuBehavior
also here's the HTML for the menu layout.
<li class="menu-option has_menu">
<span class="menu-arrow">Menu Option #1</span>
<div class="menu-level_2">
<ul class="level_2">
<li class="more">
<span class="menu_level_2-more">Sub Menu Option #1</span>
<div class="bumper">
<div class="menu-level_3">
<ul class="level_3">
<li>
<span class="menu_level_3">Sub Menu Option #1</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #2</span>
</li>
</ul>
</div>
</div>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #2</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #3</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #4</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #5</span>
</li>
</ul>
</div>
</li>
Thanks in advance for any thoughts or insights in how to fix this code.
OK first of all this can all be done with CSS however you will need plenty of markup changes.
If you insist on the path you are on the mootools code will look more like:
window.addEvent('domready', function(){
$$('.has_menu > a').each(function(el){
el.addEvents({
'mouseover': function(e) {
el.getFirst('div').setStyle('opacity', 1);
},
'mouseout': function(e) {
el.getFirst('div').setStyle('opacity', 0);
}
});
})
});
However based on your HTML mark up this will not work as you will be mousing out of the A tag as soon as you enter the DIV
You would be better off removing the div and attaching the event to the LI tag and have the UL tag appear apon MOUSEENTER and hide the UL tag on MOUSELEAVE
I hope that gets you pointed in the right direction