SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple JS - works in preview but not when live

    I am sure this is very simple JS, but I just don't understand enough to get it working - any help to point out my mistakes appreciated...
    All I am trying to do is get an image enlargement to open in a new window.
    It works well enough in the preview in FF, but when I go live, it says it cannot find the url on the server. I have saved 2 images as jpgs "large.jpg" and "image.jpg" - is this enough?

    Apologies if I am really stupid at this - just beginning! Here is what I have done:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SS</title>
    <link href="sabistyles.css" rel="stylesheet" type="text/css" />
    <SCRIPT LANGUAGE="javascript" SRC="large.js"></SCRIPT>
    </head>
    Here's the large.js document:

    Code:
    // JavaScript Document
    function openW(mypage,myname,w,h,features) {
    if(screen.width){
    var winl = 0;
    var wint = 0;
    }else{winl = 0;wint =0;}
    if (winl < 0) winl = 0;
    if (wint < 0) wint = 0;
    var settings = 'height=' + h + ',';
    settings += 'width=' + w + ',';
    settings += 'top=' + wint + ',';
    settings += 'left=' + winl + ',';
    settings += features;
    win = window.open(mypage,myname,settings);
    win.window.focus();
    }

    And this is what I have in my HTML:

    HTML Code:
    <a class="scarf" href="JavaScript:openW('images/large.jpg','Large Image',400,550,'')"title="Click to enlarge">
    <img src="Images/small_image.jpg" alt="Large Image" /></a>
    Thank you!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The small image has "Images" as the folder path and the large image has "image" as the folder path. Note the capitalization.

    A few notes that may help:
    • tag names and attributes should be lowercase, especially when you're using xhtml
    • tag attributes should be separated by a space.
    • The language attribute is deprecated, meaning don't use it. Use type="text/javascript" if you must. Even that though has since been deprecated because text/javascript isn't a proper mime-type. So type="application/javascript" should be used instead, except for one problem. IE6 doesn't understand that and ignores the script. So for best practice use no attribute at all. Just <script>


    More important though is the anchor link. The javascript pseudo-protocol is an ugly and awful technique. Older browsers won't run the code and will try to follow it as a link instead, and even modern browsers will try to follow it as a link when javascript is disabled.

    Instead of using the pseudo-protocol you should use the onclick attribute instead. Then you can place a real link as the href, so that older browsers and modern ones with javascript disabled will follow the link to the large image. When the browser does understand what to do with the javascript, you can return false to the link which prevents it from performing the default action of following the link.

    That would change the anchor start tag to the this:

    Code HTML4Strict:
    <a class="scarf" href="images/large.jpg" onclick="openW('images/large.jpg','Large Image',400,550,''); return false;" title="Click to enlarge">

    Now that's okay to begin with, but we should really separate the behaviour from the content. Are you aware of separating presentation from content? That's because the page consists of three layers, HTML, CSS and JavaScript which are respectively the content, presentation and behaviour. We have had it drummed into us that separating the style and content makes it easier to manage things. The same goes for the behaviour. We should separate the behaviour and the content and place hooks on the content for the scripting.

    I am going to place an identifier on the anchor, but don't know what purpose that serves in the context of the page so I'm going to give it a simple identifier called myImage. If it was one of several related images that onclick will be applied to, the identifier should be placed on the element that most easily allows you to access all of the relevant tags.

    In other words, don't use multiple identifiers when one can be used instead.

    So with an identifier on the anchor, this leaves the HTML looking like this.

    Code HTML4Strict:
    <a id="myImage" class="scarf" href="images/large.jpg" title="Click to enlarge">

    The rest of it is done after the page has loaded, preferably at the end of the body element so that it takes place after the element is available so that it gets done before the page has finished loading.

    Code Javascript:
    document.getElementById('myImage').onclick = openLarge;
    function openLarge() {
        openW('images/large.jpg','Large Image',400,550,'')";
        return false;
    }

    Now instead of having openLarge() as a wrapper function, an anonymous function can be used instead if we only intend for it to be called from the one statement.

    Code Javascript:
    document.getElementById('myImage').onclick = function () {
        openW('images/large.jpg','Large Image',400,550,'')";
        return false;
    }

    That image name doesn't need to be there either. The HTML code already contains the image path, so lets get it from there.

    Code Javascript:
    document.getElementById('myImage').onclick = function () {
        openW(this.href, 'Large Image', 400, 550, '')";
        return false;
    }

    That's now improved things dramatically
    Last edited by paul_wilkins; Feb 15, 2008 at 14:00.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast Boxer's Avatar
    Join Date
    Jan 2008
    Location
    Denver, Colorado
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Why external function?

    You really don't need the function, cos it does almost nothing. Just write the window.open command right in your HTML, and it will work. And the browser won't have to do extra request.
    ALT-text is what appears instead of image, when it's not yet loaded. You wrote "Large image" there - this is not true.
    Capitalization matters, right. Pay more attention to that.
    The optimized version:
    Code HTML4Strict:
    <a class="scarf"
    href="javascript:window.open('images/large.jpg','Large Image','width=400,height=550')"
    title="Click to enlarge (new window)">
    <img src="images/image.jpg" alt="Preview" />
    </a>
    Or another one:
    Code HTML4Strict:
    <img
    	src="images/image.jpg"
    	alt="Preview"
    	onClick="javascript:window.open('images/large.jpg','Large Image','width=400,height=550')"
    	title="Click to enlarge (new window)"
    />


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
  •