Strugle to make an external .js out of this code

Vlad097 · January 6, 2010, 10:59pm

Hi,
I found this piece of code and it works 100% while inside the html but I can’t manage to make an external JavaScript file that does the same. Obviously I don’t understand how it’s written.
Any suggestion how should I think?
I should mention that I did the easy steps like removing <script type tags and ending window.onload=getcontent_height
</script> tags…
there is much more going on here…

the code

             &lt;script type="text/javascript"&gt;

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

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

if (iens6){
document.write(‘<div id=“container” style=“position:relative;width:285px;height:230px;border:none;overflow:hidden”>’)
document.write(‘<div id=“content” style=“position:absolute;width:280px;left:0;top:0”>’)
}
</script>

<!–INSERT CONTENT HERE–>

<!–END CONTENT–>

</layer>
</ilayer>

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>

igv · January 6, 2010, 11:03pm

I guess after you make it separate .js file, you included it in your header?
If so, this is a problem, since it make some DOM calls I think it should be placed after the body. This way code will be executed after document is loaded.

Vlad097 · January 6, 2010, 11:19pm

After I created an external .js file I called it inside of div exactly where it was in html - that is body.
Okay this works fine… I mean like this inside html.
Where should I call it from?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<link href=“Css/default.css” rel=“stylesheet” type=“text/css” />
<link href=“Css/main.css” rel=“stylesheet” type=“text/css” />

</head>

<body>

       		&lt;div id="cenerHeader"&gt;&lt;/div&gt;
		
        	&lt;div id="search"&gt;&lt;/div&gt;
		
   	        &lt;div id="underSearch"&gt;&lt;/div&gt;
   &lt;/div&gt;

	         &lt;div id="leftNav"&gt;
             	&lt;div id="left"&gt;
                
                
    
    				&lt;ul&gt;
        				&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
           			    &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
          	 		    &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
                    &lt;/ul&gt;
	&lt;/div&gt;
             
             
             
             &lt;/div&gt;
            
            &lt;div id="rightNav"&gt;&lt;/div&gt;
            
             &lt;div id="leftContainer"&gt;
            

             
             &lt;script type="text/javascript"&gt;

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

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

if (iens6){
document.write(‘<div id=“container” style=“position:relative;width:285px;height:230px;border:none;overflow:hidden”>’)
document.write(‘<div id=“content” style=“position:absolute;width:280px;left:0;top:0”>’)
}
</script>

<!–INSERT CONTENT HERE–>
<p id=“leftText”> You are never to young to grow up
You are never to young to grow up
You are never to young to grow up
You are never to young to grow up
You are never to young to grow up
You are never to young to grow up
</p>
<!–END CONTENT–>

</layer>
</ilayer>

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>

             &lt;/div&gt;

	         &lt;div id="rightContainer"&gt;&lt;/div&gt;
      &lt;/div&gt;

		&lt;div id="footer"&gt;&lt;/div&gt;

</div>

</body>
</html>

igv · January 6, 2010, 11:55pm

if do put it in separate file with the name “test.js” for example, you would need to add this after </html> tag (the last thing in the document)


<script type="text/javascript" language="JavaScript" src="test.js"></script>

Vlad097 · January 7, 2010, 7:59am

I tried that and still nothing. I wish I knew this better…

Vlad097 · January 7, 2010, 8:26am

I am thinking now, this piece of javascript is writen to work inline of html. Now when I put it in external .js file how that file know that I want to apply it on the paragraph <p id=“leftText”>?
That is the thing, how do I en-wrap this paragraph in that external javascript?

aleserlee · January 7, 2010, 8:36am

You may have followed the below rule…Just wanted to cross check
1)Placed under <head> <script language=“javascript” src=“test.js”></script> </head>This should be in same level as your code file
2)<a href=“#” onMouseover=“javascript:moveup();” onMouseout=“javascript:clearTimeout(moveupvar)”>

Invoke Syntax on_Click=“javascript: return Validate();”
If no return values then simply on_Click=“javascript: Validate();”

igv · January 7, 2010, 8:53am

in external file you need to find element first document.getElementById(‘leftText’) and do whatever you want with it. But, the same rules applied to script tags inside body. Only inline javascript is different.
Anyway, could you give link or post how you actually separate js? what is the content of new html and external js file.

Vlad097 · January 7, 2010, 11:21am

Thanx for helping me!

Here is the html doc. -

<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<link href=“Css/default.css” rel=“stylesheet” type=“text/css” />
<link href=“Css/main.css” rel=“stylesheet” type=“text/css” />

</head>

<body>

       		&lt;div id="cenerHeader"&gt;&lt;/div&gt;
		
        	&lt;div id="search"&gt;&lt;/div&gt;
		
   	        &lt;div id="underSearch"&gt;&lt;/div&gt;
   &lt;/div&gt;

	         &lt;div id="leftNav"&gt;
             	&lt;div id="left"&gt;
                
                
    
    				&lt;ul&gt;
        				&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
           			    &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
            			&lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
          	 		    &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt; 
                    &lt;/ul&gt;
	&lt;/div&gt;
             
             
             
             &lt;/div&gt;
            
            &lt;div id="rightNav"&gt;&lt;/div&gt;

             &lt;div id="leftContainer"&gt;

                        &lt;p id="leftText"&gt; You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up 
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up
                        You are never to young to grow up &lt;/p&gt;


         
             &lt;/div&gt;

	         &lt;div id="rightContainer"&gt;&lt;/div&gt;


             &lt;/div&gt;

		&lt;div id="footer"&gt;&lt;/div&gt;
	&lt;/div&gt;

&lt;/body&gt;

</html>
<script type=“text/javascript” language=“JavaScript” src=“leftText.js”></script>

And
leftText.js

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

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

if (iens6){
document.write(‘<div id=“container” style=“position:relative;width:285px;height:230px;border:none;overflow:hidden”>’)
document.write(‘<div id=“content” style=“position:absolute;width:285px;left:0;top:0”>’)
}

<!–INSERT CONTENT HERE–>

<!–END CONTENT–>

</layer>
</ilayer>

if (iens6)
document.write(‘</div></div>’)

if (iens6){
var crossobj=document.getElementById? document.getElementById(“leftText”) : 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”
}

igv · January 7, 2010, 3:46pm

ok, the problem is that you have some not allowed html in your js file, like this:


<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>

additionally you have some js code, which is working inline only and not going to work in separate file, like this:


if (iens6){
document.write('<div id="container" style="position:relative;width:285px;height:230px;border:none;overflow:hidden" >')
document.write('<div id="content" style="position:absolute;width:285px;left:0;top:0">')
}

so first thing you need to do is to separate it completely. After that you need to avoid using document.write in external file, instead you can access elements by their ids, and insert html by using innerHTML or appendChild, or some other functions.

Vlad097 · January 7, 2010, 4:27pm

I see, it’s gonna take me a lot of reading to do that since I am designer who thought it might be easier to start doing javascript…
I understand what you are saying just don’t know where to start. Let me google to try to find an option for this. Or maybe,… I have a couple of javascript books and it seems I have to read them now…

igv · January 7, 2010, 4:29pm

why you want to separate it in a first place?
While it’s better programming model to have it separate, it is possible to have javascript inline without any problems (except maintenance )

Vlad097 · January 7, 2010, 5:24pm

Well you’ve right, it’s just kinda drinking non-alcoholic beer,… I’ve spent a lot of time learning CSS and making these table-less markups and now when I would like to have some nice javascript feature it’ll be a big chunk of code back to html code. For the learning purpose I guess it’s okay but I can see where I’m going. I’m gonna learn this 'cause there’s some awesome stuff and plus I won’t have to wait for coders to do that for me (not to mention the issues with design cause they seldom do what designer imagines, always have to send it back for re-tweak).
Any way, you’re right. It’s good enough that it works on the first place. And thank you for the directions!
V.

igv · January 7, 2010, 5:27pm

you are very welcome!

Topic		Replies	Views
Move inline script into external js file JavaScript	3	2587	October 28, 2010
First time trying to place javascript in external file JavaScript	12	595	January 3, 2010
Passing variable to external js file? JavaScript	4	16773	October 8, 2014
Move inline script into external js file JavaScript	7	11724	August 5, 2020
Making javascript not inline and as a script JavaScript	4	678	December 28, 2010

Strugle to make an external .js out of this code

</html> <script type=“text/javascript” language=“JavaScript” src=“leftText.js”></script>

Related topics

</html>
<script type=“text/javascript” language=“JavaScript” src=“leftText.js”></script>