Help with external links to a table

@mrowsiApr 14.2009

Hi, I am very new to java I am only just getting to grips with html and css.
I am creating a new web site for our small business.
I have created a simple table for a price list of courses.
When I click on a link from
~~[url]~~http://amdivers.co.uk/AM%20Divers%20images/TESTWeb/AD.html[/url] to the price page here
~~[url]~~http://amdivers.co.uk/AM%20Divers%20images/TESTWeb/AMDPrices.html[/url]

I want the table with “individual adventure dives” to be some how highlighted.

If they come from an open water page I want the Open water course line to be highlighted.

I think I need Java, I have tried setting a varible “highlight” on the AD page to “AD” then I had a Sort of script in the table, but needless to say no chance!
Can someone please point me in the right direction to accomplish this.

to post a comment

JavaScript

15 Comments(s) _↴

@FangApr 14.2009 — #I want the table with "individual adventure dives" to be some how highlighted.[/QUOTE] Do you mean the table row?

JavaScript and Java are not the same

@mrowsiauthorApr 14.2009 — #yes sorry table row ie the price of an open water course when they come fro open water course

or price of the advanced course or advanced course page

or deep course deep diver course.

@FangApr 14.2009 — #Add a [I]hash [/I]to the price link on each page:

on the [I]PADI Open Water Scuba Diver[/I] page<div class="Object8268"><a target="_parent" href="AMDPrices.html[COLOR="Blue"]#OpenWater[/COLOR]" onMouseOver
On the price page, change all the [I]name[/I]'s to [I]id[/I]'s:

&lt;td&gt;&lt;a [COLOR="Blue"]id[/COLOR]="OpenWater" target="_parent" href="http://www.amdivers.co.uk/LearntoScubadiveAMDiversHull.html"&gt;Open Water Diver course&lt;/a&gt;&lt;/td&gt;

Add a bit of JavaScript to the prices page:

window.onload=function() {
 if(location.hash) {
 document.getElementById(location.hash.substring(1)).parentNode.style.backgroundColor='yellow';
 }
 };

@mrowsiauthorApr 14.2009 — #Thanks Fang that sort of works, its highlighting the relevant line, but its also jumping to the top of the screen, not a problem you would say, but it is not loading the page above it ie the headings and nav buttons etc are not been loaded, I would like the full page to be loaded with just the table row highlighted,

if you click on "price list" from here

http://amdivers.co.uk/AM%20Divers%20images/TESTWeb/AD.html

or Price list from here

http://amdivers.co.uk/AM%20Divers%20images/TESTWeb/MSD.html

it goes to the bottom of the page.

can I open the ful page from the #name call ?

If I take away the script it does the same, it loads to the location.

Thanks in advance

@mrowsiauthorApr 15.2009 — #I have manged to solve it, I am not sure if it is what you would have come up with, or even if it works in all browsers, not had chance to test it yet, but I have added this to the code

</head>

<body>

<script type="text/javascript">

window.onload=function() {

if(location.hash) {

document.getElementById(location.hash.substring(1)).parentNode.style.backgroundColor='yellow';

[COLOR="red"]window.parent.location ="#top"; [/COLOR] }

};

</script>

[COLOR="Red"]<a name="TOPPAGE"</a>[/COLOR]

And that seems to be doing the trick Thankyou, if you have any better ideas, I would still be most greatful.

@mrowsiauthorApr 15.2009 — #Should read "#TOPPAGE"

@mrowsiauthorApr 15.2009 — #I have just tried pages out in firefox, safari, chrome and Opera, the change colour and jump to top of page dosnt work, is there anything I will need to do to get them to work in these browers? as it looks terrible the web page is missing all the nav links and headers etc.

Sorry to be a pain.

@mrowsiauthorApr 15.2009 — #also just noticed, in IE7 when I click from AD page it only goes to top of page, if I go back then click link again, it goes to #TOPPAGE and the table row is yellow, not working correctly not sure off earlier IE versions.

@FangApr 15.2009 — #Remove [I]overflow:hidden;[/I] from [I]#wrapper[/I]

The intension was to highlight a row and scroll the row into view as some of the rows are only visible by scrolling.

Change all the [I]name[/I]'s to [I]id[/I]'s; using [I]name[/I]'s is the old method of setting bookmarks.

Remove this: [I]window.parent.location ="#top";[/I] It only reloads the page.

@mrowsiauthorApr 15.2009 — #I need the overflow hidden in as when I get a small screen I dont want the text to be squashed into a small screen, I want a scroll bar to appear. Also when you get a larger screen with larger resolution say 1600x1250 the web pages float in the middle of the screen.

And yes I want the the page to reload in full with just a highlighted row.

I will change the names to id though. Never realized it was an old method.

Is the window.onload the only way to "run" the function is the a way of runing the script from the page its leaving so the loading page know's the result of the

if(location.hash) {

document.getElementById(location.hash.substring(1)).parentNode.style.backgroundColor='yellow';

window.parent.location ="#TOPPAGE"; }

};

and loads full screen with a highlighted price?

Sorry my partner has changed the goal posts. Hence the need for full page

@FangApr 15.2009 — #Place this on the prices page (cut & paste):

window.onload=function() {
 if(location.hash) {
 document.getElementById(location.hash.substring(2)).parentNode.style.backgroundColor='yellow';
 }
 };

On the other pages, add an extra character infront of the bookmark:

&lt;a target="_parent" href="http://amdivers.co.uk/AM&amp;#37;20Divers%20images/TESTWeb/AMDPrices.html#[COLOR="Blue"]x[/COLOR]AD"&gt;

This should prevent the url bookmark from scrolling the document, but still highlight the row.

It's is a work-around for the css you have implemented.

@mrowsiauthorApr 15.2009 — #Thanks Fang,

I havent had chance to change the name tag to ID yet, but I have changed the script on the price page and added the x to 2 pages and it seems to be working ? I will check with firefox and other web browsers later, at work at mo! and very bust for a change.

@mrowsiauthorApr 15.2009 — #Thanks Fang for all your help. I hope you could spare a little more time to help.

The script works as my wife first wanted, but now after seeing it work wants a change if possible.

Because the script highlights correctly the lines

Dry Suit Specialty, including pool orientation £105

Enriched Air Diver Specialty – Non diving £50

Master Scuba Diver £28

Professional Level

Dive Master Internship

are off the bottom of the screen she was wondering if we could jump to the bottom of the screen with correct line highlighted and then be able to scroll up ?

I know its alot to ask, but thanks in advance.

@FangApr 16.2009 — #

window.onload=function() {
 if(location.hash) {
 var obj=document.getElementById(location.hash.substring(2));
 obj.parentNode.style.backgroundColor='yellow';
 obj.scrollIntoView();
 }
 };

@mrowsiauthorApr 21.2009 — #Thanks Fang,

I have left out the onscroll, as it messes up the css for the floating web page.

My wife is happy that they will scroll down when they cant see what they are looking for.

What we would like is to get it to work in Firefox. I have surfed around to try and sort the onoad funtion for firefox, but cant seem to find the cure.

Can you assist in this one?

The page works great in IE but not the others.

Also in #JavaScript _↴

Problems: date picker need help with my small javascripts codes onLoad function error

Success!

Help @mrowsi spread the word by sharing this article on Twitter...

Tweet This

Help with external links to a table

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with external links to a table

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴