Re: [WSG] Randomly load images into the background-image selector...
Andrew did all the hard lifting, so I hope my comments don't come across as criticism but polish on top of good work. All code that works and is freely given is Good Code(tm). But I hope to share some stuff I've learned that may be helpful to Andrew and others, and doing it on list means I just might get the right info to the right person. So, thanks to Andrew for the code. Here are some tweaks: On Aug 24, 2005, at 6:21 PM, Andrew Krespanis wrote: function randomBG(targetObjID) { var obj, imgs, randNum; obj = document.getElementById(targetObjID); imgs = new Array(); imgs.push( 'foo.jpg'); imgs.push( 'bar.jpg'); imgs.push( 'w007.png'); The Mac IE Array object does not support the push, pop, shift or unshift methods. They are easy to simulate, so if you need to support that browser you can either attach custom methods to the prototype or run the custom code for everyone: imgs[imgs.length] = 'foo.jpg'; // push randNum = Math.random() * (imgs.length - 1); randNum = Math.round(randNum); Even though in English we often talk about "rounding numbers", you don't want Math.round() here as this will give you lopsided results. randNum is between 0 and 2, but only values less than 0.5 will give you 0, more than 1.5 will give you 2, but between 0.5 and 1.5 will give you 1 (twice the rate of the other two). What you usually want is more like: randNum = Math.random() * imgs.length; // 0 <= randNum < 3 randNum = Math.floor(randNum); // 0-0.9...= 0, 1-1.9...= 1, 2-2.9...= 2, obj.style.backgroundImage = imgs[randNum]; Although this is likely to work in many browsers, the standard way to assign values to style properties is to use the same format as if it were a stylesheet. That means: obj.style.backgroundImage = "url("+ imgs[randNum] +")"; } window.onload = function() { randomBG('swapMe'); }; You see this a lot, but for those who are learning: know this is a shorthand. Using this particular technique means you can only have one onload handler per page, as they will override each other. Better methods exist that allow you to have many such self-contained functions, but are tough to write concisely, so in code examples you almost never see them. Here are some places to look: http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html http://www.scottandrew.com/weblog/articles/cbs-events And for the Mac IE-compatible technique (that prevents you from removing the even later): http://simon.incutio.com/archive/2004/05/26/addLoadEvent I'm 90% sure I've got a script at home that does the above, but fades between the remaining images after choosing the initial one at random I say 90% sure because I remember needing that functionality for a client site but I may have ended up using an element due to problems with Opera < 7.5 and Safari < 1.1 I'm pretty sure you did it with images, not backgrounds, since backgrounds can't have their opacity changed separately from the foreground (until CSS3, but that's only with colors in rgba format, I think). -- Ben Curtis : webwright bivia : a personal web studio http://www.bivia.com v: (818) 507-6613 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Randomly load images into the background-image selector...
Hey Andrew, I'd like to see a script that does that! Have fun digging. Regards, Ryan -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Andrew Krespanis Sent: Thursday, 25 August 2005 11:21 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Randomly load images into the background-image selector... Aaaah, I over thought the situation -- I thought you wanted to *fade* between the images, not just choose one at random... Here you go :) function randomBG(targetObjID) { var obj, imgs, randNum; obj = document.getElementById(targetObjID); imgs = new Array(); imgs.push( 'foo.jpg'); imgs.push( 'bar.jpg'); imgs.push( 'w007.png'); randNum = Math.random() * (imgs.length - 1); randNum = Math.round(randNum); obj.style.backgroundImage = imgs[randNum]; // Uncomment followning line to test //alert(imgs[randNum]); } window.onload = function() { randomBG('swapMe'); }; Test div Valid xhtml1.1... NOT! ;) (at least the script is application/xhtml+xml friendly) The next step for this script would be to adapt it to OOD, thereby allowing other scripts to add to the imgs array without needing to resort to global var's. I'm 90% sure I've got a script at home that does the above, but fades between the remaining images after choosing the initila one at random I say 90% sure because I remember needing that functionality for a client site but I may have ended up using an element due to problems with Opera < 7.5 and Safari < 1.1 If you're interested in that one, respond and I'll go digging tonight. Cheers, Andrew. http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Randomly load images into the background-image selector...
Aaaah, I over thought the situation -- I thought you wanted to *fade* between the images, not just choose one at random... Here you go :) function randomBG(targetObjID) { var obj, imgs, randNum; obj = document.getElementById(targetObjID); imgs = new Array(); imgs.push( 'foo.jpg'); imgs.push( 'bar.jpg'); imgs.push( 'w007.png'); randNum = Math.random() * (imgs.length - 1); randNum = Math.round(randNum); obj.style.backgroundImage = imgs[randNum]; // Uncomment followning line to test //alert(imgs[randNum]); } window.onload = function() { randomBG('swapMe'); }; Test div Valid xhtml1.1... NOT! ;) (at least the script is application/xhtml+xml friendly) The next step for this script would be to adapt it to OOD, thereby allowing other scripts to add to the imgs array without needing to resort to global var's. I'm 90% sure I've got a script at home that does the above, but fades between the remaining images after choosing the initila one at random I say 90% sure because I remember needing that functionality for a client site but I may have ended up using an element due to problems with Opera < 7.5 and Safari < 1.1 If you're interested in that one, respond and I'll go digging tonight. Cheers, Andrew. http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Randomly load images into the background-image selector...
On 8/24/05, Bennie, Jack <[EMAIL PROTECTED]> wrote: > Does anyone know any neat code [JScript/CSS - not PHP] that can randomly > load a selection of images into the 'background-image' selector? Should be simple. Merely dig up any decent image fade script and replace the 'image swap' with this: //obj = element whose BG you wish to animate //newImage = 'images/foo.jpg'; obj.style.backgroundImage = newImage; You may find that you need to pre-load the image in an element (created within DOM, but not displayed), so that the background is not initially blank when the script switches the background image src. hope that helps :) Andrew. http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Randomly load images into the background-image selector...
For IE only, you can use Microsoft's proprietary "expression" extension to execute JavaScript from the stylesheet, e.g.: div#header { width: expression("window.clientWidth / 2"); } Use of expression() is currently* an IE-only filter, e.g.: div#blob { width: 100px; /* all browsers */ width: expression("98px"); /* IE only */ } * If other browsers incorporate expression() in the future, this hack will obviously fail to pinpoint IE. Paul At 03:50 PM 8/24/2005, Patrick H. Lauke wrote: Nick Gleitzman wrote: On 24 Aug 2005, at 6:47 PM, Bennie, Jack wrote: Does anyone know any neat code [JScript/CSS - not PHP] that can randomly load a selection of images into the 'background-image' selector? Which makes me wonder - will a browser call and execute javascript if it's contained within, or linked from, a CSS file? I certainly hope not, as CSS can't contain JS, and there is no mechanism in CSS to link to a JS file. The javascript would need to be called from the (X)HTML, of course... -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Randomly load images into the background-image selector...
Nick Gleitzman wrote: On 24 Aug 2005, at 6:47 PM, Bennie, Jack wrote: Does anyone know any neat code [JScript/CSS - not PHP] that can randomly load a selection of images into the 'background-image' selector? Which makes me wonder - will a browser call and execute javascript if it's contained within, or linked from, a CSS file? I certainly hope not, as CSS can't contain JS, and there is no mechanism in CSS to link to a JS file. The javascript would need to be called from the (X)HTML, of course... -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Randomly load images into the background-image selector...
On 24 Aug 2005, at 6:47 PM, Bennie, Jack wrote: Does anyone know any neat code [JScript/CSS - not PHP] that can randomly load a selection of images into the 'background-image' selector? Which makes me wonder - will a browser call and execute javascript if it's contained within, or linked from, a CSS file? N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **