Randomize HTML

[Gaffer]

Hello

Is there a way in which I can make certain parts of Html on my website
random so that each viewer will see different material if they refresh the
page or come back onto the website later? I am currently using the
"<!--#include virtual="cgi-bin/menu1.txt" -->" command to display my menus
on every page of my site, so that the same material is shown on every page,
and I would like a way that I can randomize this perhaps.

I got a links from someone,
http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink, which
allows me to randomize links and text, but I really want to do it with
tables too as that's what I use for my menus.

Any suggestions appreciated.

_____
Gaffer

 

[Ron]

Hello

Is there a way in which I can make certain parts of Html on my website
random so that each viewer will see different material if they refresh the
page or come back onto the website later? I am currently using the
"<!--#include virtual="cgi-bin/menu1.txt" -->" command to display my menus
on every page of my site, so that the same material is shown on every page,
and I would like a way that I can randomize this perhaps.

I got a links from someone,
http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink, which
allows me to randomize links and text, but I really want to do it with
tables too as that's what I use for my menus.

Any suggestions appreciated.

What do you want to randomize ? The style of the menu, or the menu
itself (each menu has different content) ? You can use javascript to
change stylesheets or classes for the menu, or if you want to change the
content of the menu, you can use an object element which can be handled
by javascript to call menu*.html instead of the invisible server-side
virtual include.

 

[Gaffer]

What do you want to randomize ? The style of the menu, or the menu
itself (each menu has different content) ? You can use javascript to
change stylesheets or classes for the menu, or if you want to change the
content of the menu, you can use an object element which can be handled
by javascript to call menu*.html instead of the invisible server-side
virtual include.

Hello

I want to randomize a menu which contains tables with image links
(advertisements) inside them. I want the link image to change when refreshed
so that it's new content that a user might not have seen previously. I'm
relatively new to JS so could you please explain more about how I could do
this. Incase you don't already know, I am using .asp pages for my site.

_____
Gaffer

 

[Ron]

Hello

I want to randomize a menu which contains tables with image links
(advertisements) inside them. I want the link image to change when refreshed
so that it's new content that a user might not have seen previously. I'm
relatively new to JS so could you please explain more about how I could do
this. Incase you don't already know, I am using .asp pages for my site.

_____
Gaffer

Heya Gaffer,
Okay. If there's not aready some simple container for the menu, wrap the
server-side include in a span or div element with a unique ID:

<div id="menu1">
<!--#include virtual "cgi-bin/menu1.txt" -->
</div>

For simplicity, we'll keep the javascript off the page in a text file
with a .js extension, such as myScript.js. The text file should have the
following content:

function randomizeMenuAds(menuId, numOfImages) {
numOfImages++;
if(document.getElementById(menuId)!=null) {
var myMenuImages =
document.getElementById(menuId).getElementsByTagName("img");
for(i=0;i<myMenuImages.length;i++) {
var randImageNumber = Math.floor(numOfImages*Math.random()); //
the range of random() is [0,1)
myMenuImages.src = "myImageDirectory/menuImage" +
randImageNumber.toString() + ".jpg";
}
}
}

Consecutively number your menu images and name them with the same
prefix, ie. above we have a subdirectory called "myImageDirectory" that
is filled with files of the form menuImage0.jpg, menuImage1.jpg, etc.
Note that the directory is relative to the location of the page the
script is run on, not the location of the javascript file. Also note
that I assumed that all the images inside the #menu1 div were randomized
images. If not, use some other HTML element to surround only the images
to be randomized within menu1.txt and set that element's "id" attribute
to "menu1" (removing the surrounding div and ID we used before). Include
the function in the head of the webpage using a script element "<script
type="text/javascript" src="myScript.js"></script>". Next we call the
function on every page load using "<body
onload="randomizeMenuAds('menu1', 10)">" if the amount of images you
have is 11 since we're numbering from 0. It is also a good idea to drop
the tag "<meta http-equiv="Content-Script-Type"
content="text/javascript" />" into the head element of the page that is
going to be using intrinsic events like onload.