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 img
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
**
[WSG] Randomly load images into the background-image selector...
Title: Randomly load images into the background-image selector... Does anyone know any neat code [JScript/CSS - not PHP] that can randomly load a selection of images into the 'background-image' selector? TY in advance Regards Jack Bennie Web Developer - Web Services WorkCover NSW This message, including any attached files, is intended solely for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Any views expressed in this message are those of the individual sender and are not necessarily the views of WorkCover NSW.
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 **
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...
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...
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 img / 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...
Aaaah, I over thought the situation -- I thought you wanted to *fade*
between the images, not just choose one at random...
Here you go :)
html
head
script
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'); };
/script
/head
body
div id=swapMe
Test div
/div
/body
/html
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 img
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...
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 :)
html
head
script
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'); }; /script /head
body
div id=swapMe
Test div
/div
/body
/html
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 img 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
**
