Trying to work out if it's possible to have multiple toggle buttons on my page while not having to repeat jQuery .toggleClass code for each button (with different id's)? Maybe use 'this' or some other method?
$(document).ready(function(){
$("button").click(function(){
$("p").toggle('fast');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Thanks in advance!
You can use event delegation.
For example, if you bind click event to buttons. I think you can use id or data attribute to differentiate which button is triggered. Then you can move forward.
to toggle the next p you need to use .next()
$(document).ready(function(){
$("button").click(function(){
$(this).next('p').fadeToggle('fast');
});
});
to toggle the next p and next next p you need to use .next()
$(document).ready(function(){
$("button").click(function(){
$(this).next('p').fadeToggle('fast');
$(this).next().next().fadeToggle('fast');
});
});
you can select your button ids like
$("#button1, #button2").click();
I don't prefer your html structure .. if you can put each button and its P in one div it will be better to handle
$(function() {
$('#toggle-event1,#toggle-event2,#toggle-event3,#toggle-event4,#toggle-event5').change(function() {
let state1 = $(this).prop('checked');
//alert( "First handler for .toggle() called." );
alert(this.id);})
Related
I have a main page that I have loaded another page on it via ajax when document is ready ,also I have a button that when I click It I shows an alert and, I have that button in the second page too. but when i click on it in that page that code does not work ?
how can i solve this problem ?
because I do not want to repeat js codes on the second page ?
here is my first page code :
first page code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="captcha" style="border:1px solid red;">
</div>
<div class="details1">cccc</div>
<script>
$(document).ready(function(e) {
$(".captcha").load("/secondpage.htm");
$(".details1").click( function()
{
alert('button clicked');
}
);
});
</script>
</body>
</html>
and this is my second page that I have loaded into div with classname captcha:
second page code:
<html>
<head>
</head>
<body>
<section class="details1"> Details </section>
</body>
</html>
When you need to create new elements on-the-fly, you can not use standard click etc. events. Dynamically created elements are not born with the same event handlers as the existing elements. You have to dynamically attach event handlers to newly created elements.
Replace 'click' with 'on'.
$("body").on("click", ".details1", function(){
alert('button clicked');
});
I am using jQuery and Ajax.
HOME.html
<html>
<head>
<script src="jquery.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div id="div1"></div>
<button>click</button>
</body>
</html>
javascript.js
$(document).ready(function(){
$('button').click(function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$("#b2").click(function(){
$("#div2").hide();
});
});
TEST2.html
<body>
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
</body>
<head><script src="javascript.js"></script></head>
When I click on button, Ajax loads the content in div. But when I again click on button then it is clicked twice. I know why this click twice happens, because I again load the javascript.js file.
If I can't do that then the hide button is not working because the JavaScript loads before the div2, that's why hide button is not working.
SOLUTION:
There is one solution is that I use the hide button code in test2.html instead of in javascript.js But I don't want to do that.
Beacuse this is a demo in my original code this is very difficult to do that.
Is there another solution to this?
Repeatedly re-loading the JavaScript is a bad idea.
If you just want to handle clicks on buttons that are dynamically added, you can do that using event delegation. Remove javascript.js from test2.html entirely, and hook up your handlers like this (e.g., change javascript.js to the following):
$(document).on("click", "button", function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$(document).on("click", "#b2", function(){
$("#div2").hide();
});
That watches for the click event on the document, but only fires the associated handler if the event passed through an element in the bubbling phase that matches the selector in the second argument. When firing the handler, jQuery makes it look a lot like you had the handler actually attached to that element, rather than to document.
There's a lot more in test2.html than there should be. jQuery will only append the bit in the body (and run the script, but we're removing that). test2.html should just be:
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
Side note: If you're going to replace it on the next click, I'd use $("#div1").empty() rather than $("#div2").hide() so that you actually proactively remove the content you're going to replace later, rather than just hiding it.
I am new to web development and I am learning JQuery now. I have a doubt here. This is the code from W3Schools.com. I would like to know if I add one more button here, how can I run this JavaScript for the click event of the FIRST button only.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
<br />
<button>Second Button</button>
</body>
</html>
You can add an ID to the button and put a click event on that id by selecting like this (if button id is 'submitForm') $("#submitForm")
In fact, there are many ways you can select elements with jquery, check this out: http://api.jquery.com/category/selectors/
In your specific example, if you don't want to put ID's on buttons, you could use :first to only access the first one, like this $("button:first")
Change
$("button").click(function(){
$("p").hide();
});
to
$("button").eq(0).click(function(){
$("p").hide();
});
This will only bind to the click event of the first button. See http://api.jquery.com/eq/.
jsFiddle example
I'm creating a random html page with internal jQuery, I'm trying to get jQuery to hide two of three paragraphs, and to do this for 5 seconds, but when I load the html file, all paragraphs are immediately visible. Can anyone help?
<html>
<head>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<script>
var $ = jQuery;
$("p").each(function (idx) {
if(idx >= 1) {
$(this).hide(500);
}
});
</script>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>
</html>
You have to wrap your code with $() because the elements aren't loaded yet.
$(function(){
$("p:not(:first-child)").hide(5000);
});
　TRY-A-DEMO
Also I believe 500 is a typo since 5000 is 5 seconds.
As #David Thomas suggested, you can further simplify it into:
$(function(){
$("p:gt(0)").hide(5000); //:gt means "greater than..."
});
Make sure to wait DOM ready event:
$(document).ready(function() {
// your code
});
I would like to drop down a div with further information when the mouse is hovering over another div and am unsure how i should organize this. I have the following: http://quaaoutlodge.com/drupal-7.14/ and I would like that if one hovers over the Book Now area, that the TEST-div drops down as long as the cursor is over Book Now or TEST and it should drop up again as soon as the cursor leaves the area. How do I best go about this?
To get something similar to what you can see on http://www.thedana.com/, I tried to implement some onmouseover javscript code that shall be executed when hovering over the book now div. I just try to change the height of my element statically first like this:
function dropbox(element){
obj = document.getElementById(element);
if(obj) {
obj.style.min-height = "400px";
} else {
}
}
but I can't get it going. The eventual goal is to have a loop with some delay to slowly drop down the book now tab.
You can try a css approach
#book + div{
display:none;
}
#book:hover + div{
display:block;
}
+ selector
you can use this code or (reference: w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").hover(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
seems like I have edit obj.style.height instead of .min-height and it works fine.
Used JQuery instead and it seems to work fine:
<script src="./path/to/jquery.js"></script>
<script>
$(function() {
var fade = $('#fade');
$('#book').hover(function() {
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
with my html looking like this:
<div style="" id="book">Book Now<br/> <!-- hover div-->
<div class="fade" id="fade"> <!-- drop down div set to display:none; in css-->