Random mix text position onload in a div [Archive]

View Full Version : Random mix text position onload in a div

Davey

03-18-2014, 02:45 PM

Hi, hope someone can help me:

I can find my way around html and css - beginner but have got my site up - and I wish to add to a div a group of mixed up text that changes positioning on load of page. The text to randomly change position that is not the div. Like keywords do in 192. directory.

Found the following that seems to be about right but I cannot for the life of me get it to be inside a div. It only seems to work in body.

This is what I found:

<html>
<head>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
padding: 0;
width: 300px;
}

.box {
height: 30px;
position: absolute;
width: auto;
}

#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</body>
</html>

Anyone have time to help?

Davey

03-25-2014, 05:25 PM

No one interested? Or am I posting incorrectly or something - or asking a silly question? Any help greatly appreciated.

Beverleyh

03-25-2014, 05:52 PM

I'll assume that the body CSS is throwing you off a bit - it's quite unusual to set that as a specific width. Try taking the 'body' block out of the CSS so you're back to looking at a web page where the body element covers the whole browser window.

It will probably make more sense to you after that so then you can put the 3 divs (with class of 'box') inside a container div and then style that how you want, with width, height, background-color, etc.

If you need more help, please post a link to your page and the example web page you're trying to emulate.

Davey

03-26-2014, 07:12 AM

Thanks. Have followed your advice and will keep tinkering but unfortunately I still cant get the effect in the box (the pink box in the middle). In the meantime here is my updated code should any one be able to assist:

<html>
<head>
<style type='text/css'>

#middle_container {margin:0 auto;height:400px;width:700px;background:pink;}

.box {
height: 30px;
position: absolute;
width: auto;
}

#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>

<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id="middle_container">
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</div>

</body>
</html>

Davey

03-27-2014, 08:27 AM

Thanks for the advice. I have made suggested changes, tinkered a bit but still can't achieve the effect within the box. I'm guessing it is related to the script, possibly the bit that says body onload='setDivPos();' but know very little of this. I now have a box centered in the page but the text effect still happens in the top left corner. If I mess with it some more I can get the first div/text to show in the box but then the script effect doesn't work. Also, I can see how to make the text area larger but still can't move it's position - ?

Here is the updated code just in case someone knows exactly what I am rambling about:

<html>
<head>
<style type='text/css'>

#middle_container {margin:0 auto;height:400px;width:700px;background:pink;}

.box {
height: 30px;
position: absolute;
width: auto;
}

#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>

<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id="middle_container">
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</div>

</body>
</html>

192. directory has the effect I am looking for when you look up a business it has keywords at the bottom of the listing page that rearrange on load up/refresh.

Thanks in advance.