Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 36

Thread: Anyway to know if an image did NOT display in the browser?

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    My thinking was that there is always a possibility that the image was only temporarily unavailable due to network traffic or whatever. If this is being used along with users uploading images, then perhaps the upload hadn't finished.

    Most reasonable folks won't try too many times with a bad image, and it takes minimal server side resources anyway (depending upon what URL is entered, the server may not even need to get involved, and a 404 or other error is generally very low overhead), it is the user's browser that attempts to load the image.

    I felt that there was no harm in allowing repeated validation of good images (they should now be cached on the user end anyway, so not affect the server much), but depending upon what this is used for, that could/should be changed.

    For first time and previously good images, it currently only checks to see if the image is being checked, so as not to continually try to load it if it is already in the process of being loaded.

    Once submitted by the user, the submit button is disabled until some result is determined.

    Regardless of these various considerations, reloading the page can erase all stored information. A cookie could be used to maintain it, but with a lot of images, this could overflow the browser's cookie buffer, and the user may always clear or turn off cookies. If you want something more robust in that regard, you will need to use a server side language.

    And, of course, with javascript disabled, the form will always submit, so if this is somehow crucial - again a server side language must be used.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #22
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Yeah I agree. I'd rather not disallow the form just in case. It just allows users to submit an http hosted URL. I just don't want anything to go through. I'll also validate the image on the server side. Is there a way to put limits on the width and height? I think I can do this on the server side as well. I'll mess with it.

  3. #23
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Getting the dimensions in javascript is easy once the image has loaded. Since we are already depending upon image load for approval, selecting for dimensions are minor additions (highlighted in two places, the two red 100's are the width and height limits respectively):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function validateImg(form){
       if(validateImg.loaded){
        validateImg.loaded = false;
        return true;
       }
       form.elements.sub.disabled = true;
       if(validateImg.obj[form.elements.imageURL.value + '_$_attempted']){
        if(!confirm(form.elements.imageURL.value + ' has been attempted before and failed.\n' +
        'continue anyway?')){
         form.elements.imageURL.value = '';
         return form.elements.sub.disabled = false;
        }
       else validateImg.obj[form.elements.imageURL.value] = false;
       }
       if(!validateImg.obj[form.elements.imageURL.value]){
        validateImg.obj[form.elements.imageURL.value] = true;
        var validate = new Image();
        validate.onload = function(){
         if(this.width > validateImg.wlimit || this.height > validateImg.hlimit){
          alert(form.elements.imageURL.value + ' is too large!');
          validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
          form.elements.sub.disabled = false;
          return;
         }
         validateImg.loaded = true;
         validateImg.obj[form.elements.imageURL.value] = form.elements.sub.disabled = false;
         form.submit();
        };
        validate.onerror = function(){
         alert("Bad Image!");
         form.elements.sub.disabled = validateImg.loaded = false;
         validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
        };
        validateImg.loaded = false;
        validate.src = form.elements.imageURL.value;
       }   
       return false;
    }
    validateImg.obj = [];
    validateImg.wlimit = 100;
    validateImg.hlimit = 100;
    </script>
    </head>
    <body>
    <form action="#" onsubmit="return validateImg(this);">
    <div>
    <input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
    </div>
    </form>
    </body>
    </html>
    Note: I also changed all instances of:

    Code:
    ["imageURL"]
    to:

    Code:
    .imageURL
    because they are equivalent in the code as written (this would only change if the name of that input could vary, and then a slightly different syntax would be required anyway) and the latter is slightly more efficient in this case.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #24
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    In Firefox, this code now seems to be blocking the submit even if the user clicks to continue anyway. It gives them the bad image alert no matter. Here's my code:

    Code:
    function validateImg(form){
      document.getElementById('loadingmsg').innerHTML = "<img src='images/loading.gif' /> Validating... ";
    
       if(validateImg.loaded){
        validateImg.loaded = false;
        return true;
       }
       form.elements.sub.disabled = true;
       if(validateImg.obj[form.elements["externalthumb"].value + '_$_attempted']){
        if(!confirm(form.elements["externalthumb"].value + ' has been attempted before and failed.\n' +
        'continue anyway?')){
         form.elements["externalthumb"].value = '';
         return form.elements.sub.disabled = false;
        }
       else validateImg.obj[form.elements["externalthumb"].value] = false;
       }
       if(!validateImg.obj[form.elements["externalthumb"].value]){
        validateImg.obj[form.elements["externalthumb"].value] = true;
        var validate = new Image();
        validate.onload = function(){
         validateImg.loaded = true;
         validateImg.obj[form.elements["externalthumb"].value] = form.elements.sub.disabled = false;
         form.submit()
        };
        validate.onerror = function(){
         alert("The URL to your thumbnail doesn't exist!");
    	   document.getElementById('loadingmsg').innerHTML = "";
         form.elements.sub.disabled = validateImg.loaded = false;
         validateImg.obj[form.elements["externalthumb"].value + '_$_attempted'] = true;
        };
        validateImg.loaded = false;
        validate.src = form.elements["externalthumb"].value;
       }   
       return false;
    }
    validateImg.obj = [];
    Code:
    <input name="sub" type="submit" id="sub" value="upload embed code" onclick="this.disabled = disabled;"/>

  5. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Then go back to the code as shown previously. It was written and tested in FF, then checked in IE, Opera.

    One thing I can tell you though, this was designed with a live URL for the image in mind, not a local one. I don't know about a text input, but with a file input (I was playing with the code a bit), FF would only show files in the same folder as the page. This is due to security measures of that browser, Opera was the same.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #26
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Hmm. I'm pretty sure that was the original code. Let me double check.

  7. #27
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Then go back to the code as shown previously. It was written and tested in FF, then checked in IE, Opera.
    One thing I can tell you though, this was designed with a live URL for the image in mind, not a local one.
    yes I'm only concerned about a live url.

    jscheuer1 please double check I tried using the original code and I see the same problem in Firefox and Safari. It just keeps saying bad image after clicking OK. I guess the code that checks for the image seems to always execute.

    I don't know about IE because its not installed on the mac.
    Last edited by monaya; 03-05-2009 at 05:39 PM.

  8. #28
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Also after upgrading to Firefox 3.0.7, buttons that are disabled are never reenabled through javascript, although there are no problems with Safari and IE.

    once you disable like:
    Code:
    form.elements.sub.disabled = true;
    the following does not re-enable:
    Code:
    form.elements.sub.disabled = false;
    I love Firefox, but it does some quirky things with javascipt now I'm realizing. Pretty annoying not to be able to re-enable a button after a failed authentication.

  9. #29
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Another bug I found is that when you do get the prompt to CANCEL or CONTINUE ANYWAY, and click CANCEL, the submit button no longer submits the form. This happens in IE too.
    Last edited by monaya; 03-05-2009 at 05:56 PM.

  10. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    None of that is happening here, I just upgraded to FF 3.0.7. Here is my current working code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function validateImg(form){
       if(validateImg.loaded){
        validateImg.loaded = false;
        return true;
       }
       form.elements.sub.disabled = true;
       if(validateImg.obj[form.elements.imageURL.value + '_$_attempted']){
        if(!confirm(form.elements.imageURL.value + ' has been attempted before and failed.\n' +
        'continue anyway?')){
         form.elements.imageURL.value = '';
         return form.elements.sub.disabled = false;
        }
       else validateImg.obj[form.elements.imageURL.value] = false;
       }
       if(!validateImg.obj[form.elements.imageURL.value]){
        validateImg.obj[form.elements.imageURL.value] = true;
        var validate = new Image();
        validate.onload = function(){
         if(this.width > validateImg.wlimit || this.height > validateImg.hlimit){
          alert(form.elements.imageURL.value + ' is too large!');
          validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
          form.elements.sub.disabled = false;
          return;
         }
         validateImg.loaded = true;
         validateImg.obj[form.elements.imageURL.value] = form.elements.sub.disabled = false;
         form.submit();
        };
        validate.onerror = function(){
         alert('Bad Image!');
         form.elements.sub.disabled = validateImg.loaded = false;
         validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
        };
        validateImg.loaded = false;
        validate.src = form.elements.imageURL.value;
       }   
       return false;
    }
    validateImg.obj = {};
    validateImg.wlimit = 1500;
    validateImg.hlimit = 1500;
    </script>
    </head>
    <body>
    <form action="#" onsubmit="return validateImg(this);">
    <div>
    <input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
    </div>
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Tags for this Thread

Bookmarks

Posting Permissions

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