Google Answers Logo
View Question
 
Q: Help me fix javascript please ( Answered,   0 Comments )
Question  
Subject: Help me fix javascript please
Category: Computers > Internet
Asked by: pinkhippo-ga
List Price: $30.00		 Posted: 19 Jun 2004 03:02 PDT
Expires: 19 Jul 2004 03:02 PDT
Question ID: 363269 
Hello, 

I am having problems fixing javascript conflicts. I have a number of
javascripts on one page. Can you see where the conflict is and fix it
for me?

You will see below that there is HTML script for a page (page 1) that consists of:

- a table
- within one cell an "include page" function. This page is another
HTML page that contains javascript for a pull down links menu. This is
page 2. I will include the script for page 2 below as well.
- in another cell on Page 1, is javascript for scrollable content.

The script for the whole of page 1 is as follows:
_______________________________________________________________________________

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<table border="1" width="100%">
  <tr>
    <td width="100%"><!--webbot bot="Include" U-Include="menu.htm" TAG="BODY"
      -->
      &nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container"
style="position:relative;width:175px;height:160px;border:1px solid
black;overflow:hidden">')
document.write('<div id="content"
style="position:absolute;width:170px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()"
onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0
width="9" height="5"></a>  <a href="#" onMouseover="movedown()"
onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0
width="9" height="5"></a></p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById?
document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script></td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
</table>

</body>

</html>
_______________________________________________________________________________

Script for Page 2
_______________________________________________________________________________

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!-- // MenuBuilder 3.0

function load1(form) {
     var url = form.Llist_1.options[form.Llist_1.selectedIndex].value;
     if (url != '') location.href = url;
     return false;
}
// -->
</SCRIPT>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="menuBuilder">
  <select name="Llist_1" onChange="load1(this.form)">
    <option value="" SELECTED>Choose Menu 
    <option value="://www.google.com">Google 
    <option value="http://www.example1.com">Example 1 
    <option value="http://www.example2.com">Example 2 
  </select>
</form>
</body>
</html>
Answer  
Subject: Re: Help me fix javascript please
Answered By: palitoy-ga on 19 Jun 2004 03:32 PDT
 
Hello Pinkhippo

If you have any questions or queries please ask for clarification and
I will do all I can to help.

Javascript works on the client side so files cannot be dynamically
included (as far as I am aware) from javascript.  If you wish for the
file to be dynamically included you will need to use a Server Side
Include.

In one page I believe this is what you are trying to do:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- // MenuBuilder 3.0

function load1(form) {
     var url = form.Llist_1.options[form.Llist_1.selectedIndex].value;
     if (url != '') location.href = url;
     return false;
}
// -->
</SCRIPT>

</head>

<body>

<table border="1" width="100%">
  <tr>
    <td width="100%"><!--webbot bot="Include" U-Include="menu.htm" TAG="BODY"
      -->
      &nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container"
style="position:relative;width:175px;height:160px;border:1px solid

black;overflow:hidden">')
document.write('<div id="content"
style="position:absolute;width:170px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()"
onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> 
<a href="#"

onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img
src="down.gif" border=0></a></p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById?
document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script></td>
  </tr>
  <tr>
    <td width="100%"><form name="menuBuilder">
  <select name="Llist_1" onChange="load1(this.form)">
    <option value="" SELECTED>Choose Menu 
    <option value="://www.google.com">Google 
    <option value="http://www.example1.com">Example 1 
    <option value="http://www.example2.com">Example 2 
  </select>
</form>
</td>
  </tr>
</table>

</body>

</html>
Request for Answer Clarification by pinkhippo-ga on 19 Jun 2004 04:11 PDT 
Hello palitoy-ga,

Thank you very much for answering my question.

Although you have explained what went wrong, unfortately it doesn't
quite answer my question, in 'fixing' the problem.

It was essential that the drop down menu was integrated into the
second page included in the main file, as this would have allowed me
to update links throughout a website.

Is there any other way I could fix it? Perhaps a sort of frames page?
But I understand Google and other search engines are not frames
friendly. Any ideas? Or perhaps you could outline most popular ways of
having a 'menu' integrated into web pages that can easily be updated,
and friendly towards other javascripts.

If not, I feel $30 is a lot to half fix the problem. I would certainly
be happy to set another 'question' and reward you $10.00.

Regards, pinkhippo.
Clarification of Answer by palitoy-ga on 19 Jun 2004 04:29 PDT 
Hello Pinkhippo

If you wish Page2 to be opened in a "framed" page then the script would be this:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<table border="1" width="100%">
  <tr>
    <td width="100%"><!--webbot bot="Include" U-Include="menu.htm" 

TAG="BODY"
      -->
      &nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container"
style="position:relative;width:175px;height:160px;border:1px solid

black;overflow:hidden">')
document.write('<div id="content"
style="position:absolute;width:170px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML 

is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object 

Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML 

allows
content on a page to change on the fly, without reloading the 

page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between 

content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style 

sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()"
onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> 
<a href="#"

onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img
src="down.gif" border=0></a></p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById?
document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script></td>
  </tr>
  <tr>
    <td width="100%"><iframe src="page2.html" />
</td>
  </tr>
</table>

</body>

</html>

Please note the line <iframe src="page2.html" /> - this means that
your page2.html file must be in the same location as the page1.html
file.  If it isn't then you will need to alter this to the full
location.

Also when the page is selected from the form it loads within this
frame.  The size of the frame is adjustable using height and width
parameters as you would with a <table> column or row.

If you need any further help on the iframe tag please ask and I would
be happy to help you out.
Clarification of Answer by palitoy-ga on 19 Jun 2004 04:32 PDT 
I forgot to mention if you do not wish the page selected from the drop
down box to appear in the iframe you will need to alter the code in
the page2.html file.

The line

if (url != '') location.href = url;

should become:

if (url != '') parent.location.href = url;
Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy