Printable View
Hi Everyone,
I have a page with multiple div's.
I'm searching for a script that will make them randomly switch places at refresh.
So I want ALL of them to load, but at different places each time. (it would be perfect if none of them showed twice)
I've been searching, but so far I can only find scripts that show one image out of several.
There must be a way to do this!? Can anyone help?
Have you started any JS or HTML attempt as to what the layout and contents (image files) are to look like?
I tried some different js scripts but removed them again.
The layout is fairly simple, just some 95x95px divs with borders, and text or image content, some css with image hovers. The divs are linked to open greybox, and are not positioned.
That's all.
html:
<div class="afb1"><a href="afb1.html" rel="gb_page_center[506, 506]"> </a></div>
<div class="afb2"><a href="afb2.html" rel="gb_page_center[506, 506]"> </a></div>
css.
.afb1 a {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1a.jpg);
}
.afb1 a:hover {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1b.jpg);
Well, you didn't give much information to work with
(image links, number of images, image URLs, etc),
nor the image display sample, so here's a simplified attempt. :rolleyes:
Substitute your image locations and URL references in the imageList array.Code:<html>
<head>
<title>Random Image Positions</title>
<script type="text/javascript">
// Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065400#post1065400
var imageList = [
'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg|URL11.html',
'http://www.nova.edu/hpd/otm/pics/4fun/12.jpg|URL12.html',
'http://www.nova.edu/hpd/otm/pics/4fun/13.jpg|URL13.html',
'http://www.nova.edu/hpd/otm/pics/4fun/14.jpg|URL14.html',
'http://www.nova.edu/hpd/otm/pics/4fun/15.jpg|URL15.html',
'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg|URL21.html',
'http://www.nova.edu/hpd/otm/pics/4fun/22.jpg|URL22.html',
'http://www.nova.edu/hpd/otm/pics/4fun/23.jpg|URL23.html',
'http://www.nova.edu/hpd/otm/pics/4fun/24.jpg|URL24.html',
'http://www.nova.edu/hpd/otm/pics/4fun/25.jpg|URL25.html',
'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg|URL31.html',
'http://www.nova.edu/hpd/otm/pics/4fun/32.jpg|URL32.html',
'http://www.nova.edu/hpd/otm/pics/4fun/33.jpg|URL33.html',
'http://www.nova.edu/hpd/otm/pics/4fun/34.jpg|URL34.html',
'http://www.nova.edu/hpd/otm/pics/4fun/35.jpg|URL35.html',
'http://www.nova.edu/hpd/otm/pics/4fun/41.jpg|URL41.html',
'http://www.nova.edu/hpd/otm/pics/4fun/42.jpg|URL42.html',
'http://www.nova.edu/hpd/otm/pics/4fun/43.jpg|URL43.html',
'http://www.nova.edu/hpd/otm/pics/4fun/44.jpg|URL44.html',
'http://www.nova.edu/hpd/otm/pics/4fun/45.jpg|URL45.html' // Note: no comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function InitializeImageLinks() {
var tarr = [];
var str = '';
var wcnt = 0;
// randomize imageList contents
var imgArr = imageList.sort(randOrd);
for (var i=0; i<imgArr.length; i++) {
tarr = imgArr[i].split('|');
str += '<div class="imgInfo">';
str += '<a href="'+tarr[1]+'">';
str += '<img src="'+tarr[0]+'" height="100" width="100">';
str += '</a>';
str += '</div>';
wcnt++; if ((wcnt % 4) == 0) { str += '<br>'; }
}
return str;
}
</script>
<style type="text/css">
#greybox {
position:fixed; top:50px; left:100px;
height:546px; width:506px;
text-align:center; vertical-align:middle;
}
.imgInfo {
height:95px; width:95px;
border: 2px solid #5C97C9;
margin: 3px;
display:inline;
}
</style>
</head>
<body>
<div id="greybox">
<script type="text/javascript">
document.write(InitializeImageLinks());
</script>
</div>
</body>
</html>
How close did I come? :eek:
This is perfect, thank you! :D Especially because the amount of div's isn't limited.
I modified it a bit so that the assigned classes can be individual too (because of the hovers), and greybox will be used.
Testpage here: http://0797738.student.wdka.nl/
Code:<html>
<head>
<title>Random Image Positions</title>
<!--links to css and greybox scripts-->
<script type="text/javascript">
// Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065457#post1065457
var imageList = [
'afb1.html|afb1',
'afb2.html|afb2',
'afb3.html|afb3',
'afb4.html|afb4',
'afb5.html|afb5',
'afb6.html|afb6',
'afb7.html|afb7',
'afb8.html|afb8',
'afb9.html|afb9',
'afb10.html|afb10',
'afb11.html|afb11',
'afb12.html|afb12',
'afb13.html|afb13' // Note: no comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function InitializeImageLinks() {
var tarr = [];
var str = '';
var wcnt = 0;
// randomize imageList contents
var imgArr = imageList.sort(randOrd);
for (var i=0; i<imgArr.length; i++) {
tarr = imgArr[i].split('|');
str += '<div class="'+tarr[1]+'">';
str += '<a href="'+tarr[0]+'" ';
str += 'rel="gb_page_center[506, 506]">';
str += ' ';
str += '</a>';
str += '</div>';
}
return str;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(InitializeImageLinks());
</script>
</body>
</html>
Code:.afb1 a {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1a.jpg);
}
.afb1 a:hover {
height: 95px;
width: 95px;
border: 2px solid #FFFFFF;
margin: 3px;
background-image: url(afb1b.jpg);
You're most welcome.
Happy to help.
Good Luck!
:)
