DKPSystem.com - Javascript in div

Javascript in div - problem

Thread Tags
Primary:	[Advanced Layout]
Secondary:	None

Jezzabell
General Public
Poster's IP: Logged
Posts: 3
Threads: 2
Private Posts: 0

Posted: 5737 days ago

Edited: 5737 days ago

I am using the blood elf template as basics for my guild's website (http://d.dkpsystem.com/) and I tried creating a random avatar script in place of the belf pic at the header. Thing is, I've been hitting my head against the wall this whole evening and I need a second opinion.

Original source:

CSS

#belf
{
	background: url('http://dkpfiles.com/d/files/img.png') no-repeat top center;
	position: absolute;
	left: 0;
	top: 0;
	height: 210px;
	width: 840px;
	z-index: 75 !important;
}

HTML


<div id="belf"></div>

What I am trying to do..

HTML

<SCRIPT LANGUAGE="JavaScript">
var avatar_1="http://dkpfiles.com/d/files/img1.png"
var avatar_2="http://dkpfiles.com/d/files/img2.png"
var rand=Math.round(Math.random())

if (rand==1)
avatar=avatar_2
if (rand==0)
avatar=avatar_1
</script>

and then, instead of

<div id="belf"></div>

I use..

<script language="JavaScript">
document.write('<div background="'+avatar+'" style="background-repeat: no-repeat; position: absolute; left: 0; top: 

0; height: 210px; width: 840px; z-index: 75;"></div>')
</script>

When I use this code, I just get no avatar showing. Any ideas what am I doing wrong? I believe it's a simple mistake

as I am not used to coding but I am really stuck.

[Login to interact]

Chops
Administrator
Poster's IP: Logged
Posts: 7607
Threads: 218
Private Posts: 1160

Site(s):
PiaS

Posted: 5737 days ago

The easier way to do it would be to keep the div.

<div id="belf"></div>

Then in the CSS remove the reference to the background image, and on pageload do the following in javascript>

imagepath = "http://path/to/img"; //use the method you've got there to choose the image path already.

dge("belf").style.background = "url(" + imagepath + ")";

That would, at the very least, be a little simple code and a little easier to read.

--
It's all in the reflexes.

[Login to interact]

Jezzabell
General Public
Poster's IP: Logged
Posts: 3
Threads: 2
Private Posts: 0

Posted: 5736 days ago

Edited: 5736 days ago

Thank you! That worked nicely. ^_^

There is the lag of the onLoad (I put it in the <body>), waiting on the whole page to load before the script is processed, but I will look for a solution to that tomorrow.

I am really happy of the hosting here! Not to mention all those free days whenever a downtime happens.

[Login to interact]

Chops
Administrator
Poster's IP: Logged
Posts: 7607
Threads: 218
Private Posts: 1160

Site(s):
PiaS

Posted: 5736 days ago

Quote

Not to mention all those free days whenever a downtime happens.

Glad you appreciate them, though ideally, we wouldn't have those. They're usually pretty infrequent, though the most recent downtime was the result of a massive DDoS attack on the data center.

--
It's all in the reflexes.

[Login to interact]

Chops
Administrator
Poster's IP: Logged
Posts: 7607
Threads: 218
Private Posts: 1160

Site(s):
PiaS

Posted: 5736 days ago

Quote

There is the lag of the onLoad (I put it in the <body

, waiting on the whole page to load before the script is processed, but I will look for a solution to that tomorrow.

You could probably get away with embedding the script right after the div, ala:


<div id="belf"></div>
<script language=javascript>
...Do image stuff
</script>

That should actually work as long as the code is after the div. I'd make sure to test it on IE though, as IE doesn't like changing the DOM before the page is loaded. Though this doesn't change the DOM, so it should be good, but just make sure to test it.

--
It's all in the reflexes.

[Login to interact]

[Back to Index]

Login:
Password: