I'm working for my Wordpress project and I created some jQuery code, but it only seems to work on the first element.
Here is my CSS:
<style type="text/css">
#hide {
display:none;
}
</style>
Here is my jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$("#hide").toggle();
return false;
});
});
</script>
What am I doing wrong?
You probably have multiple ID's with the same name (#show and #hide) - change all those elements to use a class instead (ID's are supposed to be unique), and then you could change your code to something like the following:
$(document).ready(function(){
$(".show").click(function(){
$(this).toggleClass('hide');
return false;
});
});
and slightly change your CSS as well:
.hide {
display:none;
}
Related
I have two following div elements:
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
The div called 'geolocation-common-map' is removed using jQuery when the page is loaded. I would like to know how can I load this div again after the div 'staticMap' is clicked. So far I have following jQuery, but I need to replace .show() function.
$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
$('.geolocation-common-map').show();
$('.staticMap').remove();
event.preventDefault();
});
Any ideas how to do this?
Thank you in advance.
According to detach documentation:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
You can use it as follow:
var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');
$('.staticMap').on("click", function(event) {
dv_geolocation_common_map.insertAfter(dv_staticMap)
dv_staticMap.detach();
event.preventDefault();
});
.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
Instead of remove(), try toggle():
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
<script>
$(document).ready(function() {
$('.geolocation-common-map').hide();
$('.staticMap').on("click", function (event) {
$('.geolocation-common-map').toggle();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#geolocation').hide();
$("#staticMap").click(function(){
$('#geolocation').show();
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div id="staticMap" class='staticMap selected'>Static Map</div>
<div id="geolocation" class='geolocation-common-map highlight'>Geolocation Map</div>
</body>
</html>
Adding id to your your static div or changing the id to class in jquery will do your work.you are using staticMap as id but it is not defined in div.
I have a site that I would like for new users to see a contact us when the page loads. I have tried numerous methods and gotten an overlay but the ability to hide and continue onto the page is not working.
$(document).ready(function() {
$('#overlay').fadeIn();
});
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
If any suggestions for closing the popup exist please share.
There are a bunch of ways to hide an element, being the most common one to set
document.getElementById("myNav").style.display = "none";
And to show it again
// Empty to have the one specified by CSS or the element default.
// Or "block", "inline", "inline-block"... Whatever fits you better.
document.getElementById("myNav").style.display = "";
If you hide by height (is a good decision if you have a CSS transision, but you need fixed heights), you need to set the element overflow to hidden. By default, if the content of an element is bigger than the element size it will be shown, so your .overlay class should have overflow: hidden to hide it.
By the way, you are using dynamic heights so you are not using transitions. As a recommendation, use the display way instead.
EDIT: Just noticed the ID problem that #Rubenxfd points out. He is right. Is going to be the main problem for sure.
Also, another problem you have is that you run this code
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
before the button element is rendered, so the event won't attach to it as it don't exists. You should attach it when the page is ready, so you have to move it inside the ready function, like this:
$(document).ready(function() {
$('#myNav').fadeIn();
$('button').click(function() {
$('#myNav').fadeOut(200, "linear");
});
});
Notice the difference.
You are using an class, but calling an id in your jQuery.
Change your jQuery to this:
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
Fiddle
You had a # instead of a ..
$('#overlay').fadeOut(200, "linear"); will happen to the element with the id overlay not to the class. if you write $('.overlay').fadeOut(200, "linear");it will happen to all elements with the class of overlay
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
So I want to trigger an action after a click anywhere on the body, the code is:
HTML:
<body>
<div class="paper"></div>
</body>
CSS:
body{
background-color: #F5F5F5;
margin:0px;
padding:0px;}
.paper{
width: 500px;
height: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background-color: white;}
and js:
window.onload = function(){
$('body').on('click',function(){
console.log("click");
})
}
My problem is that the click is only registered when I click in our next to the div; if I click below nothing happens.
I am a bit confused by this, isn't the body the entire page? If I change the background-color of the body the entire background in the browser gets that colour, but using it with jQuery is different?
(jQuery is properly loaded and there are no error logs)
Try this:
$('html').on('click', function(){
console.log('click');
})
The proper way to achieve the desired effect, is to put your click handler on your document, like this :
$(document).on('click',function(){
console.log("click");
});
Now, also want to make sure your JavaScript code is at the very bottom of your HTML file, like this :
<html>
<head>
// header content goes here
</head>
<body>
// body content goes here
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(document).on('click',function(){
console.log("click");
});
</script>
</body>
</html>
If you can not or do not want to put your JS code at the very bottom of your HTML, you could also wrap your click handle with $(document).ready(), like this :
$(document).ready(function(){
$(document).on('click',function(){
console.log("click");
});
});
See this Fiddle for a demo.
Target document
$(window).load(function() {
$(document).on('click',function(){
console.log("click");
alert("clicked");
});
});
You have to have the on load wrapper, or you get an initial undefined for $. Can obviously be doc ready, but you have load in the original post.
try this.this will help to you
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
alert(" ");
});
});
</script>
</body>
</html>
*I suggest you to check your jquery is working.simply put an alert(" ") and check it before you go for huge one.hope this helps to you.cheers!!!
Selecting on 'body' may not be what you expect (you may want document instead), but here is the correct syntax:
$('body').on('click', 'selector', function(){
/* do something here */
})
I created a HTML page and added jQuery in it but it is not working. Don't know What I am doing wrong. I also searched but my code looks right. but it is not working for me.
My Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("abc").fadeOut("fast");
});
});
</script>
<style>
.abc {
background-color: #FEA2A2;
width: 150px;
height: 150px;
border-radius: 5px;
}
</style>
</head>
<body>
<button>Click Me!</button>
<div class='abc'></div>
</body>
</html>
According to the code, It should fade out the box when the button is clicked. But it is not happening.
use prefix dot for class. you miss the dot for class
$(".abc").fadeOut("fast");
Change
<script>
$(document).ready(function(){
$("button").click(function(){
$("abc").fadeOut("fast");
});
});
</script>
to
<script>
$(document).ready(function(){
$("button").click(function(){
$(".abc").fadeOut("fast");
});
});
</script>
As you are using class selector.
change this line :
$("abc").fadeOut("fast");
to:
$(".abc").fadeOut("fast");
you have wrong jquery selector. you need to use dot (.) for class.
see documentation
For selector use . for class so :
Change
$("abc").fadeOut("fast");
TO
$(".abc").fadeOut("fast");
Typo error in your selector. prefix . for class selector
$(".abc").fadeOut("fast");
basically I'm trying to get #toggle_box to slide down using Jquery, the code below works if I'm just using document.body as the selector however it doesn't seem to work when #toggle is the selector! Any ideas why?
<html>
<head>
<title>JQuery Testage</title>
<style>
#toggle_box {
display: none;
}
#toggle {
background-color: #FFF000;
border: solid;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
</script>
<div id="toggle">Toggle</div>
<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>
</body>
</html>
Give the click handler a $(document).ready(... wrap, and it should work:
$(document).ready(function() {
// your click handler and anything else that
// should run when the DOM is ready
});
Modify your code thus:
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
});
</script>
The problem is that the javascript is loaded and executed before the toggle_box element is loaded. It works for the document body as that is loaded before the javascript.
Could it be because the DOM isn't ready yet?
Try wrapping your script in the following piece of code:
$(function() {
// your code here
});
That's a short code for $(document).ready(function(){ ...}); and may just be what's missing?