...

View Full Version : How to condense code



BrownManUPS
03-10-2005, 02:47 AM
Hi

On my website (www.hilite.org/IndexTest.htm), there is a large section of code that I'd like condensed to another file so that I only need one line of code to call it or something of that nature...to make it easy to paste that into like 50 other pages linked to it with that same banner..

It starts with:


<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
color: #FFCC33;
line-height:18px;
z-index:100;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

and ends with


if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
</head>

All of this is basically one big javascript thing for drop down menus and a style thingy before it...so I was wondering if that code be just ONE line of code..or two depending on if you split the arrays (which would be better) and the actual method part after the arrays...

Then also is there a way to condense this section of code which uses this drop down script in a line of code possibly:


<!-- BANNER LINKS -->

<tr>
<td height="15">

<a href="http://www.hilite.org"><img name="Image10" border="0" src="http://www.hilite.org/images/navindex1.jpg"></a>
<a href="http://www.hilite.org/front" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img name="Image11" border="0" src="http://www.hilite.org/images/navfront1.jpg"></a>
<a href="http://www.hilite.org/news" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img name="Image12" border="0" src="http://www.hilite.org/images/navnews1.jpg"></a>
<a href="http://www.hilite.org/sports" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><img name="Image13" border="0" src="http://www.hilite.org/images/navsports1.jpg"></a>
<a href="http://www.hilite.org/entertainment" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><img name="Image14" border="0" src="http://www.hilite.org/images/naventer1.jpg"></a>
<a href="http://www.hilite.org/feature" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"><img name="Image15" border="0" src="http://www.hilite.org/images/navfeat1.jpg"></a>
<a href="http://www.hilite.org/perspectives" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"><img name="Image16" border="0" src="http://www.hilite.org/images/navpers1.jpg"></a>
<a href="http://www.hilite.org/fame" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()"><img name="Image17" border="0" src="http://www.hilite.org/images/navfame1.jpg"></a>
<img src="http://www.hilite.org/images/hiliteorg.jpg" width="106" height="15"></td>

</tr>
</table>

Thanks

_Aerospace_Eng_
03-10-2005, 02:59 AM
well you can make one js file for the actual script, the way u do this is you take everything in between the script tags and put them in notepad and click file save as, change file type to all files, and just save it with a .js extension, then you can call it in the page as

<script type="text/javascript" src="dropdownmenu.js"></script>
then your images, you can do something similar but i would use document.write for the javascript, this will be another seperate js file

<!--
document.write('<a href="http://www.hilite.org"><img name="Image10" border="0" src="http://www.hilite.org/images/navindex1.jpg"></a>');
document.write('<a href="http://www.hilite.org/front" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img name="Image11" border="0" src="http://www.hilite.org/images/navfront1.jpg"></a>');
document.write('<a href="http://www.hilite.org/news" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img name="Image12" border="0" src="http://www.hilite.org/images/navnews1.jpg"></a>');
document.write('<a href="http://www.hilite.org/sports" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><img name="Image13" border="0" src="http://www.hilite.org/images/navsports1.jpg"></a>');
document.write('<a href="http://www.hilite.org/entertainment" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><img name="Image14" border="0" src="http://www.hilite.org/images/naventer1.jpg"></a>');
document.write('<a href="http://www.hilite.org/feature" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"><img name="Image15" border="0" src="http://www.hilite.org/images/navfeat1.jpg"></a>');
document.write('<a href="http://www.hilite.org/perspectives" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"><img name="Image16" border="0" src="http://www.hilite.org/images/navpers1.jpg"></a>');
document.write('<a href="http://www.hilite.org/fame" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()"><img name="Image17" border="0" src="http://www.hilite.org/images/navfame1.jpg"></a>');
document.write('<img src="http://www.hilite.org/images/hiliteorg.jpg" width="106" height="15">');
//-->
i haven't tested the above yet so not sure if it will work or not that was just off the top of my head, the function calls in the onmouseout and mouseover may cause some errors
then you would call it the same way as the dropdownmenu.js and if you have this in all of your pages and you just have to update the 2 js files and it will disperse through out the rest of the pages, or another possible solution which would be more beneficial is to use php includes, that is of course your browser supports php, i learned how to do this from this (http://www.joe2torials.com/php/php_includes.php) site.

BrownManUPS
03-10-2005, 03:16 AM
is document.write a reserved java function or do i have to make it up....

www.hilite.org/indexscrollertest.htm

I added those two lines of code and made those two .js files... but now the banner isnt even showing up

also the style sheet needs to be put where?

(teh small style thing before the script lines in the first thing i put)

Thanks again

_Aerospace_Eng_
03-10-2005, 03:40 AM
yeah i know what the css is, well like i said does ur server support php? it would be easier to do this with php includes, document.write is a reserved javascript function, i thought i saw some attempt to use a php include in the page, but it may have been commented out, and like i said the document.write might fail because of the function calls, you may need to use innerHTML i dunno that even gets tricky do a search for innerHTML, and dont confuse java and javascript they are two totally different languages

BrownManUPS
03-10-2005, 03:53 AM
k well i think the problem is that the document.write is definatly not displaying...so if it cant be condensed without php (because most browsers do but some dont...and it needs to be universal) ill have to edit those lines indiv.

BrownManUPS
03-10-2005, 04:05 AM
k so im getting some syntax error....someone wanna help me here

compare the two codes:

http://www.hilite.org/IndexTest.htm (working but long code)

http://www.hilite.org/indexscrollertest.htm (not working but augmented code with syntax errors on 2 and 23 before page loads fully)

shlagish
03-10-2005, 04:54 AM
if your host supports php, it will be universal.
your host will use the php script to make the html page. it then sends the page to the browser and the browser doesn't even know there was php.

As for the styles, pretty much the same as for the javascript.
you put everything that's in the style tags in notepad, and save with a .css extension.
then in your html, you simply add:

<link rel="stylesheet" type="text/css" href="Styles.css" />

in the <head>

That should do it.

_Aerospace_Eng_
03-10-2005, 05:06 AM
just as stated above php includes are more universal than javascript, users can't stop php from running unlike javascript which can be disabled, a php include will consist of html and the browser will parse it as html, its just easier to edit because you are only editing like one or two files instead of one file for every page u have

shlagish
03-10-2005, 05:06 AM
for the more complex part of adding all the links in your html, there are a couple of solutions..

What you want. To have the least stuff as possible in your html, and everything in your .js file.

1. You add a div with an id in which your links should go, but you put nothing in that div.
Then, you use javascript to change that div's innerHTML.


var newHTML="<a href='wtv.html'>link</a> etc";
document.getElementById('yourDivsId').innerHTML=newHTML;


2. Same as above, but not using innerHTML.

Use nodes.


var link=document.createElement('a');
link.setAttribute('href','wtv.html');
link.appendChild(document.createTextNode('link'));
document.getElementById('yourDivsId').appendChild.link;


3.in your html, you put


<script type="text/javascript" src="yourjsfile.js"></script>

and you use document.write('your links');

The best method, in my opinion, is the PHP.
You create a .txt file containing the HTML, and with php, you include to every single page. no accessibility issues. simple scripting. works well. But you need your host to work with php.

I didn't go in much depth for any of my explanations...
So if you have any questions about what I said, don't hesitate a second :)


p.s One small thing I noticed in your js is that you use


menu1[0]=....
menu1[1]=...

menu2[0]=...
menu2[1]=...

You could use 2d arrays.
var menu=new Array;
menu[0]=new Array;
menu[0][0]=something;

If you want details, ask :)

BrownManUPS
03-10-2005, 08:26 PM
ok the whole div concept is confusing but ill toy with the php idea if i can figure it out...

BrownManUPS
03-10-2005, 08:40 PM
k php is pretty badass and works so now i gotta add ONE line of code and rename to .php

thats freakin tight

BrownManUPS
03-10-2005, 08:57 PM
k new problem (well not problem but a how to needed)

www.hilite.org/indextest.php

the color of the links need to be yellow....or dark yellow preferrably

where do i change that setting....and how do i change it so when you viewed it it switches to white?

shlagish
03-10-2005, 10:00 PM
That would be in your stylesheet.

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
color: #FFCC33;
line-height:18px;
z-index:100;
}

#dropmenudiv a { color: yellow; }
#dropmennudiv a:visited { color: white; }

BrownManUPS
03-10-2005, 11:59 PM
k i got it to work sorta.....thanks for help guys



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum