Dojo toggler not working with display: none - javascript

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.

Related

.toggle() not setting display to none?

Whilst creating a jQuery dropdown menu i ran in to a most peculiar problem - an element that has been hidden is still affecting the page. Why is this happening, and how can I fix it? It is affecting the functionality by blocking part of the button, forcing one to call the function from a unblocked part. For example;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").mouseenter(function(){
$("#box").stop().toggle();
$("#box").stop().animate({
top:'50px',
opacity:'1'
},400,function(){
});
});
$("#start").mouseleave(function(){
$("#box").stop().animate({
top:'25px',
opacity:'0'
},400,function(){
$("#box").stop().toggle();
});
});
});
</script>
</head>
<body>
<button id="start">Start Animation</button>
<div id ="box" style="background:#98bf21;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;">
</div>
</body>
</html>
EDIT: set the top setting to ten px to completely cover up the button if you can't see the problem.
I've just made a Fiddle where the problem is solved using z-index:-1; for the div. When this z-index is removed, the mouseenter of the button is not working for the lower part of the button because the animated div, though not visible, covers part of the button.

Trying to hide the document until it's updated with JavaScript

This is my ready handling:
$(document).ready(function() {
$(document).hide();
$('.foo').each(function(elem, i) {
$(elem).text('So long and thanks for all the fish');
});
$(document).show();
}};
What I'm trying to do is hiding the document completely until everything is ready on my terms, but it seems that the show() function doesn't wait for the elements iteration.
By the way, I tried changing show() and hide() to css('display', 'hide') and css('display', 'block') but still, you can the text is changing in your eyes.
How do you make sure all your code ran before calling show()?
Let's suppose you fix this by hiding the body or a container element. That won't do the trick, and here's why:
What happens during the time after the document is (mostly) loaded but before you hide the document?
That's right, the document may get displayed during that time despite your best efforts.
So what you could do instead is use a CSS class that hides, say, the body without any JavaScript intervention. For example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('body').removeClass( 'hide' );
});
</script>
</head>
<body class="hide">
<div class="foo"></div>
</body>
</html>
Of course this does mean that if JavaScript is disabled, your document won't be visible at all. What if you want to have a non-JavaScript fallback? In that case you could do it like this instead. We'll hide the html element instead of the body because that way we know the code will work in the head (the body element may not exist yet at this point), and only hide it if JavaScript is enabled:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('html').addClass( 'hide' );
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('html').removeClass( 'hide' );
});
</script>
</head>
<body>
<div class="foo">
This content is displayed if JavaScript is disabled.
</div>
</body>
</html>
Now you have a non-JavaScript fallback, but the document will still be hidden immediately when JavaScript is enabled, because of the code that adds the hide class.
Also note that you had the parameters reversed in your $().each() callback. (Interestingly enough, the order you used makes much more sense and indeed is the order used by the newer native .forEach() function. The order in $().each() is really backwards - one of those things that seemed like a good idea at the time but really was just a mistake.)
You can not hide() the document. Instead, try hiding the main container element on your page; or hiding the body e.g. $('body').hide() might work as well.
Just an aside: the display property should be none. hide is not a valid value.

How to hide certain html that is not surrounded by <noscript> tags if javascript is disabled?

<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.

jQuery $("*").fadeTo() moves content before fading

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.

Blur Event Does not get Fired in IE7 and IE6

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).

Categories

Resources