[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
8.0

How can I configure this javascript to load the "sub1" class onload?

Asked by lukemarti in JavaScript, Miscellaneous Web Development

Tags: Javascript, Web Development

This page loads with nothing selected.  I would like the page to load the way it looks if you click the top left box.  Basically, I want the default to load the sub1 class, which is the class given the <li> tag.  I pasted the code for the HTML, CSS, and Javascript in the code section.  Any help will be greatly appreciated. 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:

HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WORKFLOW</title>
 
<link rel="stylesheet" media="all" type="text/css" href="geneontology.css" />
<script src="jscript/geneontology.js" type="text/javascript"></script>
 
</head>
 
<body onload="clickMenu('topmenu')">
<div id="outer">
  <ul id="topmenu">
          <li class="sub1">PLATFORMS<img src="images/heatmap_button.png" />
               <ul id="submenu1">
                    <li class="line1"></li>
                    <li class="sub1left">&raquo;Affymetrix<br />&raquo;NimbleGen<br />&raquo;Illumina<br />&raquo;Other</li>
                    <li class="sub1right"><a></a><!--<a href="images/heatmap_full.png" target="_parent"></a><br />CLICK IMAGE TO VIEW FULL SIZE--></li>
               </ul>
          </li>
          <li class="sub2">NORMALIZATION<img src="images/normalization_button.png" />
               <ul id="submenu2">
                    <li class="line2"></li>
                    <li class="sub2left">&raquo;RMA<br />&raquo;PLIER<br />&raquo;Quantile<br />&raquo;Average<br />&raquo;Summation</li>
                    <li class="sub2right"><a></a><!--<a href="images/normalization_full.png" target="_parent"></a><br />CLICK IMAGE TO VIEW FULL SIZE--></li>
               </ul>
          </li>
          <li class="sub3">GENE SETS<img src="images/genetable_button.png" />
               <ul id="submenu3">
                    <li class="line3"></li>
                    <li class="sub3left">&raquo;Fold Change<br />&raquo;Stat Analysis<br />&raquo;Gene Table<br />&raquo;Heat Map<br />&raquo;Line Graph<br />&raquo;k-Means Clustering</li>
                    <li class="sub3right"><a></a><!--<a href="images/genetable_full.png" target="_parent"></a><br />CLICK IMAGE TO VIEW FULL SIZE--></li>
               </ul>
          </li>
          <li class="sub4">GENE ONTOLOGY<img src="images/go_button.png" />
               <ul id="submenu4">
                    <li class="line4"></li>
                    <li class="sub4left">&raquo;Gene Classification<br />&raquo;Statistical Analysis</li>
                    <li class="sub4right"><a></a><!--<a href="images/go_full.png" target="_parent"></a><br />CLICK IMAGE TO VIEW FULL SIZE--></li>
               </ul>
          </li>
     </ul>
</div>
</body>
</html>
END HTML CODE
 
 
CSS CODE
/*START TOPMENU*/
#outer {
	width:492px; 
	height:350px; 
	border:3px solid #CCC;
	position:relative;
	margin-left:-8px;
	margin-top:-8px;
	}
#topmenu /*everything inside chart*/{
	list-style-type:none; 
	width:480px; 
	padding:0; 
	margin-left:18px;
	margin-top:18px;
	}
#topmenu li { /*submenu background color, margins, borders*/
	float:left; 
	background:#FFF;
	position:relative;
	/*border:1px solid #CCC;*/
	}
#topmenu li { /*topmenu size*/
	display:block; 
	color:#fff; 
	font-family:arial, sans-serif; 
	font-size:11px; 
	height:75px; 
	width:100px; 
	text-decoration:none; 
	text-align:center; 
	cursor:pointer; 
	font-weight:bold;
	} 
#topmenu li a {
	display:block; 
	color:#fff; 
	font-family:arial, sans-serif; 
	font-size:11px;
	text-decoration:none; 
	text-align:center; 
	cursor:pointer; 
	font-weight:bold;
	}
#topmenu ul {
	position:absolute;
	left:-9999px;
	width:456px;
	}
/*END TOPMENU*/
 
/*START MENU1*/
#submenu1 {
	list-style-type:none; 
	padding:0; 
	margin:0;
	}
#topmenu li.sub1 {
	background:#78B3EE;
	margin-right:18px;
}
#topmenu li.sub1.click /*topmenu active background color*/{
	background:#E16F00;
	}
#topmenu li.sub1:hover /*topmenu hover background color*/{
	background:#E16F00;
	}
#submenu1 li.line1{
	width:0;
	height:40px;
	border-left:2px dashed #E16F00;
	border-right:none;
	border-bottom:none;
	border-top:none;
	top:-35px;
	left:51px;
	}
#topmenu li.click ul#submenu1{
	left:-2px;
	top:110px; 
	}
#submenu1 li{
	cursor:default;
	}
#submenu1 li.sub1left{
	width:150px;
	height:198px;
	border:2px solid #666;
	color:#343434;
	background-color:#E16F00;
	font-size:18px;
	text-align:left;
	line-height:49px;
	}
#submenu1 li.sub1right{
	width:299px;
	height:200px;
	border-top:1px solid #E16F00;
	border-right:1px solid #E16F00;
	border-bottom:1px solid #E16F00;
	border-left:none;
	background-color:#CCCCCC;
	color:#343434;
	}
#submenu1 li.sub1left a{
}
#submenu1 li.sub1right a{
	color:#343434;
	background-image:url(images/heatmap_thumb.png);
	background-repeat:no-repeat;
	width:299px;
	height:188px;
	margin-left:0px;
	margin-top:7px;
	cursor:default;
	}
/*END MENU1*/
 
/*START MENU2*/
#submenu2 {
	list-style-type:none; 
	padding:0; 
	margin:0;
	}
#topmenu li.sub2 { /*topmenu margins, inactive background color*/
	background:#78B3EE;
	margin-right:18px;
	}
#topmenu li.sub2.click /*topmenu active background color*/{
	background:#E16F00;
	}
#topmenu li.sub2:hover /*topmenu hover background color*/{
	background:#E16F00;
	}
#submenu2 li.line2{
	width:0;
	height:40px;
	border-left:2px dashed #E16F00;
	border-right:none;
	border-bottom:none;
	border-top:none;
	top:-35px;
	left:168px;
	}
#topmenu li.click ul#submenu2{
	left:-120px;
	top:110px;
	}
#submenu2 li{
	cursor:default;
	}
#submenu2 li.sub2left{
	width:150px;
	height:198px;
	border:2px solid #666;
	color:#343434;
	background-color:#E16F00;
	font-size:18px;
	text-align:left;
	line-height:39px;
	}
#submenu2 li.sub2right{
	width:299px;
	height:200px;
	border-top:1px solid #E16F00;
	border-right:1px solid #E16F00;
	border-bottom:1px solid #E16F00;
	border-left:none;
	background-color:#CCCCCC;
	color:#343434;
	}
#submenu2 li.sub2left a{
	}
#submenu2 li.sub2right a{
	color:#343434;
	background-image:url(images/normalization_thumb.png);
	background-repeat:no-repeat;
	width:299px;
	height:185px;
	margin-left:0px;
	margin-top:7px;
	cursor:default;
	}
/*END MENU2*/
 
/*START MENU3*/
#submenu3 {
	list-style-type:none; 
	padding:0; 
	margin:0;
	}
#topmenu li.sub3 { /*topmenu margins, inactive background color*/
	background:#78B3EE;
	margin-right:18px;
	}
#topmenu li.sub3.click /*topmenu active background color*/{
	background:#E16F00;
	}
#topmenu li.sub3:hover /*topmenu hover background color*/{
	background:#E16F00;
	}
#submenu3 li.line3{
	width:0;
	height:40px;
	border-left:2px dashed #E16F00;
	border-right:none;
	border-bottom:none;
	border-top:none;
	top:-35px;
	left:288px;
	}
#topmenu li.click ul#submenu3{
	left:-238px;
	top:110px; 
	}
#submenu3 li{
	cursor:default;
	}
#submenu3 li.sub3left{
	width:150px;
	height:198px;
	border:2px solid #666;
	color:#343434;
	background-color:#E16F00;
	font-size:14px;
	text-align:left;
	line-height:33px;
	}
#submenu3 li.sub3right{
	width:299px;
	height:200px;
	border-top:1px solid #E16F00;
	border-right:1px solid #E16F00;
	border-bottom:1px solid #E16F00;
	border-left:none;
	background-color:#CCCCCC;
	color:#343434;
	}
#submenu3 li.sub3left a{
	}
#submenu3 li.sub3right a{
	color:#343434;
	background-image:url(images/genetable_thumb.png);
	background-repeat:no-repeat;
	width:299px;
	height:190px;
	margin-left:0px;
	margin-top:6px;
	cursor:default;
	}
/*END MENU3*/
 
/*START MENU4*/
#submenu4 {
	list-style-type:none; 
	padding:0; 
	margin:0;
	}
#topmenu li.sub4 { /*topmenu margins, inactive background color*/
	background:#78B3EE;
	margin-right:10px;
	}
#topmenu li.sub4.click /*topmenu active background color*/{
	background:#E16F00;
	}
#topmenu li.sub4:hover /*topmenu hover background color*/{
	background:#E16F00;
	}
#submenu4 li.line4{
	width:0;
	height:40px;
	border-left:2px dashed #E16F00;
	border-right:none;
	border-bottom:none;
	border-top:none;
	top:-35px;
	left:405px;
	}
#topmenu li.click ul#submenu4{
	left:-356px;
	top:110px; 
	}
#submenu4 li{
	cursor:default;
	}
#submenu4 li.sub4left{
	width:150px;
	height:198px;
	border:2px solid #666;
	color:#343434;
	background-color:#E16F00;
	font-size:14px;
	text-align:left;
	line-height:97px;
	}
#submenu4 li.sub4right{
	width:299px;
	height:200px;
	border-top:1px solid #E16F00;
	border-right:1px solid #E16F00;
	border-bottom:1px solid #E16F00;
	border-left:none;
	background-color:#CCCCCC;
	color:#343434;
	}
#submenu4 li.sub4left a{
	}
#submenu4 li.sub4right a{
	color:#343434;
	background-image:url(images/go_thumb.png);
	background-repeat:no-repeat;
	width:299px;
	height:187px;
	margin-left:0px;
	margin-top:7px;
	cursor:default;
	}
/*END MENU4*/
END CSS CODE
 
 
JAVASCRIPT CODE
clickMenu = function(topmenu) {
	var getEls = document.getElementById(topmenu).getElementsByTagName("LI");
	var getAgn = getEls;
 
	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
		}
	}
END JAVASCRIPT CODE
 
Related Solutions
Keywords: How can I configure this javascript to l…
Title
1 Javascript Menu
2 CSS Pop-Out Menu
3 Suckerfish CSS Drop Down Menu flies …
4 XHTML page won't validate with java…
5 How can I turn an empty div tag into a li…
6 IE6 CSS Issue
 
Loading Advertisement...
 
[+][-]10/06/09 09:31 AM, ID: 25506895Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10/06/09 01:56 PM, ID: 25509879Accepted Solution

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

About this solution

Zones: JavaScript, Miscellaneous Web Development
Tags: Javascript, Web Development
Sign Up Now!
Solution Provided By: lukemarti
Participating Experts: 1
Solution Grade: A
 
 
Loading Advertisement...
20091021-EE-VQP-81 - Hierarchy / EE_QW_3_20080625