...

View Full Version : Random links generator of all links in a page, but only a specific part of that page



Christianne
07-14-2012, 11:09 AM
Hi, I'm new here and not proficient in javascript, but I hope I can explain my problem clearly enough.

On Javascriptkit.com (http://www.javascriptkit.com/javatutors/random3.shtml) is a script to link randomly to any link appearing on a page. This is the script as I have used it:


<!--webbot bot="HTMLMarkup" startspan --><script>
function random_all(){
var myrandom=Math.round(Math.random()*(document.links.length-1))
window.location=document.links[myrandom].href
}
</script>
<center><form>
<input type="button" value="Random Recipe!" onClick="random_all()" />
</form></center><!--webbot bot="HTMLMarkup"
endspan -->

I want to use this on pages on my site which offer an ordered list of historical recipes. I have placed the links in a three-column table, because otherwise the page would be very long (and narrow). This is the page I have experimented with (http://www.coquinaria.nl/divers/indexperiod.html).

But the random-links-button also comes up with pages from the navigation menu, or the Creative Commons page at the bottom of the page. To manually add the 100+ links is possible, but cumbersome. On the same website, I found how to that, but I'd rather use the automated generator because the added code will be very long otherwise.
This is the code for adding links manually (taken from Javasciptkit.com (http://www.javascriptkit.com/javatutors/random2.shtml)):



<script type="text/javascript">
function randomlinks(){
var myrandom=Math.round(Math.random()*9)
var links=new Array()
links[0]="http://www.javascriptkit.com"
links[1]="http://www.dynamicdrive.com"
links[2]="http://www.cssdrive.com"
links[3]="http://www.codingforums.com"
links[4]="http://www.news.com"
links[5]="http://www.gamespot.com"
links[6]="http://www.msnbc.com"
links[7]="http://www.cnn.com"
links[8]="http://news.bbc.co.uk"
links[9]="http://www.news.com.au"

window.location=links[myrandom]
}
</script>
<form>
<input type="button" value="random link!" onClick="randomlinks()">
</form>

So my question is: Is there a way to limit the range on the page from which the automatic random link generator picks the urls? In my case that would be all links within that table, and only those links.

Fou-Lu
07-15-2012, 04:27 AM
Despite the similar sounding names, Java is not the same as Javascript.
Moving from Java forum to Javascript forum.

I haven't a clue if JS has an array diff function or not, but if it does it'd be easier to give it a list of links to ignore instead and just diff them out of the original links array.

DrDOS
07-15-2012, 05:10 AM
Oddly enough I just helped someone on this post, with a similar problem.

http://www.codingforums.com/showthread.php?t=267886

It doesn't need much adaptation at all to fit your need. Just put the links you want randomized in the array.

Philip M
07-15-2012, 10:18 AM
Just put the links you want randomized in the array.

He says he does not want to do that manually!

Try this:-




<a href = "http://www.javascriptkit.com">JK</a>
<a href = "http://www.dynamicdrive.com">DD</a>
<a href = "http://www.codingforums.com">CF></a>
<a href = "http://news.bbc.co.uk">BBC</a>
<a href = "http://www.news.com.au">NEWS</a>

<script type = "text/javascript">

var len = document.links.length;
var myrandom = 0;
while (myrandom == 0 || myrandom == 4) { // random numbers 0 and 4 will never be selected
// or while(myrandom < 3 || myrandom > 26) { // or whatever
myrandom=Math.round(Math.random()*(len-1));
}

alert (myrandom + " " + document.links[myrandom]);

window.location=document.links[myrandom];

</script>



The boys' performance today was so good that I've literally run out of expletives to describe it. - Commentator BBC Radio 5 Live

low tech
07-15-2012, 11:53 AM
Hi


So my question is: Is there a way to limit the range on the page from which the automatic random link generator picks the urls?

In my case that would be all links within that table, and only those links.


I think the OP means something like this --- not sure I have it exactly right but it seems to work (in chrome anyway)


<html>
<head>
<title></title>
</head>
<body >

<table width="100%" border="1" cellspacing="1" cellpadding="1" id="myTABLE">
<tr>
<td><a href = "http://www.javascriptkit.com">JK</a></td>
<td><a href ="http://www.dynamicdrive.com">DD</a></td>
</tr>
<tr>
<td><a href = "http://www.codingforums.com">CF></a></td>
<td><a href = "http://news.bbc.co.uk">BBC</a></td>
</tr>
<tr>
<td><a href = "http://www.news.com.au">NEWS</a></td>
<td>&nbsp;</td>
</tr>
</table>


<script type="text/javascript">
//*<![CDATA[

var tableLinks = document.getElementById("myTABLE").getElementsByTagName('a');
alert("total found links in table "+tableLinks.length); //how many links found
var myrandom = 0;
while (myrandom == 0 || myrandom == 4) { // random numbers 0 and 4 will never be selected
// or while(myrandom < 3 || myrandom > 26) { // or whatever
myrandom=Math.round(Math.random()*(tableLinks.length-1));
}

alert (myrandom + " " + tableLinks[myrandom]);
//window.location=tableLinks[myrandom].href; //uncomment to go to random page

//*]]>
</script>
</body>
</html>



I don't think the while loop is needed IF just choosing a random link from the links within a table --- no?


<script type="text/javascript">
//*<![CDATA[

var tableLinks = document.getElementById("myTABLE").getElementsByTagName('a');
alert("total found links in table "+tableLinks.length); //how many links found
var myrandom = 0;
myrandom=Math.round(Math.random()*(tableLinks.length-1));

alert (myrandom + " " + tableLinks[myrandom]);
//window.location=tableLinks[myrandom].href; //uncomment to go to random page

//*]]>
</script>

LT

Christianne
07-15-2012, 11:53 AM
Thanks Fou-Lu, I didn't know there was a difference between Java and javascript, other than Java is an Indonesian island!

Philip M
07-15-2012, 12:22 PM
I don't think the while loop is needed IF just choosing a random link from the links within a table --- no?



Yes, that is so. :) I had not picked up that the links were in a table. My script was a way to link to any link on a page, but excluding certain ones -perhaps the first three and/or the last two.

low tech
07-15-2012, 12:34 PM
Hi philip


Yes, that is so. I had not picked up that the links were in a table.

Yeh, I figured you'd overlooked that detail tho that is unusual for you:-)



My script was a way to link to any link on a page, but excluding certain ones -perhaps the first three and/or the last two.

Maybe the OP actually wants that ---- i'm not sure to be totally honest. I think the title suggests that

Random links generator of all links in a page, but only a specific part of that page

but then the detail suggested just within a table. Who knows hahaha


LT

Philip M
07-15-2012, 12:40 PM
Maybe the OP actually wants that ---- i'm not sure to be totally honest. I think the title suggests that


but then the detail suggested just within a table. Who knows hahaha


LT

As always, there is more than one way to skin a cat. The user can now decide which script suits him best!

Christianne
07-15-2012, 01:31 PM
Thank you Low Tech and Philip M for think along with me!
Sorry for the confusion, I regarded the table as a specific part of the page.
I have tried your suggestions but couldn't get it to work yet. But I will keep trying, and maybe I will just add all links in the array to start with.

Philip M
07-15-2012, 01:50 PM
Thank you Low Tech and Philip M for think along with me!
Sorry for the confusion, I regarded the table as a specific part of the page.
I have tried your suggestions but couldn't get it to work yet. But I will keep trying, and maybe I will just add all links in the array to start with.

Both my and Low Tech's scripts work for me! :)

Christianne
07-15-2012, 02:27 PM
Did you try this on a page wich has other links before the table?

It could be that I am simply much too ignorant in Javascript. I tried the script with the table with five links on a page (http://www.coquinaria.nl/Untitled_3.html) with no css-template:


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Untitled 3</title>
<meta name="robots" content="noindex, nofollow" />
</head>

<body>
<p><a href="http://www.coquinaria.nl">www.coquinaria.nl</a></p>
<p><a href="http://www.kookboekrecensies.nl">www.kookboekrecensies.nl</a></p>
<p><br />
</p>

<center><form>
<input type="button" value="Random Recipe!" onclick="random_all()" />
</form></center>

<table width="100%" border="1" cellspacing="1" cellpadding="1" id="myTABLE">
<tr>
<td><a href = "http://www.javascriptkit.com">JK</a></td>
<td><a href ="http://www.dynamicdrive.com">DD</a></td>
</tr>
<tr>
<td><a href = "http://www.codingforums.com">CF</a></td>
<td><a href = "http://news.bbc.co.uk">BBC</a></td>
</tr>
<tr>
<td><a href = "http://www.news.com.au">NEWS</a></td>
<td>&nbsp;</td>
</tr>
</table>

<p>&nbsp;</p>
<p><a href="http://www.meteoblue.com">www.meteoblue.com</a></p>
<p>&nbsp;</p>
<script type="text/javascript">
function random_all(){
var tableLinks = document.getElementById("myTABLE").getElementsByTagName('a');
alert("total found links in table "+tableLinks.length); //how many links found
var myrandom = 0;
myrandom=Math.round(Math.random()*(tableLinks.length-1));

alert (myrandom + " " + tableLinks[myrandom]);

window.location=document.links[myrandom].href
}
</script>

</body>

</html>


I looked in Firefox and Explorer, but the links I put on the page before the table still turned up in the randomized links. When I used this in a page with my css-template, the template didn't show up online.
No doubt I am doing something very stupid which causes the failure.:o

low tech
07-15-2012, 02:33 PM
Hi

In yr code ...


alert (myrandom + " " + tableLinks[myrandom]);

window.location=document.links[myrandom].href
}
</script>

... The red part is NOT part of the new script -- maybe that's why it gets links other than in the table.
(compare code at post 5)

it should be


window.location=tableLinks[myrandom].href;

LT

Christianne
07-15-2012, 03:04 PM
Low Tech, I have changed the code to your suggestion. That works! You are great!

But there is another thing that remains the same (I have not mentioned this before). If I click on the Random Link Button, first this pop-up appears:
http://www.coquinaria.nl/images/design/Knipsel1.JPG

I have to click OK, then this pop-up appears:
http://www.coquinaria.nl/images/design/Knipsel2.JPG

Only when I click once more on OK, the random page appears. What can I do to make these pop-ups dissapear and let visitors go straight to the randomly linked page when clicking on the button?
And is there something in the code that is incompatible with CSS? Here (http://www.coquinaria.nl/Untitled_2.html) I used the same code on a page with the template from my site, and as you can see, the template does not work. It should look something like this (http://www.coquinaria.nl/english/found.htm) (but different background).

I appreciate very much the time you take to look at my problems!

low tech
07-15-2012, 03:11 PM
Hi

two forward slashes // are js comment marks

if you PUT them at the start of the line, that line of code WILL NOT run

//alert('');

the alert is there just for checking --- easier than debugging later

so just comment out those lines that contain alert.

You can use these comment marks to add comments to your code (no surprise there) or stop the line of code from running

ie (not real code)

//note: get link function
function getLink(){
//alert('in function') //remove comments to see alert --- u get it etc
}


CSS

Nothing there to stop your css.

You need to check the address of your css file, it is different in those pages.

href="CSS/nltest.css" not seen
href="../CSS/en.css" seen

The reason why it cannot be seen is because the server cannot find it. 404 not found.

LT
good luck

Christianne
07-15-2012, 03:52 PM
Thanks again Low Tech, now everything works as it should!
That css-link was from when I tested something in the template, and then I deleted it online, but it was still on my pc.
Removing the alerts I now understand.
As soon as possible, I will acquire some books (I saw a thread here recommending some) and experiment to obtain a better understanding of Javascript. Again, thank you!!!

low tech
07-15-2012, 04:12 PM
Hi

credit of course goes to all who contribute, but I'm happy that you are happy:thumbsup:


learning more about js

Yeh, you can check out
http://www.w3schools.com/js/

Though some of their code is getting a little outdated.

or

http://javascriptexample.net/index.php
(IMO I think this site is better once you have the basics --- but you can also start here if you are up to it)


Anyway.

Good luck:-)

DrDOS
07-15-2012, 04:55 PM
You can still make the array and have javascript build the part of the page that has the links. And if you change or add any link you just have to change the array.

Christianne
07-15-2012, 05:15 PM
I have uploaded the page I was working with, thanks again for all of you who have contributed to the solution.:thumbsup:
The result can be seen here (http://www.coquinaria.nl/divers/indexperiod.html). There are five other pages I'll apply this code to. I love it.:)

Philip M
07-15-2012, 05:23 PM
I have uploaded the page I was working with, thanks again for all of you who have contributed to the solution.:thumbsup:
The result can be seen here (http://www.coquinaria.nl/divers/indexperiod.html). There are five other pages I'll apply this code to. I love it.:)

Congratulations! A very nice site! Zeer indrukwekkend!
Take notice of Dr DOS. He often fails to grasp the point of a thread.

DrDOS
07-15-2012, 07:08 PM
Congratulations! A very nice site! Zeer indrukwekkend!
Take notice of Dr DOS. He often fails to grasp the point of a thread.
The point of every thread here is to help the user solve a problem, even if that solution doesn't fit within the context originally stated. After all, as they say around these parts, javascript offers more than one way to skin a cat(fish).

Christianne
07-16-2012, 01:16 PM
You're welcome, and thank Low tech and Philip M too!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum