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?
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'm trying to use javascript to toggle the size of a div. In order to understand the basic idea of how to do this I tried replicating this example: Toggling Div (JSFiddle)
But for some reason it is not working, despite me having copied it from the working JSFiddle. Why is that? Here is my replicate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
}</style>
<script type="text/javascript">
$("#topbar").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
}
})());
</script>
</head>
<body>
<div id='topbar'>toggle me</div>
</body>
</html>
Wow! You haven't added jQuery at all! Add this in your <head> before you call the script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You must have got this error in the console:
Reference Error: $ not defined.
You are using this not in context. When you put it inside a function, then it gets screwed up. Do it this way:
$(function () {
$("#topbar").click(function () {
var i = 0;
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
return false;
});
});
The this you used, will be taking your inner function as its context. And since your <div> comes after the <script>, please enclose it inside the $(function () {}).
I was working on a piece of code that looked for a div that had the css style clear: both after the page loaded and then added css display: none.
This is a sample of my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).load(function () {
if( $("div").css('clear').toLowerCase() == 'both') {
$(this).css("display", "none");
});
});
</script>
<title>Check</title>
</head>
<body>
<div>This is visible</div>
<div style="text-align: center; font-size: smaller; clear: both;">This is not visible.</div>
</body>
</html>
For some reason, this code does not seem to work out...I'm kind of new to jQuery. Can someone point out my error?
You can use css() method like following.
$('div').css('display', function () {
if ($(this).css('clear') == 'both')
return 'none'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is visible</div>
<div style="text-align: center; font-size: smaller; clear: both;">This is not visible.</div>
Update: Use $(document).ready instead of $(document).load.
Use to search all the divs with a specific style:
$(function() {
$(document).find('div').each(function() {
if($(this).css('clear').toLowerCase() === 'both') {
$(this).css('display', 'none');
}
})
})
In the above code, .each() will search all the div in the document and then we check is css property clear
Jsfiddle: https://jsfiddle.net/mayank_shubham/q3maznyt/
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'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;
}