I need some script.
To hide a div by clicking anywhere on the page
To hide a div by clicking on button, images or particular script
To hide a div by clicking anywhere on the page ( when div contain any other script)
I am currently using
<script>
$(document).ready(function () {
$("#div").click(function () {
document.getElementById('div').style.display = 'none';
});
});
</script>
This working fine why div contain images, but it not working when div contain script like advertisement script such as chitika, adsense or any other
Please tell how to do.
Try this use this this selector is used to hide the clicked div
$("#div").click(function () {
$(this).hide();
});
To hide it, you would do some javascript and
Also you need to include Jquery library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
$("#YourDivID").click(function (){ //inspect the ID might differ.
$(this).hide();
});
This code answers to your first and third question:
$( document.body ).click(function() {
document.getElementById(name of your div).style.display = 'none';
});
And the second question:
<div id="testdiv">test</div>
<script>
function hidediv(){
document.getElementById("testdiv").style.display = 'none';
}
</script>
<input type=button value="Click me" onclick="hidediv()">
Related
Guys i'm trying to do a jQuery toggle on click of a link. Basically, show/hide a div on click of a link. It's not working when i put the class or ID, but it works when i directly put a in it.
Here's a link which has both ID and class.
<a id="gachlkx" class="gachlk btn btn-warning btnApply">#T("gaperfreport-apply")</a>
And a div which has a graph
<div id="gachwrap" class="chartsContainer">
Contains Graph
</div>
Not working with ID -
<script>
$(document).ready(function () {
$("#gachlkx").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
Not working with class -
<script>
$(document).ready(function () {
$(".gachlk").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
Works only with a
<script>
$(document).ready(function () {
$("a").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
I tried all the combinations. Keeping only ID or keeping only class. Doesn't work. Works only with a. Any solution?
If you're using a style template, some of them removing id's and class.
Verify by inspecting the dom when the page is loaded.
Solutions :
Use the id / class generate by your library.
Or
You can try to include your own id / class with jquery after the page is loaded.
Check this. Works well with class and id.
With id in this sample:
https://jsfiddle.net/9gydyb2o/
$(document).ready(function() {
$("#gachlkx").click(function() {
$('#gachwrap').toggle('slow');
});
});
The error should be on other place. Have you checked the console log?
Please try this, it works fine if you have added anchor or div dynamically to DOM.
$(document).ready(function() {
$(document).on('click',"#gachlkx",function() {
$('#gachwrap').toggle('slow');
});
});
I have this markup:
<div class="container" id="logo" style="text-align:center;">
//other loading stuff
Enter Website
</div>
<div id="content">
//main content
</div>
At the top before the closing head tag I have:
<script>
$(function() {
$('#enter').hide();
});
$(window).load(function() {
$('#enter').show();
});
</script>
And at the bottom I have (before the closing body tag):
function EnterSite() {
$("#enter").click(function(){
$("#content").show(2000);
});
}
and CSS:
#logo {
z-index: 99;
}
#content {
display: none;
}
But it just shows the logo div and clicking on the Enter Website link does nothing.
what I want to do is show the logo div till the page is loaded (window.load) with the Enter Website link hidden. Once the page is loaded then show the link which on click will show the content div
The problem is you are using an onclick handler, to bind a new click handler using jQuery. The new click handler won't fire first time you click on the <a> tag, because the event has already happened.
Either remove the onclick from markup and just use
$(function(){
$("#enter").hide().click(function(){
$("#content").show(2000);
});
})
Or change to:
function EnterSite() {
$("#content").show(2000);
}
I suggest using first solution and avoid mixing inline script and jQuery to keep all your script unobtrusive and easier to maintain
Try this:
$(window).load(function () {
$('#enter').show();
});
$(document).ready(function () {
$("#enter").click(function () {
$("#content").show(2000);
});
});
Fiddle here.
on this site, I have 2 uses of jquery, one for "anything slider" and another for a toggle for hide show.
http://www.worklightrpo.com/
If I remove the toggle's link to jquery, the slider works, but the toggle doesn't... this is the link for the toggle's jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Does anyone know how I can get them BOTH to work and play nicely?
Thanks
The full portion of code is this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Learn More');//change the button label to be 'Show'
}else{
toggle_switch.html('Condense');//change the button label to be 'Hide'
}
});
});
});
</script>
Don’t load two different javascript library versions, only one is ever needed.
I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?
Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/
You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>
I have this parent page with title Criatweb,
and an iframe page inside it,
I want to change the display of a div inside the iframe page, but to change only when it's title is Criatweb.
I tried this in the iframe page but didn't have success:
<script type="text/javascript">
if (window.parent.document.title == 'Criatweb')
{document.getElementById('customizarsite').style.display = 'none';}
</script>
The error message means you are calling it before the element is loaded on the page!
It is like walking through a door before opening it. Not going to happen unless you are a ghost.
You need to call it onload or onready or after the element.
<div id="customizarsite">Put the script after me</div>
<script type="text/javascript">
if (window.parent.document.title == 'Criatweb') {
document.getElementById('customizarsite').style.display = 'none';
}
</script>
use jQuery hide
<script type="text/javascript">
if (window.parent.document.title == 'Criatweb')
{
$("#customizarsite").hide();
}
</script>