Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript and anchor tags

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Putting a block level element(like div, h#) inside an inline element(like em,span) is invalid.
    With that said, Using <p> & <span> tags inside the <a></a>Tag may help for your needs.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder fishluvr's Avatar
    Join Date
    Nov 2005
    Posts
    110
    Thanks
    1
    Thanked 12 Times in 12 Posts
    If you're just trying to add some named anchors for in-page navigation, you could do something like this:

    Code:
    <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>
    ><((((º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((º>`·.¸¸.·´¯`·.¸¸.·´¯`·.. ><((((º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((º>

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked great fishluvr, thank you so much!

  • #6
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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.

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Can you give some sample HTML output (what you want it to do) so I can see what you're going for?
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #8
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so let's say I have a document with the following:

    Code:
    <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:
    Code:
    <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.

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    This should help with your first question:
    Code:
    <!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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #10
    Regular Coder fishluvr's Avatar
    Join Date
    Nov 2005
    Posts
    110
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Assuming you have a DIV with an id of "sidebar":

    Code:
    <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>
    ><((((º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((º>`·.¸¸.·´¯`·.¸¸.·´¯`·.. ><((((º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((º>

  • #11
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    *high five* for the tag team
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •