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 ?
Kegan5Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Or on any page:
<html>
<head>
<script>
function hilite() {
  var h = location.hash;
  alert(h)
  if (h) document.getElementById(h.substring(1)+'Div').className='hilite'
}
</script>
<style>
.hilite { background-color:yellow }
</style>
</head>
<body onLoad="hilite()">
<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>
0
 
HonorGodSoftware EngineerCommented:
Is your FAQ page a static, or dynamic page?
You might be able to do so with JavaScript and CSS
0
 
Kegan5Author Commented:
At the moment its static, I have tried searching for something but to no avail
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
HonorGodSoftware EngineerCommented:
 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.
0
 
Kegan5Author Commented:
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 :(
0
 
HonorGodConnect With a Mentor Software EngineerCommented:
One way to do it is:
----------------------------------------------------------------------
<html>
<head>
<title> FAQ </title>
<script>
  function show( obj ) {
    var faq = document.getElementsByName( 'FAQ' );
    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>
</head>
<body>
<ul>
<li><a href='#One'   onclick='return show(this)'>One</a></li>
<li><a href='#Two'   onclick='return show(this)'>Two</a></li>
<li><a href='#Three' onclick='return show(this)'>Three</a></li>
</ul>
<div id='FAQ_One' name='FAQ' style='display:none'>
<p>FAQ #1 Text</p>
</div>
<div id='FAQ_Two' name='FAQ' style='display:none'>
<p>FAQ #2 Text</p>
</div>
<div id='FAQ_Three' name='FAQ' style='display:none'>
<p>FAQ #3 Text</p>
</div>
</body>
</html>
0
 
HonorGodSoftware EngineerCommented:
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></div>

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</a></div>

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.
0
 
Michel PlungjanIT ExpertCommented:
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(saveHash.substring(1)+'Div'); /* see if we have a div already hilited */
    if (sDiv) sDiv.className='normal'; /* Turn the hilite off if we found one */
    var nDiv = document.getElementById(h.substring(1)+'Div'); /* see if a div with the anchorname exists */
    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('hilite()',300)">
<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>
0
 
Kegan5Author Commented:
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( 'FAQ' );
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-shockwave-flash"
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-shockwave-flash"
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
0
 
Michel PlungjanIT ExpertCommented:
there is no attribute called name of a DIV
Try this:

function show( obj ) {
  var faq = document.getElementsByTagName( 'DIV' );
  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;
}
0
 
Kegan5Author Commented:
It doesnt do anything :S just gives an error
0
 
Michel PlungjanIT ExpertCommented:
Works with this code:
<html>
<head>
<script>
function show( obj ) {
var faq = document.getElementsByTagName( 'DIV' );
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-shockwave-flash"
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-shockwave-flash"
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>
0
 
Kegan5Author Commented:
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?

0
 
Kegan5Author Commented:
Sorry I sussed it out :D thank u very much for your help :_
0
 
Michel PlungjanIT ExpertCommented:
Hmm
0
 
HonorGodSoftware EngineerCommented:
Thanks for the 'A'.  However, I think that Michael (mplugjan) deserves a great deal of credit.

Good luck
0
 
Kegan5Author Commented:
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....

0
 
Michel PlungjanIT ExpertCommented:
Try again.
Split Points above the comment field
0
 
HonorGodSoftware EngineerCommented:
Michael - thanks.  I didn't want to take all of the credit
0
 
Michel PlungjanIT ExpertCommented:
:)
0
 
Kegan5Author Commented:
Think i've done it properly now :)

Thanks for your help too Happy New Year

K
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.