.toggle() not setting display to none? - javascript

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.

Related

Dojo toggler not working with display: none

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.

how to use the show function in jquery? [duplicate]

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>

jQuery or JavaScript auto click

How can I auto click on the link on page load? I have been trying for ages but id does not work.
<link rel="stylesheet" type="text/css" href="leightbox.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="leightbox.js"></script>
</head>
<body>
<div class="content">
<p> Click here to activate leightbox popup.</p>
</div>
<!----------// POPUP (ON CLICK) //---------->
<div id="pop02" class="leightbox">
×
<div class="scrollbox">
<h1>This popup loads upon clicking a trigger link.</h1>
text</div>
</div>
</body>
You haven't provided your javascript code, but the usual cause of this type of issue is not waiting till the page is loaded. Remember that most javascript is executed before the DOM is loaded, so code trying to manipulate it won't work.
To run code after the page has finished loading, use the $(document).ready callback:
$(document).ready(function(){
$('#some-id').trigger('click');
});
First i tried with this sample code:
$(document).ready(function(){
$('#upload-file').click();
});
It didn't work for me. Then after, tried with this
$(document).ready(function(){
$('#upload-file')[0].click();
});
No change. At last, tried with this
$(document).ready(function(){
$('#upload-file')[0].click(function(){
});
});
Solved my problem. Helpful for anyone.
$(document).ready(function(){
$('#some-id').trigger('click');
});
did the trick.
$(document).ready(function(){
$('.lbOn').click();
});
Suppose this would work too.
In jQuery you can trigger a click like this:
$('#foo').trigger('click');
More here:
http://api.jquery.com/trigger/
If you want to do the same using prototype, it looks like this:
$('foo').simulate('click');
You are trying to make a popup work maybe? I don't know how to emulate click, maybe you can try to fire click event somehow, but I don't know if it is possible. More than likely such functionality is not implemented, because of security and privacy concerns.
You can use div with position:absolute to emulate popup at the same page. If you insist creating another page, I cannot help you. Maybe somebody else with more experience will add his 15 cents.

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