Develop Reference

Navbar hover if mouse

I have this Javascript code that i got on another thread on Stackoverflow but there is a small gap of about 1px when the mouse hits this between the navbar header and the actual dropdown then the dropdown will disappear.
I grabbed this code as if there is a mouse I would like it to hover, however if it is on mobile with no mouse then I would like the user to click to open the dropdown.
//NAVBAR HOVER IF MOUSE, IF NOT CLICK
$('body').on('mouseenter mouseleave', '.dropdown', function(e) {
var _d = $(e.target).closest('.dropdown');
_d.addClass('show');
setTimeout(function() {
_d[_d.is(':hover') ? 'addClass' : 'removeClass']('show');
$('[data-toggle="dropdown"]', _d).attr(
'aria-expanded',
_d.is(':hover')
);
}, 300);
});
Is there anyway I can add a delay to this to give the user time to get over this pixel window?
I'm not very experienced with Javascript/JQuery but thought the number towards the end (300) would be a timeout as this seems to be the end of the function so I increased this to 60000 but this did not make any difference.
Any help is appreciated. This is also developed within Bootstrap if that makes a difference.

Thanks for all of your help.
As you pointed to the CSS Kosh Very I had a look and added this code which has fixed my issue:
.dropdown > .dropdown-menu {
margin: 0;
}
This has cleared the issue, thanks for your help.

For delay you can use the [Jquery.delay()][1] Method. It will simply post delay before any event that comes after the call to .delay e.g.
$( "div.first" ).slideUp( 300 ).delay(500).fadeIn(2000)

JQuery - Hide and Show - Not Functioning

I am trying to use the JQuery Hide and show script to display text on top an image when the div tag is clicked.
The JQuery code I am using is bellow, I have created a JSFiddle to show 2 examples, a before and after with my current result.
UPDATE: I have managed to get the toggle to work and changed some of the CSS. But need div tag hidden until click.
Any help or feedback would be great thanks (Y)
Im sorry about the prev link;
$(".card-options").click(function () {
$(".card-list").toggle();
});
[JSfiddle][1]
[1] http://jsfiddle.net/jinghming/u4epkev4/

Instead Of using
$("#div").click(function(){
$(".box").hide();
});
$("#div").click(function(){
$(".box").show();
});
I used toggle function;
$("#div").click(function () {
$(".box").toggle();
});
*Still working out how to have .box hidden until #div is clicked. But currently does switch between hide and show.

From what I understand, when the little black box is clicked, the list should appear and disappear - I can't see the link to your updated fiddle so here is the update I made to your JS:
$(".card .card-options").click(function () {
$(this).parents('.card').find('.card-list').toggleClass('active');
});
I've also added a display: none; to your .card-list CSS declaration and added the following:
.card-list.active {display: block;}
If you want that bottom bar to be at the bottom of the box then you'd have to do some absolute positioning.
See the updated fiddle here:
http://jsfiddle.net/u4epkev4/4/

You just need to do toggle and you forgot to go into card-text:
$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
// Toggle the card-list for the clicked card
$(this).parent().parent().find(".card-list").toggle();
});
Example

Can't get slide out menu to display properly

Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!

I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end

Add the following: $(".logo").hide() to the $(document).ready(function () {});

JavaScript Toggle Show/Hide Responsive Menu

I've been stuck on this particular problem. I would like to use a toggle menu for mobile widths on a website that I'm working on. Basically, it works nicely as I can show you on this CodePen.
The code for showing/hiding the menu via a toggle button with JavaScript works below.
$(document).ready(function() {
//Menu Open Seasame Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content.
$(".site-nav ul").hide();
});
My problem is that I would like to hide the toggle button and the toggle function when the width exceeds say, 480 pixels wide but keep the site-nav ul visible. I've been trying to do this via this code combined with the one above, and somehow it just doesn't work.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
I'm not really that proficient in JavaScript so if anyone could point out why it didn't work alongside the solutions that would really be helpful.

Attach your checking function to $(window).resize() and fix the selectors. See this fork of your CodePen.

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!

Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.

Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp

this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI

Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.

Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?

Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....

CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.