2 Replies - 787 Views - Last Post: 30 April 2010 - 07:50 PM

#1 Guest_pythonBOI*


Reputation:

HTML, JavaScript, Blog Feed Quagmire

Posted 30 April 2010 - 07:32 AM

Let me start out by humbly stating that I believe I have conceived the most confusing piece of HTML ever to grace the world wide web with its presence. Its a very simple website created for a student group at UCLA. Technically, it is only a single web page, but I place all the content in separate divs, hide them all, then make them visible depending on the link that is clicked. This gives the illusion of a 'real' website. I know what you're thinking. In terms of technical design, this is a bigger FAIL than the iPad, but I'm working under some strange restrictions at the moment and this is only a temporary solution. Here's a stripped down version of the site that still reproduces the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org   /TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> Peer Advancement Community for Teens</title>
    <script type="text/javascript">
    window.onload = function () {
    //disable title links from blog feed
    var allSpans = document.getElementsByTagName('span');
    for (var p=0; p<allSpans.length; p++) {
        if (allSpans[p].className == 'headline') {
            allSpans[p].style.display = 'none';
            var headlineLink = allSpans[p].getElementsByTagName('a');
            if (headlineLink.length > 0) {
                headlineLink[0].removeAttribute('href');
                var title = document.createElement('h3');
                var text = headlineLink[0].innerHTML;
                var textNode = document.createTextNode(text);
                title.appendChild(textNode);
                allSpans[p].parentNode.insertBefore(title, allSpans[p]);
            }
        }
    }
    //setup navigation links and their corresponding content
	var homeLink = document.getElementById('homeLink');
	homeLink.style.color = '#990000';
	var allDivs = document.getElementsByTagName('div');
	var rightDivs = new Array();
	for (var l=0; l<allDivs.length; l++) {
		if (allDivs[l].className == 'right') {
			rightDivs[rightDivs.length] = allDivs[l];
		}
	}
	for (var i=0; i<rightDivs.length; i++) {
		if (rightDivs[i].id != 'homeContent') {
			rightDivs[i].style.display = 'none';
		}
	}
	var allLinks = document.getElementsByTagName('a');
	var navLinks = new Array();
	for (var j=0; j<allLinks.length; j++) {
		if (allLinks[j].className == 'navLink') {
			navLinks[navLinks.length] = allLinks[j];
		}
	}
	for (var k=0; k<navLinks.length; k++) {
		navLinks[k].onclick = function() {
			for (var m=0; m<navLinks.length; m++) {
				navLinks[m].style.color = '#006699';
			}
			for (var n=0; n<rightDivs.length; n++) {
				rightDivs[n].style.display = 'none';
			}
			switch (this.id) {
				case 'homeLink':
					homeLink.style.color = '#990000';
					var homeContent = document.getElementById('homeContent');
					homeContent.style.display = 'block';
					break;
				case 'projectsLink':
					var projectsLink = document.getElementById('projectsLink');
					projectsLink.style.color = '#990000';
					var projectsContent = document.getElementById('projectsContent');
					projectsContent.style.display = 'block';
					break;
				case 'partnersLink':
					var partnersLink = document.getElementById('partnersLink');
					partnersLink.style.color = '#990000';
					var partnersContent = document.getElementById('partnersContent');
					partnersContent.style.display = 'block';
					break;
				case 'officersmembersLink':
					var officersmembersLink = document.getElementById('officersmembersLink');
					officersmembersLink.style.color = '#990000';
					var officersmembersContent = document.getElementById('officersmembersContent');
					officersmembersContent.style.display = 'block';
					break;
				case 'photosLink':
					var photosLink = document.getElementById('photosLink');
					photosLink.style.color = '#990000';
					var photosContent = document.getElementById('photosContent');
					photosContent.style.display = 'block';
					//alert(photosContent.childNodes.length);
					break;
				case 'contactLink':
					var contactLink = document.getElementById('contactLink');
					contactLink.style.color = '#990000';
					var contactContent = document.getElementById('contactContent');
					contactContent.style.display = 'block';
					break;
			}
			return false;
		}
	}
    }
    </script>
    </head>
    <body>
    <h1>Peer Advancement Community for Teens</h1>
    <hr class="noFloat" />
    <ul id="linkMenu">
    <li><a class="navLink" id="homeLink" href="">Home</a></li>
    <li><a class="navLink" id="projectsLink" href="">Projects</a></li>
    <li><a class="navLink" id="partnersLink" href="">Partners</a></li>
    <li><a class="navLink" id="officersmembersLink" href="">Officers &amp; Members</a></li>
    <li><a class="navLink" id="photosLink" href="">Photos</a></li>
    <li><a class="navLink" id="contactLink" href="">Contact</a></li>
    </ul>
    <hr />
        	<div class="right" id="homeContent">
            	<h2>About PACT</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-home?format=sigpro" type="text/javascript" ></script>
            </div>
            <div class="right" id="projectsContent">
            	<h2>Projects</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-projects?format=sigpro" type="text/javascript" ></script>
            </div>
            <div class="right" id="partnersContent">
            	<h2>Partners</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-partners?format=sigpro" type="text/javascript" ></script>
            </div>
            <div class="right" id="officersmembersContent">
            	<h2>Officers &amp; Members</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-officersmembers?format=sigpro" type="text/javascript" ></script>
            </div>
            <div class="right" id="photosContent">
            	<h2>Photos</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-photos?format=sigpro" type="text/javascript" ></script>
            </div>
            <div class="right" id="contactContent">
            	<h2>Contact</h2>
                <hr class="titleRule" />
                <script src="http://feeds.feedburner.com/Pactucla-contact?format=sigpro" type="text/javascript" ></script>
            </div>
    </body>
    </html>


From the script tags in the body, you'll notice that I'm embedding multiple blog feeds into this site. When you click the first 4 links you'll see that everything works fine, but with the last two links no content shows up, not even the headers(which are hard coded and not a part of the feed).

When I delete the script tags and hard code all the content, all the links work. So the HTML and Javascript itself must be working correctly. Maybe there's some kind of external problem with the blog feed? Two problems with that: 1. this doesn't explain the disappearance of the headers and 2. if I insert jibberish at the beginning of the JS head script to break it and stop it from hiding any of the content divs, then all of the content shows up. So the feed has to be working.

Conclusion: there's something going wrong, but the problem isn't with the document or the blog feed. (???????????)

Other oddities:
-If I comment out the first four links, the last two links suddenly work.

Is This A Good Question/Topic? 0

Replies To: HTML, JavaScript, Blog Feed Quagmire

#2 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: HTML, JavaScript, Blog Feed Quagmire

Posted 30 April 2010 - 02:42 PM

I've played around with your code, and I think it's not the feed that's broken. The fault has to do with CSS hiding the element. I commented out the two lines of code that made the DIVs invisible, and the content for photos and contact showed up fine.

I figured out the problem. You know how each element on a page has to have a unique id? Well that's the problem with this page. The feed is loading an element with the same ID as your last two DIVs - "photosContent" and "contactContent". This makes Javascript do weird things. It probably set the style.display to block on the wrong element.

So to fix this, rename the ids of your last two DIVs to "photosContentA" and "contactContentA" or something like that. And change the JS code to reflect the new IDs.
Was This Post Helpful? 0
  • +
  • -

#3 Guest_pythonBOI*


Reputation:

Re: HTML, JavaScript, Blog Feed Quagmire

Posted 30 April 2010 - 07:50 PM

Works great now! Thanks.

That is definitely an odd error though. It seems strange that the blog feed would send HTML that includes ids identical to two of my content divs but different from the other four. I guess it was just bad luck for me.
Was This Post Helpful? 0

Page 1 of 1