Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Voodoo Tech and Scripter's Den of Scriptniquity > Changing CSS attributes on loas
Dr Thorpe (New Admin) 8/16/2008 12:32 PM EST : Changing CSS attributes on load
Dr Thorpe
Posts: 1027
Zomgawsh Poster

I have Googled this and racked my brain on how to do this but I just can't seem to find an answer. What I would like to do is change the value of this CSS element:

background-image

...after or during the loading of the page. I would like to see a different background image (randomly that is) when the user loads the page. So the page looks different each time they load it. I have not found a way to do this with JS except for solutions that have the script within the HEAD tags and as I read on this site FAQ server side scripting isn't an option.

Is there a way to the css doc so that it could choose among a list of different style sheets? That would be a nice solution.

As per the FAQ I am not sure of a way an ASP script could call the "main" page CSS attributes from an iFrame. If this is possible I would sure like to know. =)

Any suggestions?

Thanks.
TopBottom

Mottie (MVP) 8/16/2008 1:51 PM EST : RE: Changing CSS attributes on load
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Read this post... add it to any free form text/HTML box on that page, or into the header or footer to effect your entire site
TopBottom

Dr Thorpe (New Admin) 8/16/2008 3:00 PM EST : RE: Changing CSS attributes on load
Dr Thorpe
Posts: 1027
Zomgawsh Poster

Mottie said:
Read this post... add it to any free form text/HTML box on that page, or into the header or footer to effect your entire site


Works like a charm.

Is there a way to use that script and somehow mimic the CSS properties of: 

background-repeat: no-repeat;
background-attachment:fixed;
background-position: top center;}

While I am getting the random background it is not staying in one place like it would with those attributes. With those the size of the browser window doesn't matter it will always stay in place and never move.

Check out what happens here when I use the random background script.

http://www.guildportal.com/Guild.aspx?GuildID=261425&TabID=2196287

Since the background is sized at 1680 it centers itself at that window size but any other it slides it right. Using the above attributes and the window size doesn't matter.

Thanks again.
TopBottom

Mottie (MVP) 8/16/2008 5:26 PM EST : RE: Changing CSS attributes on load
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Are all your images going to use the same CSS properties? If so just add it into the javascript - I added them in red, just replace the one line I modified in the code.
var bkgdimg = "<style>body {background: url(" + bkgd[inc] + ") top center fixed no-repeat;}</style>";
All the javascript does is writes that line of CSS using . You can also combine all the background properties into one line to shorten the code, as such:
body {background: #000000 url(myImage.jpg) top center fixed no-repeat;}
If you plan on using different CSS properties for each background image, you'll have to change the code around a little more:
<script type="text/javascript">
var bkgd = new Array();

// **************************************
// Add background images below
// bkgd.push ("Add URL here with properties here");
// **************************************

bkgd.push ("#000000 url (http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/green.jpg) top center no-repeat;");
bkgd.push ("#333333 url (http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_stone1.jpg) repeat-x;");
bkgd.push ("#444444 url (http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_default.jpg) center center repeat-y;");
bkgd.push ("#000000 url (http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_parch2.jpg) 50px 50px no-repeat;");

// **************************************
// Don't change anything below this line
// **************************************

var inc = Math.floor( Math.random() * bkgd.length );
var bkgdimg = "<style>body {background: " + bkgd[inc] + "}</style>";
(bkgdimg);
</script>
TopBottom

Dr Thorpe (New Admin) 8/17/2008 5:06 AM EST : RE: Changing CSS attributes on load
Dr Thorpe
Posts: 1027
Zomgawsh Poster

You sir are a genius.

One question. How is this script "pushing" this CSS background attribute into the CSS sheet itself? Is this to tough for me to understand? I know some JS but I have never seen anything like this.

It takes the place of the attributes I did have in the CSS itself. That seems pretty amazing to me.

If its to tough to explarin to a semi-noob its no problem.

TopBottom

Mottie (MVP) 8/19/2008 2:14 AM EST : RE: Changing CSS attributes on load
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi again,

The script doesn't really do anything put write the new CSS to the document.

The browser reads the CSS and updates the page's DOM (Document Object Model), which is basically an outline of each object on your page (similar to object oriented programming). Here are some examples.

You can also use javascript to build an object with all it's elements on your page using DOM. This is what Jizmak did with an iframe in this post. I'm not that good with building things with DOM; but if you want to see an example of how to dynamically make a table, read this post.

I hope this information helps
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%