jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?
The code in question, as simple as can be.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
</script>
Hide
<div class="thread">I like trains.</div>
</body>
</html>
I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
return false;
}
it is not hiding again it is the page that is being refreshed because href="" links to same page
NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)
You could try changing
<a href="" onClick="doHiding()">
into
<a href="#" onClick="doHiding()">
See: http://jsfiddle.net/aVNuf/
You can try the click event in jquery instead doing it inline.
http://jsbin.com/iseref/1/edit
html:
Hide
<div class="thread">I like trains.</div>
jQuery:
$(function(){
$('a').on('click', function(e){
e.preventDefault();
doHiding();
});
});
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
try
href="#"
its work for this case
Related
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'm trying to refresh the div, but it's duplicating everything else.
Before I do anything, the page looks like this: initial page
The second button is supposed to refresh the div, but when I do, this is what I get:after trying to refresh, it refreshes it, but duplicates everything else
How do I make it so it only refreshes the div?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/>
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#ff').load('thing2.html');
});
});
</script>
</body>
In this line
$('#ff').load('thing2.html');
You are only updating your div with id="ff", but you are loading into the entire contents of thing2.html.
Is this what you were looking for? If not, can you explain a bit more?
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#input').val('');
});
});
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
You are loading the things2.html again, hence its duplicating.
I have used location.reload() to refresh and its working fine. Is this you are looking for??
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
// $('#ff').load('things.html');
location.reload();
});
});
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
In the following code, how can I move the <div class="move">I was moved to the parent.</div> after the parent of the element I click, when I click Add New.
I have everything right, but I cannot do the part where I need to move it after() the parent.
Can you please help?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.add').click(function() {
$("#container").find('.flag, .edit, .delete').remove();
$(this).parent("div").after(".move");
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers <span class="add" data-id="US01">Add New</span></div>
<div class="h2" data-id="2">Who is your favorite Math teacher? <span class="add" data-id="US02">Add New</span></div>
<br>
<div class="h1" data-id="8">Restaurants <span class="add" data-id="US10">Add New</span></div>
<div class="h2" data-id="9">Which is your favourtie restaurant in town? <span class="add" data-id="US20">Add New</span></div>
<div class="move">I was moved to the parent.</div>
</div>
</body>
</html>
.after() doesn't accept selectors, currently you are inserting .move string after the selected element. You can use .insertAfter() method instead:
$(".move").insertAfter(this.parentNode);
http://jsfiddle.net/RYzpG/
try this fiddle http://jsfiddle.net/QP3MZ/
$(document).ready(function () {
$('.add').click(function () {
$("#container").find('.flag, .edit, .delete').remove();
var $move = $('#container .move');
$(this).parent("div").after($move);
});
});
This code should work.
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$("#container").find('.flag, .edit, .delete').remove();
$('.move').insertAfter($(this).parent());
//Or (Note we have to pass a jQuery element inside after, if we pass string then it will copy the string instead)
//$(this).parent('div').after($('.move'));
});
});
Also here is a jsfiddle. The reason why yours wasn't working is you are passing a string inside the .after, which jQuery would treat as an HTML string. You had to pass a jQuery element or DOM element. See it here.
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>