...

View Full Version : Javascript and anchor tags



adamturtle
10-24-2008, 04:54 PM
Hi,

I have some experience with Javascript, but am probably better at hacking than writing. Anyway, here's my question:

I'm trying to write a javascript function that will wrap every H4 tag on my page in an anchor tag (<a name="..."></a>). The name of each anchor will be the number of the loop i.e. first H4's name would be 1, next one would be 2 etc.

Can someone help me write this?

Thanks for all your help.

abduraooft
10-24-2008, 05:19 PM
Putting a block level element(like div, h#) inside an inline element(like em,span) is invalid.
With that said, http://www.codingforums.com/showthread.php?t=135677 may help for your needs.

adamturtle
10-24-2008, 06:28 PM
Well then it has the same effect if the anchor is placed around the text of the H4, not the tag itself which I don't believe is invalid.

fishluvr
10-24-2008, 06:58 PM
If you're just trying to add some named anchors for in-page navigation, you could do something like this:


<script type="text/javascript">
function setNamedAnchors() {
var h4s = document.getElementsByTagName("H4"), i = 0;
while (h4s[i]) {
var namedA = document.createElement("A");
namedA.setAttribute("NAME", (i+1));
var txt = h4s[i].childNodes[0];
h4s[i].insertBefore(namedA, txt);
i++;
}
}
window.onload = setNamedAnchors;
</script>

adamturtle
10-24-2008, 07:01 PM
Worked great fishluvr, thank you so much!

adamturtle
11-11-2008, 07:26 PM
Hi, sorry to bring this up again but I've changed my document structure a little and added in some H5's as sub headings in the document. How would I modify the code above to add these into the sequence.

Also, I wrote the following code which outputs a list of the h4's and creates links to the various headings in the document.


var options = document.getElementsByTagName("h4");
document.write("<ul>");
if(options)
{
for(var i=0,limit=options.length; i < limit; ++i){
if(options[i].firstChild.nodeValue!="Sections"){
document.write("<li><a href=\"#"+(i+1)+"\">"+options[i].firstChild.nodeValue+"</a></li>");
}
}
document.write("</ul>");
}
How would I alter this to add in the h5's as a sub-list? Any help is appreciated.

itsallkizza
11-11-2008, 07:34 PM
Can you give some sample HTML output (what you want it to do) so I can see what you're going for?

adamturtle
11-11-2008, 07:59 PM
Ok, so let's say I have a document with the following:


<h4>First section heading</h4>
<p>Lorem ipsum etc..</p>

<h4>Second section heading</h4>
<h5>First subheading</h5>
<h5>Second subheading</h5>
<h5>Third subheading</h5>

<h4>Third Section heading</h4>

I would like to wrap these headings in <a> tags, numbered 1 to 5 or as far as I need to go in the order they appear on the page.

Secondly, I'm trying to write some js that will write the following html in my sidebar:

<ul>
<li><a href="#1">First section heading</a></li>
<li><a href="#2">Second section heading</a></li>
<ul>
<li><a href="#3">First subheading</a></li>
<li><a href="#4">Second subheading</a></li>
<li><a href="#5">Third subheading</a></li>
</ul>
<li><a href="#6">Third Section heading</a></li>
</ul>

I have ordered a book on how to do all this sort of stuff, but I'm still waiting on Amazon to deliver it!

So far I have all this working for H4 tags only, but I'd like to get the H5's added in as subheadings.

Hope this helps to clarify things, thanks.

itsallkizza
11-11-2008, 09:02 PM
This should help with your first question:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript">
// <![CDATA[

function doStuff()
{
var checkHasClass = function(element,name)
{
var names = name.split(" ");
for (var i=0;i<names.length;i++)
{
if (element.attributes["class"].value == names[i]) return true;
else if (element.className && element.className == names[i]) return true;
else if (element.getAttribute && element.getAttribute("class") == names[i]) return true;
}
return false;
}
var wrapInnerContentWithAnchor = function(element,href)
{
element.innerHTML = '<a href="'+href+'">'+element.innerHTML+'</a>';
}
var container_element = document; //if you can wrap your content in an element with an id, it would speed up the script
var divs = container_element.getElementsByTagName("div");
var section_number = 1;
for (var i=0;i<divs.length;i++)
{
if (checkHasClass(divs[i],"sec"))
{
var h5 = divs[i].getElementsByTagName("h5");
for (var s=0;s<h5.length;s++) wrapInnerContentWithAnchor(h5[s],"#sec"+section_number+"_sub"+(s+1));
wrapInnerContentWithAnchor(divs[i].getElementsByTagName("h4")[0],"#sec"+section_number++);
}
}
}

// ]]>
</script>
</head>
<body onload="doStuff()">

<div class="sec">
<h4>First section heading</h4>
<p>Lorem ipsum etc..</p>
</div>

<div class="sec">
<h4>Second section heading</h4>
<h5>First subheading</h5>
<h5>Second subheading</h5>
<h5>Third subheading</h5>
</div>

<div class="sec">
<h4>Third Section heading</h4>
<h5>First subheading</h5>
</div>

</body>
</html>


I have to get back to work right now so someone might beat me to the punch on your second question.

fishluvr
11-12-2008, 08:27 PM
Assuming you have a DIV with an id of "sidebar":


<script type="text/javascript">
/*<![CDATA[*/
function setNamedAnchors() {
var bod = document.getElementsByTagName("BODY")[0], i = 0, cnt = 0, shorts = [];
while (bod.childNodes[i]) {
var currNode = bod.childNodes[i];
if(currNode.nodeType == 1 && (currNode.nodeName == "H4" || currNode.nodeName == "H5")) {
var h_ = (currNode.nodeName == "H4") ? 4 : 5;
var namedA = document.createElement("A");
namedA.setAttribute("name", (cnt+1));
namedA.setAttribute("id", (cnt+1));
var txt = currNode.childNodes[0];
currNode.insertBefore(namedA, txt);
shorts[cnt] = [txt.nodeValue, h_];
cnt++;
}
i++;
}
buildLinks(shorts);
}
function buildLinks(shorts) {
var uList = document.createElement("UL"); curr = 0; i = 0;
while (shorts[i]) {
var newItem = document.createElement("LI");
var newA = document.createElement("A");
newA.setAttribute("href", "#"+(i+1));
newA.appendChild(document.createTextNode(shorts[i][0]));
newItem.appendChild(newA);
if (shorts[i][1] == 4) {
uList.appendChild(newItem);
} else {
var subUL = document.createElement("UL");
subUL.appendChild(newItem);
if (shorts[i+1][1] == 5) {
i++;
while(shorts[i][1] == 5) {
newItem = document.createElement("LI");
newA = document.createElement("A");
newA.setAttribute("href", "#"+(i+1));
newA.appendChild(document.createTextNode(shorts[i][0]));
newItem.appendChild(newA);
subUL.appendChild(newItem);
i++;
}
uList.appendChild(subUL);
i--;
}
}
i++;
}
// Modify this line to where the new UL should be appended.
document.getElementById("sidebar").appendChild(uList);
}

window.onload = setNamedAnchors;
/*]]>*/
</script>

itsallkizza
11-12-2008, 08:56 PM
*high five* for the tag team :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum