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.
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.
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>
So, if I understand http://api.jquery.com/offset correctly, $('body').offset() should return the position where the body is located, relative to the document. So inserting a <p>-tag at those coordinates on the page should put it at the very position of the body tag. But that is not what happens!
I tried this in both Safari 5.0.5 and Firefox 3.6 and both cases, the alert says "8" and the <p>-tag ends up 8 pixels from the top of the page, whereas the body tag starts 100 pixels further down on the page, as can be seen if inspecting using e.g firebug.
<!doctype html>
<html>
<head></head>
<body>
<div style="margin-top:100px;background:yellow;">
<p>Hello World</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script>
alert(jQuery('body').offset().top);
var myp = jQuery('<p>Top of body?</p>')
myp.appendTo(jQuery('body'));
myp.offset(jQuery('body').offset());
</script>
</body>
So the question is: how am I supposed to do this so that the <p>-tag ends up in the body, and not at the top of the page, using .offset()?
In most cases you'll find the body offset is equal to 0, that is because the body of the page is == you browsers viewport.
The reason Hello World is 100px down, is because you've applied a padding to it. Do you want your text "Top of body?" to appear below Hello World?..
If so, first give your div a class name (I've used hworld) and then append your var to it.
<div style="margin-top:100px;background:yellow;" class="hworld">
And:
myp.appendTo(jQuery('.hworld'));
Hope this helps...
There must be something else interfering with your code.
It works fine in this fiddle I created: http://jsfiddle.net/jasongennaro/7sGGq/
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.
I have a dropdown Menu where in a div is clicked and List is shown.
On focus out I am supposed to hide the list(i.e. when the user clicks or focuses on some other element and not on mouse out). Hence my obvious choice was onblur.
Now the JavaScript seems to work in Firefox but not in IE thats because my div has a sub div with a height and width specified. This is reproducible in a test file. I am using jQuery.
Is this a known issues in Internet Explorer? And what is the work around?
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option div {height:18px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
<div class="selected_option" tabindex="0">
<div>anywhere in the page</div>
</div>
</body>
</html>
The IE-proprietary focusout event worked for me:
$('.selected_option').bind('focusout', function(){
alert('focusout');
});
Again, this is proprietary (see quirksmode) but may be appropriate if it solves your problem. You could always bind to both the blur and focusout events.
onkeypress="this.blur(); return false;"
its works fine on all IE versions
First realize that focus and blur events are only supported on focusable elements. To make your <div>s focusable you need to look at the tabindex property.
Try using an anchor tag instead of a div since these are naively focusable. You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. Something like this:
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option
{
display: block;
height:18px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
anywhere in the page
</body>
</html>
Haven't tested this, but I think it should work.
I have set the tabIndex property for the div to be focusable and moreover if i comment the height the blur event is fired so I assume thats not the problem.
Try:
$('.selected_option').bind('blur', function(){
alert('blurred');
});
Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously).