There is a panel on my page with no default background-image css. On load it is set with jquery to an initial image, waits for 10 seconds then loads a random image out of some predetermined images. There are previous and next buttons which allow you to cycle through the images. In ie6 the initial image loads and then a random image also loads after 10 seconds, however pressing prev/next causes the background to become white and the images aren't loaded. With alerts I was able to find that it's still keeping track of the position and url of the image it's supposed to load, but just won't load it. Here is the code below.
<script type="text/javascript">
var facts = new Array();
var position;
$(document).ready(function() {
<xsl:for-each select="$currentPage/ancestor-or-self::node[#level=1]/../node[#nodeName='Fun Fact Folder']/node">
facts[<xsl:value-of select="position()" />] = '<xsl:value-of select="." />';
</xsl:for-each>
if(window.location.pathname == "/homepage.aspx" || window.location.pathname == "/") {
$(".fun_facts_bg").css("background-image", "url(images/fun_fact_homepage.JPG)");
setTimeout("randomFact()",10000);
} else {
randomFact();
}
});
function randomFact() {
$("a.previous_button").css("display", "block");
$("a.next_button").css("display", "block");
position = Math.ceil(Math.random() * (facts.length - 1));
changeFact(0);
}
function changeFact(increment) {
position = checkPosition(position, increment);
$(".fun_facts_bg").css("background-image", "url(" + facts[position] + ")");
}
<xsl:text disable-output-escaping="yes"><!--//--><![CDATA[//><!--
function checkPosition(currentPos, increment) {
currentPos = currentPos + increment;
if (currentPos > facts.length - 1) {
currentPos = 1;
} else if (currentPos < 1) {
currentPos = facts.length - 1;
}
return currentPos;
}
//--><!]]></xsl:text>
</script>
<a class="previous_button" href="javascript:void(0);" onclick="changeFact(-1);">
<a class="next_button" href="javascript:void(0);" onclick="changeFact(1);">
I'm pretty sure you should be using a modulus somewhere to ensure that you stay within the intended range. That may help.
Related
I have an embedded HTML page containing a single table of event results. I have found the code below which perfectly gives a continuous scroll, however I which to be able to pause for say 10 seconds at both the top and bottom before continuing.
How do I intercept the top and bottom and insert the pause?
Any suggestions would be much appreciated.
/*
Advanced window scroller script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1
function initialize() {
startit()
}
function scrollwindow() {
if (document.all)
temp = document.body.scrollTop
else
temp = window.pageYOffset
if (alt == 0)
alt = 1
else
alt = 0
if (alt == 0)
curpos1 = temp
else
curpos2 = temp
if (curpos1 != curpos2) {
if (document.all)
currentpos = document.body.scrollTop + 300
else
currentpos = window.pageYOffset + 1
window.scroll(0, currentpos)
}
else {
currentpos = 0
window.scroll(0, currentpos)
}
}
function startit() {
setInterval("scrollwindow()", 25)
}
window.onload = initialize
Since setInterval is a basic javascript function, which runs a function every n-seconds, you set a global variable to capture that "interval", then cancel it when the user performs some action (click on a button). Then resubmit the setInterval to start running in the future, or tie it back to another onClick event. An example would be to have a button that will toggle the setInterval on and off, which will act as a pause/run.
Below is an example of how you could set this up. I have not tested it, so there may be some use cases that could cause issues.
var myInterval = null;
function startit() {
myInterval = setInterval("scrollwindow()", 25)
}
Then to cancel the interval:
function stopInterval() {
clearInterval(myInterval);
myInterval = null;
}
Example of how to toggle the interval on and off:
function toggleInterval() {
if ( myInterval ) {
stopInterval();
}
else {
startit();
}
}
Then just add it to any html element, or a button. This example is assuming the css is locked at the top of the scrollable pane so the user could always have access to click it.
<span onClick="toggleInterval()">Click to pause/continue scrolling.</span>
<button onClick="toggleInterval()">Pause/Scroll</button>
I am relatively new to coding. I downloaded a html template that is a timeline that I want to use for a project I am busy with. I am not using this as a website or to sell it or anything it is merely educational. I know how to edit the html and change it to my own words and add images etc. My problem is, I think, with the javascript. So what happens is,when you scroll on the timeline and it gets to an image the background changes to the active image and so it changes to every different image on the timestamps.
When i add new html code to essentially add more timestamps to the timeline the new timestamps image does not appear as the background. It seems as if it has a set length. I am completely clueless when it comes to javascript and would really appreciate it if someone could assist me with this. Here is the js file:
(function($) {
$.fn.timeline = function() {
var selectors = {
id: $(this),
item: $(this).find(".timeline-item"),
activeClass: "timeline-item--active",
img: ".timeline__img"
};
selectors.item.eq(0).addClass(selectors.activeClass);
selectors.id.css("background-image", "url(" + selectors.item.first().find(selectors.img).attr("src") + ")");
var itemLength = selectors.item.length;
$(window).scroll(function() {
var max, min;
var pos = $(this).scrollTop();
selectors.item.each(function(i) {
min = $(this).offset().top;
max = ($(this).height() + $(this).offset().top);
var that = $(this)
if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
selectors.item.removeClass(selectors.activeClass);
selectors.id.css("background-image", "url(" + selectors.item.last().find(selectors.img).attr('src') + ")");
selectors.item.last().addClass(selectors.activeClass)
} else if (pos <= max - 40 && pos >= min) {
selectors.id.css("background-image", "url(" + $(this).find(selectors.img).attr('src') + ")");
selectors.item.removeClass(selectors.activeClass);
$(this).addClass(selectors.activeClass);
}
});
});
}
})(jQuery);
$("#timeline-1").timeline();
The HTML:
<div class="timeline-item" data-text="Text">
<div class="timeline__content"><img class="timeline__img" src="BG1.jpg"/>
<h2 class="timeline__content-title">
7 October 9:53 PM</h2>
<p class="timeline__content-desc">Text</p>
</div>
</div>
I want to display a few animated "illustrations" on a website I'm working on.
.gif is not an option due to significant loss of quality.
Is there any solution out there that would allow me to iterate through a folder of PNG's and display them on screen?
Thanks in advance.
something like this will work if the images are named 1.png through 25.png for example.
var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;
function pngani() {
if (i <= slides) {
$('#show img').attr('src', 'pathtofile/' + i + '.png');
}
i++;
}
$('#start').click(function () {
timer = setInterval(pngani, delay);
pngani();
});
$('#pause').click(function () {
clearInterval(timer);
timer = null;
});
$('#reset').click(function () {
i = 1;
$('#show img').attr('src', 'pathtofile/' + i + '.png');
});
I added a start, pause, and reset button, so the execution can be controlled.
made a fiddle: http://jsfiddle.net/filever10/Kur9u/
I am creating kind of a slideshow in jQuery and on each click of the next button, I need the image src to increase. The file names of the images are 1,2,3,4,5,6,7,8,9,10,11, so I tried using a for loop. But since I'm no javascript/jquery guru, I can't think of other ways to solve my issue and make it actually work.
With my code, nothing happens at all.
This is what I've tried:
$('#right_arrow').click(function()
{
for (i = 1; i <= 11; i++)
{
$('#produkti').attr('src', 'style/images/produktet/' + i + '.gif');
}
});
And this is the actual html for the image:
<img src="style/images/produktet/1.gif" alt="Produkti 1" id="produkti" />
you can not assign one id to same 11 images, it will never work, jquery/javascript will always pick the first element with specified id.
You should use class and pick image element by index.
$('#right_arrow').click(function()
{
for (i = 1; i <= 11; i++)
{
$('.produkti').get(i-1).attr('src', 'style/images/produktet/' + i + '.gif');
}
});
and html here:
<img src="style/images/produktet/6.gif" alt="Produkti 6" class="produkti" />
The logic is - Every time you click that button, the index will return to 1.
for (i = 1; i <= 11; i++)
What you'll need to do, is have a global variable .. say var imgIndex Then, your code should be -
// somewhere ABOVE.. probably the head tag...
var imgIndex = 0;
$('#right_arrow').click(function()
{
$('#produkti').attr('src', 'style/images/produktet/' + imgIndex + '.gif');
imgIndex++;
});
Keep in mind you'll have to reset this imgIndex value when it reaches max.
This is a way to do this with an "auto loop" (when right arrow is clicked and current image is number 11, current image will be number 1)
var current = 6;
$('#right_arrow').click(function()
{
current = (current + 1 <= 11) ? (current + 1) : (1);
$('#produkti').attr('src', 'style/images/produktet/' + current + '.gif');
});
Here's an idea with data tags.
HTML:
<img src="style/images/produktet/1.gif" data-slide="1" data-max="9"/>
JS:
$("#right_arrow").click(function(){
var img = $("#produkti");
var slide = img.data().slide;
var max = img.data().max;
if(slide <= max){
slide ++;
img.attr('src', 'style/images/produktet/' + slide + '.gif');
img.data().slide = slide;
}
});
I have a array of static images that I am using for an animation.
I have one frame image that I want to update the image of and I have seen a lot of tutorials on animating images with javascript just simply update the source of an image.
frame.src = animation[2].src; etc
When I look at the resource tracking in chrome, it doesnt look like they are getting cached even thought the web browser does download the image more than once but not once for each time it is displayed, so there is still some browser caching going on.
What is the best way to replace the frame image object with another image?
Well, you can either position all images absolute and give them a z-index, then use jQuery/JS to shuffle their z-indexes, bringing a new one to the top in a cross fader style,
or you can take all the id's and fadeone in slightly faster than the last one fades out.
Like so:
function fader(func) {
var currID = $('#mainimg ul').data('currLI');
var currLiStr = '#mainimg ul li#' + currID;
img = $(currLiStr).find('img').attr('src');
nextID = (currID == 'six') ? 'one' : $(currLiStr).next().attr('id');
nextLiStr = $('#mainimg ul li#' + nextID);
$(currLiStr).fadeOut(3000);
$(nextLiStr).fadeIn(2000).find('div.inner').delay(3000).fadeIn('slow').delay(6000).fadeOut('slow');
$('#mainimg ul').data('currLI',nextID);
}
Note 'six' is the id of the last li, reseting it back to one, but if you do $('#mainimg ul li:last').attr('id'); and $('#mainimg ul li:first').attr('id') to get the last and first id's, you can allow it to cope with any amount of images (obviously this is with li's given id's one, two and so on, but if you are finding out the last and first id you could use any structure.
Or you can set a ul width a width of all the li's multiplied, and give the li's the width of the images, and set overflow to hidden, then use JS to pull the li's left by the width of 1 li on each iteration in a slider like I have done here: http://www.reclaimedfloorboards.com/
There are loads of options
I ended up using jquery's replaceWith command and gave all the frames a class "frame" that i could select with $('.frame') which happened to only select visible frames.
<script type="text/javascript">
var animation = [];
var firstFrame = 1;
var lastFrame = 96;
var animationFrames = 16;
var loadedImageCount = 0;
$(function() {
$("button, input:submit",'#forecastForm').button();
$("#progressbar").progressbar({
value: 0
});
$('#id_Species').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
$('#id_Layer').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
$('#id_StartTime').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
$('#id_EndTime').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
});
if (document.images) { // Preloaded images
loadAnimation('Dry_GEM',1,1,96);
}
function rotate(animation, frame)
{
if (frame >= animation.length)
frame = 0;
$('.frame').replaceWith(animation[frame]);
window.setTimeout('rotate(animation,'+eval(frame+1)+')',150);
}
function loadAnimation(species, layer, startTime, endTime)
{
layer = Number(layer);
startTime = Number(startTime);
endTime = Number(endTime);
if (startTime > endTime)
{
swap = startTime;
startTime = endTime;
endTime = swap;
delete swap;
}
for (i=0;i<animation.length;i++)
delete animation[i];
delete animation;
animation = []
$('#progressbar').progressbar({value: 0});
loadedImgCount = 0;
animationFrames = endTime - startTime + 1;
for(i=0;i < animationFrames;i++)
{
animation[i] = new Image();
animation[i].height = 585;
animation[i].width = 780;
$(animation[i]).attr('class','frame');
animation[i].onload = function()
{
loadedImgCount += 1;
$('#progressbar').progressbar({value: eval(loadedImgCount / animationFrames * 100)});
};
animation[i].src = 'http://[[url]]/hemi_2d/' + species + '_' + layer + '_' + eval(i+startTime) + '.png';
}
}
</script>
The easiest way to do it is create a separate hidden image for each frame. Something like this:
var nextImage = (function(){
var imagePaths='basn0g01.png,basn0g02.png,basn0g04.png,basn0g08.png'.split(','),
imageHolder=document.getElementById('custom-header'),
i=imagePaths.length, imageIndex=i-1, img;
for (;i--;) {
img=document.createElement('img');
img.src='http://www.schaik.com/pngsuite/' + imagePaths[i];
if (i) img.style.display='none';
imageHolder.appendChild(img);
}
return function(){
imageHolder.childNodes[imageIndex].style.display='none';
if (++imageIndex >= imageHolder.childNodes.length) imageIndex=0;
imageHolder.childNodes[imageIndex].style.display='inline-block';
}
}());
Try this example on this page; paste it in the console and then call nextImage() a few times. Watch the top of the page.
edit
If you already have all the images in your HTML document, you can skip most of the above and just do something like this:
var nextImage = (function(){
var imageHolder=document.getElementById('custom-header'),
images=imageHolder.getElementsByTagName('img'),
i=images.length, imageIndex=0, img;
for (;i--;) if (i) images[0].style.display='none';
return function(){
imageHolder.childNodes[imageIndex].style.display='none';
if (++imageIndex >= imageHolder.childNodes.length) imageIndex=0;
imageHolder.childNodes[imageIndex].style.display='inline-block';
}
}());