Solved

Adding DOCTYPE breaks Javascript, and vertical alignment works in FF but not Safari

Posted on 2009-07-10
11
641 Views
Last Modified: 2013-11-19
I'm creating a menu for a website that uses Javascript to animate the buttons (specifically, to make them expand or contract on mouse-over). The site requires that the visuals for the buttons overlap, so I've re-directed the onmouseover and onmouseout events from a series of blank <a href> elements, which will trigger the images' movement.

I've run into two problems:

First of all, I started programming in HTML, CSS, etc. very recently, and I didn't realize that I would want a !DOCTYPE for my code. When I added the DOCTYPE, my Javascript functions stopped working. I'm not very familiar with either W3C Standards or debugging, so can anyone help me find the error?

Second, when the Javascript functions DID work, the vertical alignment of the buttons inside the <li> didn't work in Safari (they only worked in Firefox). They remained horizontally-centered, but not vertically-centered. I'm trying to use methods that retain a clean block of HTML code (which is why I avoided nesting tables or DIVs).

Finally, this isn't a specific problem, but does anyone have any advice for cleaning up either my CSS, my HTML, or my JavaScript? I've been reading a ton of articles about coding discipline but it's hard to tell whether techniques are still useful or outdated.

Thanks very much!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
 
<script src="test menu.js" type="text/javascript"></script>
 
<style type="text/css">
 
/*** BEGIN CSS CLEAR ***/
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
/*** END CSS CLEAR ***/
 
#menu {
width: 170px; height: 670px;
margin: 10px auto;
position: relative;
}
 
#menu li {
width: 170px; height: 170px;
display: block;
position: absolute;
line-height: 170px;
text-align: center;
}
 
#menu a{
width: 125px; height: 125px;
top: 22.5px; left: 22.5px;
display: block;
position: absolute;
z-index:1;
}
 
#menu img {
width: 125px;
opacity: .9;
vertical-align: middle;
z-index: 0;
}
 
#home {top: 0px;}
#aboutus {top: 100px;}
#members {top: 200px;}
#media {top: 300px;}
#rush {top: 400px;}
#business {top: 500px;}
 
#home {background-color: blue;}
#aboutus {background-color: purple;}
#members {background-color: red;}
#media {background-color: orange;}
#rush {background-color: yellow;}
#business {background-color: green;}
 
</style>
</head>
 
<body>
 
<ul id="menu">
	<li id="home"><a href="#1" id="homeMA"></a><img id="b1" src="../textured buttons/home.png"/></li>
	<li id="aboutus"><a href="#1" id="aboutusMA"></a><img id="b2" src="../textured buttons/aboutus.png"/></li>
	<li id="members"><a href="#1" id="membersMA"></a><img id="b3" src="../textured buttons/members.png"/></li>
	<li id="media"><a href="#1" id="mediaMA"></a><img id="b4" src="../textured buttons/media.png"/></li>
	<li id="rush"><a href="#1" id="rushMA"></a><img id="b5" src="../textured buttons/rush.png"/></li>
	<li id="business"><a href="#1" id="businessMA"></a><img id="b6" src="../textured buttons/business.png"/></li>
</ul>
 
<script type="text/javascript">
document.getElementById('homeMA').onmouseover=widthChange1;
document.getElementById('homeMA').onmouseout=widthRestore1;
document.getElementById('aboutusMA').onmouseover=widthChange2;
document.getElementById('aboutusMA').onmouseout=widthRestore2;
document.getElementById('membersMA').onmouseover=widthChange3;
document.getElementById('membersMA').onmouseout=widthRestore3;
document.getElementById('mediaMA').onmouseover=widthChange4;
document.getElementById('mediaMA').onmouseout=widthRestore4;
document.getElementById('rushMA').onmouseover=widthChange5;
document.getElementById('rushMA').onmouseout=widthRestore5;
document.getElementById('businessMA').onmouseover=widthChange6;
document.getElementById('businessMA').onmouseout=widthRestore6;
</script>
 
</body>
</html>
 
JAVASCRIPT:
 
//Bouncing Button JavaScript Functions
//modified from instructions on Hesido.com
 
//********************
 
function doWidthChange(elem,start,end,steps,intervals,powr) { 
	if (elem.widthChangeInt) window.clearInterval(elem.widthChangeInt);
	var actStep = 0;
	elem.widthChangeInt = window.setInterval(
		function() { 
			elem.currentWidth = bounceInOut(start,end,steps,actStep,powr);
			elem.style.width = elem.currentWidth; 
			actStep++;
			if (actStep > steps) window.clearInterval(elem.widthChangeInt);
		} 
		,intervals)
}
 
//********************
 
function bounceInOut(minValue,maxValue,totalSteps,actualStep,powr) {
	// powr: how far the button 'bounces'; the closer to 0, the more it will bounce.
	var bounces = 1;
	var delta = maxValue - minValue;
	var increment = (1 / totalSteps) * actualStep;
	var stepp = minValue + ((1 / powr) * (Math.sin(increment * ((3.14159 * bounces) - Math.asin(powr))) * delta));
	return Math.ceil(stepp);
}
 
//********************
 
function widthChange1() { doWidthChange(document.getElementById('b1'),125,150,15,10,.6); }
function widthRestore1() { doWidthChange(document.getElementById('b1'),150,125,15,10,.6); }
function widthChange2() { doWidthChange(document.getElementById('b2'),125,150,15,10,.6); }
function widthRestore2() { doWidthChange(document.getElementById('b2'),150,125,15,10,.6); }
function widthChange3() { doWidthChange(document.getElementById('b3'),125,150,15,10,.6); }
function widthRestore3() { doWidthChange(document.getElementById('b3'),150,125,15,10,.6); }
function widthChange4() { doWidthChange(document.getElementById('b4'),125,150,15,10,.6); }
function widthRestore4() { doWidthChange(document.getElementById('b4'),150,125,15,10,.6); }
function widthChange5() { doWidthChange(document.getElementById('b5'),125,150,15,10,.6); }
function widthRestore5() { doWidthChange(document.getElementById('b5'),150,125,15,10,.6); }
function widthChange6() { doWidthChange(document.getElementById('b6'),125,150,15,10,.6); }
function widthRestore6() { doWidthChange(document.getElementById('b6'),150,125,15,10,.6); }

Open in new window

0
Comment
Question by:jwshome
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 57

Expert Comment

by:giltjr
ID: 24828765
Did that page ever work?

The first thing I see is that you have two Javascript functions that are not in <script></script>

Your doWidthChange and bounceInOut are not with in  <script></script> and I'm 99% sure they should be.

0
 

Author Comment

by:jwshome
ID: 24828774
Yes -- it initially worked without the !DOCTYPE header in Firefox.

And sorry, I should have specified; everything below the line "JAVASCRIPT:" is in a separate file titled "test menu.js", which I load in <head>.
0
 
LVL 42

Accepted Solution

by:
David S. earned 250 total points
ID: 24828945
Units are required on most CSS properties. So change

elem.style.width = elem.currentWidth;

to

elem.style.width = elem.currentWidth+'px';


I see that the CSS Reset rule that your using sets the vertical-align:baseline on table-cells. I've seen bugs caused by that.

Another thing that I see is that you named each event handler function you're using. Normally I would just use an anonymous function like this:
document.getElementById('homeMA').onmouseover=function(){
  doWidthChange(document.getElementById('b1'),125,150,15,10,.6);
};

Open in new window

0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:jwshome
ID: 24829007
Kravimir:

Thanks for the help. I think I might have mis-typed some sort of CSS or Javascript declaration to compound the problem, but I reloaded an earlier version of my code and applied your suggestions, and it now works with the !DOCTYPE declaration. Thank you!

However, the vertical-centering problem still persists in Safari. Right now, I'm using a workaround using line-height: 170px; in the <li> formatting section, and a vertical-align: middle; in the img formatting section. This successfully aligns the images in the middle of <li> in Firefox, but not in Safari.

Any tips?
#menu li {
...
line-height: 170px;
text-align: center;
}
 
#menu img {
...
vertical-align: middle;
}

Open in new window

0
 
LVL 42

Expert Comment

by:David S.
ID: 24829049
You're welcome.

Which version(s) of Safari are you testing in?  Safari 3.2/Win displays it the same as Firefox 3.x. The images I'm testing with are 100x100.
0
 

Author Comment

by:jwshome
ID: 24829079
Safari 4.0 (I'm working on a Mac).
0
 
LVL 42

Expert Comment

by:David S.
ID: 24833210
I tested it in Safari 4.0.1 on a Mac and it seems fine.  What dimensions are your images?
0
 

Author Comment

by:jwshome
ID: 24836520
150x150, but they're resized down from 300x300.
0
 
LVL 42

Expert Comment

by:David S.
ID: 24844796
Since they're square it shouldn't make a difference, since the "#menu img" rule scales them to 125x125.

Would you please post a screenshot of what it looks like in Safari 4?
0
 

Author Comment

by:jwshome
ID: 24845400
Hi Kravimir,

I figured it out using a different solution. Thanks for your help!
0
 
LVL 42

Expert Comment

by:David S.
ID: 24845506
You're welcome.

> I figured it out using a different solution.

Out of curiosity, what was your alternative solution?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
transfer content to new site design 7 49
wordpress theme 8 40
carousel control extend past the images 9 30
VueJS rending slow the first time 1 7
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

752 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