Javascript slideshow clickable buttons - javascript

I'm looking for a little help with my javascript slideshow, for which the code was used from a tutorial on the internet. I want to basically make it so when you mouse over it stops the image from changing. Also, i'd like to have two buttons at the bottom of the slideshow such as the image below.
http://imageshack.us/photo/my-images/841/slideshowexample.jpg/
<img src="/wp-content/themes/twentyten/images/slide1.jpg" name="slide" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000)
}
slideit()
//--></div></script>
Thanks in advance,
Nick.

Unless you are just doing this as an exercise to learn more about JavaScript, a better option than a homegrown slideshow would probably be to use a DOM library. There's a pretty good tutorial on creating a slideshow with jQuery at SixRevisions.
There are also a number of pre-built slideshow plugins for the various DOM libraries jQuery has a bunch.
If you were to continue using your current code, to create the pause on mouseover you would first need to create a variable and store the result of setTimeout() in it.
var timer;
timer = setTimeout(slideIt, 5000); // note I just passed the function name instead
// of quoting an invocation. Using "slide()"
// creates an unnecessary eval() call.
You could then use the timer variable to call clearTimeout() in a mouseover event you attach to the the image. You would also need to attach a mouseout event to call setTimeout() again to restart the slide show. That said, this is a situation you should really be using setInterval() and clearInterval() instead of setTimeout().
You don't need the <!-- and //--> unless your expect you code to be running in ancient browsers like Netscape 1.0 and IE 2; all modern browsers understand JavaScript and don't need that hack to hide JS.

Related

jQuery/JavaScript wait for page to load, but no shorter than specified time

I'm having the following issue:
I want to display an overlay until the page loads completely, which works just fine.
The problem is that on fast connections the overlay would disappear immediately, which is not what I want to achieve.
I was trying to do it the following way:
$(document).ready(function(){
setTimeout(function(){
$(window).load(function(){
$('#overlay').fadeOut(1200);
});
},1500);
});
which seemed logical to me. Didn't work. I replaced setTimeout with setInterval, didn't work, too. I put the $(window).load...etc. in a function and called it with an external setTimeout, no success. The best result in regard to that additional timer was, that browsers ignored it altogether; most of the time the overlay just stays there, nothing happens.
What am I missing?
You certainly don't need $(window).load... within the setTimeout function. In fact, putting it within the timeout will ensure that it never executes since the window.load event will have already fired before you assign it your function to fadeOut the overlay.
I've adjusted my code based on your feedback. The basic principle is to determine how long it took to get everything ready and then reduce the timeout based on the time already elapsed. This way your fastest connections will still get a delay while your slowest connections will execute the fadeout immediately.
Live Demo
//Put this line in a script tag as high up on the page as possible
window.timeInMs = Date.now();
Instead of document.ready which executes after the document is loaded, use window.load which executes after the entire page has loaded (frames, objects, images) - src.
$(window).load(function(){
var maxTimeout = 1500;//Everyone waits at least this amount, including fast browsers.
//Compute the elapsed time, default to 0 if more than maxTimeout has elapsed.
var remainingTime = Math.max(maxTimeout - (Date.now() - window.timeInMs), 0);
setTimeout(function(){
$('#overlay').fadeOut(1200);
}, remainingTime);
});

iframe contents not appearing on screen even when checking for onload event javascript

We are trying to build an HTML game in which abobe edge is being used for animations and those animations are being inserted into iframes. We are trying to preload the iframes before removing the 'loading screen' so that the users won't see blank iframes initially.
Here is the code for loading the iframes.
We have a global variable var middleBotLoaded = false;
The following function tries to dynamically populate the iframe and once the iframe has loaded , we are assigning the variable to true
function _trackIFrameLoading()
{
if (document.getElementById("botzmiddleidlesequence_iframe").attachEvent)
{
document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; });
}
else
{
document.getElementById("botzmiddleidlesequence_iframe").onload = function() { middleBotLoaded = true; };
}
document.getElementById("botzmiddleidlesequence_iframe").src = APP_BASE_URL + "blitzbotzidlesequence/blitzbotz/"+middleBotzId;
}
We have a method to check if the global variable has become true and if so , we are removing the loading screen.The method is being called in a interval of 500 milliseconds
setTimeout(_haveAllCharactersLoaded,500);
function _haveAllCharactersLoaded()
{
if(middleBotLoaded == true)
{
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
});
}
else
{
setTimeout(_haveAllCharactersLoaded,500);
}
}
The problem is that even after the loading screen disappears , the iframe contents take time to come up on the screen .
We have observed that the duration depends on the speed of the net connection , but then , isn't using onload the whole point of making sure that the contents have loaded.
Is there any other approach for dealing with this problem.
Thanks.
EDIT : I have to wait for two days before I can start a bounty but I am willing to award it to anyone who can provide a canonical answer to the question.
I have two answers here.
First, I think you should reconsider the way you're coding this game, unless it's a static, turn based game that only relies upon animations (think Pokemon.)
Second, I have a suggestion for you to try in fixing your code.
First Answer:
You asked if there is any other approach to dealing with this problem.
My first reaction to that, would be to skip using iFrames entirely. Adobe Edge may provide you with a good way to craft animations, but for use in a game engine you will only find yourself fighting against the design of how Adobe Edge handles it's animations.
Instead, I would recommend learning how to use HTML5's canvas element. Canvas is built to handle dynamically loaded content (such as your game engine will be generating.) I can only imagine the event of having particle effect animation overlayed onto a game character as he is hit by a weapon. With your current approach, would you place that in an iFrame? Then, how would you ensure that this particle effect is placed on the correct location on the object?
There are many resources out there to help you begin learning the code you need to make a true game engine in the browser. I would recommend beginning by learning how Canvas works. If you want to animate using the DOM, learn about requestAnimationFrame.
http://creativejs.com/
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Second Answer:
I would recommend looking into the variable scope of your middleBotLoaded. This answer (Set variable in parent window from iframe) would be a good place to look.
Instead of using document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; });
try using document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded = true; });
Alternatively, try something along these lines:
onLoad event:
document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded();});
Function to handle loading:
function middleBotLoaded()
{
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
});
}
It's a better practice to directly call an event, rather than polling for variable changes using setTimeout.

Updating the value of variable in a java script to html

I am using canvas 3d to draw a 3d graph.So i am using java script for rotation and keypress event and so on. It works fine also.But i want to print the angle by which i have rotated the surface. I do have variable in java script which stores this value.
Now my question is how can i print the value of variable in a html body so that when i rotate the surface of canvas the value keeps on updating? If i can't do that atleast tell me the method by which i can display the value on some button click or any event.
Thank you
Write a update function like this:
function update(){
document.querySelector("#log").innerHTML = angle;
}
and call that function every time you modify your value (the click event of course is only for demonstration purposes):
document.querySelector("#square").addEventListener("click",function(){
this.style["-webkit-transform"] = "rotate("+(angle+=10)+"deg)";
update();
});
see the Demo.
You can use the function setInterval(function, time), it call a function repeated times, with time milliseconds between the execution.
setInterval(function() {
[Code That Update Your Value]
}, 100);
Or perhaps, you could install Firebug and use console.log(), console.debug() without adding new elements. I think that would be useful for other projects as well. Documentation link

Setting GIF loop count and publishing stop event using JavaScript

Is it possible to set the loop count of a GIF image using JavaScript and then publish an event when it stops playing?
For example something like:
//html code
<img src="myImage.gif" id="img1"/>
//Javascript code
var image = document.getElementById('img1');
//Image must stop playing after 3 loops
image.setLoopCount = 3;
here is how i would suggest doing it:
extract frames form gif file (you can do it online using for instace -> http://imgops.com/)
use javascript to change pictures, simulating animation (that way you can keep track of how many loops you have done)
Here is a jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/
I used jQuery. I did three loops and i threw a callback function at the end.
For a design side solution, you can set the GIF image to only loop a certain number of times with Photoshop. Then just use window.setTimeout(callback, milliseconds) to trigger your custom event.
You can calculate the time out from the interval used to display each frame of the animation.

Start slideshow with delay

I integrated a slider on my brothers website. He wants some preloading, so the the first image of the slide lasts longer than the rest, so the slider can load all images while the first image shows. Do you have any ideas how to delay just the first slide? I tried to find something inside the Javascript file but I dont think its a good Idea for me to work in the source.
Link: http://www.davidgoltz.de/2011/anna-bederke-actor/
Thank you!
Initially when you start set auto to 0 so it doesn't auto change.
Then after a delay (use setTimeout()) set auto to the new value.
i assume you know the number of images should be loaded. then you can set a counter and trigger auto change event;
var counter = 0;
$(".class-of-images-should-be-loaded").bind("load",function(){
counter++;
if(counter == n){ //n - number of images
//trigger your event
}
}
put a single class to all of the images and use it as the selector.
you can use "settimeout" either but if the connection is very slow, there might be unloaded images in slideshow.
*i used jQuery because you have jQuery library in your web page

Categories

Resources