Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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-ra...ss-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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why doesn't the client just hire a coder who knows CF?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...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.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Las Vegas, NV - USA
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Steven Sommers (blog)
    Shift4 Corporation -- www.shift4.com

    Creators of $$$ ON THE NET(tm) payment processing services.

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

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

  • #6
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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

  • #7
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by plousia View Post
    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-ra...ss-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!
    Quote Originally Posted by prowodnik
    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.

  • #8
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Shift4Sms View Post
    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?

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Location
    Las Vegas, NV - USA
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    ...
    </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:

    Code:
    <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:

    Code:
    <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).
    Steven Sommers (blog)
    Shift4 Corporation -- www.shift4.com

    Creators of $$$ ON THE NET(tm) payment processing services.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •