Setting child element to aria-expanded="true" when parent contains class="active" - javascript

I want to set a child element to aria-expanded="true" when its parent contains a class active:
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
Section 4
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">Section 4-1</li>
<li class="">Section 4-2</li>
</ul>
</li>
This code comes from a example here
When in that example, I scroll down to section 4-1 and 4-2 I would like the dropdown to open up. I have tried several things, but I have not found a working solution.

What you actually want is to add the class open to the active drop down, the effect you want has nothing to do with aria-expanded=true:
Use this code:
$(window).scroll(function(){
if ( $( ".dropdown" ).is( ".active" ) ) {
$( ".dropdown.active" ).addClass("open");
}
else
{
$( ".dropdown" ).removeClass("open");
}
});

If it on a click event, use something similar to this.
$('body').on('click', 'li.dropdown', function(){
if($(this).hasClass('active')){
$(this).children().attr('aria-expanded', true);
}
});
or
$('body').on('click', 'li.dropdown', function(){
if($(this).hasClass('active')){
$(this).find('a.dropdown-toggle').attr('aria-expanded', true);
}
});

Related

How to get a link that do nothing

I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link.
link on right click
Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that
<ul type="none" id="search-options">
<li [class.active_view]="Display('all')" (click)="docClick()">All</li>
<li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
<li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
<li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
<li class="dropdown">
<a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Settings
</a>
<ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
<li routerLink="/preferences">Search settings</li>
<li data-toggle="modal" data-target="#customization">Customization</li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tools
</a>
<ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
<li (click)="filterByContext()">Context Ranking</li>
<li (click)="filterByDate()">Sort by Date</li>
<li data-toggle="modal" data-target="#myModal">Advanced Search</li>
</ul>
</li>
</ul>
After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more complicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.
Using will make the page scroll to the top.
Use javascript:void(0):
Clicking here does nothing
Or equivalently, use javascript:;:
Clicking here does nothing
Or, with HTML5, just omit the href attribute:
<a>Clicking here does nothing</a>
You can use event.preventDefault() to prevent the default action of the link from being taken.
Valid Link<br>
<button id='hitMe'>Disable link</button>
<br/>
<button id="enable">Enable link</button>
<script>
document.getElementById('hitMe').onclick = function() { // button click
document.querySelectorAll('a').forEach(a =>{
a.onclick = function(e){
e.preventDefault();
return false;
}
});
};
document.getElementById("enable").onclick = function(){
document.querySelectorAll('a').forEach(a =>{
a.onclick = null;
});
}
</script>
By clicking the button, no more links will be followed.
Like this you still have the hover destination preview. Like google.de etc...
document.getElementById('hitMe').onclick = function() { // button click
[...document.querySelectorAll('a')].forEach(function(el){
el.onclick = function( e ) { // all 'a'
return false;
}
});
};
Valid Link<br>
<button id='hitMe'>Disable link.</button>
use
javascript:;
as href attribute
and add
event.preventDefault()
onclick method.
Click me

jQuery: how to select the exact element of the same class?

Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!
So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);
Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});

jQuery method called twice?

So I have a nested bootstrap dropdown in my navbar. Here is the code that prevents the dropdown on click of a nested drop to execute its normal task. This works well.
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
In this code, onclick of the dropdown's <li> does something. When the click is on a normal li of the dropdown it works fine but when it is in a nested dropdown's li the function is executed but when it ends it is executed again (the onClick). The way I've found to avoid that its complete seconde execution is I check in my if statement if $(this) (the clicked li) is null, which it is when it's executed the second time out of nowhere. This way is pretty gross but it works, but does anyone see why the method is called a second time and how to stop it from getting called twice?
$("#dropdownViewModeSelect").on('click', 'li', function() {
selectedViewMode = $(this).attr("viewmode");
if (selectedViewMode != "undefined" && selectedViewMode != null)
{
if (selectedViewMode != previouslySelectedViewMode || currentTimelineMode != previouslySelectedTimelineMode)
{
//Remove glyphicons to all i
var touslesideslis = $("#dropdownViewModeSelect li").find("i").removeClass('glyphicon glyphicon-ok');
//Add glyphicons to clicked i
$(this).find("i").addClass('glyphicon glyphicon-ok');
//Add text to button
currentViewModeSecondary = $(this).attr("viewmodesecondary");
var textBtn;
if (currentViewModeSecondary != "classic")
textBtn = "Ligne du temps - " + $(this).text();
else
textBtn = $(this).text();
$("#dropdownMenuViewMode").text(textBtn);
$("#dropdownMenuViewMode").append('<span class="glyphicon glyphicon-eye-open pull-left"></span>');
$("#dropdownMenuViewMode").append('<span class="caret caret-filter"></span>');
if ($(window).width() >= 768)
Global.Responsiveness();
}
}
});
Here's my HTML for the dropdown.
<li class="dropdown"> <a class="dropdown-toggle" id="dropdownMenuViewMode" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-eye-open pull-left"></span>Jour<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdownViewModeSelect" role="menu">
<li viewmode="jour" viewmodesecondary="classic"><a id="linkJour">Jour<i class='dropdownFiltreImage glyphicon glyphicon-ok'></i></a>
</li>
<li viewmode="ressource" viewmodesecondary="classic"><a id="linkRessource">Ressources/Jour<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="week" viewmodesecondary="classic"><a id="linkSemaine">Semaine<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="month" viewmodesecondary="classic"><a id="linkMois">Mois<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="year" viewmodesecondary="classic"><a id="linkAnnee">Année<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="agenda" viewmodesecondary="classic"><a id="linkAgenda">Agenda<i class='dropdownFiltreImage'></i></a>
</li>
<li class="dropdown dropdown-submenu">Ligne du temps
<ul class="dropdown-menu">
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineDay">Jour<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineWeek">Semaine<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineMonth">Mois<i class='dropdownFiltreImage'></i></a>
</li>
</ul>
</li>
</ul>
If your click handler is being called twice it is probably being set twice. Try changing your selector. This may not be the ultimate class structure you want but I'll bet if you add the same class to each of your list elements and then use that class in the selector for the click handler your problem goes away.

change menu class active

I want to change menu class active when click a submenu. But instead what my code does is that set active the default active menu.
$('#menu1').find('li').click(function(){
//removing the previous selected menu state
$('#menu1').find('li').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('second-level')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
So for example
<ul id="menu1" class="nav navbar-nav">
<li class="active" > {{ Lang::get('messages.home') }}</li>
<li class='dropdown '>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{ Lang::get('messages.vehicles') }}
<b class="caret"></b>
</a>
<ul id = "second-level" class="dropdown-menu">
<li> <a href="form-general.html">{{link_to_action('MaintenanceController#vehicle_maintenance',
Lang::get('messages.vehicle_maintenance'),null)}}</a></li>
</ul>
</li>
when click second level submenu active class is set to home menu (default active meanu) after page refresh. How to set active the menu of submenu?
You can compare the URL in the menu item's link to the current URL on page load:
$(document).ready(function() {
$('#menu1 li').each(function() {
if (location.href.indexOf($('a',this).attr('href'))>=0) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
};
});
});
However, it's probably better to add the class yourself or use server-side code to do so (depending on how your site is generated).

How to change the main display of dropdown when an item is selected in bootstrap

This is the following http://jsfiddle.net/coderslay/enzDx/
I am trying to change the text Select as soon as an item is clicked
So if i select One from the list then One should be displayed.
How to do it?
Working example: http://jsfiddle.net/enzDx/5/
The only change I made to your HTML was to wrap the text "Select" with span tags with the element ID dropdown_title so it was easier to update.
JavaScript:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
$('#dropdown_title').html($(this).find('a').html());
});​
Basically all I'm doing is whenever the user clicks on a list item, I update the drop-down title text with the text of the link contained in the last item.
You can check the click event on the dropdown-menu :
$('.dropdown-menu > li').click(function() {
var $toggle = $(this).parent().siblings('.dropdown-toggle');
$toggle.html("<i class=\"icon icon-envelope icon-white\"></i> " + $(this).text() + "<span class=\"caret\"></span>")
});
jsFiddle : http://jsfiddle.net/enzDx/6/ .
HTML:
<ul class="nav nav-pills left">
<li class="dropdown active span8">
<a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown">
<i class="icon icon-envelope icon-white"></i>
<span id="text">Select</span><span class="caret"></span>
</a>
<ul ID="divNewNotifications" class="dropdown-menu">
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
</ul>
</li>
</ul>
JavaScript:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li > a').click(function(){
$('#text').text($(this).html());
});
DEMO
I have just added a span around the Select text in html to do the Javascript code simpler.

Categories

Resources