How can I trigger the following function for a specific DIV
$(document).ready(function() {
if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}
});
My html looks like this:
<div class="trigger open"><strong>Dropdown 1</strong></div>
<div class="cnt">
foo<br>
bar
</div>
<div class="trigger open"><strong>Dropdown 2</strong></div>
<div class="cnt">
baz<br>
boo
</div>
My solution was to this:
$(document).ready(function()
{
$('div.trigger:eq(<?=$_GET[exp];?>)').trigger('click');
});
Thanks for the help :)
$('div.trigger:eq(0)').trigger('click');//trigger click event of the Oth element
$('div.trigger:first').trigger('click');//trigger click event of first
$('div.trigger:last').trigger('click');//trigger the click of last one
Related
I am using jQuery 1.7.2. Originally, my HTML was rendered on page load:
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
Then I was registering below JavaScript function:
$(".my_div_class").on('click', function(event){ //function_1
}
It was working fine.
Because of some reason I need to change it to below
$(document).on('click','.my_div_class', function(event){}
Then its not working ? But If change above functiion to use my_button_class it works. Why it is not working with div ?
$(document).ready(function() {
$(document).on("click",".my_div_class",function(event) {
alert("Heyy! clicked me!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
You can use $(event.target).closest(".my_div_class").length == 1 to see if you clicked on my_div_class or any element inside it.
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
demo
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
.my_div_class {
width:200px;
background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class">click
</button>
<div>
first, there are codes I wrote.
<body>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
<script>
$(function(){
$('#btn').click(function(){
$('.popup').show();
$('#sure').on('click', function(){
var $box = "<div class='box'></div>";
$('.panel').append($box);
});
$('#cancel').on('click', function(){
$('.popup').hide();
});
});
})
</script>
</body>
then,there are steps i did.
the result
why i click the cancel button at first, and next time i click Sure button, there appears two DIVs actually.I just want one div.
How to solve this problem?
Do not add the event-handler as many times you click on #btn.
Bind click handlers for "sure" and "cancel" out of the click handler for "#btn"
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$('#sure').on('click', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$('#cancel').on('click', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
If elements in the pop-up are created dynamically, Use Event delegation
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$(document).on('click', '#sure', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$(document).on('click', '#cancel', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
Here is my code:
HTML:
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
if($('#a:visible').length > 0) {
$('a').click(function() {
alert('a');
});
}
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/
If I click "hide aaa" and then I click on the link, alert is shown. I don't want to show the alert when #a is hidden. How can I change my code?
It's inside-out. You have to check visibility when the click happens.
$('a').click(function() {
if ($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function() {
$('#a').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
I got it working changing your condition to inside the click event, like so:
$('a').click(function() {
if($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/2/
Here's another way of doing it! You can check the visibility of an element using $(element).is(":visible").
$('a').click(function() {
if($('#a').is(":visible")) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});
I have the following JQuery which displays a menu if a DIV is pressed:
var pull = $('#mmTrigger');
menu = $('.ulMM');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
HTML:
<div class="dvMain">
<ul class="ulMM specClear">
<li class="liMM">Portfolio</li>
<li class="liMM">About</li>
<li class="liMM">Contact</li>
<li class="liMM">Forum</li>
</ul>
<div id="mmTrigger"><img src="nav-icon.png" class="imgMenu" /></div>
</div>
I modified the script to this:
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
if (menu.is(':hidden')) {
$(".imgMenu").attr("src", "nav-icon.png");
} else {
$(".imgMenu").attr("src", "iconx.png");
}
});
But after clicking the DIV, the X stays and doesn't go back to the nav-icon.png once the menu is closed.
How can I resolve it so that the X changes to the menu icon.
I added this statement: alert (menu.is(':hidden')); it always returns false.
You should change the icon after the slideToggle animation has stopped. You can do this in callback like this:
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle(function () {
// slideToggles callback
if (menu.is(':hidden')) {
$(".imgMenu").attr("src", "nav-icon.png");
} else {
$(".imgMenu").attr("src", "iconx.png");
}
});
});
try changing image on complete of slide toggle: see here:http://api.jquery.com/slidetoggle/
$(document).ready(function(){
var pull = $('#mmTrigger');
menu = $('.ulMM');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle("slow", function() {
alert( ! menu.is(":visible") );
if (! menu.is(":visible")) {
$(".imgMenu").attr("src", "https://maps.google.com/mapfiles/kml/shapes/schools_maps.png");// icons added to show demo use your own icons.
} else {
$(".imgMenu").attr("src", "http://labs.google.com/ridefinder/images/mm_20_black.png");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dvMain">
<ul class="ulMM specClear">
<li class="liMM">Portfolio</li>
<li class="liMM">About</li>
<li class="liMM">Contact</li>
<li class="liMM">Forum</li>
</ul>
<div id="mmTrigger"><img src="https://maps.google.com/mapfiles/kml/shapes/schools_maps.png" class="imgMenu" /></div>
</div>
.box-one {
border: 0.1em solid #ccc;
}
.dropdown-info {
display: none;
}
<div class="box-one">
<div class="header">
<h3 class="text-center">Sample Header</h3>
</div>
<div class="dropdown-info">
<p class="text-center">Sample Text</p>
</div>
</div>
I'm trying to open and close a div if another div is clicked on and I tried with both .toggle() and .click() but it won't work. I would like to get someone else's opinion on it. I will show how I tried accomplishing it using both methods
$(document).ready(function() {
var descriptionOpen = false;
if (descriptionOpen === false) {
$('.header').click(function() {
$('.dropdown-info').show();
descriptionOpen === true;
});
};
else if (descriptionOpen === true) {
$('.header').click(function() {
$('.dropdown-info').hide();
descriptionOpen === false;
});
};
});
$(document).ready(function() {
$('.header').toggle(function() {
('.dropdown-info').show();
}, function() {
('.dropdown-info').hide();
});
});
Just do this:
$('.header').click(function() {
$('.dropdown-info').toggle();
});