Hello all I've this script and I want when I click .content div fade $('.d-menu') element, but when I click .d-menu not work good, it fadeIn and fadeOut very fast :(
p.s.
.content is main div
http://jsfiddle.net/valeri879/abn8x46n/
<div class="f-menu"></div >
<div class="d-menu">
<ul>
<li>about</li>
<li>projects</li>
<li>help</li>
</ul>
</div>
$(document.body).on('click','.f-menu',function(){
$('.d-menu').fadeToggle(200);
});
$(document.body).on('click','.content',function (){
$('.d-menu').fadeOut();
})
See the answer below
use event.stopPropagation();
<div class="content" style="width:500px; height:500px; background:#ccc;">
<div class="f-menu">asdasdasd</div>
<div class="d-menu">
<ul>
<li>about</li>
<li>projects</li>
<li>help</li>
</ul>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document.body).on('click', '.f-menu', function (event) {
event.stopPropagation();
$('.d-menu').fadeToggle(200);
});
$(document.body).on('click', '.content', function (event) {
event.stopPropagation();
$('.d-menu').fadeOut(200);
});
$(document.body).on('click', '.d-menu', function (event) {
event.stopPropagation();
});
});
</script>
Hope this helps
Related
In my HTML I have ol and li this is my HTML
and I have script for those links, like when I click on it i kept a alert to check it its not working
$('#namesId ol li').click(function() {
alert('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
</ol>
</div>
click function id not working what is the problem with it.
Try this:
$('#namesId ol').on('click', 'li', function(e){
e.preventDefault();
alert('clicked');
});
As you said li are generated dynamically, You have to use jQuery event-delegation
So do like below:-
$('#namesId ol').on('click',"li",function(e) {
e.preventDefault();
console.log('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
<li class="v">Wildlife</li>
</ol>
</div>
it should be:
$('#namesId ol li:nth-child(1)').click(function() {
alert('clicked');
//ToDo
}); //for first li click
$('#namesId ol li:nth-child(2)').click(function() {
alert('clicked');
//ToDo
}); //for second li click
Below Code working fine.
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
You have indicated a name for the selector #namesId, but it's not defined anywhere.
Put it this way and it will work:
<div id="namesId">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
</div>
Hi to all my co developer,
I Have a bug using this function.
function clickHandler() {
$('#show').toggle('fast');
$('#hide').toggle('fast');
}
$(document).ready(function(){
$('#show').hide();
$('#hide').on('click', clickHandler);
});
<li id="hide" >Arabic </li>
<li id="show" style="display:none;">English </li>
Problem: When I click the Arabic button did not hide or toggle to English button.
Thank you in advance.
Running code with toggle.
function clickHandler() {
$('#show').toggle('fast');
$('#hide').toggle('fast');
}
$(document).ready(function() {
$('#show').hide();
$('#hide,#show').on('click', clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hide">Arabic </li> // chage href to your real page
<li id="show" style="display:none;">English </li>
use the below code
function clickHandler() {
$('#show').toggle('fast');
$('#hide').toggle('fast');
}
$(document).ready(function(){
$('#show').hide();
$('#hide').on('click', clickHandler);
$('#show').on('click', clickHandler);
});
link toggle fiddle
Below is the code:
function clickHandler() {
$('#show').toggle('fast');
$('#hide').toggle('fast');
return false;
}
$(document).ready(function(){
$('#show').hide();
$('#hide, #show').on('click', clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hide" >Arabic </li>
<li id="show" style="display:none;">English </li>
return false; was missing.
I'm using the following code to open my responsive navigation and close it when a link is selected:
$(document).ready(function() {
$(".burger-nav").on("click", function(){
$("nav ul").toggleClass("open");
});
$("nav li a").on("click", function() {
$("nav ul").slideUp();
});
});
This works perfectly however once the navigation has closed the nav button doesn't work. Does anyone have any ideas? Any help with this would be gratefully appreciated!
The HTML for the nav:
<nav id="nav">
<div class="wrapper">
<div class="brand">
<img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1>
</div>
<span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Blog</li>
</ul>
</div>
</nav>
Instead of slideUp() use slideToggle() this will fire both slideUp() and slideDown() even/odd clicks
$(document).ready(function() {
$(".burger-nav").on("click", function(){
$("nav ul").slideToggle();
});
$("nav li a").on("click", function() {
$("nav ul").slideToggle();
});
});
You can hide the menu initially by adding display none to UL
<ul style="display:none">
And then click on the burger nav it will open the menu and everything will work fine for sure
Demo : https://jsbin.com/zohoqi/3/edit?html,js,console,output
Try this once buddy !!
try this:
$(document).ready(function() {
$(".burger-nav").on("click", function(){
$("nav ul").slideToggle();
});
$("nav li a").on("click", function() {
$("nav ul").slideUp();
});
});
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav id="nav">
<div class="wrapper">
<div class="brand">
<img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1>
</div>
<span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact Me</li>
<li>Blog</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".burger-nav").on("click", function(){
$("nav ul").slideToggle();
});
$("nav li a").on("click", function() {
$("nav ul").slideUp();
});
});
</script>
</body>
</html>
Thanks to everyone that has helped with this, #KrishCdbry came the closest but below is the resolved script:
$(document).ready(function() {
$(".burger-nav").on("click", function(){
$("nav ul").toggleClass("open");
});
$("nav li a").on("click", function() {
$("nav ul").toggleClass();
});
});
The only difference being ("open") after the toggleClass, simple when you know how, eh?
I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.
$('document').ready(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).show() {
});
$( ".hamburger" ).click(function() {
$( ".list-menu" ).hide() {
});
});
});
<div class="logo">
<div class="about-me-button">
<img src="/img/menu.svg" alt="hamburger menu">
</div>
<div class="list-menu">
<ul>
<li>About Me</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">
<div class="about-me-button">
<a href="#" class="hamburger">
<img src="/img/menu.svg" alt="hamburger menu">
</a>
</div>
<div class="list-menu">
<ul>
<li>About Me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
</div>
$(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).toggle();
});
});
I think the easiest way would be is the use jquery .toggle() method.
$(".list-menu").hide();
//toggle way
$(".hamburger").click(function () {
$(".list-menu").toggle();
});
or if you would like to go an alternative route you can try something like this
//jquery alternative to toggle
var toggle = false;
$(".hamburger").click(function () {
if (!toggle) {
$(".list-menu").show();
toggle = true
} else {
$(".list-menu").hide();
toggle = false
}
});
I created a fiddle so that you can see how both would work.
https://jsfiddle.net/maenucze/
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?
This is what I've tried so far:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>
This is an example for your test case, you should improve it for your live app.
JSFiddle link: click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle link: click here
<style>
.1{
display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]
You are gonna use eq()
If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.
eq() Get the supplied index that identifies the position of this element in the set.
Here is the Fiddle
HTML
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="#">3</a></li>
<li><a class="4" href="#">4</a></li>
</ul>
</div>
jQuery
$(document).ready(function(){
$('#side a').on('click', function(){
var index = $('#side a').index(this);
// alert(index);
alert($('#side h2').eq(index).html());
});
});
NOTE: Difference between eq and :nth-child
EIDT: as you ask for hover, you can do this.
$(document).ready(function(){
$('#side a').on('hover', function(){
var index = $('#side a').index(this);
// alert(index);
// alert($('#side h2').eq(index).html());
$('#side h2').eq(index).toggle();
});
});
<div id="side">
<h2 class="one">What Have You Tried?</h2>
<h2 class="two">2</h2>
<ul>
<li><a class="three"href="">3</a></li>
<li><a class="four" href="">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$("#side").find('.one').show();
},
function() {
$("#side").find('.one').hide();
}
);
});
</script>
http://jsfiddle.net/VdFxf/1/