SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Location
    London
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using JavaScript to change a CSS rule

    Hi all,

    I'm new to JavaScript, so apologies if my question seems elementary. I'm trying to write a JS function that generates and sets a random y-coordinate for a background image that I set in a CSS stylesheet.

    This is my HTML (I'm just quoting the relevant parts):

    Code:
    <body>
        <div id="container_main">
            <....sibling element...>
            <div id="side_bar">
                 <a href="url of another page in site">
                      <span class="side_bar_box"></span>
                 </a>
            </div>
            <...sibling element...>
        </div>
    </body>
    This is the relevant CSS rule:

    Code:
    span.side_bar_box {
    	position:absolute;
    	top:0;
    	left:0;
    	width:146px;
    	height:2250px;
    	background:url("my_image.jpg") 0 0 no-repeat;
    }
    The background image which I set for the empty <span> element is 7050px high, i.e it is much bigger than the box I created for it. So, I want to randomise the y-coordinate (between 0 and 4800px and in increments of 150px) with JS so that a different part of the image is visible with each page load.

    I've managed to write the random coordinate generator:

    Code:
    function sbRandomiser(){
    	var imgOffset = Math.round(Math.random()*32)*150;
    	alert(imgOffset);
    }
    
    window.onload = sbRandomiser;
    So far so good. The "alert" message confirms that the code works to generate a random number in multiples of 150 and smaller than 4800 which I can use to offset the y-coordinate of my background image.

    Where I'm stumped is how to actually write this into my CSS rule (overwriting the default that's defined in the stylesheet). For starters, I'm not sure whether I need to include the entire node tree in my selecter code, like so:

    Code:
    function sbRandomiser(){
    var imgOffset= Math.round(Math.random()*32)*150;
    var sbBox = document.getElementById("container_main").getElementById("side_bar").getElementsByTagName("<a>").getElementsByTagName("<span>");
    sbBox.style.backgroundPosition = "0 -" + imgOffset + "px");
    }
    
    window.onload = sbRandomiser;
    Or whether I can just home in straight on my <span> element like so:

    Code:
    function sbRandomiser(){
          var imgOffset = Math.round(Math.random()*32)*150;
          var sbBox = document.getElementsByName("side_bar_box");
          sbBox.style.backgroundPosition = "0 -" + imgOffset + "px";
    }
    
    window.onload = sbRandomiser;
    Both methods give me errors in FF: In the first case "getElementById is not a function" and in the second case "sbBox.style is undefined".

    Any help will be greatly appreciated!

    Art

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're pretty close with your last example

    You're just using the wrong method to get the element

    Try document.getElementsByClassName("side_bar_box")

    Or, if you want to be performance conscious:
    Code:
    var theBox = document.getElementsById("side_bar");
    var sbBox = theBox.getElementsByClassName("side_bar_box")[0]; 
    //the [0] is there because getElementsByClassName() always returns an array
    //note that if you're only using "side_bar_box" once, it might be easier to give it an ID ;)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementsByClassName() is supported by only recent versions of "modern" browsers and not older versions.

    If the function doesn't exist in the user's browser, you could use a customised version of getElementsByClassName().

    Or better still, if the class name exists in 1 element only, give the element an id instead of a class and use document.getElementById() to access the element directly.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementsByName
    You have an 's' that doesn't belong there.

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    You have an 's' that doesn't belong there.
    what's wrong with getElementsByName()

  6. #6
    SitePoint Member
    Join Date
    Sep 2011
    Location
    London
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

    This is what I settled on incorporating your suggestions and it works a charm:

    I changed my HTML to give the image box an ID rather than a class:

    Code:
        <div id="side_bar">
                <a href="myURL">
                <span id="side_bar_box"></span>
                </a>
        </div>
    And then I did the following with my JS.

    Code:
    function sbRandomiser(){
    	var imgOffset = Math.round(Math.random()*32)*150;
    	var sbBox = document.getElementById("side_bar_box");
    	sbBox.style.backgroundPosition = "0 -" + imgOffset +"px";
    }
    
    
    window.onload = sbRandomiser;
    So simple I almost feel embarrassed I couldn't figure it out myself!

    Thanks again!


Bookmarks

Posting Permissions

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