/    Sign up×
Community /Pin to ProfileBookmark

smaller code

Copy linkTweet thisAlerts:
Sep 24.2004

hello,

i’m making a menu in css/html and javascript, but the javascript code makes my lines pretty long and this doesn’t make it easyer to read.

this is the code i’ve now:

<td class=”sub_td_groot_sel” onMouseOver=”this.style.backgroundColor=’#DCE1E8′” onMouseOut=”this.style.backgroundColor=’#EEEEEE'” onClick=”location.href=’test.htm'”>

but i was wondering if it’s possible to make a javascript function or something like that to make the line shorter like this:

<td class=”sub_td_groot_sel” javascript=”funct_shorter(‘test.htm’)”>

so that i’ve the javascript somewhere else and not on every line.

thanks in advance

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesSep 24.2004 — Your problem is that you are using all the wrong tools for the task.

  • * Do not use TALEs for layout. Use CSS.


  • * Do not use JavaScript for rollovers that simple. Use CSS.


  • * Do not use JavaScript for navigation. Use HTML.


    • [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="Content-Script-Type" content="text/javascript">

    <meta name="Content-Style-Type" content="text/css">

    <title>Example</title>

    <style type="text/css">

    <!--

    ul#menu {list-style-type:none}

    ul#menu a {display:block; width:5em}

    ul#menu a:link, ul#menu:visited {background-color:#EEEEEE; color:#DCE1E8}

    ul#menu a:hover, ul#menu:active {background-color:#DCE1E8; color:#EEEEEE}

    -->

    </style>

    </head>

    <body>

    <ul id="menu">

    <li><a href="http://www.w3.org/">W3C</a></li>

    </body>

    </html>[/font]
    Copy linkTweet thisAlerts:
    @mikachuauthorSep 24.2004 — ok, but is also possible to have different styles within the menu? that 's why i chose to do it this way.

    something like this?:

    <ul>

    <li id="menu"><a href="http://www.w3.org/">W3C</a></li>

    <li id="menu2"><a href="http://www.w3.org/other">W3C2</a></li>

    </ul>
    Copy linkTweet thisAlerts:
    @CharlesSep 24.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="Content-Script-Type" content="text/javascript">

    <meta name="Content-Style-Type" content="text/css">

    <title>Example</title>

    <style type="text/css">

    <!--

    ul#menu {list-style-type:none}

    ul#menu a {display:block; width:5em}

    a#one:link, a#one:visited {background-color:#a00; color:#f00}

    a#one:hover, a#one:active {background-color:#00a; color:#00f}

    a#two:link, a#two:visited {background-color:#00a; color:#00f}

    a#two:hover, a#two:active {background-color:#a00; color:#f00}

    -->

    </style>

    </head>

    <body>

    <ul id="menu">

    <li><a id="one" href="http://www.w3.org/">W3C</a></li>

    <li><a id="two" href="http://www.bbc.co.uk/">BC</a></li>

    </body>

    </html>[/font]
    Copy linkTweet thisAlerts:
    @mikachuauthorSep 24.2004 — ok i must give it to you the code is a lot cleaner and smaller, but there's something i cannot get right and that is to get the padding-left correct. the problem is when i give it a left padding of 15px my whole box gets 15px longer and i only want to move the text 15px up and not make the thing longer.

    and another thing is it won't lissen to the left command, cause it has to be on the leftside of my screen.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="Content-Script-Type" content="text/javascript">

    <meta name="Content-Style-Type" content="text/css">

    <title>Example</title>

    <style type="text/css">

    <!--

    ul#menu {list-style-type:none; }

    ul#menu a{display:block; width:200px; margin:2px;}

    a#one:link, a#one:visited {background-color:#aa0; color:#ff0; line-height:3.1pc; text-decoration:none;}

    a#one:hover, a#one:active {background-color:#0aa; color:#0ff}

    a#two:link, a#two:visited {background-color:#0aa; color:#0ff; cursor:default; padding-left:15px; width:-15px;}

    a#two:hover, a#two:active {background-color:#aa0; color:#ff0; cursor:default; padding-left:15px; width:-15px;}

    .bla{display:block; width:200px; margin:2px; background-color:#0aa; color:#0ff; cursor:default;}

    -->

    </style>

    </head>

    <body>

    <ul id="menu">

    <li><a id="one" href="#">one test test</a></li>

    <li><a id="two" href="#">two test test</a></li>

    <li class="bla">three test test</li>

    </ul>

    </body>

    </html>
    ×

    Success!

    Help @mikachu spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...