Lucy

Oh... I just took out the console.log statements in the fade function above and now it takes less time. Also, when Firefox takes 500ms, internet explorer 8 takes... 2700. I don't even know what to do about that. Ingolme - ah. Okay, I'll use 16ms.

Thanks Davej, I'll try that in a moment. Dsonesuk - they're about 7.9kb each, and I'm testing this locally. I do see what you're saying, but this doesn't happen on the initial page load (only after refreshing), so it can't be simply that they are too large to load quickly enough, surely? Also, I tried setting the interval for the image change to 5 seconds, and it still happens. Edit - I added this: for (var h = 0; h < patterns2.length; h++) { patterns2[h].addEventListener(onload, console.log('loaded'));}; And it seems that all the images are immediately loaded on page load - there wasn't any delay, really. By the way, I'm having an issue related to this and wondered if anyone could help (wasn't sure whether to make a new thread as it's part of the same thing): This is the code for the fade effect (sans adjustments for IE8): var fO = 1;var fI = 0;var step = 5;function opacity(opac, layer) { var o = opac.toString(); layer.style.opacity=o;}function fadeEffect(layer) {if (fO === 1) { originalD = new Date().getTime(); console.log(originalD);}; if (fO > 0) { console.log('Fading out'); opacity(fO, layer); fO -= 0.04; if (fO <= 0) { fI = 0; }; } else if (fO < 0 && fI < 1) { console.log('fading in'); opacity(fI, layer); fI += 0.04; } else { clearInterval(fTiming); fO = 1; newD = new Date().getTime(); console.log(newD - originalD); };}fTiming = setInterval(function() {fadeEffect(tLayer)}, step); This function will run 50 times before cancelling the interval. If there are 5 milliseconds (var step) between each interval, the total time taken to run should be 5 x 50, so 250 milliseconds, right? However, after running it five times it took: 1147 ms, 1155 ms, 1176 ms, 1309 ms and 1184 ms.Now if I set 'step' to 30 instead, it should take 1500ms. The times I get: 1529ms, 1557ms, 1505ms, 1571ms, 1536ms.And set 'step' to 100ms: 4994ms, 5007ms, 4994ms.These two examples are clearly much more precise. More like what I'd expect.Basically, going below 30ms, the accuracy get worse to the point where if step is set to 1ms, the function takes anywhere from 600ms - 1500ms, when it should take 50.I looked into this, but all I found was some places saying there's a minimum delay of 4ms in some browsers, which doesn't explain this problem. Also, I disabled everything else on the page, so this is currently the only function running.The problem with this is that I need to know how long the function consistantly takes to run, so I can set it to run at the right time to coincide with the background change.

You're right - I think the problem was actually that the variable was (accidently) a negative number.

Yeah, I spent ages figuring that one out, lol. This still isn't quite fixed, as it turns out - but now the IE developer tools window has gone and won't come back so I can't use console.log statements to figure out what's going on. Fun.

Turns out it has a problem with using a variable as the number of milliseconds.

Hm.. it doesn't even run once, though? Also, I'm clearing the interval each time this function runs.

This (part of a function) does not work in IE8: fTiming = setTimeout( function() { fTiming = setInterval( function() { fadeEffect(tLayer); }, step); },fadeTime); 'fadeEffect' does work, and it works if I use setTimeout with it, but the above code literally does nothing, and I don't even get any error messages. It works in Firefox, Opera and Chrome. Does anyone know why?

The function does wait 1.5 seconds before trying to use them. Shouldn't that be long enough? There are only 6 images. And this is only happening on refreshing the page - the first time you open the browser (with cleared history etc) it works fine.

I just tried using new Image(), it still does it. This is now only happening in Firefox - and it doesn't happen on my husband's computer (also Firefox. And his browser has like 100 tabs running at a time...). I had a look at the developer tools in chrome but it doesn't seem to happen in that browser. So not in Opera, Chrome, or IE8. So maybe I just need to re-install Firefox? If it only happens in Firefox on my computer, can I assume there's not much I can do about it and it will work mostly fine for other people?

I am kind of confused about this. As in my previous post, if the cache/history is cleared the animation works fine... but if I refresh the page, it goes back to being jittery for the first 'loop' of the animation. Does anyone understand what's going on here?

Dsonesuk - Sorry, I struggled to understand your code. I wrote this to pre-load the images though: function addImage(source, arr) { arr.push(document.createElement("img")); arr[arr.length-1].setAttribute("src", source);}//load imagesvar patterns2 = [];addImage('images/bg2/square-01.png', patterns2);addImage('images/bg2/square-02.png', patterns2);addImage('images/bg2/square-03.png', patterns2);addImage('images/bg2/square-04.png', patterns2);addImage('images/bg2/square-05.png', patterns2);addImage('images/bg2/square-06.png', patterns2); (Then my code uses the array to iterate through the images, switching them around as the background image for one div) After the first loop through, the animation is smooth, but on the first, it's still quite 'flickery'. Have I done it wrong? Edit - This might be working, actually. I checked in Opera and it runs smoothly, cleared history + cache in Firefox and it works properly in that now too. Thanks! I never would have thought of pre-loading them. The menu I was originally referring to - what I meant was, I've been using actual images (large enough to cover the page) stored in a single div, as 'backgrounds', animating them by switching the displays around, making the other images invisible. So if you right click, it displays the default Firefox 'image' menu ('save image as', etc). I wanted to try and change that so it just showed the normal right-click menu ('refresh', etc). Does that make more sense than my original explanation? Nonetheless, the solution you're suggesting sounds better than trying to mess around with the default browser menus.

dsonesuk - Sorry, I'll give more detail tommorow. I can't change the background image of a single div because it causes the animation to flicker a lot - I looked into it, and it seemed the answer was that you can't keep loading large background images without some lag - so the images need to be pre-loaded in some way. davej - Thanks for the link, though I am trying to avoid using Jquery until I have a good knowledge of Javascript. I did see something about being able to create your own menu which I think is what you're suggesting, though I was originally thinking there was a way to simply switch to another pre-existing menu instead.

Okay, I take it this can't be done. In that case, another question: an alternative solution would be for me to use about 6 divs, and set the background image for each div and hide the divs, rather than using a selection of images in a single div. This would solve the problem of the image menu on right-click anywhere on the page. But it seems...messy. What do you all think? (I was initially using one div and changing the background image, but this makes the animation jittery due to the constant loading...)

I'm creating an animated background for my site, but this currently seems to require me to store my images in a div, rather than as background images - hence, if you right click on most areas in the page, the 'image' menu is displayed rather than the one which has 'refresh', etc in it (I don't know if these menus have official names...). This is already annoying me horrendously, so I imagine it would annoy users too. I know you can completely disable menus on right click, but that doesn't seem very user friendly. Suggestions?

Yeah, I tried that too, but it detected moving through the menu as 'leaving', unfortunately. Resulting in the menu constantly fading in and out.

Well, I understand that, but the problem is getting it to hide the menu when it isn't being hovered over. I came up with this just now, though, which seems to work : function getParents(elem) { var a = elem; var parents = []; while (a) { a = a.parentElement; parents.push(a); } console.log(parents.indexOf(menu)); if (parents.indexOf(menu) >= 0) { show(); } else { hide(); }; } Also, thanks for the link! I didn't know you could use CSS. I'm mainly doing this to practice Javascript, but still, good to know.

I'm trying to write something that will detect whether my drop down menu is being hovered over (hence, show the menu) or not (hide the menu). This solution does work: document.onmouseover = function(event) { if (event.target.parentElement === null || event.target.parentElement.parentElement === null || event.target.parentElement.parentElement.parentElement === null) { hide(); } else if (event.target.parentElement === menu || event.target.parentElement.parentElement === menu || event.target.parentElement.parentElement.parentElement === menu) { show(); } else { hide(); }; However, I have two problems with it. First, it's not exactly succinct. Second, presumably if the DOM were altered in some way it might not work anymore. I did come up with this function to be used in place of the code block above: function getParents(elem) { var a = elem; var parents = []; while (a) { a = a.parentElement; parents.push(a); } for (var b = 0; b < parents.length; b++) { if (parents[b] === menu) { show(); break; } else { hide(); }; }; } However, that doesn't work properly, as each time you hover over one of the menu items it re-shows the menu. Can anyone suggest another way of doing this (don't worry about writing the code out for me, I just need a hint)? If you need more code, let me know, wasn't sure how much to post as it's quite long.

I'm not sure the function should be in quotes, might be wrong though.

Edit: Never mind, I'd done something wrong with the CSS, all fixed now. This can be deleted.

Thanks guys, it's fixed now

Okay, I see. Thing is, it's set up so on the page load, it takes the number of seconds until the next minute and waits until they have passed before changing the time, and thereafter changes it every 60 seconds - so the time is accurate. Hm... if I assigned the interval to a variable, do you think that would solve it? It would replace the interval each time rather than add one then, right? Though now I write it out it seems silly... :/

I've written code that displays the current date and time on my home page. After a while, though, the browser completely freezes. This probably has something to do with using up memory? Though I don't understand how. If anyone could look at my code, I'd be grateful. Thanks! "use strict";var dp = document.getElementById("homedate");var tp = document.getElementById("hometime");var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];var months = ['January', 'February', 'March', 'April', 'June', 'July', 'August', 'September', 'October', 'November', 'December']var origD = new Date();var seconds = origD.getSeconds();var rem = (60 - seconds) * 1000;function convertDate() { var day = origD.getDay(); var month = origD.getMonth(); var year = origD.getFullYear(); var date = origD.getDate(); switch(date) { case 1, 21, 31: date = date + 'st'; break; case 2, 22: date = date + 'nd'; break; case 3, 23: date = date + 'rd'; break; default: date = date + 'th'; break; }; return days[day - 1] + ', ' + months[month] + ' ' + date + ' ' + year;}function convertTime() { var hours = origD.getHours(); var minutes = origD.getMinutes(); if (minutes < 10) { minutes = '0' + minutes; }; if (hours > 12) { hours = hours - 12; return hours + ' : ' + minutes + ' pm'; } else { return hours + ' : ' + minutes + ' am'; };}window.onload = function() { dp.textContent = convertDate(); tp.textContent = convertTime();};function refreshTime() { origD = new Date(); tp.textContent = convertTime(); setInterval(refreshTime, 60000);}setTimeout(refreshTime, rem);

If I have a function written up, and I want to use it 'onchange', why does it have to be placed within a function? I'll show you what I mean: function changeColour() { box.style.color="blue";}box.onchange = function(){ changeColour();}; This would work ^ function changeColour() { box.style.color="blue";}box.onchange = changeColour(); Whereas this wouldn't ^ (I think this applies to onclick, etc, too. )

I now have this code: "use strict";var box = document.getElementById("slideshowbox");var imageHolder = document.getElementById("slideimage");var captions = document.getElementById("captions");var para = document.createElement("p");var pp = document.getElementById("pauseplay");var back = document.getElementById("back");var forward = document.getElementById("forward");var oddeven = 0;function dog(name, age, breed, gender, imagesrc) { this.name = name; this.age = age; this.breed = breed; this.gender = gender; this.image = imagesrc; this.showInfo = function() { para.innerHTML = ''; imageHolder.innerHTML = ''; var picture = document.createElement("img"); picture.setAttribute("src", this.image); picture.setAttribute("alt", this.name); imageHolder.appendChild(picture); para.appendChild((document.createTextNode('Name: ' + this.name))); para.appendChild((document.createElement("br"))); para.appendChild((document.createTextNode('Age: ' + this.age))); para.appendChild((document.createElement("br"))); para.appendChild((document.createTextNode('Breed: ' + this.breed))); para.appendChild((document.createElement("br"))); para.appendChild((document.createTextNode('Gender: ' + this.gender))); captions.appendChild(para); }}var bernie = new dog('Bernie (pos 1)', '2 yr', 'Bernese Mountain', 'm', 'images/bernese.jpg');var fiona = new dog('Fiona (pos 2)', '5 yr', 'Dalmation', 'f', 'images/dalmation.jpg');var malty = new dog('Malty (pos 3)', '10 yr', 'Leonberger', 'm', 'images/leonberger.jpg');var shep = new dog('Shep (pos 4)', '8 months', 'German Shepherd', 'm', 'images/alsation.jpg')var dogs = [bernie, fiona, malty, shep];function slideShow() {var fadeInCancel;var fadeOutCancel;var fadeCounter;var j = 0;var k = 1;var o;var paused = false;var fadeInRunning = false;var fadeOutRunning = false;var timing;function opacity(opac) { o = opac.toString(); box.style.opacity = o;}function fadeIn() {fadeInRunning = true; if (paused === true) { j = 0; opacity(1); } else if (j <= 1.03) { opacity(j); j += 0.06; setTimeout(fadeIn, 50); } else if (j === 1.0200000000000005 || j === 1.0800000000000005) { opacity(1); }; if (j > 1) { fadeInRunning = false; };}function fadeOut() {fadeOutRunning = true; if (paused === true) { k = 1; opacity(1); } else if (k >= 0) { opacity(k); k -= 0.06; setTimeout(fadeOut, 50); } else if (k === -0.020000000000000406) { opacity(0); }; if (k < 0) { fadeOutRunning = false; };}//on pause/play//pp.onclick = function() { function pause() { paused = true; pp.value = 'Continue'; opacity(1); if (secsLeft < 0) { secsLeft = 0; }; } function play() { paused = false; console.log('Continued'); pp.value = 'Pause'; } if (oddeven % 2 === 0) { pause(); } else { play(); }; oddeven++;};var counter = 0; function x() { //forwards/backwards// forward.onclick = function() { paused = true; console.log(paused); if (counter >= dogs.length) { counter = 0; }; console.log('Going forward'); counter = counter + 1; if (counter >= dogs.length) { counter = 0; }; paused = false; dogs[counter].showInfo(); }; back.onclick = function() { paused = true; console.log('Going backward'); counter = counter - 1; if (counter < 0) { counter = dogs.length -1; }; paused = false; dogs[counter].showInfo(); }; //main// if (paused === false) { fadeOutRunning = false; //k === 1 means that fadeout wasn't finished before the pause// if (k === 1 && fadeInRunning === false) { counter--; fadeOut(); }; if (counter < dogs.length) { if (paused === false && fadeOutRunning === false) { j = 0; fadeIn(); }; if (fadeOutRunning === false) { captions.innerHTML = ''; dogs[counter].showInfo(); }; k = 1; if (fadeOutRunning === false) { setTimeout(fadeOut, 3900); }; counter++; if (counter >= dogs.length || counter < 0) { counter = 0; }; j = 0; }; }; }timing = setInterval(x, 10000);}slideShow();} The problem is that if you pause as it is fading out, then continue, it waits for 1-5 seconds on the still image (it varies... haven't figured out why) before fading out again and going onto the next slide. I don't know where this delay is coming from. I've disabled the fade in function, I've changed the interval to ten seconds for the slideshow to check it isn't that (because if it was, the delay would be longer). If I put a console.log statement right after 'if (paused === false)' that is also delayed. So the delay is happening right at the beginning of that section of code. Any ideas?

Question relating to this: If a function is run every five seconds, but something makes the function take longer than that - what happens? Does it wait for the function to complete, then wait five seconds before running again, or is the function interrupted after five seconds? Edit - never mind, found the answer - it waits