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 */
})
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 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");
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;
}
When I embed the code provided by EventBrite to show the events that I have organized on my site, the page loads normally but then the JavaScript expands to take up the whole page.
How do I stop this from happening? I have put in my organizer ID and API key. Below is the example code provided:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="http://evbdn.eventbrite.com/s3-s3/static/js/platform/Eventbrite.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
Eventbrite({'app_key': $APP_KEY}, function(eb){
eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
document.write(eb.utils.eventList( response, eb.utils.eventListRow ));
});
});
});
</script>
This has nothing to do with the Evenbrite javascript API. The layout is determined by the markup and css styling of your page. The eventList method returns HTML, so you can put that into a specific element and style it appropriately. For example:
<head>
<script>
$(document).ready(function(){
Eventbrite({'app_key': $APP_KEY}, function(eb){
eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
var event_list_html = eb.utils.eventList( response, eb.utils.eventListRow );
$("#event-list").html(event_list_html);
});
});
});
</script>
<style>
#event-list {
width: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="event-list"></div>
</body>
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?