Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .js file doesn't work as external file...

    Hi:

    Can someone tell me why the below script doesn't work online with an external .js file (parts in question in bold)?:


    Script 1:


    <script>
    <!--
    function newWin(url,winName,w,h,top,left){
    largePic=window.open('',winName,'width='+w+',height='+h+',top='+((screen.height-h)/2)+',left='+((screen.width-w)/2));
    largePic.document.open();
    largePic.document.writeln("<html>");
    largePic.document.writeln("<head>");
    largePic.document.writeln("<title>Image Loader<\/title>");
    largePic.document.writeln("<script type='text\/javascript' src='loadImg.js'><\/script>");
    largePic.document.writeln("<\/head>");
    largePic.document.writeln("<body topmargin='25' marginheight='25' leftmargin='0' marginwidth='0' onload='javascript:loadImg();'>");
    largePic.document.writeln("<center>");
    largePic.document.writeln("<table border='0' height='1000'>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='25' valign='top'><center><img src='loadani.gif' border='0' width='105' height='25'><\/center><\/td>");
    largePic.document.writeln("<\/tr>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='974'><img src='spacer.gif' border='0' width='1' height='974'><\/td>");
    largePic.document.writeln("<\/tr>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='1'><img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'><\/td><\/tr><\/table>");
    largePic.document.writeln("<\/center>");
    largePic.document.writeln("<\/body>");
    largePic.document.writeln("<\/html>");
    largePic.document.close();
    }
    //-->
    </script>


    Here's the external file:


    Script 2:

    function loadImg(){
    if(document.clipboard.complete){
    document.open();
    document.writeln("<html>");
    document.writeln("<head>");
    document.writeln("<title>Large Image<\/title>");
    document.writeln("<\/head>");
    document.writeln("<body topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>");
    document.writeln("<img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'>");
    document.writeln("<\/body>");
    document.writeln("<\/html>");
    document.close();
    }
    }




    Here's the full script, same as the 1st script, but with the external script (2nd script) incorporated:

    Script 3:

    <script>
    <!--
    function newWin(url,winName,w,h,top,left){
    largePic=window.open('',winName,'width='+w+',height='+h+',top='+((screen.height-h)/2)+',left='+((screen.width-w)/2));
    largePic.document.open();
    largePic.document.writeln("<html>");
    largePic.document.writeln("<head>");
    largePic.document.writeln("<title>Image Loader<\/title>");
    largePic.document.writeln("<script>");
    largePic.document.writeln("<\!--");
    largePic.document.writeln("function loadImg(){");
    largePic.document.writeln("if(document.clipboard.complete){");
    largePic.document.writeln("document.open();");
    largePic.document.writeln("document.writeln('<html>');");
    largePic.document.writeln("document.writeln('<head>');");
    largePic.document.writeln("document.writeln('<title>Large Image<\/title>');");
    largePic.document.writeln("document.writeln('<\/head>');");
    largePic.document.writeln("document.writeln(\"<body topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>\");");
    largePic.document.writeln("document.writeln(\"<img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'>\");");
    largePic.document.writeln("document.writeln('<\/body>');");
    largePic.document.writeln("document.writeln('<\/html>');");
    largePic.document.writeln("document.close();");
    largePic.document.writeln("}");
    largePic.document.writeln("}");
    largePic.document.writeln("\//-->");
    largePic.document.writeln("<\/script>");

    largePic.document.writeln("<\/head>");
    largePic.document.writeln("<body topmargin='25' marginheight='25' leftmargin='0' marginwidth='0' onload='javascript:loadImg();'>");
    largePic.document.writeln("<center>");
    largePic.document.writeln("<table border='0' height='1000'>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='25' valign='top'><center><img src='loadani.gif' border='0' width='105' height='25'><\/center><\/td>");
    largePic.document.writeln("<\/tr>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='974'><img src='spacer.gif' border='0' width='1' height='974'><\/td>");
    largePic.document.writeln("<\/tr>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='1'><img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'><\/td><\/tr><\/table>");
    largePic.document.writeln("<\/center>");
    largePic.document.writeln("<\/body>");
    largePic.document.writeln("<\/html>");
    largePic.document.close();
    }
    //-->
    </script>

    Here's a link to the full script:

    http://www.ekigroup.com/javascript/loadBar/loadani.html


    I'm just writing a script to the 2nd page, but the script being written doesn't work online (works offline) when I put it in an external .js file.

    Any help is appreciated.



    -james
    Last edited by jamescover; 06-27-2004 at 11:32 PM. Reason: added url
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    The code in the link you posted works for me in Moz1.0
    What browser are you using?

    Try splitting the "script" tag in the string. Javascript may interpret it as nested script tags.

    largePic.document.writeln("<scr"+"ipt type='text\/javascript' src='loadImg.js'><\/sc"+"ript>");


    You may also want to store the document reference in a variable for efficiency.

    var doc.largePic.document;
    doc.open();
    doc.writeln("<html>");
    doc.writeln("<head>");
    ...

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Glenn:

    Thanks for responding...


    "The code in the link you posted works for me in Moz1.0
    What browser are you using?"


    Yeah, sorry, I didn't mention that the link in my previous post is to the working script (without the external file). I just thought it might give everyone a better idea of what I'm trying to do.

    BTW, I'm using IE 5.0. This script should work in IE & NN 4+.


    "Try splitting the "script" tag in the string. Javascript may interpret it as nested script tags."

    Thanks, for the suggestion! I'll give it a try. As it stands, I have to Cntrl+Alt+Delete just to close the popup when I try to use the external file--it never loads.

    Here is a link to the non-working script, using the external js file:

    http://www.ekigroup.com/javascript/l.../loadani2.html


    "You may also want to store the document reference in a variable for efficiency."

    Thanks! That's a good idea. I still have some components to implement, like using the images array, etc. (I just started writing the script last night). Anyway, before it's done, the only thing you'll have to change are the values for the arguments in the event handler, so it will be easy to configure a large number of images.

    Thanks, again, for your help. I hope I can get this sorted soon....


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    Quote Originally Posted by jamescover
    Yeah, sorry, I didn't mention that the link in my previous post is to the working script (without the external file). I just thought it might give everyone a better idea of what I'm trying to do.

    BTW, I'm using IE 5.0. This script should work in IE & NN 4+.


    "Try splitting the "script" tag in the string. Javascript may interpret it as nested script tags."

    Thanks, for the suggestion! I'll give it a try. As it stands, I have to Cntrl+Alt+Delete just to close the popup when I try to use the external file--it never loads.

    Here is a link to the non-working script, using the external js file:

    http://www.ekigroup.com/javascript/l.../loadani2.html
    Still works for me in Mozilla1.0
    Try my suggestion.

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try my suggestion

    No--still doesn't work in IE 5.0.

    Any other suggestions???


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #6
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Read the sig

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mayve your problem is how you have set up the pop up?

    I noticed that you have done what most people do, and that is to attach a variable to the window features option. I have never been able to perfectly do it, and it is not technically necessary. Here's what you have:

    Code:
    function newWin(url,winName,w,h,top,left){
    largePic=window.open('',winName,'width='+w+',height='+h+',top='+(( screen.height-h)/2)+',left='+((screen.width-w)/2));
    My i ask as to why you have the parameters by the name of w,h, top, and left? What is that you are looking to achieve? If the goal is to have those features, then you are better off with something like this,

    Code:
    function launcher(url, windName, features)
    {
     var = "whatEVERname";
    
    whatEVERname=window.open(url, windName, features);
    }
    You do not need any more parameters than what you have above, because when you start to make the list of features, they are seperated only by a comma, and not an additional set of quotes. What this means is, that if you wanted to call the function, then you could do something like this,

    Code:
    <input type="button" value="pop" onClick="popWindow('Moving_Images.html','On_Styles','width=440px, height=150px,top=300px,left=300px');">
    
    <input type="button" value="pop" onClick="popWindow('Buttons_tuts.html','Moving_Object','width=440px, height=150px,top=300px,left=300px');">
    Notice how i am calling the function? Notice how i am listing more than one feature for the window for the 3rd parameter? I do not need to have more than 3 parameters really, for my pop-up function. There's no real need for it.

    The point is, that a parameter is basically a variable. In the end, the sole purpose of a variable is to hold, or host, content. Think of a variable as a reserved unit of memory on your computer that javascript uses in order for it to be one functional piece of programming. Thus because you can pass parameters from one method to another, when you write your expression for the window.open() method, all you have to do is pass the parameters that were in the function. Why? Because they are variables, and all variables can be passed around. This is how data is sent from one point to another.

    At any rate, you might want to like break things down into smaller pieces of code, instead of having these massively long functions. To use analogy, to have more bees is better than having one massive bee that produces all the honey. Every function you create should be understood as being a worker bee whose sole purpose is to be responsible for a very specific task. Once this is done, its only a matter of using variables for the collection of the honey, as it were. In webdesign, interactivity is the honey you are looking to produce. This is mostly possible through functions.
    Last edited by SpiritualStorms; 06-28-2004 at 08:21 AM.
    LovesWar

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts

    Please be specific.

    So what's the output when it's run in IE5? Is there any js error? If js error notification is turned off, try showing the status bar in the popup and see if there's an "!" icon and then double-click it.

    largePic=window.open('',winName,'width='+w+',height='+h+',top='+(( screen.height-h)/2)+',left='+((screen.width-w)/2)+',status=1');

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think your problem is that you have two <body... tags going on and when the scripts are together within the document, the second is ignored in favor of the first.

    Code:
    largePic.document.writeln("<script>");
    largePic.document.writeln("<\!--");
    largePic.document.writeln("function loadImg(){");
    largePic.document.writeln("if(document.clipboard.complete){");
    largePic.document.writeln("document.open();");
    largePic.document.writeln("document.writeln('<html>');");
    largePic.document.writeln("document.writeln('<head>');");
    largePic.document.writeln("document.writeln('<title>Large Image<\/title>');");
    largePic.document.writeln("document.writeln('<\/head>');");
    largePic.document.writeln("document.writeln(\"<body topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>\");");
    largePic.document.writeln("document.writeln(\"<img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'>\");");
    largePic.document.writeln("document.writeln('<\/body>');");
    largePic.document.writeln("document.writeln('<\/html>');");
    largePic.document.writeln("document.close();");
    largePic.document.writeln("}");
    largePic.document.writeln("}");
    largePic.document.writeln("\//-->");
    largePic.document.writeln("<\/script>");
    largePic.document.writeln("<\/head>");
    largePic.document.writeln("<body topmargin='25' marginheight='25' leftmargin='0' marginwidth='0' onload='javascript:loadImg();'>");
    Either way, using IE6 I noticed that your external script example would crash my browser (without an error) unless the cliboard image was cached. Which would lead me to believe that this condition is causing the problem:

    if(document.clipboard.complete){

    Quite frankly, that whole routine does not make much sense to me. It appears that you are trying to preload the clipboard image into a 1px X 1px area but there are much better ways of preloading and checking for complete or onload. Such as:

    var clipImage = new Image();
    clipImage.src= 'clipboard.jpg';
    if(clipImage.complete){

    Or:

    var clipImage = new Image();
    clipImage.src = 'clipboard.jpg';
    clipImage.onload = function(){

    ......Willy

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    Quote Originally Posted by Willy Duitt
    I think your problem is that you have two <body... tags going on and when the scripts are together within the document, the second is ignored in favor of the first.
    That wouldn't be the problem because on onload, document.write statements are executed causing the current page to be replaced by new string. But I agree with you that there are much better ways of doing it.
    Code:
    <script type="text/javascript">
    function newWin(url,winName,w,h,top,left){
      var largePic=window.open('',winName,'width='+w+',height='+h+',top='+(( screen.height-h)/2)+',left='+((screen.width-w)/2));
      var html='';
      html+="<html>";
      html+="<head>";
      html+="<title>Image Loader<\/title>";
      html+="<\/head>";
      html+='<body topmargin="25" marginheight="25" leftmargin="0" marginwidth="0">';
      html+='<div><img name="ani" src="loadani.gif" border="0" width="105" height="25"><\/div>';
      html+='<div><img name="clipboard" src="Clipboard.jpg" border="0" width="438" height="44" style="display:none" onload="this.style.display=\'inline\';document.images[\'ani\'].style.display=\'none\';document.title=\'Large Image\'"><\/div>';
      html+="<\/body>";
      html+="<\/html>";
      var doc = largePic.document;
      doc.write(html);
      doc.close();
    }
    </script>

  • #11
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Guys:

    I appreciate everyone's help/input.

    Well, yes, I agree about creating an image object, but that's where my problem lies...I can't do either of two things: 1). pass the image attributes and values to the next page using document.writeln(), or 2). Put them in an external script, and write it to a new document, so the values can be stored there, and accessed from either document. As Willy observed, using an external script crashes IE.

    This seems simple enough, but I haven't been able to make it work:


    document.writeln("<script language='javascript' type='text/javascript' src='myScript.js'><\/script>");

    I was just going to put the image object info in an external script, and reference it from the second document. But the above line of code crashes IE.

    That's the reason why I'm embedding the object in the page, out of site.

    Here is the other way, but I can't get the whole script to come together:



    <script>
    <!--
    function newWin(url,winName,iW,iH,top,left){
    largePic=window.open(url,winName,'width='+iW+',height='+iH+',top='+((screen.height-iH)/2)+',left='+((screen.width-iW)/2));
    largePic.document.open();
    largePic.document.writeln("<html>");
    largePic.document.writeln("<head>");
    largePic.document.writeln("<title>Image Loader<\/title>");
    largePic.document.writeln("<script>");
    largePic.document.writeln("<\!--");
    largePic.document.writeln("var clipboard=new Image();");
    largePic.document.writeln("clipboard.src='Clipboard.jpg';");
    largePic.document.writeln("function showImg(){");
    largePic.document.writeln("if(document.images){");
    largePic.document.writeln("if(clipboard.complete){");
    largePic.document.writeln("document.open();");
    largePic.document.writeln("document.writeln('<html>');");
    largePic.document.writeln("document.writeln('<head>');");
    largePic.document.writeln("document.writeln('<title>Large Image<\/title>');");
    largePic.document.writeln("document.writeln('<\/head>');");
    largePic.document.writeln("document.writeln(\"<body topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>\");");
    largePic.document.writeln("document.writeln(\"<img name='clipboard' src='Clipboard.jpg' border='0' width='438' height='440'>\");");
    largePic.document.writeln("document.writeln('<\/body>');");
    largePic.document.writeln("document.writeln('<\/html>');");
    largePic.document.writeln("document.close();");
    largePic.document.writeln("}");
    largePic.document.writeln("}");
    largePic.document.writeln("}");
    largePic.document.writeln("\//-->");
    largePic.document.writeln("<\/script>");

    largePic.document.writeln("<\/head>");
    largePic.document.writeln("<body topmargin='25' marginheight='25' leftmargin='0' marginwidth='0' onload='javascript:showImg();'>");
    largePic.document.writeln("<center>");
    largePic.document.writeln("<table border='0' height='25' valign='top'>");
    largePic.document.writeln("<tr>");
    largePic.document.writeln("<td height='25' valign='top'><center><img src='loadani.gif' border='0' width='105' height='25'><\/center><\/td><\/tr><\/table>");
    largePic.document.writeln("<\/center>");
    largePic.document.writeln("<\/body>");
    largePic.document.writeln("<\/html>");
    largePic.document.close();
    }
    //-->
    </script>


    Here's a link to the script above, using an image object(works fine with one image, but I can't get it to work for x number of images):

    http://www.ekigroup.com/javascript/loadBar/final.html

    To explain what I'm trying to do:

    First, I want to have one script that doesn't have to be modified at all. But it must open any number of fullsized pics from thumbnails. So, say, you have 15 images on the same page. The script will open 1 Popup and write to that page to preload the image, then, once the larger image has loaded, it will again write to the page, to remove the "loading" graphic, default borders, and display the fullsized graphic.

    So, no modification to the script itself must be necessay, but all of the values must be contained to the event handlers, and the script as variables and arguments, yet it has to accomodate an unlimited number of images.

    It also has to write all of the HTML pages for you, i.e., no additional coding (HTML) necessary. It also must auto-center the Popup, and eliminate the default top and left borders.

    So this is where my knowledge has run dry. Can anyone tell me how to create an image object 9for preloading), then pass that object's values to a new document (not window) for use? It seems that the object is destroyed once the document is written. But so that I can use this for many images, without changing the script, I will need to pass along this information, if the image isn't embedded in each page.

    In other words, I'll need to create a different object for each event handler, and then use that object across 2 documents--the atrributes of the image objects will then be arguments in the function that writes to the new document. At least, that seems logical to me...


    I thought something like this would work:


    var largeImg=new Image();
    largeImg.src="Clipboard.jpg";//this too would be an argument from the previous document, I just named the value to check the script.
    iS=largeImg.src;
    iW=largeImg.width;
    iH=largeImg.height;
    function loadImg(iS,iW,iH){
    if(document.images){
    if(largeImg.complete){
    document.open();
    document.writeln("<img name='+iN+' src='+iS+' etc...


    But no success. The object seems to be destroyed after writing to the new document. Any ideas???

    Thanks, again, for everyone's help and patience...


    BTW, Glenn, I have already tried the status route...no error, everything just freezes.


    -james
    Last edited by jamescover; 06-29-2004 at 09:45 AM. Reason: added URL
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    My code can be modified but here's a canned script that I think suits your requirements.

  • #13
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Glenn:

    Thanks, again, for your help.

    I'm not criticizing, just commenting, but your script doesn't work in IE 5.0 or NN 4.06. Personally, I'm not into the whole DOM-compliant thing, because I never code for myself, but for the rest of the web. Well, not all of the web, just a large segment of it, so I try to be compatable with IE & NN 4+. I guess, that's why my coding is so basic.

    Anyway, your code is very tidy/concise (I like that). I will try to deconstruct it to see if there are any elements I can implement in my current project.

    I wrote a somewhat similar script last year (I think):

    http://www.ekigroup.com/javascript/popup.html

    It doesn't auto-size the popup to the image, but it does "shrink" the image to fit the window.



    BTW, in reference to my last post, can you tell me if an image object is destroyed once the document is written to???


    Thanks, again...



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •