Solved

Anchor Link (is it possible)

Posted on 2006-11-26
22
302 Views
Last Modified: 2010-08-05
I have a simple FAQ page with anchor links.

Is it possible to highlight the section the person has been taken to ?
0
Comment
Question by:Kegan5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 6
22 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 18014599
Is your FAQ page a static, or dynamic page?
You might be able to do so with JavaScript and CSS
0
 

Author Comment

by:Kegan5
ID: 18014607
At the moment its static, I have tried searching for something but to no avail
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18014624
 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Kegan5
ID: 18014692
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
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 60 total points
ID: 18015116
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 65 total points
ID: 18015415
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 18021382
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18022810
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
 

Author Comment

by:Kegan5
ID: 18121781
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18121813
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
 

Author Comment

by:Kegan5
ID: 18121922
It doesnt do anything :S just gives an error
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18121977
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
 

Author Comment

by:Kegan5
ID: 18122103
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
 

Author Comment

by:Kegan5
ID: 18123439
Sorry I sussed it out :D thank u very much for your help :_
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18249888
Hmm
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18252283
Thanks for the 'A'.  However, I think that Michael (mplugjan) deserves a great deal of credit.

Good luck
0
 

Author Comment

by:Kegan5
ID: 18252370
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18253595
Try again.
Split Points above the comment field
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18254018
Michael - thanks.  I didn't want to take all of the credit
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18254153
:)
0
 

Author Comment

by:Kegan5
ID: 18254306
Think i've done it properly now :)

Thanks for your help too Happy New Year

K
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question