Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Having trouble with external javascript


  • Please log in to reply
17 replies to this topic

#1 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 06 August 2003 - 10:37 PM

Hello,

I'm taking some search engine optimization advice and I want to put my javascript in an external file but I'm getting errors.

I know very little Javascript. I used Fireworks to create the pull-down menu for me.

This is a file that DOES WORK: http://www.ivrit.org...v-top-works.htm. You can see that there are rollovers and a pull-down menu for each button.

But when I tried to create an html file and pull out the js to put in a separate file and use the <script src="..."> tags to include this file, I get errors.

This is the file that DOES NOT work: http://www.ivrit.org...de/nav-top2.htm.

This is the Javascript file: http://www.ivrit.org...e/nav-top-js.js.

Any help is appreciated.

Thanks!

Risa

#2 DianeV

DianeV

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 7216 posts

Posted 06 August 2003 - 11:30 PM

I think the problem is that your reference to the external JS file should be:

<script type='text/javascript' src='yourfile.js'></script>

Also, you need to take the comment tags out of the external JS file:
<!--
and
-->

If I'm wrong, someone else should be along to correct it, but I believe that will do it.

#3 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 07 August 2003 - 11:05 AM

Diane,

Thanks for getting back to me. I did what you said but I am still getting error messages.

Risa

#4 just4fun

just4fun

    Unlurked Energy

  • Members
  • 4 posts

Posted 07 August 2003 - 11:29 AM

Risa,

You cannot specify external source file as well as commands in a single Script statement.

Existing code

<script type='text/javascript' src='nav-top-js.js'>mmLoadMenus();</script>

Change it to


<script type='text/javascript' src='nav-top-js.js'></script> 



<body onLoad='mmLoadMenus()'>




This will solve your problem.

#5 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 07 August 2003 - 12:09 PM

Oy. I did what you said but still got woes. Could it be my js file?

Thanks for your help.

Risa

#6 just4fun

just4fun

    Unlurked Energy

  • Members
  • 4 posts

Posted 07 August 2003 - 01:07 PM

Oops.. i am sorry i didn't observed properly in my first look... its a simple error.

You are missing another .js file inclusion.

add this code to ur html file just after the "top-nav-js.js"


<script language="JavaScript1.2" src="../fireworks/mm_menu.js"></script>



#7 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 07 August 2003 - 02:38 PM

Hi,

I did what you said and now I don't get any error messages, but the pull-down menus aren't there.

I think I messed up where onLoad='mmLoadMenus();' goes. When I put it where you told me, the page was white on the browser. I'm sure it's because I put the code in the head tag and not the body tag.

Below is the code in my body tag. Where does onLoad='mmLoadMenus();' go?

<body bgcolor="93c2e1" 
onLoad="MM_preloadImages('../fireworks/top_r2_c3_f2.gif','../fireworks/top_r4_c3_f2.gif','../fireworks/top_r6_c3_f2.gif')">


Thanks! I appreciate your help.

Risa[/code]

#8 just4fun

just4fun

    Unlurked Energy

  • Members
  • 4 posts

Posted 07 August 2003 - 02:55 PM

Well it can be done like this...

<script language="javascript" type="text/javascript">
function init() {
  MM_preloadImages'../fireworks/top_r2_c3_f2.gif','../fireworks/top_r4_c3_f2.gif','../fireworks/top_r6_c3_f2.gif');

mmLoadMenus();

}
</script>


and in ur body tag..

<body onLoad="init()">



#9 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 07 August 2003 - 08:41 PM

Here's some errors I am still seeing immediately at the url: http://www.ivrit.org...de/nav-top2.htm

line 6
you have:
function init(); {

I don't think that semi-colon belongs there.
function init() {

Now you seem to have the reverse problem lower down the code, circa line 15:
<body onLoad="init()">

This time its a command and needs the semi-colon
<body onLoad="init();">

Most significant though is that the page seems to have had its javascript moved to an external file, but you forgot to reference it.

There's no reference on your page to the functions used in the rollovers such as MM_swapImgRestore() and MM_startTimeout(), etc.

You need to reference the .JS file you put those functions into:
add the following line to your code right above the first <SCRIPT> tag you have right now (line 4):
<script language="JavaScript" type="text/javascript" 

src="http://www.ivrit.org/include/nav-top-js.js"> </script>


#10 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 07 August 2003 - 09:54 PM

Hey Thanks. I'll try what you said, although I hate to say it, but I'm close to giving up.

I'm creating an external js file from advice I received from a Search Engine forum at highrankings.com. It suggested that spiders can crawl your site more easily if all the js code was in another file.

But, I'll try it and see how it goes. I may not get to it for a few days because my babysitter won't be back til Monday.

Thanks for your time and advice! I'll let you know how it goes. Everyone here is really nice for offering their advice.

Risa

#11 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 07 August 2003 - 10:31 PM

You're so nearly there now Risa that it really wouldn't be worth giving up.

You'd be like the guy who swam across the English Channel to France but after struggling for hours to swim three-quarters of the way, decided it was too far, and so gave up and swam back ... :)

If everything else fails, just show me the orginal page code where the Javascript is still on the page, and I'll give you precise step-by-step instructions for the whole process so that you'll be able to do it easily, (and be able to repeat it whenever you might want to in future too). Okay?;)

#12 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 07 August 2003 - 11:28 PM

You're a gem, Black Knight. I'll get back to you either way. I really do want to know how to make it work, because I'm trying to optimize a few sites for the Search Engines and want my best chance for a high ranking.

Thanks!
Risa

#13 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 08 August 2003 - 12:17 AM

I couldn't wait til Monday to try it. I did and it doesn't work. I get errors.

This is the file that works:

http://www.ivrit.org...v-top-works.htm.

The rollovers work and the pull-down menus work. If I could create an html file with an external js file that makes the page work just like this one, well, I'd feel really really good.

I disected it into these files which aren't working out to well.

http://www.ivrit.org...de/nav-top2.htm and
http://www.ivrit.org...e/nav-top-js.js

Thanks for your help!
Risa

#14 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 08 August 2003 - 02:10 AM

Okay, quite a bit of code on that page, so here's the process.

Lets start with the code as it appears before the <body> tag of the page.

<script language="JavaScript" type="text/JavaScript">

<!--



// --- BELOW here goes into external file --- //



function dictionaryOpen() {

	MM_openBrWindow('../html/dailydictionary/dictionary.asp','','scrollbars=yes, toolbar=yes, status=yes,width=520,height=580')

}

function fallOpen() {

	MM_openBrWindow('/html/newsletter/fall2002.pdf','','scrollbars=yes,width=550,height=650')

}

function springOpen() {

	MM_openBrWindow('/html/newsletter/spring2003.pdf','','scrollbars=yes,width=550,height=650')

}

function MM_openBrWindow(theURL,winName,features) { //v2.0

  window.open(theURL,winName,features);

}



// --- ABOVE here goes into external file --- //

//-->

</script>



<script language="JavaScript">

<!--





// --- BELOW here goes into the external file --- //



function mmLoadMenus() {

  if (window.mm_menu_0817010235_0) return;

  window.mm_menu_0817010235_0 = new Menu("root",175,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010235_0.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>איגוד חובבי השפה העברית</span></font></strong>","location='/html/marketplace/lvrs_hebrew.html'");

   mm_menu_0817010235_0.hideOnMouseOut=true;

   mm_menu_0817010235_0.menuBorder=1;

   mm_menu_0817010235_0.menuLiteBgColor='#ffffff';

   mm_menu_0817010235_0.menuBorderBgColor='#555555';

   mm_menu_0817010235_0.bgColor='#555555';

    window.mm_menu_0817010111_7 = new Menu("root",90,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010111_7.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>עברית עכשיו</span></font></strong>","location='/html/newsletter/newsletter.htm'");

  mm_menu_0817010111_7.addMenuItem("Spring&2003","location='JavaScript:springOpen()'");

  mm_menu_0817010111_7.addMenuItem("Fall&2002","location='JavaScript:fallOpen()'");

  mm_menu_0817010111_7.addMenuItem("Archives","location='/html/newsletter/newsletter.htm'");

   mm_menu_0817010111_7.hideOnMouseOut=true;

   mm_menu_0817010111_7.bgColor='#555555';

   mm_menu_0817010111_7.menuBorder=1;

   mm_menu_0817010111_7.menuLiteBgColor='#ffffff';

   mm_menu_0817010111_7.menuBorderBgColor='#555555';

window.mm_menu_0817010328_2 = new Menu("root",75,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010328_2.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>כתבו אלינו</span></font></strong>","location='mailto:ivrit@ivrit.org'");

   mm_menu_0817010328_2.hideOnMouseOut=true;

   mm_menu_0817010328_2.menuBorder=1;

   mm_menu_0817010328_2.menuLiteBgColor='#ffffff';

   mm_menu_0817010328_2.menuBorderBgColor='#555555';

   mm_menu_0817010328_2.bgColor='#555555';

 mm_menu_0817010328_2.writeMenus();

} // mmLoadMenus()



function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}





// --- ABOVE here goes into external file --- //



//-->

</script>

<script language="JavaScript1.2" src="../fireworks/mm_menu.js"></script>

 

<script language="JavaScript" type="text/JavaScript">

<!--





// --- BELOW here goes into external file --- //



function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}





// --- ABOVE here goes into external file --- //



//-->

</script>

Now, I've added some cutting instructions into your code. These show you where I am starting and ending each cut. Basically, you are taking anything and everything between the opening <script> tag (but after the <!-- that comes right before the </script> tag. Did you notice that you have 4 separate <script> tags in this section of code?

All the stuff in between my cutting instructions is the JavaScript code that you paste into Notepad or similar plain text editor.

[Naturally, you mustn't use Word or Wordpad as these are word-processors, and tend to add bits of code for line-breaks etc that will mess up the javascript.]

Okay, so into the new plain text file, which will be our .js file, we have all the stuff from between all of the different cut-marks I showed in your code above.
function dictionaryOpen() {

	MM_openBrWindow('../html/dailydictionary/dictionary.asp','','scrollbars=yes, toolbar=yes, status=yes,width=520,height=580')

}

function fallOpen() {

	MM_openBrWindow('/html/newsletter/fall2002.pdf','','scrollbars=yes,width=550,height=650')

}

function springOpen() {

	MM_openBrWindow('/html/newsletter/spring2003.pdf','','scrollbars=yes,width=550,height=650')

}

function MM_openBrWindow(theURL,winName,features) { //v2.0

  window.open(theURL,winName,features);

}







function mmLoadMenus() {

  if (window.mm_menu_0817010235_0) return;

  window.mm_menu_0817010235_0 = new Menu("root",175,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010235_0.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>איגוד חובבי השפה העברית</span></font></strong>","location='/html/marketplace/lvrs_hebrew.html'");

   mm_menu_0817010235_0.hideOnMouseOut=true;

   mm_menu_0817010235_0.menuBorder=1;

   mm_menu_0817010235_0.menuLiteBgColor='#ffffff';

   mm_menu_0817010235_0.menuBorderBgColor='#555555';

   mm_menu_0817010235_0.bgColor='#555555';

    window.mm_menu_0817010111_7 = new Menu("root",90,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010111_7.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>עברית עכשיו</span></font></strong>","location='/html/newsletter/newsletter.htm'");

  mm_menu_0817010111_7.addMenuItem("Spring&2003","location='JavaScript:springOpen()'");

  mm_menu_0817010111_7.addMenuItem("Fall&2002","location='JavaScript:fallOpen()'");

  mm_menu_0817010111_7.addMenuItem("Archives","location='/html/newsletter/newsletter.htm'");

   mm_menu_0817010111_7.hideOnMouseOut=true;

   mm_menu_0817010111_7.bgColor='#555555';

   mm_menu_0817010111_7.menuBorder=1;

   mm_menu_0817010111_7.menuLiteBgColor='#ffffff';

   mm_menu_0817010111_7.menuBorderBgColor='#555555';

window.mm_menu_0817010328_2 = new Menu("root",75,16,"Verdana, Arial, Helvetica, sans-serif",10,"#000000","#000000","#ffffcc","#93c2e1","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

  mm_menu_0817010328_2.addMenuItem("<strong><font size='2'><span lang='HE' dir='RTL'>כתבו אלינו</span></font></strong>","location='mailto:ivrit@ivrit.org'");

   mm_menu_0817010328_2.hideOnMouseOut=true;

   mm_menu_0817010328_2.menuBorder=1;

   mm_menu_0817010328_2.menuLiteBgColor='#ffffff';

   mm_menu_0817010328_2.menuBorderBgColor='#555555';

   mm_menu_0817010328_2.bgColor='#555555';

 mm_menu_0817010328_2.writeMenus();

} // mmLoadMenus()



function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}







function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

Now, I have left a few extra lines between the three sections, just so that you can see I have put all three separate scripts into one single file. You don't need the extra line breaks, they're only there to show that all of the sections I wanted to move from the page into an external file have been moved into the same external file. Its just easier.

You now save this plain text, but give it a .js file extension. The easy way is to save it as a txt file, and then just rename it in windows explorer. This is your javascript file. For anyone else reading, who hasn't done this before, this file needs to be uploaded to the server, and you need to remember its full path (location) sothat you can refer to its URL in your page.

Okay. This leaves the following code on your page from what we started with before the cutting.

<script language="JavaScript" type="text/JavaScript">

<!--



// --- BELOW here goes into external file --- //

// --- ABOVE here goes into external file --- //

//-->

</script>



<script language="JavaScript">

<!--



// --- BELOW here goes into the external file --- //

// --- ABOVE here goes into external file --- //



//-->

</script>

<script language="JavaScript1.2" src="../fireworks/mm_menu.js"></script>

 

<script language="JavaScript" type="text/JavaScript">

<!--



// --- BELOW here goes into external file --- //

// --- ABOVE here goes into external file --- //



//-->

</script>

I left in the cutting instructions just so that there was no danger of confusing any reader about where they went. Lets remove those, and we can also remove the <!-- and the //--> bits that were there. They only protect non-javascript browsers from seeing the script. Browsers that don't understand javascript don't know to ignore the <!-- bit, and so see everything from there as a comment tag.

<script language="JavaScript" type="text/JavaScript">

</script>



<script language="JavaScript">

</script>

<script language="JavaScript1.2" src="../fireworks/mm_menu.js"></script>

 

<script language="JavaScript" type="text/JavaScript">

</script>

Now, because we put those three different script tag content into a single file, we can get by with just one script tag that points to the new external script location. However, don't forget that you already had one <script> tag that was referring to another external Javascript, and this needs to be left there too.

We end up with:
<script language="JavaScript" type="text/JavaScript">

</script>



<script language="JavaScript1.2" src="../fireworks/mm_menu.js"> </script>

Now, into the first <script> tag we left, the one that doesn't already have a SRC="" attribute set, we need to put the src attribute that points to the URL where you uploaded the .js javascript file we uploaded.

If I had uploaded that .js file to http://www.example.c.../mybigscript.js then the code would look like:
<script language="JavaScript" type="text/JavaScript" src="http://www.example.com/scripts/mybigscript.js">

</script>



<script language="JavaScript1.2" src="../fireworks/mm_menu.js"> </script>

That's it really. If you have any questions, just ask, but I'm pretty sure that by following those easy steps (hope I didn't make them sound to confusing) you're now fully accomplished in how to make an on-page javascript into an external javascript.

#15 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 09 August 2003 - 01:30 AM

:) Oh my goodness, Black Knight, YOU ARE THE MAN!!!! :wink:

That was so nice what you did I can't believe it. I never received such comprehensive, step-by-step instructions, with all the logic layed out. Actually, I have to go through it slowly to totally see and understand what you did, but it works and I'M PSYCHED!!!!

This is the page you helped me write: http://www.ivrit.org...de/menutest.htm.

I have to fix a few things in the code, like getting the Hebrew to be Hebrew and not ??????, but that's no problem (I may even fix it tonight, but it's 2:30 am).

Really, I can't believe your generosity of time.

THANKS!!!!!
Risa

#16 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 09 August 2003 - 03:47 AM

Glad it is all working now, Risa. :)

You're very welcome to the help. That's what forums like these are all about.

I assure you, its a genuine pleasure to have helped you to accomplish this, and your joy in the accomplishment is its own reward. :D

I hope that you'll visit us here at Cre8asite often, not only whenever you need further help, but also to help others in turn, even such simple help as giving feedback on sites in the website hospital is always appreciated by the webmaster. We all need a little help from time to time, and surely that's what any community, virtual or other, is really about.

#17 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 12 August 2003 - 09:03 PM

Hello again, Black Knight. I just wanted to let you know that I created my second menu using an external js file in about 10 minutes, which is about 14 hours and 50 minutes less than my last external js file. Here it is:

http://www.ivrit.org...ude/leftnav.htm

I'm very happy about the whole thing, and will now be happily creating external js files in most of my web designs, thanks to you.

Risa

#18 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 12 August 2003 - 11:24 PM

Great news indeed, Risa. :lol:

Thanks so much for posting to let me know that you've really 'got it' now and are enjoying the use of what you've learnt.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users