Reload Animation with JavaScript/Tabs/Iframe - javascript

I´m having a problem. I make 4 tabs using jquery, and on each tab, i open an iframe, calling another html, that have a javascript code with css3 animation.
But, there is my problem. Once you load the page, the first tab is already "open", so, that animation starts rolling. But, when i change tabs or come back to the first one, all the animations are already done...
I need the animations, to start ONLY when i open the tab, and, start over again when i come back to another tab that has already been seen.
Since the css3 code and js are too big, there´s the link to my working(problem) tabs.
http://efdutra.com/testes/abas_final.html
ps: only works on SAFARI (i´m made it that way, i just need to get it working on safari).
Thanks!!
Update
Ok, now this just start when i click on the Tab, i add this on my parent code:
function divStart1(){
document.getElementById('teste1').contentWindow.start();
};
function divStart2(){
document.getElementById('teste2').contentWindow.start();
};
function divStart3(){
document.getElementById('teste3').contentWindow.start();
};
function divStart4(){
document.getElementById('teste4').contentWindow.start();
};
And in the html i add this:
<img src="img/001_a.png">
<img src="img/002_b.png">
<img src="img/003_b.png">
<img src="img/004_b.png">
But, when i come back to a tab that have already been opened, it dont do the animation again.... what can i change now??
The new code url:
http://www.efdutra.com/testes/new/abas_final.html
Thanks!

If you move your animation script into a function, you can call that from parent window.
/* This is in your child page */
function Animate(){
// Do animation
// To restart css animation I assume you have to remove a class and add it again?
}
$(document).ready(function(){
Animate();
}
Then you can bind an event when the user changes tabs on the parent window
function OnTabSelected(){
document.getElementById('ID of iframe here').contentWindow.Animate();
}
you will need to add id's to the iframes so you can select them using this method.

Related

How do I load a element into a page within my own parameters

Goals
control when this Button element fades back into the webpage
open a URL of choice in a new window.
Current Results:
Element fades away after the on-click event hide function runs but does NOT come back without having to refresh the page.
Test:
I've tried to use letShow to allow a timer (not much success, I'm very new to Javascript.) It also did not work for my needs.
Code:
export function ElementName_click(event) {
$w("#ElementName").hide("fade");
}

Preloader does not preload and loads the page a second time

I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.
I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...
Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>

jQuery click detection outside of specified area problem

Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!
Have a look at jQuery outside events plugin to detect events outside of the specific element.

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