SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham UK
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Random Style w/ Javascript

    I have 5 different styles set in an external CSS named bg-01, bg02.. bg-05.

    These are all different backgrounds for my main table with an image attached.

    How do I randomise the style that is assigned to that table? I can only use Javascript or HTML (no server-side languages).

    Thanks,
    Si

  2. #2
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should get more help in this forum

    Sean
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham UK
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cheers..

    cheers!

    If anyone needs the ball rolling, I'm thinking that maybe naming the table and then changing the properties of the the table with javascript, with reference to that table name.

    Is that the right route?

    If someone could help with this - especially the random no situation.

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    one word

    drand.


    You might have to use activeX, but hopefully not!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham UK
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got to be possible

    Anyone else got any ideas on this?

    Surely its possible...

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following, you'll obviously have to create some images to test it though.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Random images</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	
    	<style>
    		.style1 {
    			background-image: url("images/bkg1.gif");
    		}
    		.style2 {
    			background-image: url("images/bkg2.gif");
    		}
    		.style3 {
    			background-image: url("images/bkg3.gif");
    		}
    	
    	</style>
    	 
    	<script type="text/javascript">
    
    	function setRandomImage() {
    		
    		var strTableId = "testTable";
    		
    		var arrImgStyles = new Array("style1", "style2", "style3");
    		var intUBound = arrImgStyles.length;
    		var intLBound = 1;
    		
    		//Get number between bounds
    		var randNum;
    		randNum = ((intUBound - intLBound + 1) * Math.random()) + intLBound;
    		randNum = Math.floor(randNum);
    		
    		//Get the style class
    		var strClass = arrImgStyles[randNum - 1];
    		
    		//Get the table and change the style class
    		var objTable = document.getElementById(strTableId);
    		
    		if (objTable)
    			objTable.className = strClass;
    		
    		
    	}
    
    	</script>
    
    </head>
    
    <body onload="setRandomImage();">
    
    <table id="testTable" style="width: 400px; height: 600px">
    <tr>
    	<td>&nbsp;</td>
    </tr>
    </table>
    
    
    
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Birmingham UK
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    looking good...

    Thanks for the help Shane!

    I'll try it out tonight after work... and let you know. I'll whack the link up here as well when its done so you can see how you've helped.

    Ta again..

  8. #8
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be very easy to do if you seperated the style sets into different files. Then you could wing this off with ease
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    comments comments

    God i wish *I* could comment by bloody code!

    Then maybe everyone wouldn't spend half their time trying to understand what i'm doing.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •