Jump to content

Safari trouble

lastlifelost

By lastlifelost
in JavaScript

Recommended Posts

lastlifelost Member

lastlifelost

Posted
Posted
http://sosimagesonline.com/_sites/bishopsky/poems.htmI'm having trouble with this page in Safari. The buttons under the header work fine in every other browser, but don't want to play nice here. The content at the bottom of the page should be changing when the buttons are clicked. Why would this work everywhere except Safari?Here's the code:Javascript (contentDivSwapperJS)
function showContent(hiddenContent) {	var Content = document.getElementsByTagName("div");	for(var x=0; x<Content.length; x++) {		class = Content[x].getAttribute("class");		if (class == 'contentItem') {			if (Content[x].id == hiddenContent) {				Content[x].style.display = 'block';			}			else {				Content[x].style.display = 'none';			}		}	}}

Pertinent code from the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="douglasbishoppoetry.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- Premium Beats MP3 player --><script type="text/javascript" src="scripts/contentDivSwapperJS.js"></script> <!-- content div swapper --><script type="text/javascript" src="scripts/mootools.svn.js"> // MooTools horizontal menu scroller 	<!--		window.addEvent('domready', function(){			var scroll2 = new Scroller('menuContainer', {area: 50, velocity: .15});			$('menuContainer').addEvent('mouseover', scroll2.start.bind(scroll2));			$('menuContainer').addEvent('mouseout', scroll2.stop.bind(scroll2));		}); 	--></script> </head><!--<?phpecho "<body id='" . $pagePath . "Page'>";?>--><body id="poemsPage"><div id="wrapper"><div id='page' style='background:url(images/content/cornerchar/poems.png) no-repeat 10px 10px #fff'>			<h1 id="artist">Douglas Bishop</h1>		<div id="menuContainer">			<ul class="menuGroup">				<li class="menuItem vcenterOuter" onclick="showContent('Content1');" >					<div class="vcenterMiddle">						<div class="vcenterInner">							<a href="#">All Blues <br> Collection </a>						</div>					</div>				</li>				<li class="menuItem vcenterOuter" onclick="showContent('Content2');" >					<div class="vcenterMiddle">						<div class="vcenterInner">							<a href="#">The 8 Fold <br> Path</a>						</div>					</div>				</li>				<li class="menuItem vcenterOuter" onclick="showContent('Content3');" >					<div class="vcenterMiddle">						<div class="vcenterInner">							<a href="#">The Water <br> is Wide</a>						</div>					</div>				</li>				<li class="menuItem vcenterOuter" onclick="showContent('Content4');" >					<div class="vcenterMiddle">						<div class="vcenterInner">							<a href="#">What I Want <br> for Me ...</a>						</div>					</div>				</li>			</ul>		</div>	<!-- end menuContainer -->		<div id="content" class="contentGroup">			<!-- each element must have style tag to work with showContent script.  Set first element to display:block.  				 Set all others to display:none -->			<div id="Content1" class="contentItem" style="display:block">				  <h2 class="title">All Blues Collection</h2>				<div class="text">					<div>						<h3>All Blues for Miles <span class="subtitle"> - part 1</span></h3>						<div  class="mp3Player">							<div id="allBlues">																		<script type="text/javascript">									var options = {};									options.mediaPath = "mp3/allBlues.mp3";																		var params = {};									params.allowScriptAccess = "always";																		swfobject.embedSWF("scripts/OriginalThinMusicPlayer.swf", "allBlues", "250", "21", "9.0.0",false, options, {}, {});								</script>														</div>			 						</div>		<!-- end mp3Player -->						<p>							<span class="firstChar">B</span>							y 1959, Miles was ready,<br> 							Having learned how to use his horn<br>							To cut out the shape of  his self in sound,<br>							To stand, brassy bright<br>							Above the lush rippling of Gil Evans’s strings:<br>							One blue star shining alone<br>							Above the deep indigo silhouette of the night-eating mountains.						</p>					</div>					</div>			</div>			<div id="Content2" class="contentItem" style="display:none">				  <h2 class="title">The 8 Fold Path</h2>				<div class="text">					<div>						<h3>About the 8 Fold Path</h3>												<p>							<span class="firstChar">L</span>							orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla mi, ultricies sit amet 							tempus in, ultricies vel libero. Nulla mauris nibh, gravida nec dapibus et, dignissim sed 							nisi. Fusce nec lectus sed diam ullamcorper interdum nec quis elit. Duis at auctor eros. 							Vestibulum magna purus, pharetra porta convallis eu, tempus sed turpis. Nunc at diam erat, 							non consequat ipsum. Sed eu justo ipsum, vitae gravida nunc. Donec varius neque dictum 							felis rutrum eleifend. Quisque at sapien lectus. Aliquam lacinia, dolor quis mattis luctus, 							arcu justo interdum dui, non vulputate metus libero nec libero. Proin sed pulvinar ipsum. 							Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 							Suspendisse vehicula imperdiet auctor.  						</p>								</div>										</div>			</div>		</div>	</div></div></body></html>

Link to comment
Share on other sites
lastlifelost Member

lastlifelost

Posted
  • Author
Posted

Please forgive me - I'm still pretty new at this. Where should that go? I tried replacing getAttribute("class"); with className; and it didn't seem to fix anything. The new code looks like this:

function showContent(hiddenContent) {	var Content = document.getElementsByTagName("div");	for(var x=0; x<Content.length; x++) {		class = Content[x].className;		if (class == 'contentItem') {			if (Content[x].id == hiddenContent) {				Content[x].style.display = 'block';			}			else {				Content[x].style.display = 'none';			}		}	}}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

are you checking for/getting any errors? I turned on the error console on in Safari and found each time I clicked one of the tabs it gave an error Can't find variable showContent (line 54, 61, 68, 75 respectively for each tab)edit: this is still based of the link, so if you haven't uploaded the newer version, then the errors are related to the first post. However, the practice of checking for errors still applies

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

The link seems not to have an updated script.The first error that pops up in Safari is a parsing error on the getAttribute line (exactly as Ingolme predicted). Since the function does not parse, it does not exist. That explains the Can't find variable showContent error.If lastlifelost wants more help on this, the link should lead to an updated page. Then we can see what sort of errors the new code generates. It is also possible that something old is generating an error.

Link to comment
Share on other sites
lastlifelost Member

lastlifelost

Posted
  • Author
Posted

I definitely still want help. I had updated the script on the server last night, but I guess something didn't work. I've gone ahead and re-saved the page, removed the link to the script (in case there was a problem accessing the file somewhere) and coded the updated Java code right onto the page. Here's the new page: sosimagesonline.com/_sites/bishopsky/fixing_poems.htm. (--Edit-- This page isn't there now. I took it down when I fixed the issue. Use this link to see the fixed page)Thanks for suggesting the error console. I've been checking it this morning and keep coming up with a Syntax Error: Parse error on line 21, which happens to be the "class = Content[x].className;" line. This is followed by the ReferenceError: Can't find variable: showContent when the tabs are clicked.--EDIT--Right after I posted this I searched for a Javascript validator and found http://www.jslint.com/. I entered my script and found the error. I was using a reserved word (class) as a variable on line 21. I fixed the code as follows and it seems to work just fine now: 

	function showContent(hiddenContent) {		var Content = document.getElementsByTagName("div");		for(var x=0; x<Content.length; x++) {			var divClass = Content[x].className;			if (divClass == 'contentItem') {				if (Content[x].id == hiddenContent) {					Content[x].style.display = 'block';				}				else {					Content[x].style.display = 'none';				}			}		}	}

I wouldn't have even thought to do this if you all hadn't helped me debug this. Thanks for your help!

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

try changing the variable name to something other than class, i.e.

var myClass = Content[x].className;

class is a reserved word in javascript.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...