AJAX function runs only once how do I reset this? - javascript

This question has been answered in the comments :)
I hope I don't get any slack for this one. But I've been looking for hours and can't seem to find the solution.
I have a jQuery script that animates a div from offscreen to 50vw and this all works great. I've then set-up a little script that first shows a loader and then the loader fades out and the content is visible. Using this code:
success: function(response) {
$(".flyin-feestinfo").fadeIn(500, function() {
$('.feestlocatie_loader i, .feestlocatie_loader p').delay(500).fadeOut(1500);
$('.feestlocatie_loader').delay(1500).fadeOut(1500);
$(".flyin-feestinfo").html(response);
});
}
This all works great, one time only. If I close the window and open the off screen div again. The previous data is still there and after a little while the new content is shown.
What I would like is to have the loader to show again and fadeout and then show the new content. Now I'm pretty new to this all and I don't know if I need an if or else statement in there to get this to work. Or that I need to clear / reset the div when closing?
Help would be much appreciated... Please let me know if you all need more info...

Related

jquery popbox not popping up

all!
I'm sure I'm asking a very basic question, but I spent a whole day on it, and just can't figure it out.
I have a table inside a tabbed box. And to the table header row I need to add a button that will pop up a box for data entry. Tabbed area works, the table displays, and the button also. But when I click on that button, nothing happens.
I'm using the following tutorial as an example
http://gristmill.github.com/jquery-popbox/example.html
Added popbox.js and popbox.css to my html code and added
$(document).ready(function() {
$("#tabs").tabs();
$('.popbox').popbox();
});
at the end of the html file.
However, it doesn't pop up. I added alerts to the method, and popbox function does get called, but bind does not seem to get executed. I added some alerts, but alerts are not triggered:
return this.each(function(){
alert("test1");
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
alert("test2");
$(settings['open'], this).bind('click', methods.open);
alert("test3");
$(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
});
As far as I see, it's not popping up because the open and close clicks are not bound. But not sure what is going on. I'm a newbie at jsp and diving head in into jquery. Apologize for newbie questions.
Thank you for your help!

Simple jQuery fade-in when document loads / no user interaction should be required

Platform: ASP.NET 3.5, ASP.NET Ajax intermixed
I'm very green to jQuery, so have been having a hard time with what I assume to be trivial.
All I need to do is create the following scenario
user logs in to my site, and I take him/her to a 'dashboard'
I want a nice little bar to 'fade in' with some information I want to draw his/her attention to
The examples on jQuery seem to suggest I need to click something to make it happen - but I don't want any user interaction. User logs in, user sees a nice fadein info bar. That's it.
I saw a few examples and can't get it to work and I have tried both the following:
(1)
$(document).ready(function () {
$("#fadein").fadein("slow");
});
(2)
$("#fadein").bind("load", function () { $(this).fadeIn(); });
My div is as follows
<div id="fadein" style="display:none;">this will fade in now yeah</div>
(PS - I have tried with display:none and without it. Made no difference)
What am I missing? What am I doing wrong? Just in case it helps
I moved the from the contentpage to the masterpage, made no difference
Any help appreciated.
The first should work, just fix the function name which is .fadeIn() instead of .fadein():
$('#fadein').fadeIn('slow');
^

Title-changing effect/window event listener does not work

I tried to search but could not find out anything useful. This is a piece of code for my Greasemonkey script. Basically, I want to have the same effect as Gmail. When the page loads and you have new messages, the title will change repeatedly and make you notice. The problem is it does not work for the first time.
For example, if the user opens the page on new tab and does not move to the page, it does not work. But if the user moves to the tab and then moves to another tab, the script works.
Can anyone point me the right direction?
function startBlink(){
window.blinkInterval = setInterval(function(){
if(document.title != "Message"){document.title = "Message";}
else{document.title = "Application";}
} , 1000);
}
function blink(){
document.addEventListener("blur",function(){setTimeout(startBlink(),1000);},false);
document.addEventListener("focus",function(){clearInterval(window.blinkInterval);},false);
}
window.addEventListener("load",blink,false);
have you thought about changing (iterating through multiple variants of) window title instead of blinking (blur/focus)? that also attracts an eye.

triggering a jQuery function n seconds after the tab/window is in view

I am using jQuery to have a promotional window opening up -say- 5 seconds after a page is loaded. But the effect is lost for people who open the page in a new window or a new tab. When they get to my tab the window will already be open.
Is there a way to get this to fire when people actually start viewing my site?
I was thinking about catching a scroll or something, but people don't get started scrolling immediately and most won't scroll at all. Other than that I am out of ideas.
I am not sure if jQuery offers a solution here... javascript?
Thanks.
the following should do the trick .. (jQuery)
<script type="text/javascript">
function initiatePopup(){
$(window).unbind('blur');
$(window).unbind('focus');
// do the popup
};
$(document).ready(
function(){
$(window).focus( initiatePopup ).blur( initiatePopup );
// your other functions should go from here on
}
);
</script>
[EDIT] on OP request..
code edited to make the example all inclusive
[EDIT 2]
The code above has been edited again because we need to handle the blur event as well.. so we take the code for the popup somewhere else in order to not duplicate it inside both events..
[EDIT 3]
if you want to pass parameters to the popup if they are created later on, then change the event binding line to
$(window).focus( function() { initiatePopup(params); } ).blur( function() { initiatePopup(params); );
and of course change the initiatePopup to accept parameters ..
Would putting a div around everything work with an onmouseover event listener? I've never tried it, so I'm not sure whether that would fire or not, but it might be worth a shot.

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});

Categories