Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Please HELP!!!

  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Please HELP!!!

    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
    Code:
    <!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>
    Last edited by TheElect2049; 03-05-2012 at 07:21 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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:

    Code:
    <!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>

  • Users who have thanked Logic Ali for this post:

    TheElect2049 (03-05-2012)

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by TheElect2049 View Post
    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
    Code:
    <!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
    Code:
    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>
    Last edited by MancunianMacca; 03-04-2012 at 02:35 PM. Reason: forgot to close tag >

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help guys

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    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:

    Code:
    <!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.
    Last edited by TheElect2049; 03-05-2012 at 07:53 AM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by TheElect2049 View Post
    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/...nu/index.shtml

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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •