PDA

View Full Version : Rotate CSS background images with CF

plousia
08-28-2007, 10:33 PM
I'm designing a site for which the client wants a randomly rotating banner image on the front page. I'm using a CSS background image for the banner.

I found a nifty bit of code at http://sonspring.com/journal/easy-random-css-backgrounds which will randomly rotate CSS background images. The only problem is, it's PHP. My client's site is ColdFusion, and the server does not support PHP. Is anyone familiar with a similar CF script? (I don't personally use ColdFusion, I'm just the designer).

Thanks much!
_Aerospace_Eng_
08-30-2007, 05:49 AM
Why doesn't the client just hire a coder who knows CF?
plousia
08-30-2007, 06:05 AM
...good question.

We are working with a coder who knows CF, but who doesn't know how to solve this problem.

However, we've found a solution using JS.
Shift4Sms
09-05-2007, 06:01 PM
The simpliest is to change your stylesheet.css to stylesheet.css.cfm. This way the stylesheet can be dynamically built for each request. The other option is to have multiple stylesheets defined: stylesheet1.css, stylesheet2.css, etc. Then insert some code to rotate the sheets in the head tag.
plousia
09-05-2007, 06:05 PM
I'll keep that in mind for the future, thank you.
prowodnik
10-17-2008, 01:25 AM
nice time 2all.

the thread is relative old, have somebody good ideas to rotate images in background?
I can't find helpfully information with examples in google.

Thanks a lot.
Prowodnik
Millenia
10-17-2008, 06:22 PM
I'm designing a site for which the client wants a randomly rotating banner image on the front page. I'm using a CSS background image for the banner.

I found a nifty bit of code at http://sonspring.com/journal/easy-random-css-backgrounds which will randomly rotate CSS background images. The only problem is, it's PHP. My client's site is ColdFusion, and the server does not support PHP. Is anyone familiar with a similar CF script? (I don't personally use ColdFusion, I'm just the designer).

Thanks much!

nice time 2all.

the thread is relative old, have somebody good ideas to rotate images in background?
I can't find helpfully information with examples in google.

Thanks a lot.
Prowodnik

Read the first post, it answers your question.
prowodnik
10-17-2008, 06:43 PM
I mean flip, turn images, such as turn around 15 °.

hier sonspring. com/journal/....ss-backgrounds
was it about rotation, also random output.

p.s. it was wrong words may be from me. bad English, sorry.
spongecake
11-01-2008, 01:17 AM
The simpliest is to change your stylesheet.css to stylesheet.css.cfm. This way the stylesheet can be dynamically built for each request. The other option is to have multiple stylesheets defined: stylesheet1.css, stylesheet2.css, etc. Then insert some code to rotate the sheets in the head tag.
Shift4Sms,

I stumbled on your post as part of a Google search. I want to have rotating stylesheets so that my site will load up a different stylesheet in the daytime and the nighttime.

I have previously had rotating images on the hour using the following code:

</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
now=new Date();
hour=now.getHours();
document.write("<IMG SRC='images/" + hour + ".jpg' WIDTH=100 HEIGHT=100 ALT='Not worked'>");
//-->
</SCRIPT>
</body>
</html>

Is there a way of altering this code in my .dwt file so that the stylesheet used rotates in a similar way and then just create 24 versions of my stylesheet (stylesheet1.css, stylesheet2.css to rotate)? How would I code for this?
Shift4Sms
11-03-2008, 08:29 PM
You are using ColdFusion, right? The code you have snipped is using client side JavaScript, which will work, but in my opinion it is more easily accomplished using server side CF:

...
</head>

<body>
<IMG SRC="images/#Hour(Now())#.jpg" WIDTH=100 HEIGHT=100 ALT="Not worked">
...
</body>
</html>


Using the same technique, you can rotate the entire CSS if they are hard-coded CSS:


<head>
<link rel="stylesheet" type="text/css" href="#Hour(Now())#.css" />
...
</head>


This is an easy approach if you have 24 hard-coded css files. My original posting was describing a single css file generated via CF:


<head>
<link rel="stylesheet" type="text/css" href="dynamicstylesheet.css.cfm?hour=#Hour(Now())#" />
...
</head>


and then create a CF template named "dynamicstylesheet.css.cfm". I only appended the hour URL parameter on the link in the head block to better work with browser caching. This forces the browser to cache up to 24 files, one per hour, instead of a single file which would require a F5 refresh to update (not good).