Help with css and javascript! (8 posts)

  1. jimmyinc
    Posted 8 years ago #

    I am editing my header to display a random header background on each load.

    I have the function randImg() defined in header.php, with a <body onload="randImg()"> as the first <body> tag.

    So, would I put randImg() in like this <below>;

    height: 115px; /*185*/
    background: randImg() no-repeat;
    padding: 70px 0 0 0;
    text-align: center;

    Right now it is not working like that.
    And I don't know what will.

    Can anyone help me?

    My blog url is http://www.jimmyinc.com

  2. Hafiz Rahman
    Posted 8 years ago #

    since that's a CSS code right there, I assume that randImg() function is called within style.css? JavaScript does not work inside CSS file AFAIK.

    An idea I once saw in a theme is to use javascript to randomly change the class of the header div, and then inside the CSS file you create several declarations for each class, each having different background image. For example, in the CSS file you'll have:

    .subheader-1 {
    background: url(your/image-1.jpg) no-repeat;
    .subheader-2 {
    background: url(your/image-1.jpg) no-repeat;
    .subheader-3 {
    background: url(your/image-1.jpg) no-repeat;

    And in the header.php you use javascript to assign one of these class, randomly, into the subheader div. I hope I explain it clear enough.

  3. jimmyinc
    Posted 8 years ago #

    What would I use as the javascript in header.php then?

    Thanks in advance ;)

  4. mad0214
    Posted 7 years ago #

    I'm curious about this also. I've been having a lot of problems trying to get a random clickable ad/image rotation script to work in my header.

  5. drewactual
    Posted 7 years ago #

    do it with php also is my advice...

    use this code:

    $quotes = ('http://www.yourdomain.com/picsmap.txt');
    $quotes = file($quotes);
    srand((double)microtime() * 1000000);
    $ranNum = rand(0, count($quotes)-1);
    <?php echo ($quotes[$ranNum]); ?>

    make that a file... call it bannerrotationpictures.php- or whatever :-), but then you are going to want to change where it points (in the above example it is yourdomain.com/picsmap.txt)... that file must be a txt file, with an address to a picture on each line.. in other words a url to a picture and a line break...example:


    get it?
    it works well, and reloads with a different random pic every time the page is reloaded...

    I use it for ads on one of my blog/webpages.. here and here ... but it can work for a lot of things...

    one important matter: the php file that does the work must reside in the same directory that holds the txt file pointing to the pics..

  6. drewactual
    Posted 7 years ago #

    oh.. and to implement it? Like this, wherever in your theme you want to use it:

    <?php include('http://yourdomain.com/bannerrotationpictures.php") ;?>

    pretty easy, huh? furthermore- if this is for ad placement, you know as well as I do that the feeds are sometimes different sizes- eh? use this in your css/theme to combat that:

    In your theme, place a div- for the example it will be #adverts, or .adverts. toss this in your css file:

    .adverts {
    height:400px; /*or containing height */
    width: 400px; /*or containing width */
    .adverts img {
    height:90%; /* crunches or expands image to height */
    width: 90%; /* crunches or expands for width */

    Of course class (.) can be used as can ID (#)... as can any other css declarations.

  7. drewactual
    Posted 7 years ago #

    one more thing: you may need to create more than one of these creatures... why? some ad's come to you as banners (long and short)... some as skyscrapers (tall and narrow) some as badges (small square).. you get the notion.. make a php for each of the types, and a div class declaration for each size.. example: .adverts-badge, or .adverts-skyscraper- ect..

  8. drewactual
    Posted 7 years ago #

    alright.... one more thing...

    you can call to this function in css too... example:

    background-image: url('../../randompics.php');

    it works there too on the majority of popular browsers. Don't know why you would want to use it there, but it works..

Topic Closed

This topic has been closed to new replies.

About this Topic