Helpful Information

Category: ColdFusion

Rotate CSS background images with CF

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!

Why doesn't the client just hire a coder who knows CF?

...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.

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.

I'll keep that in mind for the future, thank you.

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

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.

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.

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">

</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?

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).