...

View Full Version : Please HELP!!!



TheElect2049
03-04-2012, 08:54 AM
My code works, but i want to make it shorter without all the repetition.
I want it to do the same thing but just make it shorter please help im a very junior programmer


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT>
function menumouseoverone(){document.getElementById('menuboxone').id = 'menuoverone';}
function menumouseoutone(){document.getElementById('menuoverone').id = 'menuboxone';}
function menumouseovertwo(){document.getElementById('menuboxtwo').id = 'menuovertwo';}
function menumouseouttwo(){document.getElementById('menuovertwo').id = 'menuboxtwo';}
function menumouseoverthree(){document.getElementById('menuboxthree').id = 'menuoverthree';}
function menumouseoutthree(){document.getElementById('menuoverthree').id = 'menuboxthree';}
</SCRIPT>
<STYLE>
#body
{
background: black;
}

#menuboxone, #menuboxtwo, #menuboxthree
{
border-top-color: #808080;
border-bottom-color: #808080;
border-right-color: #808080;
border-left-color: #808080;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: #808080;
font-family: Verdana;
text-align: center;
}

#menuoverone, #menuovertwo, #menuoverthree
{
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
border-left-color: green;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: green;
font-family: Verdana;
text-align: center;
}
</STYLE>
</HEAD>

<BODY id="body">
<table>
<tr>
<td><div id="menuboxone" onmouseover=menumouseoverone() onmouseout=menumouseoutone()>Hello</div>
<td><div id="menuboxtwo" onmouseover=menumouseovertwo() onmouseout=menumouseouttwo()>Dude</div>
<td><div id="menuboxthree" onmouseover=menumouseoverthree() onmouseout=menumouseoutthree()>!</div>
</BODY>
</HTML>

Philip M
03-04-2012, 09:14 AM
It seems fine as it is. I don't see how it can be shortened, except by shortening the names of the functions from menumouseoverone to mmo1 and so on. Long names are prone to typos, especially if you do not use camelCase. But clarity should always take precedence over amount of code.

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


Login: yes
Password: i dont have one
Password is incorrect

Login: yes
Password: incorrect

Logic Ali
03-04-2012, 11:43 AM
This could be done using CSS alone.

Assigning ID values is not an advisable practice, it is better to swap classes.

This could be improved, but I don't want to complicate a simplification:


<!doctype html >
<html>
<head>
<title>Menu</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<script>

function menuAction( elem, action )
{
elem.className = action ? 'menuover' : 'menubox';
}

</script>
<style>
#body
{
background: black;
}

.menubox
{
border-top-color: #808080;
border-bottom-color: #808080;
border-right-color: #808080;
border-left-color: #808080;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: #808080;
font-family: Verdana;
text-align: center;
}

.menuover
{
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
border-left-color: green;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: green;
font-family: Verdana;
text-align: center;
}
</style>
</head>

<body id="body">
<table>
<tr>
<td><div class='menubox' id="menuboxone" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>Hello</div>
<td><div class='menubox' id="menuboxtwo" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>Dude</div>
<td><div class='menubox' id="menuboxthree" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>!</div>
</body>
</html>

MancunianMacca
03-04-2012, 02:30 PM
My code works, but i want to make it shorter without all the repetition.
I want it to do the same thing but just make it shorter please help im a very junior programmer


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT>
function menumouseoverone(){document.getElementById('menuboxone').id = 'menuoverone';}
function menumouseoutone(){document.getElementById('menuoverone').id = 'menuboxone';}
function menumouseovertwo(){document.getElementById('menuboxtwo').id = 'menuovertwo';}
function menumouseouttwo(){document.getElementById('menuovertwo').id = 'menuboxtwo';}
function menumouseoverthree(){document.getElementById('menuboxthree').id = 'menuoverthree';}
function menumouseoutthree(){document.getElementById('menuoverthree').id = 'menuboxthree';}
</SCRIPT>
<STYLE>
#body
{
background: black;
}

#menuboxone, #menuboxtwo, #menuboxthree
{
border-top-color: #808080;
border-bottom-color: #808080;
border-right-color: #808080;
border-left-color: #808080;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: #808080;
font-family: Verdana;
text-align: center;
}

#menuoverone, #menuovertwo, #menuoverthree
{
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
border-left-color: green;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: green;
font-family: Verdana;
text-align: center;
}
</STYLE>
</HEAD>

<BODY id="body">
<table>
<tr>
<td><div id="menuboxone" onmouseover=menumouseoverone() onmouseout=menumouseoutone()>Hello</div>
<td><div id="menuboxtwo" onmouseover=menumouseovertwo() onmouseout=menumouseouttwo()>Dude</div>
<td><div id="menuboxthree" onmouseover=menumouseoverthree() onmouseout=menumouseoutthree()>!</div>
</BODY>
</HTML>


Ok so put this code in a seperate .js file


function menumouseoverone(){document.getElementById('menuboxone').id = 'menuoverone';}
function menumouseoutone(){document.getElementById('menuoverone').id = 'menuboxone';}
function menumouseovertwo(){document.getElementById('menuboxtwo').id = 'menuovertwo';}
function menumouseouttwo(){document.getElementById('menuovertwo').id = 'menuboxtwo';}
function menumouseoverthree(){document.getElementById('menuboxthree').id = 'menuoverthree';}
function menumouseoutthree(){document.getElementById('menuoverthree').id = 'menuboxthree';}

and in you head put
<script type="text/javascript" src="yourpath/script.js"> and leave evryrhing in place and it will run.
REMEMBER: the .js file must not contain any html tags so leave out the <script>

TheElect2049
03-05-2012, 07:28 AM
Thanks for your help guys :)

TheElect2049
03-05-2012, 07:42 AM
This could be done using CSS alone.

Assigning ID values is not an advisable practice, it is better to swap classes.

This could be improved, but I don't want to complicate a simplification:


<!doctype html >
<html>
<head>
<title>Menu</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<script>

function menuAction( elem, action )
{
elem.className = action ? 'menuover' : 'menubox';
}

</script>
<style>
#body
{
background: black;
}

.menubox
{
border-top-color: #808080;
border-bottom-color: #808080;
border-right-color: #808080;
border-left-color: #808080;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: #808080;
font-family: Verdana;
text-align: center;
}

.menuover
{
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
border-left-color: green;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
width: 5em;
color: green;
font-family: Verdana;
text-align: center;
}
</style>
</head>

<body id="body">
<table>
<tr>
<td><div class='menubox' id="menuboxone" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>Hello</div>
<td><div class='menubox' id="menuboxtwo" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>Dude</div>
<td><div class='menubox' id="menuboxthree" onmouseover='menuAction( this, true )' onmouseout='menuAction( this, false )'>!</div>
</body>
</html>


I want to add a function that when i click the div turns red how would i do it? Please explain i'm really interested in how this works.
What i'm actually getting to is that i want to make a multi-level drop down menu.
Is it to hard? It's OK if you can't be bothered to explain but i really really really want to know how you can make a multi-level drop down menu without jQuery.

Philip M
03-05-2012, 09:04 AM
What i'm actually getting to is that i want to make a multi-level drop down menu.
Is it to hard? It's OK if you can't be bothered to explain but i really really really want to know how you can make a multi-level drop down menu without jQuery.

Not a million miles from here:-

http://www.javascriptkit.com/script/script2/dbmenu/index.shtml

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum