Solved

Anchor Link (is it possible)

Posted on 2006-11-26
22
256 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
  • 8
  • 7
  • 6
22 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
Comment Utility
At the moment its static, I have tried searching for something but to no avail
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
 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
 

Author Comment

by:Kegan5
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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&amp;autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&amp;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&amp;autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&amp;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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Kegan5
Comment Utility
It doesnt do anything :S just gives an error
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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&amp;autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.u/film.flv&amp;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&amp;autoStart=true"
width="400" height="300">
<param name="movie"
value="http://site.com/flvplayer.swf?file=http://www.site.co.uk/film.flv&amp;autoStart=true" />
</object>
Bla bla bla
</div>
0
 

Author Comment

by:Kegan5
Comment Utility
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
Comment Utility
Sorry I sussed it out :D thank u very much for your help :_
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Hmm
0
 
LVL 41

Expert Comment

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

Good luck
0
 

Author Comment

by:Kegan5
Comment Utility
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
Comment Utility
Try again.
Split Points above the comment field
0
 
LVL 41

Expert Comment

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

Expert Comment

by:Michel Plungjan
Comment Utility
:)
0
 

Author Comment

by:Kegan5
Comment Utility
Think i've done it properly now :)

Thanks for your help too Happy New Year

K
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now