I have the following dropdown that opens when the mouse hovers it:
Now is it possible to open the same dropdown when the user highlights it via the tab key.
I've tried learning from this: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)
But this not seems to be working.
Thanks to anyone who can help!
HTML:
<div class="choose_language">
<a class="btn_choose_language" href="#" title="Change language">
<abbr title="English">EN</abbr>
<img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
</a>
<ul class="radius5" style="overflow: hidden; display: none;">
<li>
<a href="/jobs?locale=fr">
<abbr title="Français">FR</abbr>
</a>
</li>
<li>
<a href="/jobs?locale=nl">
<abbr title="Nederlands">NL</abbr>
</a>
</li>
</ul>
</div>
JS:
$(document).ready(function () {
/* =============================================================================
PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
========================================================================== */
$('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
e.stopImmediatePropagation();
//alert($(this).html())
if(e.target != this) return;
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box except clicked one
$('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
//hide more_info box and .my_space box if open
$('.my_space .more_info_box, .my_space .opened').hide();
//show/hide THIS context box
$(this).parent().parent().children('.context_box').fadeToggle(0);
//set level2 columns at same height
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
//reset the selected item
$('#nav_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
/* =============================================================================
NAV -> highlight clicked element
========================================================================== */
$('header nav#nav-mystib > ul li a h3').click(function() {
//reset the selected item
$('#nav-mystib_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
// Nav -> show/hide language selector
$('.choose_language').hover(function() {
if (detectmob()) { return;}
$('.choose_language ul').slideToggle(200)
});
/* open mySpace*/
$('.my_space .closed').click(function() {
$('.my_space .opened').show()
return false;
});
/* close mySpace*/
$('.my_space .opened .btn_close').click(function() {
$('.my_space .opened').hide();
return false;
});
$('.my_space .info').click(function(e) {
e.stopImmediatePropagation();
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box
$('.context_box').hide();
$('.my_space .more_info_box').fadeToggle(200)
});
// Hide context_box, .more_info_box when click outside of it
$(".context_box, .more_info_box").bind( "clickoutside", function(){
$(this).hide();
});
$(".choose_language").bind( "clickoutside", function(){
if (detectmob()) { return;}
$(this).children('ul').hide();
});
// Hide context_box, .more_info_box when mouse is outside of it
$(".context_box, .more_info_box").hover(function(){
var el=this;
$(el).stop(true,false)
},function(){
var el=this;
$(el).delay(700).hide(10)
});
});// end of dom ready
you can do it like this:
You check if the element got focus, and then show it via jQuery.
You can also use blur to check if the element lost focus and hide the drop-down (I added the class last to the last li element, you can do it in a variety of ways).
<a href="/jobs?locale=nl" class="last">
$(document).ready(function () {
$( ".btn_choose_language" ).focus(function() {
$( ".radius5" ).show();
});
$( ".last" ).blur(function() {
$( ".radius5" ).hide();
});
});// end of dom ready
Related
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
Im trying to create a dropdown with jQuery.
So far I have written my code to show the menu, but once open and my users clicks an item, the menu then closes.
Anybody have an idea of how to combat this?
http://jsfiddle.net/8fnhb6yr/
// Language selector
$('.sub-lang').on('click', function(e){
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
Just check also if e.target parent is li.sub-lang like the following
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('sub-lang')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
li ul {display:none;}
li.sub-lang.active ul {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
The menu close because you listen to the click event on the menu (.sub-lang).
When you click on a children, the event will "bubble" and the parent will have the event too. So you have to listen to the click event on children too to prevent it to bubble :
$('.sub-lang ul a').click(function(event) {
event.stopPropagation();
event.preventDefault();
});
I edited your fiddle
I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>
Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO
https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});
I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?
HTML:
<div id="accordion">
<div class="top">
Show all | Hide all
</div>
<div class="body">
<div class="item">
item1
<div class="content">
<p>
Item1 content;
</p>
Back to top
</div>
</div>
<div class="item">
Item2
<div class="content">
<ul>
<li>item2 content;</li>
<li style="list-style: none">Back to top</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$("#accordion .content").slideUp();
$("#accordion .item a.head").click(function (e) {
//open tab when click on item
e.preventDefault();
$(this).toggleClass('active');
$(this).next().stop().slideToggle();
if ($(this).hasClass('active')) {
$(this).attr('title', 'hide');
} else {
$(this).attr('title', 'show');
}
});
$("#accordion .showAll").click(function (e) {
//open all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
});
$("#accordion .hideAll").click(function (e) {
//hide all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if ($(this).hasClass('active')) {
$(this).click();
}
});
});
$(".backToTop").click(function (e) {
//scroll to top
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 450);
});
basically it's an accordion, a very simple one done in jquery
JSfiddle here:
http://jsfiddle.net/PqaXZ/6/
(note*: you have to scroll down to see the example)
Anyone can explain why I click "Show All" button, it trigger a click on "Back to top" button?
I don't see anything can possibly cause it in the code
Thanks a lot in advance
Well, in your "show all" click handler, you're clicking all "inactive" links in the accordion:
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
If at least one of the "back to top" links anywhere in the accordion doesn't have the class "active", you're triggering its click event.
Because you're triggering a click on it.
$("#accordion .item a") includes the "show all" button, then you promptly $(this).click(); which simulates a user clicking on that link. Hence, sending them back to top.
Because you are using spaces inside your selector, it is 'clicking' on any a under any .item that is under the #accordion, which includes your 'back to the top' button. If you instead make your selector: #accordion .item>a, then it will only 'click' on as that are immediate children of .items.
#accordion .item a is triggering all the links inside .item you should use
#accordion .item > a
to trigger al the first links but not the childs
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});