Develop Reference

Hide dropdown div with jQuery on mouseout

I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?

Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.

you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps

<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/

In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});

Change span on click Jquery

I've this code
$('a').click(function() {
$('a span').first().addClass('hide');
$('a span:nth-child(2)').removeClass('hide');
$('a span:nth-child(2)').addClass('display');
});
.hide {
display:none;
}
.display {
display:block;
}
<a href="#">
<span>Hello</span>
<br>
<span class="hide">World</span>
</a>
When I click on the link I want the first span hide and the 2nd span appears.
I want to do it multiple times (click on this link multiples times and have the same result).
I try to do it with this Jquery code

I would just toggle the classes
and you have to prevent the default on the link so it doesn't try to leave the page.
$('a').click(function(e) {
e.preventDefault();
$('a span').toggleClass('hide show');
});
here is a work demo

I would do something like this. Loop through the children of the a and swap their classes. Doing this method allows you to do other things as well as just toggle the class like adding text/css attributes to the span's.
$('a').click(function() {
$(this).children().each(function(index, element)
{
if ($(this).hasClass('hide'))
{
$(this).removeClass('hide');
$(this).addClass('display');
}
else
{
$(this).removeClass('display');
$(this).addClass('hide');
}
});
});
Here is a JS Fiddle of the code above

This should do what you are looking for:
HTML:
<a class='hide-clicker' href="#">
<span>Hello</span>
<span class="hide">World</span>
</a>
jquery:
$("a.hide-clicker").click(function(e) {
e.preventDefault();
$(this).find('span').toggleClass('hide');
});
CSS:
.hide {
display:none;
}

addClass and removeCLass in JS with loading content

I have problem with addClass and removeCLass in JS. I would like to do sth like that:
But I have a content div where I load files in PHP. But when I load sth the script resets and first li is selected. Scheme:
I click on Events, it gets new class and the content is load. Now when I click events, page loads and I see the content but class in first li.
How to change it?
EDIT:
OK guys I change code but it still doesn't work as I want. When I chenge "#" in links to url, the page loads as new and I lost this JS. (It starts again).
CODE:
$(document).ready(function () {
$("#MB1").click(function () {
$(this).addClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB2").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB3").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB4").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
});
});
#menu-div ul{
list-style-type:none;
}
.button a{
text-decoration: none;
color:green;
}
.button a:hover{
color: red;
}
.button.active a{
text-decoration: underline;
}
<div id="menu-div">
<ul>
<li id="MB1" class="button active">Home</li>
<li id="MB2" class="button">Projects</li>
<li id="MB3" class="button">About Us</li>
<li id="MB4" class="button">Contact</li>
</ul>
</div>

What happens when you assign the click action using
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
is that only the existing objects receive the event-handler.
You want to use something like this instead:
$("body").on('click', '#menu li a', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
By making body the target, even if the data loads after the script, the event-handler will be set.
In addition, any subsequent changes to the menu won't require you to reset the event handler.
EDIT
Per the changes to your example code:
When you have <a href="#" and so on, pressing the link does not make you leave the page.
You changed some of the links to <a href="?something" and so on. Clicking this link, the whole page is reloaded with the new querystring.
Are the links supposed to get data asynchronously?
If YES, you should return the jquery to the way it was... and use my answer above instead of the one you used of $(document).ready({[...].
If NO, I would suggest that you use PHP to make sure that the correct menu item is set to active.
Something along the lines of (I don't actually know php... this code may be completely off):
<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?>
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>

scroll to the sibling element on click

Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();

You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});

There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();

Javascript Image roll over with onclick toggle

I currently have code to roll over an image link as below:
<a id="show" href="#"><img src="images/show-me.png" border=0 onmouseover="this.src='images/show-me_over.png';" onmouseout="this.src='images/show-me.png'"></a>
on clicking this it shows a div
jQuery(document).ready(function(){
jQuery("#show").toggle(
function(){
jQuery('#home-hidden-extra').animate({'height': '480px'} ,1000);},
function(){
jQuery('#home-hidden-extra').animate({'height': '0px'} ,1000);}
);
});
What i would like to do but i cant find/figure out is to use show_me.png and show_me-over.png when the div is hidden and then hide_me.png and hide_me-over.png when the div is shown.
How is the simplest way to achive this?
Thanks again!

You should be putting static hover styles to CSS. Define
.linkShow {
background-image: url("images/show_me.png");
}
.linkShow:hover {
background-image: url("images/show_me_hover.png");
}
.linkHide {
background-image: url("images/hide_me.png");
}
.linkHide:hover {
background-image: url("images/hide_me_hover.png");
}
Then add these classes to the link with jquery.
$("#show").removeClass().addClass("linkShow");

This ought to work:
HTML
<a id="show" href="#">
<img id="the-image" src="images/show-me.png" />
</a>
JS
$(document).ready(function(){
setupHover(); /* Defined below */
$('#show').toggle(function(){
$('#home-hidden-extra').animate({'height': '480px'} ,1000);
setupHover();
},function(){
$('#home-hidden-extra').animate({'height': '0px'} ,1000);
setupHover();
});
});
function setupHover(){
/* Unbind existing hover handlers */
$('#show').unbind('mouseenter mouseleave');
/* Use the correct image filenames depending on the situation */
if($('#home-hidden-extra').height() > 0){
images = ['show-me.png','show-me_over.png'];
}
else {
images = ['hide_me.png','hide_me-over.png'];
}
$('#show').hover(function(){
$('#the-image').attr('src','images/' + images[1]);
},function(){
$('#the-image').attr('src','images/' + images[0]);
});
}