JQuery .show() and equivalent CSS modification not working with IE 8 - javascript

There are several posts relating to this, but none actually gives a solution.
What actually happens is as follows:
function LoadSpinner()
{
$("#divSpinner").css('display','block'); // could have done with .show()
}
function UnloadSpinner()
{
$("#divSpinner").css('display','none'); // could have done with .hide()
}
function OnClickMyButton()
{
LoadSpinner();
AnAjaxCall(); // it's set to async: false, that means the ajax call must finish before execution continues
UnloadSpinner();
}
I tried commenting the UnloadSpinner() and it does show in IE 8. Could it be that it happens so fast that I don't see it. But I am not too sure about that, cause even for some slower operation it does not show up.
It's working fine on Firefox though.

Is the issue that you're doing a synchronous ajax call? I believe this freezes the browser from executing any other actions including repainting the screen to show your spinner. Try making your ajax call asynchronous and hide the spinner in the callback. I bet you that works. Something like this:
function OnClickMyButton()
{
LoadSpinner();
AnAjaxCall(function() { UnloadSpinner() } );
}
function AnAjaxCall(callback)
{
//do ajax. On complete, call callback. check the web for examples.
}
I would bet you the issue has nothing to do with jquery, but with the synchronous ajax call.
To test my theory try this code:
function OnClickMyButton()
{
LoadSpinner();
setTimeout(function() { UnloadSpinner() }, 2000);
}
I bet you the spinner appears for 2 seconds just fine. If it doesn't then ignore this post.. I'm completely wrong.

$(function() {
$("#d").hide();
$('#b').click(function() {
$('#d').show();
});
});
<div id="d">hello</div>
<input type="button" id="b" />
Works fine for me in IE.

Do you have a specific example ? I don't recall encountering that problem despite I use show() quite often.

I have done a bit of debugging on it and found that the Browser wasn't doing the necessary updates on time. That is why by the time it was suppose to be visible, the Unloader() was called and it got hidden again.

Related

jQuery: Run animation after all calculations and DOM updates are complete

I am trying to prevent an element from being animated until a specific function is complete. The problem is that the animation starts while the function still is running, so the animation is extremely laggy and jumpy instead of smooth and calm as it is when I disable the function.
My code looks something like this:
function editElement() {
// Do a lot of calculations and edit what is inside #box (no Ajax)
}
$("#click").click(function() {
editElement();
$("#element").slideDown("slow");
});
How can force the slideDown animation to wait until the function is complete before running?
I have tried callbacks and $.Deferred suggested in other questions, but most of them seem to be directed towards Ajax and do not work for me. Thank you for your time!
slideDown is always executed after editElement has finished executing its code because JavaScript is a "linear language". The only exception is when there are asynchronous functions inside, including AJAX and setTimeout / setInterval.
One suggestion though is that you can do this:
function ediElement(..., callback){
//codes here....
//Make sure there is no asynchronous functions.
callback();
}
$("#click").click(function() {
editElement(function(){
$("#element").slideDown("slow");
});
});

I want to make sure function comes after loading of external HTML

How do I make sure the alert comes after the loading of the external HTML?
function changeContent(){
$('#contentmain').load("contentmain.html", function(){
alert("something");
}
)}
I've been playing around with $(document).ready, but no luck so far.
Many thanks!
Update:
The result of this code is that it depends (on what, I don't know): sometimes the alert comes first, sometimes it comes second...
Your code is right.
From the jquery documentation:
Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
are you loading iFrames?
try the .load() function.
$('#iframeID').load(function(){
// I am totally loaded and lets begin the hunt now.
});
Alternatively, If you are loading content via ajax, you can use .ajaxComplete
$(document).ajaxComplete(function(){
// ajax call has completed and lets begin the hunt now.
});

Weird JS flow in firefox

My JS code is as follows
if (fileControl != NoFileMessage) {
if (fileControl.val() != NoFileMessage) {
var valid_extensions = /(.xlsx)$/i;
if (!valid_extensions.test(fileControl.val())) {
alert($("#txtInvalidFileFormatMsg").val());
return false;
}
...
}
}
During first execution the alert is shown and then the control "jumps back" to the first if statement instead of continuing to return false, due to which the code is executed twice and the alert is shown twice
Due to this, the alert box is shown twice. Any pointers on how I can fix this? It's working fine in other browsers (including IE !)
UPDATE:
Some more insight, this piece of code is being called on the .change() event of a <input type='file />'
As I've stated earlier, the code snippet is executed twice, after some digging in, I figured out that the .change() event is being fired twice. Why does this happen in FX only?

JavaScript/HTML5 FullScreen API

<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
The following code basically should cancel full screen as soon as it enters. However, the code above does not work (e.g., it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.
I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?
Thanks.
UPDATE
I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!
Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:
window.setTimeout(cancelFull,10);
function cancelFull() { document.webkitCancelFullScreen(); }
UPDATE
Put the setTimeout() in place of your current CancelFullScreen, inside the listener.
Try this:
window.setTimeout(document.webkitCancelFullScreen, 10);

jquery toggle(event,event) hide show question

Calling toggle takes a long time to load, so I'm trying to add a loading img while loading but it doesn't seem to load when you .showall is activated look at * in the following code
$('#loading').hide();
$(".showall").toggle(
function(){
$('#loading').show(1); // * added
$(".toggle_container").slideDown();
$('#loading').hide(); // * added
},
function () {
$('#loading').show(1); // * added
$(".toggle_container").slideUp();
$('#loading').hide(); // * added
}
);
The other response of calling hide in the callback is the correct approach, but I figured I'd answer to point out why.
There are actually multiple issues here. Your intention is to show #loading then slideup and once that is complete, hide #loading. However, when slideup is called, the animation is queued up and your code moves on, the code does not wait for slideup to complete and then move on to the next line. This is why you need to use the callback, to call hide after slideup completes.
Another thing that many people overlook is that show and hide when called with a duration are animations and are therefore queue, however, when no duration is passed these calls are NOT animations and will NOT be queued. So, calling show with a duration and then immediately calling hide with no duration will never show the element. See this for an illustration of that: http://jsfiddle.net/zZHhm/ notice that you never see DIV2.
Also, the durations passed to show and hide are in milliseconds, so hide(1) gives a duration of 1 millisecond (you may be aware of this).
I admit, something weird is happening while using show/hide with or without parameter. This version works, but I don't know why these methods without parameters doesn't behave as they should.
Code: ( http://jsfiddle.net/z3HRQ/2/ )
$('#loading').hide(1);
$('.showall').toggle(
function () {
$('#loading').show(1);
$('.toggle_container').slideUp(function () {
$('#loading').hide();
});
},
function () {
$('#loading').show(1);
$('.toggle_container').slideDown(function () {
$('#loading').hide();
});
}
);

Categories