bootstrap delayed hover dropdown menu - html

I'm trying to make a bootstrap dropdown menu open/close on hover, but with a delay of 250ms for desktop only.
JavaScript:
$(document).ready(function() {
if ($(window).width() > 767) {
$(".dropdown-toggle").click(function() {
return false;
});
var hoverTimeout;
$(".dropdown-toggle, .dropdown-menu").hover(function() {
hoverTimeout = setTimeout(function(){
$(this).parent(".dropdown").addClass("open");
}, 250);
},function() {
clearTimeout(hoverTimeout);
setTimeout(function() {
$(this).parent(".dropdown").removeClass("open");
}, 250);
});
}
});
HTML
It's the normal bootstrap structure suggested in the documentation:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="happyMenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Title
</a>
<ul class="container dropdown-menu">
<li>
<a href="#">
List Title
</a>
<ul>
<li>
<a href="#">
List Item
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
The jQuery code above does not add the open class to the parent of dropdown-toggle.

Here is the solution I came up with using JavaScript setTimeout with no changes in HTML structure:
$(document).ready(function() {
if ($(window).width() > 767) {
$(".dropdown-toggle").click(function() {
return false;
});
var hoverTimeout;
$(".dropdown-toggle").hover(function() {
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function(){
element.addClass("open");
}, 250);
},function() {
clearTimeout(hoverTimeout);
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function() {
element.removeClass("open");
}, 250);
$(".dropdown-menu").hover(function(){
clearTimeout(hoverTimeout);
},function(){
setTimeout(function() {
element.removeClass("open");
}, 250);
});
});
}
});

Related

How can I solve this using Knockout JS?

I have the following code, I am trying to get an id in the SPAN and it is not accepting values in any type of tag that is located inside ....
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="text: nombre,style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
If I understand you correctly your problem is that any tag placed in <a> tag is to being rendered. The reason for that to happen is that your <a> tag is using text: nombre binding which is replacing anything you have put inside it.
I removed that binding and <span> started to appear in it with working attr binding.
var viewModel = function() {
this.loterias = ko.observableArray([
{
nombre: 'test',
color: 'red',
id: 'test-id',
nombreCorto: 1,
namerjarClickLoteria: function(){
}
},
{
nombre: 'test',
color: 'green',
id: 'test-id',
nombreCorto: 2,
namerjarClickLoteria: function(){
}
}
]);
return this;
}
ko.applyBindings(viewModel(), $('#contenedorListaTarea')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>

jQuery accordion doesn't drop like it's supposed to

I am currently building a website which contains a accordion menu.
My problem is the following, when I click the desired item which has to collapse it does collapse but it goes right back to uncollapsed after it collapsed.
$(document).ready(function(){
$(".set > a").on("click", function(){
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.content').slideUp(200);
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
}else{
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
$(this).find("i").removeClass("fa-plus").addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
}
});
});
Here is the code (jsfiddle)
This code used to work perfectly fine, but for some reason it broke and doesn't work anymore.
I hope someone can help me out.
I think somewhere along the lines you have swapped your accordion to start open (ie removed the styles that initially hide it) so the following lines in your else both opens and closes it:
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
If you are starting with your accordion open, then you need to start with the active class on your link:
$(document).ready(function() {
$(".set > a").on("click", function() {
var link = $(this);
if (link.hasClass('active')) {
link.next('.content').slideUp(200, function() {
link.children('i').removeClass("fa-minus").addClass("fa-plus");
link.removeClass("active");
});
} else {
link.next('.content').slideDown(200, function() {
link.children('i').removeClass("fa-plus").addClass("fa-minus");
link.addClass("active");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-container">
<div class="set">
Vloeren <i class="fa fa-plus"></i>
<div class="content">
<ul class="submenu">
<li class="submenu-item">Witte vloer</li>
<ul class="submenu-two">
<li class="submenu-item">Witte vloer</li>
</ul>
<li class="submenu-item">Zwarte vloer</li>
<li class="submenu-item">Grijze vloer</li>
<li class="submenu-item">Paarse vloer</li>
</ul>
</div>
</div>
</div>
I have also cleaned up your jQuery and fixed your else

How to manage dropdown as link into mobile device

Hi,
I am facing with some problems .In shopping cart link at header i used drop down,but when i changes the media size into responsive (mobile) so it should be simple hyperlink but it works as drop-down.This works according to bootstrap markup.
So can anyone tell me how to change the markup so in desktop media size it will works as drop-down and in mobile device it should be like as link
here as mark-up for whole header links
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav navbar-right">
#Html.Widget("header_links_before")
#Html.Action("AdminHeaderLinks", "Common")
#*<li>
#Html.Action("TaxTypeSelector", "Common")
</li>
<li>
#Html.Action("CurrencySelector", "Common")
</li>
<li>
#Html.Action("LanguageSelector", "Common")
</li>*#
#if (Model.IsAuthenticated)
{
<li>#Model.CustomerEmailUsername</li>
<li>#T("Account.Logout")</li>
}
else
{
<li>#T("Account.Register")</li>
<li>#T("Account.Login")</li>
}
#if (Model.AllowPrivateMessages)
{
<li>
#T("PrivateMessages.Inbox")<span>#Model.UnreadPrivateMessages</span>
</li>
if (!string.IsNullOrEmpty(Model.AlertMessage))
{
<script type="text/javascript">
$(document).ready(function () {
displayPopupNotification('#Html.Raw(HttpUtility.JavaScriptStringEncode(Model.AlertMessage))', 'success', false);
});
</script>
}
}
#if (Model.ShoppingCartEnabled)
{
<li id="topcartlink" class="dropdown">
<a href="#Url.RouteUrl("ShoppingCart")" class="ico-cart dropdown-toggle" data-toggle="dropdown">
<span class="cart-label">#T("ShoppingCart")</span>
<span class="cart-qty">#T("ShoppingCart.HeaderQuantity", Model.ShoppingCartItems)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#Html.Action("FlyoutShoppingCart", "ShoppingCart")
</ul>
</li>
}
#if (Model.WishlistEnabled)
{
<li>enter code here
<a href="#Url.RouteUrl("Wishlist")" class="ico-wishlist">`enter code here`
<span class="cart-label">#T("Wishlist")</span>
<span class="wishlist-qty">#T("Wishlist.HeaderQuantity", Model.WishlistItems)</span>
</a>
</li>
}
#Html.Widget("header_links_after")
</ul>
</div>
</div>
Please check the image link as below
http://imageupper.com/i/?S0200010090013K14096405471629783
http://imageupper.com/i/?S0200010090023K14096405471629783tw
Try this:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});

Auto collapse jquery menu depending on screen size

I have created a responsive menu that can opens and collabses when i push the open menu.
But the problem is that when i resize the screen it is auto opened when it hits 680 px or lower and if i then collapse the menu when i'm mobile size and try to resize it to desktop again(over 680px) the menu stays hidden.
html code
<img src="assets/img/nav-icon.png" alt="Menu">
<div class="bar">
<div class="lang">
<div class="langDK"></div>
<div class="langUK"></div>
</div>
<ul class="navigation">
<img src="assets/img/logo.png" alt="">
<li class="item">Home</li>
<li class="item">Products</li>
<li class="item">Work</li>
<li class="item">About</li>
<li class="item">Contact</li>
</ul>
</div>
jquery
$(function(){
var pull = $('#pull');
menu = $('.bar .item');
w = $(window).width();
if(w > 680 ) {
menu.show()
}
if(w < 680){
menu.hide();
}
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
i also have some css and media querys but dont think the problem lies there.
Set up the event listener for the window's resize:
$(window).on('resize', function(){
var menu = $('.bar .item');
var w = $(window).width();
if(w >= 680 ) {
menu.show()
}else{
menu.hide();
}
})
If you'd like to hide the li items by default, add the CSS class as below:
li.item {display:none;}
try this one
$(function() {
var pull = $('#pull');
menu = $('.navigation .dropdown');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
Html
<div class="navigation">
<ul class="nav pull-right group dropdown">
<li class="nav-line-image"></li>
<li>Home</li>
<li>About Us</li>
<li>Design Gallery</li>
<li>Designer Collection</li>
<li>Silver Collection</li>
<li>Promotion/Events</li>
<li class="active">Branch Details</li>
<li>Contact Us</li>
<li class="nav-line-image"></li>
</ul>
</div><!--navigation end-->
css for mobile and tabs
.nav{
display : none;
position: relative;
}
#pull {
position: absolute;
display : block;
width : 17px;
height : 20px;
color : #5a504c;
margin : 15px 0 0 20px;
background : #ccc;
text-decoration :none;
}

Reopening jQuery menu after page loaded

I have a vertical 2 level jQuery menu, and I'd need that after a link has been clicked and the new page loaded, the menu stay open with the selected link highlighted.
Here is my menu code:
<div id="my-menu">
<ul>
<li><span class="toggle">Una Passione</span>
<ul>
<li>Tre Fratelli</li>
<li>Con le nostre mani</li>
<li>La nostra storia</li>
<li>Il video</li>
<li>Il libro</li>
</ul>
</li>
<li><span class="toggle">Icone</span>
<ul>
<li>Brera</li>
<li>Magenta</li>
</ul>
</li>
</ul>
</div>
and here the jQuery code:
$(document).ready(function() {
$("span.toggle").next().hide();
$("span.toggleinterno").next().hide();
$("#my-menu a, #my-menu span.toggle").click(function() {
$(this).stop().animate( {
color:"red"
}, 300);
});
$("span.toggle").click(function() {
if ($(this).hasClass('second')) {
$(this).removeClass('second');
} else {
$(this).addClass('second');
}
});
$("#my-menu a, #my-menu span.toggleinterno").click(function() {
$(this).stop().animate( {
fontSize:"17px",
//paddingLeft:"10px",
color:"black"
}, 300);
}, function() {
$(this).stop().animate( {
//fontSize:"14px",
paddingLeft:"15",
color:"#808080"
}, 300);
});
$("span.toggle").css("cursor", "pointer");
$("span.toggleinterno").css("cursor", "pointer");
$("span.toggle").click(function() {
$(this).next().toggle(1000);
});
$("span.toggleinterno").click(function() {
$("span.toggleinterno").css("width", "100px");
$(this).next().toggle(1000);
});
});
You could try something like this:
var url = window.location.pathname.match(/.*\/(.*)$/)[1];
var $activelink = $('#my-menu a[href="' + url + '"]');
var $openmenu = $('#my-menu ul ul').has(activelink);
$activelink.addClass('hilight');
$openmenu.show();