Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

random background javascript

Posted on 2010-01-05
6
Medium Priority
?
262 Views
Last Modified: 2012-05-08
Hi,

I'm trying to accomplish the following a random background in a div tag
here is my code so far but doesn't give me a background. When i put the code into a function it seems to work, but due to the multiplicity of the page i can't do that.
Do you see what i'm doing wrong?


<SCRIPT LANGUAGE="JavaScript">
var bgs=new Array;
        bgs[0]='../img/backgr1.jpg';
        bgs[1]='../img/backgr2.jpg';
        bgs[2]='../img/backgr3.jpg';
var num=Math.floor(Math.random()*bgs.length);	

document.write("<DIV style='background-image:url('"+bgs[num]+"')>");

</script>

Open in new window

0
Comment
Question by:frippel
  • 3
  • 2
6 Comments
 
LVL 11

Expert Comment

by:ICaldwell
ID: 26182953
Insert the below in the BODY section of your page:
<script type="text/javascript">
var randombgs=[../img/backgr1.jpg, "../img/backgr2.jpg", "../img/backgr3.jpg"]

document.body.style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
</script>

Open in new window

0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26182959
The issue is probably with document.write  ... It's a naaaaaaaasty method.

Instead, create the <div> in the markup along with everything else, and give it an id...  Maybe something like:
<div id="bgimage">
</div>

Then use the javascript to get the div and add an attribute:
document.getElementById( "bgimage" ).setattribute("style", "background-image:url('"+bgs[num]+"')");

That hopefully take care of it. :)
0
 
LVL 11

Expert Comment

by:ICaldwell
ID: 26182961
correction, url on first image was missing the quotes.....
<script type="text/javascript">
var randombgs=["../img/backgr1.jpg", "../img/backgr2.jpg", "../img/backgr3.jpg"]

document.body.style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
</script>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 11

Expert Comment

by:ICaldwell
ID: 26183015
If you want it in a DIV tag instead of body then add your div tag then do something like this:
<body>
<div id="backgrounddiv"></div>
<script type="text/javascript">
var randombgs=["../img/backgr1.jpg", "../img/backgr2.jpg", "../img/backgr3.jpg"]

document.getElementById('backgrounddiv').style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
</script>
</body>

Open in new window

0
 

Author Comment

by:frippel
ID: 26183241
yes i know about that method however i can't do that because of the following reason. It get's calle from another link to show.. (div id"inner") but also directly from the onload in the body tag...
if i do the methode you all suggest it only works from the link and not from the onload in the body tag...

bellow is a bit more code, i hope i makes it clear. It's part of the ibox script but it needs to show the inline popup when the page loads (the inner id tag) which it does, just no background...
<div id="inner" style="display:none;">
<SCRIPT LANGUAGE="JavaScript">
var bgs=new Array;
        bgs[0]='../img/backgr1.jpg';
        bgs[1]='../img/backgr2.jpg';
        bgs[2]='../img/backgr3.jpg';
var num=Math.floor(Math.random()*bgs.length);	

document.write("<DIV style='background-image:url('\"+bgs[num]+\"')>");

</script>

<div id="midtita">Next training:<br><span style="font-size:14px; font-weight:bold"><%=whenid%></span><br></div>
<div id="midtitb"><%=title%></div>
<p class="contactbodyb">
<%=description%><br /><br />
</p>
        </div></div>
       
<body onLoad="iBox.show(document.getElementById('inner').innerHTML)">

Open in new window

0
 

Accepted Solution

by:
frippel earned 0 total points
ID: 26183913
never mind I found the solution...
It had to do like always with the accents...

here is the correct code
document.write('<DIV style="background-image:url('+bgs[num]+')">');

Open in new window

0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question