[Javascript] Code optimization

Mon Aug 7 12:09:43 CDT 2006

On Aug 7, 2006, at 11:25 AM, tedd wrote:
> At 10:05 AM -0400 8/7/06, Terry Riegel wrote:
>> Hello,
>>
>> I need a little help optimizing the following code.
>>
>> <div class="nor" id="004LukeShannon.jpg">
>>  <A href="javascript:windowHandle=window.open('http:// 
>> clearimageonline.com/pages/htmlos/94150.128.040923622659991927',  
>> 'CIclearimage004LukeShannonjpg',  
>> 'width=550,height=550,status=yes,scrollbars=yes,resizable=yes,left=15 
>> 0');windowHandle.focus();" >
>>   <img src="/clearimage/images/pict-small.gif" border="0"  
>> width="12" height="12" align="left">
>>  </A>
>>  <a href="javascript:changedest('004LukeShannon.jpg','FILE')"  
>> ondblclick="changedest2('004LukeShannon.jpg','FILE')">
>>   004LukeShannon.jpg
>>  </a>
>> </div>
>>
>>
>> What I would like to do is replace some of the references in the  
>> second <a> tag with a relative reference to the containing div. I  
>> would also like to replace all of the links on the page with  
>> similar code, I think there is a way to do this in a script that  
>> will apply to all links globally for that page. I would just need  
>> to know the second argument in my code either "FILE" or "DIR"
>>
>> Any help would be appreciated.
>>
>> Terry
>
> Terry:
>
> I'm not sure if I am understanding you correctly (probably not),  
> but if it were me and I wanted to simplify the above code, I would  
> use php. For example, instead of using "004LukeShannon.jpg"  
> throughout your code, such as:
>
> <div class="nor" id="004LukeShannon.jpg">
>
> I would use:
>
> <?php $image = "004LukeShannon.jpg"?>
>
> <div class="nor" id="<?php echo $image; ?>">
>
> That way you declare the image only once at the beginning of your  
> code and use <?php echo $image; ?> for everywhere you want the  
> image-name to appear.
>
> hth's
>
> tedd
>
> -- 
> -------
> http://sperling.com  http://ancientstones.com  http://earthstones.com

Tedd,

You are correct, you are not understanding me. I am looking at  
simplifying my Javascript. I use a server side scripting engine. I am  
not asking for help with my server side scripts, only javascript.

I would like to take a page that has a lot of the above snips and  
reduce it to a much more concise page. I am not sure how to use  
Javascript selectors to do this.

Let me simplify to see if it will clarify my question.

Suppose I have this code.
<html>
<head>
</head>
<body>
<div class="nor" id="imagename.jpg">
  <A href="javascript:someaction();" ><img src="icon.gif" /></A>
  <a href="javascript:changedest('imagename.jpg','FILE')"  
ondblclick="changedest2('imagename','FILE')">imagename.jpg</a>
</div>
<div class="nor" id="imagename1.jpg">
  <A href="javascript:someaction();" ><img src="icon.gif" /></A>
  <a href="javascript:changedest('imagename1.jpg','FILE')"  
ondblclick="changedest2('imagename1','FILE')">imagename1.jpg</a>
</div>
<div class="nor" id="imagename2.jpg">
  <A href="javascript:someaction();" ><img src="icon.gif" /></A>
  <a href="javascript:changedest('imagename2.jpg','FILE')"  
ondblclick="changedest2('imagename2','FILE')">imagename2.jpg</a>
</div>
<div class="nor" id="imagename3.jpg">
  <A href="javascript:someaction();" ><img src="icon.gif" /></A>
  <a href="javascript:changedest('imagename3.jpg','FILE')"  
ondblclick="changedest2('imagename3','FILE')">imagename3.jpg</a>
</div>
</body>
</html>

I would like to simplify it to something like this. I have added ???  
to the code that I need help with.

<html>
<head>
<script>
??? ForAllDoubleClicksOnAnchorsDoThisCode => someaction2(this)

function someaction(a) {
??? var myname = a.PARENTDIV ???
??? var myclass = a.CLASSNAME ???
  .....CODE HERE.....
}

function someaction1(a) {
??? var myname = a.PARENTDIV ???
??? var myclass = a.CLASSNAME ???
  .....CODE HERE.....
}

function someaction2(a) {
??? var myname = a.PARENTDIV ???
??? var myclass = a.CLASSNAME ???
  .....CODE HERE.....
}

<script>
</head>
<body>
<div class="nor" id="imagename.jpg">
  <A href="javascript:someaction(this);" ><img src="fileicon.gif" /></A>
  <a href="javascript:someaction1(this)" class="FILE">imagename.jpg</a>
</div>
<div class="nor" id="imagename1.jpg">
  <A href="javascript:someaction(this);" ><img src="fileicon.gif" /></A>
  <a href="javascript:someaction1this)" class="FILE">imagename1.jpg</a>
</div>
<div class="nor" id="imagename2.jpg">
  <A href="javascript:someaction(this);" ><img src="fileicon.gif" /></A>
  <a href="javascript:someaction1(this)" class="FILE">imagename2.jpg</a>
</div>
<div class="nor" id="otherstuff">
  <A href="javascript:someaction(this);" ><img src="diricon.gif" /></A>
  <a href="javascript:someaction1(this)" class="DIR">otherstuff</a>
</div>
</body>
</html>

What I am asking for is a way to simplify the use of the "EXACT" same  
text 4 times in the code to use some sort of relative referencing to  
only have the text once. I would like to keep my html as small as  
possible.

I need help figuring out how to reference the anchors parent DIV, and  
the anchors classname.

I hope I have clarified my question and not muddied the waters.

Terry