I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});
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>
I am learning JQuery and facing some problem.
<html>
<head>
<link rel="stylesheet" href="css/puzzle.css" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/test.js" type="text/javascript"></script>
</head>
<body>
<div id="parent">
link1
link2
link3
</div>
<body>
</html>
$(
function() {
$("#parent").on("click", "a", function() {
linkClick(this);
});
function linkClick(link) {
$("#parent a").first().off("click");
console.log(link);
}
}
)
Question1: When the user clicks one of the links, can I remove the link's event haneler?
Question2: If the Question1 has been soled, can I add the onclick event handler back to "the specified link" without affecting other links?
Thanks for your reading.
==
I tried to use $("#parent a").first().off("click"); to unbind the first link's event handler.
But no matter how many times I click the first link, this console still prints data.
How do I remove the link's event handler and then add it back in a few seconds???
Use off
Remove event:
$( "#parent a").first().off( "click" );
Add Event:
$( "#parent a").first().on( "click", function(){
//click event code
})
Use:
//Remove click event for first element
$( "#parent a").first().off("click");
//Bind new event to element:
$( "#parent a").first().bind('click',function(){
//click event code
})
I'm playing around with event-delegation from http://learn.jquery.com/events/event-delegation/
.I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A small web app to manage todos">
<title>TO-DO jQuery Tests</title>
<!--src attribute in the <script> element must point to a copy of jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "article" ).on( "click","a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
</script>
</head>
<body>
<div id="test-container">
<article>
Link 1
</article>
</div>
</body>
When I click on Link2 I get no output on the console? Why isn't the event-handling working?
You have to bind to the closest static parent.
This case test-container.
$( "#test-container" ).on( "click","article a", function() {
// your code
});
The problem is that the second link is added dynamically and the click binding happens before the second link exists. That's why it has no affect on it.
Your code should look like this (instead of $(document) you can also use any static parent container as Ricardo pointed out):
$(document).ready(function() {
$(document ).on( "click","article a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
I'm trying hook up a checkbox check event with additional events (such as a dialog display). However, I can't seem to get the click event working when I'm testing my html file in a browser. It does work in JSFiddle, though, which is very strange.
http://jsfiddle.net/rEgAX/1/
My HTML:
<label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>
My JavaScript:
var countChecked = function() {
if ($("#myCheckbox").is(":checked"))
{
alert('checked!');
}
};
$( "input[type=checkbox]" ).on( "click", countChecked );
The html file that I wrote:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
// On clicking of the completed checkbox, we want to pop up a dialog for confirmation.
var checkboxClicked = function() {
if ($("#myCheckbox").is(":checked")) {
alert('checked!');
console.log('checked!')
}
};
$( "input[type=checkbox]" ).on( "click", checkboxClicked );
</script>
</head>
<body>
<label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>
</body>
</html>
You must place your code inside
$(document).ready(function(){
...
});
Since your script comes before your checkbox is rendered.
EDIT
You might run unto a problem with my first answer. Thanks to Omar's comment and reference
It should be this way rather than .ready() function:
$(document).on('pageinit') {
...
});
By default, jsFiddle will wrap your code in an load handler.
Try wrapping your code in:
$(window).load(function(){
var countChecked = function() {
if ($("#myCheckbox").is(":checked"))
{
alert('checked!');
}
};
$( "input[type=checkbox]" ).on( "click", countChecked );
});