PDA

View Full Version : modify a code



masquerade
04-25-2007, 04:15 PM
I have this code for a menu and was wondering can somebody help me make it a into a floating menu


<script language="javascript">
function popup1()
{
popupwindow = window.open ("http://www./index.html", "popwindow");
}
function popup2()
{
popupwindow = window.open ("http://www./page2.html", "popwindow");
}
function popup3()
{
popupwindow = window.open ("http://www./page3.html ", "popwindow");
}
function popup4()
{
popupwindow = window.open ("http://www./page4.html", "popwindow");
}
function popup5()
{
popupwindow = window.open ("http://www./page5.html", "popwindow");
}
function popup6()
{
popupwindow = window.open ("http://www.page6.html ", "popwindow");
}
function popup7()
{
popupwindow = window.open ("http://www. page7.html", "popwindow");
}
function popup8()
{
popupwindow = window.open ("http://www.page8.html", "popwindow");
}
</script>
</script>

<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup1()"
title="Home " ><script>document.write("Home")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup2()"
title="A few facts about me " ><script>document.write("A few facts about me ")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup3()"
title="Contact Me" ><script>document.write("Contact Me")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup4()"
title="Computer Graphics" ><script>document.write("Computer Graphics")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup5()"
title="Newest Sketches" ><script>document.write("Newest Sketches ")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup6()"
title="Old Sketches" ><script>document.write("Old Sketches")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup7()"
title="Pastels" ><script>document.write("Pastels")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup8()"
title="Tutorials and Tips" ><script>document.write("Tutorials and Tips")</script></td></tr></table>

boogyman
04-25-2007, 04:27 PM
:eek: what a design nightmare! ! !

Sorry for bs post, but that is rediculous.

If someone doesnt help you before I go home, I will take a look at it and help ya out, but WOW just WOW

Twey
04-25-2007, 05:13 PM
He's right... you're much more likely to get help if you have saner code. Whenever you find yourself repeating yourself that much, you can be sure you're doing something wrong. Also, that's not a table: navigation bars are usually marked up as lists of links.

masquerade
04-26-2007, 02:22 PM
can somebody just give me the code to insert in my code to make it a floating menu

boogyman
04-26-2007, 03:04 PM
LOOK HERE
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

Bob90
04-26-2007, 03:42 PM
Wrap the table in a <div> tag.

<div.....><table>....</table></div>


If by floating, you mean move with the page, I'm sure there are scripts on DD that do that.

masquerade
04-26-2007, 07:47 PM
I applied but have a few problems 1) I want the text inside it black
2)some of the names on the menu I applied appear invisible
3)I not sure that links open (my net is very slow )
to understand my problem http://www.angelfire.com/planet/artzone/page8.html

boogyman
04-26-2007, 08:11 PM
change


<table border="1" width="230" cellspacing="0" cellpadding="0">
<tr>
<td width="100&#37;" bgcolor="#000000">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="200%" bgcolor="#FF0004">
<p align="left"> <a href="http://www.angelfire.com/planet/artzone/index.html">Home </a><br>

<a href="http://www.angelfire.com/planet/artzone/page2.html">A few facts about me </a><br>
<a href="http://www.angelfire.com/planet/artzone/page3.html">Contact me</a><br>
<a href="http://www.angelfire.com/planet/artzone/page4.html">Computer Graphics</a><br>
<a href="http://www.angelfire.com/planet/artzone/page5.html">Newest sketches</a><br>
<a href="http://www.angelfire.com/planet/artzone/page6.html">Old sketches</a><br>
<a href="http://www.angelfire.com/planet/artzone/page7.html">Pastels</a><br>

<a href="http://www.angelfire.com/planet/artzone/page8.html">Tutorials and tips </a></td>
</tr>
</table>

to


<ul id="menu">
<h2>Menu</h2>
<li><a href="http://www.angelfire.com/planet/artzone/index.html">Home </a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page2.html">A few facts about me </a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page3.html">Contact me</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page4.html">Computer Graphics</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page5.html">Newest sketches</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page6.html">Old sketches</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page7.html">Pastels</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page8.html">Tutorials and tips </a></li>
</ul>


and add this to the <head> tag



<style type="text/css">
<!--
ul h2 {
background: #000000;
color: #ffffff;
}
ul#menu, ul#menu a {
background: #ff0000;
color: #000000;
}
ul#menu li{list-style: none;}
// -->
</style>



each of the links in that menu will go to its destination, but were you trying to make it so that the images will link too? you would need to add links in for that.

masquerade
04-26-2007, 08:23 PM
it didn't work ,or I am not getting it
all the problems I mentioned earlier are still there plus now its not floating

boxxertrumps
04-26-2007, 10:05 PM
Not to be a nuisance, but you should consider a new host.
The ads are rather ugly, and don't match the page...
There is allot of redundant code on your page, like the window open JS...
use this function:
function popup(page) {
window.open ("http://www.angelfire.com/planet/artzone/"+ page +", "popwindow");
}
and call it like so:
<a href="#" onclick="popup('index.html')">
just replace index.html with the page you want in planet/artzone...


<tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup1()"
title="Home " ><script>document.write("Home")</script></td></tr>

use this for each table cell element..
CSS:
.luv {width:140px; height:36px; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px}
HTML:
<td class="luv">
You can condense those functions down aswell...

There are too many errors to count...
Use # before hex codes, always use px/&#37;/em(units) when defining lengths in CSS(except zero), never just a number...

I have a feeling that you used a WYSIWYG editor, because there is no way anyone took the time to write that by hand...
Please reference this: http://www.w3schools.com/html/default.asp and this: http://www.w3schools.com/css/default.asp and start coding by hand...

also, running your site through the validators below will tell you how bad WYSIWYG editors are.

mburt
04-27-2007, 10:15 AM
I have a suggestion: USE A DD SCRIPT. :)
Sometimes people reach their limit when they code, and I do believe this is one of them.