Kegan5
asked on
Anchor Link (is it possible)
I have a simple FAQ page with anchor links.
Is it possible to highlight the section the person has been taken to ?
Is it possible to highlight the section the person has been taken to ?
ASKER
At the moment its static, I have tried searching for something but to no avail
If the FAQ information is on the same page, then yes, this can be done with JavaScript and CSS.
If it is on a different page, then I think that this can only be done if the FAQ is on a server, which can "generate" the hiliting.
If it is on a different page, then I think that this can only be done if the FAQ is on a server, which can "generate" the hiliting.
ASKER
Do you know what I need to be searching for to get some sample code for this? I've looked now using css and javascript but I'm still not getting results :(
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Michel - I had just encountered the location.hash... Good to know. This would work for what Kegan5 asked - which would presumably have the anchor value as part of the URL. It is more challenging, however, if a link exists on the same page, since the hilite routine won't be invoked using something like:
<div id="part1Div">This will be hilited with a hash value or <a href='#part1'>part1</a></d
even if your add a call using onclick,
<div id="part1Div">This will be hilited with a hash value or <a href='#part1' onclick='hilite()'>part1</
when that function is invoked, the location.hash has not yet been updated, so the value of location.hash at the time the method is invoked is the current hash value, not the specified location.
I guess that it would be best to have the onclick call a function to remove the hilite entry from the current classname, locate the specificied target (i.e., if href value starts with '#'), and add hilite to its class.
<div id="part1Div">This will be hilited with a hash value or <a href='#part1'>part1</a></d
even if your add a call using onclick,
<div id="part1Div">This will be hilited with a hash value or <a href='#part1' onclick='hilite()'>part1</
when that function is invoked, the location.hash has not yet been updated, so the value of location.hash at the time the method is invoked is the current hash value, not the specified location.
I guess that it would be best to have the onclick call a function to remove the hilite entry from the current classname, locate the specificied target (i.e., if href value starts with '#'), and add hilite to its class.
Here
<html>
<head>
<script>
/* HILITE a div depending on the hash in the url
This function is run onLoad in intervals of 300 milliseconds
Michel Plungjan javascripts (a) planet.nl */
var saveHash = ""; /* setup a global var to save the hash when clicked inside the document */
var tId = ""; /* Interval ID */
function hilite() {
var h = location.hash; // get the #anchorname
if (h && h!=saveHash) { /* Does it exist and is it not the same as we already saved? */
var sDiv = document.getElementById(sa
if (sDiv) sDiv.className='normal'; /* Turn the hilite off if we found one */
var nDiv = document.getElementById(h.
if (nDiv) nDiv.className='hilite'; // hilite it if yes
saveHash=h; // save what we passed
}
}
</script>
<style>
.hilite { background-color:yellow }
.normal { background-color:white }
</style>
</head>
<body onLoad="tId=setInterval('h
<a href="#part1">part1 should work just fine too</a>
<a name="part1"></a>
<div id="part1Div">This will be hilited with a hash value or part1</div>
<a name="part2"></a>
<div id="part2Div">This will be hilited with a hash value or part2</div>
<a name="part3"></a>
<div id="part3Div">This will be hilited with a hash value or part3</div>
</body>
</html>
<html>
<head>
<script>
/* HILITE a div depending on the hash in the url
This function is run onLoad in intervals of 300 milliseconds
Michel Plungjan javascripts (a) planet.nl */
var saveHash = ""; /* setup a global var to save the hash when clicked inside the document */
var tId = ""; /* Interval ID */
function hilite() {
var h = location.hash; // get the #anchorname
if (h && h!=saveHash) { /* Does it exist and is it not the same as we already saved? */
var sDiv = document.getElementById(sa
if (sDiv) sDiv.className='normal'; /* Turn the hilite off if we found one */
var nDiv = document.getElementById(h.
if (nDiv) nDiv.className='hilite'; // hilite it if yes
saveHash=h; // save what we passed
}
}
</script>
<style>
.hilite { background-color:yellow }
.normal { background-color:white }
</style>
</head>
<body onLoad="tId=setInterval('h
<a href="#part1">part1 should work just fine too</a>
<a name="part1"></a>
<div id="part1Div">This will be hilited with a hash value or part1</div>
<a name="part2"></a>
<div id="part2Div">This will be hilited with a hash value or part2</div>
<a name="part3"></a>
<div id="part3Div">This will be hilited with a hash value or part3</div>
</body>
</html>
ASKER
thanks I used the top method which works perfectly however I used the same idea to display different videos... in Firefox it works perfectly but in IE it seems to open up each one under neath each other (I will explain below:)
I have the following code in the head tag:
Quote:
<script>
function show( obj ) {
var faq = document.getElementsByName
for ( var i = 0; i < faq.length; ++i ) {
faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = '';
return false;
}
</script>
And then the following in the body tag:
Quote:
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
<div id='FAQ_One' name='FAQ' style='display:none'; class="style6" >
<p>Music Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&autoStart=true" />
</object>
bla bla bla </p>
</div>
<div id='FAQ_Two' name='FAQ' style='display:none' class="style6">
<p>Acting Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true" />
</object>
Bla bla bla
</div>
There are also links which pick up each video e.g.
<a href='#One' onclick='return show(this)' id="li">Video One</a>
In firefox the video's open up in the same area so the video always opens up in a player in the top left corner.
However in IE If I click video 1 it opens up top left, then if i click Video 2 it opens up another video underneath video 1....
Why is this happening ?
Thanks in advance
I have the following code in the head tag:
Quote:
<script>
function show( obj ) {
var faq = document.getElementsByName
for ( var i = 0; i < faq.length; ++i ) {
faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = '';
return false;
}
</script>
And then the following in the body tag:
Quote:
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
<div id='FAQ_One' name='FAQ' style='display:none'; class="style6" >
<p>Music Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&autoStart=true" />
</object>
bla bla bla </p>
</div>
<div id='FAQ_Two' name='FAQ' style='display:none' class="style6">
<p>Acting Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true" />
</object>
Bla bla bla
</div>
There are also links which pick up each video e.g.
<a href='#One' onclick='return show(this)' id="li">Video One</a>
In firefox the video's open up in the same area so the video always opens up in a player in the top left corner.
However in IE If I click video 1 it opens up top left, then if i click Video 2 it opens up another video underneath video 1....
Why is this happening ?
Thanks in advance
there is no attribute called name of a DIV
Try this:
function show( obj ) {
var faq = document.getElementsByTagN
for ( var i = 0; i < faq.length; ++i ) {
if (faq[ i ].id.indexOf('FAQ_') !=-1) faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = 'block';
return false;
}
Try this:
function show( obj ) {
var faq = document.getElementsByTagN
for ( var i = 0; i < faq.length; ++i ) {
if (faq[ i ].id.indexOf('FAQ_') !=-1) faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = 'block';
return false;
}
ASKER
It doesnt do anything :S just gives an error
Works with this code:
<html>
<head>
<script>
function show( obj ) {
var faq = document.getElementsByTagN
for ( var i = 0; i < faq.length; ++i ) {
if (faq[ i ].id.indexOf('FAQ_') !=-1) faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = 'block';
return false;
}
</script>
</head>
<body>
<a href='#One' onclick='return show(this)' id="l1">Video One</a>
<a href='#Two' onclick='return show(this)' id="l2">Video Two</a>
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
<div id='FAQ_One' name='FAQ' style='display:none'; class="style6" >
<p>Music Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&autoStart=true" />
</object>
bla bla bla </p>
</div>
<div id='FAQ_Two' name='FAQ' style='display:none' class="style6">
<p>Acting Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true" />
</object>
Bla bla bla
</div>
<html>
<head>
<script>
function show( obj ) {
var faq = document.getElementsByTagN
for ( var i = 0; i < faq.length; ++i ) {
if (faq[ i ].id.indexOf('FAQ_') !=-1) faq[ i ].style.display = 'none';
}
var ref = obj.href;
ref = ref.replace( /^[^#]+#/, 'FAQ_' );
document.getElementById( ref ).style.display = 'block';
return false;
}
</script>
</head>
<body>
<a href='#One' onclick='return show(this)' id="l1">Video One</a>
<a href='#Two' onclick='return show(this)' id="l2">Video Two</a>
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
<div id='FAQ_One' name='FAQ' style='display:none'; class="style6" >
<p>Music Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&autoStart=true" />
</object>
bla bla bla </p>
</div>
<div id='FAQ_Two' name='FAQ' style='display:none' class="style6">
<p>Acting Video Showreel <br />
<object type="application/x-shockw
data="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&autoStart=true" />
</object>
Bla bla bla
</div>
ASKER
Thank you I'm 99.9% there now I think, the videos are opening in the same Div now but underneath the very first one...
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
Originally the divs would overwrite this one, now an additional div appears underneath this one.
Is that something to do with the new function?
<div class="style6" id='FAQ' name='FAQ'>
<img src="images/image.jpg" />
<p>
Text BLA BLA
</div>
Originally the divs would overwrite this one, now an additional div appears underneath this one.
Is that something to do with the new function?
ASKER
Sorry I sussed it out :D thank u very much for your help :_
Hmm
Thanks for the 'A'. However, I think that Michael (mplugjan) deserves a great deal of credit.
Good luck
Good luck
ASKER
I know, I'm sure the last time I accepted an answer it allowed me to do a 50/50 but it didn't give me the option this time....
Try again.
Split Points above the comment field
Split Points above the comment field
Michael - thanks. I didn't want to take all of the credit
ASKER
Think i've done it properly now :)
Thanks for your help too Happy New Year
K
Thanks for your help too Happy New Year
K
You might be able to do so with JavaScript and CSS