Logged Out
Create an Account
Login:
Password:

Forgot your password?
Javascript in div - problem

Javascript in div - problem
[Back to Index]  [Bottom of Thread]
Thread Tags
Primary: [Advanced Layout]
Secondary: None
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.
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.
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.
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.
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.


[Back to Index]  [Top of Thread]