PDA

View Full Version : Display Random URL from list



fay123
11-21-2009, 08:31 PM
Hi,

I'm looking for a script that would pick a URL from a predefined list and display the associated text of the link so that a viewer can click on it and be taken to the linked page.

The format of the URL's I have is:
<a href='http://mysite.com target='_blank'> A Day in Alexandria</a> alexandria, Egypt<BR>

Now, I have about 600 such links and need a script that would pick one and display it to the viewer.

jscheuer1
11-22-2009, 04:24 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
var myLinks = [
{href: 'http://www.whatever.com/somepage.htm', text: 'Some Page'},
{href: 'http://www.whatever.com/anotherpage.htm', text: 'Another Page'},
{href: 'http://www.whatever.com/yetanotherpage.htm', text: 'Yet Another Page'} // <--No comma after last link object
];
onload = function(){
var link = myLinks[Math.floor(Math.random() * myLinks.length)],
pageLink = document.getElementById('myLink');
pageLink.href = link.href;
pageLink.firstChild.nodeValue = link.text;
pageLink.target = '_blank';
};
})();
</script>
</head>
<body>
<div>
<a id="myLink" href="somedefault.htm">Some Default Text</a>
</div>
</body>
</html>

Any questions, just let me know.

fay123
11-22-2009, 12:42 PM
John, Thank you so much for this.

I've added the script and div things into my page, but it just keeps showing "Some Default Text" and upon clicking gives a 404 not found. Pls do take a look at this link (http://tinyurl.com/ybmm389) and let me know where I'm going wrong.

Regards.

Schmoopy
11-22-2009, 12:55 PM
There's an error on one of the lines. It's ended prematurely because of an apostrophe.

Error: missing } after property list
Source File: http://www.africadreamholidays.com/script_test.htm
Line: 305, Column: 104
Source Code:
{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=7338', text: 'Fellah's Tent (Jolie Ville Luxor). - Luxor, Egypt'},

Try:



{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=7338', text: 'Fellah\'s Tent (Jolie Ville Luxor). - Luxor, Egypt'},

fay123
11-22-2009, 01:16 PM
There's an error on one of the lines. It's ended prematurely because of an apostrophe.

WOW!! that would mean that wherever there is an apostrophe in the text part, it would give a problem.

Thanks so much

jscheuer1
11-22-2009, 01:20 PM
There's an error on one of the lines. It's ended prematurely because of an apostrophe.

Error: missing } after property list
Source File: http://www.africadreamholidays.com/script_test.htm
Line: 305, Column: 104
Source Code:
{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=7338', text: 'Fellah's Tent (Jolie Ville Luxor). - Luxor, Egypt'},

Try:



{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=7338', text: 'Fellah\'s Tent (Jolie Ville Luxor). - Luxor, Egypt'},


That's correct, but there are also a few more like that:


'Baz Bus Cape Town <=> Jo'burg VIA SWAZILAND. - Cape Town, South Africa'},
'Baz Bus Cape Town <=>Jo'burg VIA DRAKENSERG. - Cape Town, South Africa'},
'Baz Bus Cape Town <=> Jo'burg VIA SWAZILAND. - Durban, South Africa'},

Which should be:


'Baz Bus Cape Town <=> Jo\'burg VIA SWAZILAND. - Cape Town, South Africa'},
'Baz Bus Cape Town <=>Jo\'burg VIA DRAKENSERG. - Cape Town, South Africa'},
'Baz Bus Cape Town <=> Jo\'burg VIA SWAZILAND. - Durban, South Africa'},

Basically, whenever you use a like delimiter within a string, it must be escaped with the down slash.

fay123
11-22-2009, 01:26 PM
How did you find them so quickly? any trick? ;)
Thanks, man.

Schmoopy
11-22-2009, 01:29 PM
Best thing to do with errors like these is, if you're using firefox, go to the error console. Or use firebug, shows you exactly where the script is going wrong.

jscheuer1
11-22-2009, 01:40 PM
How did you find them so quickly? any trick? ;)
Thanks, man.

I looked at the page's source code in an editor (Edit Pad Pro, but there are many others) that highlights script code. Strings are blue, most other code is black, delimiters and operators are red. Then by simply scrolling through your list, the broken strings just popped out, they're party black where they shouldn't be.

An alternative for dealing with apostrophe is, for example:


"Baz Bus Cape Town <=> Jo'burg VIA SWAZILAND. - Cape Town, South Africa"},

In fact all the href's and text's could be quoted with double quotes, or you can mix and match, just be sure to be consistent in any one value, like don't do:


text: "This would be a mistake'},

But this would be fine:


{href: 'somepage.htm', text: "this'll work OK"},

fay123
11-22-2009, 01:57 PM
the script is still giving problem, so I checked it with firefox's error console, and this is what it says:

Error: missing } after property list
Source File: http://www.africadreamholidays.com/
Line: 516, Column: 121
Source Code:
{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=732', text: 'Baz Bus Cape Town <=> Jo'burg VIA SWAZILAND. - Cape Town, South Africa'},

so I checked the htm file and this particular line seems fine :confused:
Here's a straight copy and paste of the line from the 'view source code':

{href: 'http://reservations.bookhostels.com/tours/africadr/tourdetails.php?TourUID=732', text: 'Baz Bus Cape Town <=> Jo\'burg VIA SWAZILAND. - Cape Town, South Africa'},

fay123
11-22-2009, 02:38 PM
But this would be fine:


{href: 'somepage.htm', text: "this'll work OK"},

I tried this and it seems to be working. (See Here (http://www.africadreamholidays.com/script_test.htm))However, are there any restrictions as to where the

<div>
<a id="myLink" href="somedefault.htm">Some Default Text</a>
</div>
code can be placed and as to the number of times it can be on any particular page? cos I now copied it from the script_test.htm page to the actual page where I want to display the random links, and on this page it gives a problem (See Here (http://tinyurl.com/y9pdazw)) under where it says "Hot Tours"

jscheuer1
11-22-2009, 02:53 PM
I'm not getting any such error. Perhaps you need to clear the browser's cache. However, you may have only one:


<a id="myLink" href="somedefault.htm">Some Default Text</a>

If you want three random links, they each must be a different id or use class instead, and the code would have to be modified. I think class would be good, so replace this:


onload = function(){
var link = myLinks[Math.floor(Math.random() * myLinks.length)],
pageLink = document.getElementById('myLink');
pageLink.href = link.href;
pageLink.firstChild.nodeValue = link.text;
pageLink.target = '_blank';
};

with:


onload = function(){
var link, pageLinkClass = 'myLink', pageLinks = document.getElementsByTagName('a');
pageLinkClass = new RegExp('\\b' + pageLinkClass + '\\b');
for(var i = 0; i < pageLinks.length; ++i){
if(pageLinkClass.test(pageLinks[i].className)){
link = myLinks[Math.floor(Math.random() * myLinks.length)]
pageLinks[i].href = link.href;
pageLinks[i].firstChild.nodeValue = link.text;
pageLinks[i].target = '_blank';
}
}
};

and use class instead of id for the links in the markup, example:


<a class="myLink" href="somedefault.htm">Some Default Text</a>

You may have as many of these type links as you like, and they will all work.

fay123
11-22-2009, 06:54 PM
I modified the coding to allow multiple displays of random links.
While it works perfectly on this page: (http://www.africadreamholidays.com/script_test.htm)

it still refuses to work on this page: (where I actually want to display the random links (http://www.africadreamholidays.com))

and yet the script coding is a pure copy and paste from one to the other.

I've even cleared the cache, used a different pc and even different internet connections.

How is it possible that while the coding has just been copied and pasted from one file to the other, it works well in one file and doesn't on the other. Pls do take a look at both pages to see what I mean :confused:

jscheuer1
11-22-2009, 09:46 PM
You have an onload conflict. In fact, I don't believe your body onload is firing either. But I'm not going to worry about that right now. To fix up the script we've been working on - so that it will 'play nice with others', replace:


onload = function(){
var link, pageLinkClass = 'myLink', pageLinks = document.getElementsByTagName('a');
pageLinkClass = new RegExp('\\b' + pageLinkClass + '\\b');
for(var i = 0; i < pageLinks.length; ++i){
if(pageLinkClass.test(pageLinks[i].className)){
link = myLinks[Math.floor(Math.random() * myLinks.length)]
pageLinks[i].href = link.href;
pageLinks[i].firstChild.nodeValue = link.text;
pageLinks[i].target = '_blank';
}
}
};


with:


function randLinks(){
var link, pageLinkClass = 'myLink', pageLinks = document.getElementsByTagName('a');
pageLinkClass = new RegExp('\\b' + pageLinkClass + '\\b');
for(var i = 0; i < pageLinks.length; ++i){
if(pageLinkClass.test(pageLinks[i].className)){
link = myLinks[Math.floor(Math.random() * myLinks.length)]
pageLinks[i].href = link.href;
pageLinks[i].firstChild.nodeValue = link.text;
pageLinks[i].target = '_blank';
}
}
}
if (window.addEventListener){
window.addEventListener('load', randLinks, false);
}
else if (window.attachEvent){
window.attachEvent('onload', randLinks);
}

fay123
11-24-2009, 09:16 AM
works perfectly:)

Thanks so much, John.

MacMajor
11-27-2009, 02:26 PM
Originally Posted by jscheuer1
But this would be fine:

Code:

{href: 'somepage.htm', text: "this'll work OK"},


I knew about the down slash, but I did not know you could change the type of quotation marks in a script. For ex. if I were editing a script that used single quotes; instead of using the down slash, I could just change to double quotes. I never thought of that, and would have assumed it would mess something up. Not knowing enough about JavaScript, my thoughts were to leave the code alone and only change the customization areas. Thank You! Learn something new every day! :)

Tracy

davidm84
03-24-2011, 10:18 AM
Hi,

I've found this thread useful in setting up a random URL generator from a list of pre-set URLs. I was wondering if anyone knows how this existing script can be modified to display random images (from a URL) which are hyperlinked to another URL?

i.e. I have images http://somesite.com/img1.png and img2.png etc

which I want hyperlinked to URLs http://somesite.com/page1.html etc

Is there a way to adapt the existing script to generate a random image linked to the corresponding URL?

If anyone can help, I'd be very grateful,

David

jscheuer1
03-25-2011, 05:47 AM
Sure:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.myLink, .myLink img {
display: block;
border-width: 0;
width: 140px;
height: 225px;
}
</style>
</head>
<body>
<a class="myLink" href="somedefault.htm"><img src="somedefault.jpg" alt="original image" title=""></a><br>
<a class="myLink" href="somedefault.htm"><img src="somedefault.jpg" alt="original image" title=""></a><br>
<a class="myLink" href="somedefault.htm"><img src="somedefault.jpg" alt="original image" title=""></a><br>
<a class="myLink" href="somedefault.htm"><img src="somedefault.jpg" alt="original image" title=""></a><br>
<a class="myLink" href="somedefault.htm"><img src="somedefault.jpg" alt="original image" title=""></a><br>
<script type="text/javascript">
(function(){
var pageLinkClass = 'myLink', myLinks = [
{href: 'somepage1.htm', src: 'photo1.jpg'},
{href: 'somepage2.htm', src: 'photo2.jpg'},
{href: 'somepage3.htm', src: 'photo3.jpg'},
{href: 'somepage4.htm', src: 'photo4.jpg'},
{href: 'somepage5.htm', src: 'photo5.jpg'},
{href: 'somepage6.htm', src: 'photo6.jpg'},
{href: 'somepage7.htm', src: 'photo7.jpg'},
{href: 'somepage8.htm', src: 'photo8.jpg'} // <--No comma after last link object
].sort(function(){return 0.5 - Math.random();}), pageLinks = document.getElementsByTagName('a'), i = 0, c = 0, link, pageLink, img;
pageLinkClass = new RegExp('\\b' + pageLinkClass + '\\b');
for(i; i < pageLinks.length; ++i){
if(pageLinkClass.test(pageLinks[i].className)){
link = myLinks[c++ % myLinks.length];
pageLink = pageLinks[i];
img = pageLink.getElementsByTagName('img')[0];
pageLink.href = link.href;
img.src = link.src;
pageLink.target = '_blank';
}
}
})();
</script>
</body>
</html>

Notes:


The link objects in the myLinks array could be expanded to include title and/or alt attributes for the images, as long as provision is made for assigning them in the for loop. Other things could be included for the images and/or the links.


All styles optional.


Switched to randomizing the array once. This will eliminate repeats unless there are more links on the page than than in the array.


Instead of onload, I've moved the script to the end of the body. This way it will load faster - a plus since there are images involved.


In light of that, best to use images of the smallest byte size possible.