Hi I have one hidden div and inside it i have visible span. I want to alert some text if span does not have display none property.
<head>
<script type="text/javascript">
$(function() {
if($('span').is(':visible')){
alert(0)
}
})
</script>
</head>
<body>
<div class="fa" style="display:none">
<span>sdf</span>
</div>
</body>
According to jQuery API
Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
Your <span> is a child of a <div> that's hidden with display: none - that means neither the <div>, nor the <span> consume any space in the document.
Which means that your <span> is hidden and your script has no errors - it does exactly what it suppose to do.
The reason your alert doesn't fire is that your span isn't visible. The fact that it is contained within an element that has display: none means that it will not be shown. If you specifically want to check if it is display: none itself, use css.
if($('span').css('display') != "none"){
alert(0)
}
You don't import jQuery.
Add this in your head element :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Note that an HTML file must also have HTML opening and closing elements, and preferably a doctype. The following file works :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
if($('span').is(':visible')){
alert(0)
}})
</script>
</head>
<body>
<div class="fa" style="display:none">
<span>sdf</span>
</div>
</body>
</html>
And it does nothing, as your span is in a not displayed div.
Now, if you want to precisely know if your element does't have the style display=none set directly on it, test it like this :
if ($('span').get(0).style.display!='none') {
Demonstration
Your problem is that the div containing the span element has display:none as property, try this Fiddle, you just put display:hidden instead of none and the JS works.
<div class="fa" style="display:hidden"><span>sdf</span></div>
Related
This is a sample of what works:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.hide();
});
</script>
</head>
<body>
<div id="test">This is just a test.</div>
</body>
</html>
And when I add display: none to my div (and using toggler.show()), it stops working. This is a sample of what does not work:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.show();
});
</script>
</head>
<body>
<div id="test" style="display:none">This is just a test.</div>
</body>
</html>
Question:
Why is this happening?
Is there something fundamentally wrong with the way I am using dojo or its toggler module?
What is the alternative to toggler (if any), which I can use with display: none?
Note:
I have checked various possibly duplicate links but they all provide workarounds as mentioned below:-
Using dojo.style("test","display","") works, but in complex projects it messes with the alignment etc.
Removing display:none or replacing it with visibility: hidden is not an option for me. It works, but I would like to avoid workarounds if an actual solution exists.
The Toggler Animation uses the fadeIn and fadeOut functions to change the visibility of the Node. which in-turn updates the opacity of the node. which means, node is still there, its just not visible.
You setting the display to none does not update when you use the Toggler to show. Also, setting the display property allows other node to occupy the place held by current node.
So, you need to decide what is that you want. whether you want to use Toggler or use dojo.style. You you wish to continue with Toggler, then instead of display you need to set the opacity to 0.
I am just playing with some basic Jquery and something strange is happening. I have two elements on the page.. an h1 heading, and a generic link. When I click the link I would like the text to change to "This text has now changed", and it does, but then either the button disappears and a new h1 is created with the same "this text has not changed" text, or the button itself turns into the h1. I'm not sure, but here's my code:
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1>This element should change.<h1>
Click Me<br>
</body>
</html>
JQUERY:
$(document).ready(function() {
$(".myLink").click(function() { // this is a convenience method that targets the same elements above just in a quicker fashion.
$("h1").html("This text has now changed.");
});
});
Picture Before the click:
Picture After:
Also, when I added the fade out method everything disappears once again, not just the targeted "h1" element.
Any advice is greatly appreciated as always. Thank you.
You have two opening <h1> tags (the second one is missing a /.)
<h1>This element should change.<h1>
^here
It looks like you have two start tags. EG:
<h1>Heading 1<h1>
Try changing the second tag to an end tag. EG:
<h1>Heading 1</h1>
^
Your h1 tag is not closed. You have 2 opening tags, and by default, your link is contained by the second opening tag so it's changing that html
This question already has answers here:
Jquery .show() not revealing a div with visibility of hidden
(6 answers)
Closed 7 years ago.
I am new to Jquery and go through some tutorials with w3.
I cant work out why my code wont work for the 'show' function the opposite to hide.
this is the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).show();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<style>
p {
visibility: hidden;
}
</style>
</body>
</html>
it seems obvious but as the page loads all the <p> elements are not visible due to the styling but then i thought on click they should show? they don't. is the style too overpowering? if so how do you stop this? or i have made a simple error elsewhere.
thanks
You have two problems.
First, from the documentation:
The matched elements will be revealed immediately, with no animation.
This is roughly equivalent to calling .css( "display", "block"),
except that the display property is restored to whatever it was
initially. If an element has a display value of inline, then is hidden
and shown, it will once again be displayed inline.
The function you are calling will modify the display of the elements but not the visibility (which you have set to hidden).
To modify the visibility you would need to do so explicitly.
$(this).css('visibility', 'visible');
Second, even though an invisible element will take up space on the page, you can't click on something that isn't visible. It just won't fire the click event.
You can work around this by wrapping each paragraph in another element and putting the event listener on that.
$("div").click(function() {
$(this).find('p').css('visibility', 'visible');
});
p {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>If you click on me, I will disappear.</p>
</div>
<div>
<p>Click me away!</p>
</div>
<div>
<p>Click me too!</p>
</div>
$(this).show() won't change the visibility css property. Try: $(this).css("visibility", "visible");
How would you click on p element?
I think you should make a button element and on clicking that try to show the p element.
I think it would be helpful :)
Just use below Code that will work properly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("visibility", "visible");
});
});
</script>
</head>
<body>
<button>click on me.</button>
<p>Click me away!</p>
<p>Click me too!</p>
<style>
p {
visibility: hidden;
}
</style>
</body>
</html>
for example have a div,html code below
<div id="testDiv"></div>
but when i set the innerHTML property of the div(id=testDiv) on ie ,see the code below:
document.getElementById('testDiv').innerHTML= '';
and the div will have a height and width,not a blank div any more
so that is why??
if i want the div is a blank div when set the innerHTML=''(if do not set the display:none)，how should i do?
now show the test code(different results runing on ie7 and chrome)
<!DOCTYPE>
<html>
<head>
<style>
#bl{background:red;}
</style>
<script type="text/javascript">
function f(a){
var t=document.getElementById("bl");
t.innerHTML=a;
}
</script>
</head>
<body>
<button type="button" onclick="f('')">test</button>
<div id="bl"></div>
</body>
</html>
In your function, check if the text is '', and if so, remove the child node from the div. instead of setting its value.
if (a=='') t.removeChild(t.childNodes[0]);
else t.innerHTML=a;
Checked in IE8 and in IE8's compatibility mode (so it should work in IE7 too).
For more stability, you can remove all child nodes from t, like so...
if (a=='') {while (t.hasChildNodes() t.removeChild(t.childNodes[0]);}
else t.innerHTML=a;
I think this is a known IE behaviour.
In addition to setting innerHTML to empty string you can also set font-size to 0.
Why does all content get jerked downwards before fading in the following, and how can i fix it?
Using FireFox 3.6.3, thanks in advance.
<html>
<head>
<script type="text/javascript" language="javascript" src="http://localhost/javascript/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#button").click(function(){
$("*").fadeTo("slow",0.0);
});
});
</script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button">
</body>
</html>
It has something to do with trying to fade all elements, including those outside the <body>. Try:
$("body > *").fadeTo(..)
But why would you want to fade every single element, when you can simply do a fade on the body itself.
$("body").fadeTo(..)
Edit: Some more research shows that when trying to fade the <style> and <head> elements, in no particular order, causes everything to move down. Don't know why yet, but you can see an example here - http://jsfiddle.net/UKn8r/2/
Edit 2: Ok, I think I may have a reason here. The <head> and its children elements such as <style>, <script>, etc. are by default set to display: none in the user agent's stylesheet. When fading them out, jQuery ends up setting their display property to display: block. Now the contents of these child elements are not meant to be displayed on the screen, but by setting them to display: block, it gets displayed as a horizontal block about 20px high with no content, which shifts everything else downwards. Note that if you were to empty out the <script> element and make the onclick inline, then you wouldn't see the jump on Firefox since the element will be empty and not consume any space on screen even when displayed as a block. So changing it to:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
will not cause any jumps.
Also, your original code verbatim, will work properly on Webkit browsers (Chrome, Safari) as the display style property for <script> elements does not get overridden as block. For these browsers, however, if you were to have a style element with some content inside it, then you would see the same behavior as <style> will have an inline style attribute having display: block. Now it may seem utterly useless to have something like, <style style="display: block; opacity: 0">..</style>, but this is just an explanation for why you're seeing the behavior that you're seeing. So to reproduce the same problem on these browsers, try this code:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
<style>p {}</style>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
The <style> property must have some content, and not pure whitespace, so I put the junk p {} there.
This concludes my wasteful search for something that shouldn't be done in the first place :)
Try to fade out your main container, or all elements at body level. For example:
$('body > *').fadeTo('slow', 0.3)
Fading out * doesn't look like a good idea. When you have nested elements (and you probably do), they will both be fade out, having odd effects and exceptionally poor performances.