dynamic HTML cross-browser

Discussion in 'Javascript' started by Aaron Gervais, Jul 18, 2005.

  1. I am brand-new to javascript, but after reading some tutorials online I
    was able to make a dynamic HTML photo gallery in javascript. It works
    fine in all browsers except IE6 (big surprise). I've been looking
    around online for solutions, but the fixes I have seen don't seem to
    work. I assume I am misunderstanding something... I was using
    element.setAttribute but have changed my code to avoid that. Here is an
    example. IE6 displays the link text but doesn't do anything else--exact
    same result I had by using element.setAttribute('name', 'value').

    Any suggestions would be appreciated.
    Thx,
    Aaron

    // scope workaround
    function addClick(parent, index)
    {
    parent.onclick = function() { getThumbs(index); };
    }

    // make a link for each gallery
    function makeButtons()
    {
    obj = document.getElementById("pgallery");
    galholder = document.createElement("div");
    galholder.className = "galleries";
    for ( i = 0; i < gallerylist.length; i++ )
    {
    nd = document.createElement("a");
    nd.className = "media";
    nd.style.cursor = "pointer";
    addClick(nd, i);
    text = document.createTextNode(gallerylist[1]);
    nd.appendChild(text);
    galholder.appendChild(nd);
    }
    obj.appendChild(galholder);
    spacer = document.createElement("div");
    spacer.className = "picspacer";
    obj.appendChild(spacer);
    }
     
    Aaron Gervais, Jul 18, 2005
    #1
    1. Advertising

  2. Aaron Gervais

    RobG Guest

    Aaron Gervais wrote:
    > I am brand-new to javascript, but after reading some tutorials online I
    > was able to make a dynamic HTML photo gallery in javascript. It works
    > fine in all browsers except IE6 (big surprise). I've been looking
    > around online for solutions, but the fixes I have seen don't seem to
    > work. I assume I am misunderstanding something... I was using
    > element.setAttribute but have changed my code to avoid that. Here is an
    > example. IE6 displays the link text but doesn't do anything else--exact
    > same result I had by using element.setAttribute('name', 'value').
    >
    > Any suggestions would be appreciated.


    Don't post code with tabs. Use 2 or 4 spaces for indents and manually
    wrap code at about 70 characters to prevent auto-wrapping (which
    introduces errors and makes assistance a chore).

    > Thx,
    > Aaron
    >
    > // scope workaround
    > function addClick(parent, index)
    > {
    > parent.onclick = function() { getThumbs(index); };


    I think your problem is with getThumbs(). Change the onclick to
    something trivial:

    parent.onclick = function() { alert('Hey ' + index); return false; };

    If that works, then your issue is with getThumbs(). Since the onclick
    is on an A element, your function should return false to cancel
    navigation (see below):

    parent.onclick = function() {
    getThumbs(index);
    return false;
    };

    > }
    >
    > // make a link for each gallery
    > function makeButtons()
    > {
    > obj = document.getElementById("pgallery");
    > galholder = document.createElement("div");
    > galholder.className = "galleries";
    > for ( i = 0; i < gallerylist.length; i++ )
    > {
    > nd = document.createElement("a");
    > nd.className = "media";
    > nd.style.cursor = "pointer";


    A elements already have a default cursor of pointer.

    > addClick(nd, i);
    > text = document.createTextNode(gallerylist[1]);
    > nd.appendChild(text);


    You should give your A an href value that links to the image so that
    users without JavaScript can still see it. Have your onclick return
    false to prevent those with JS enabled from following the link.

    > galholder.appendChild(nd);
    > }
    > obj.appendChild(galholder);
    > spacer = document.createElement("div");
    > spacer.className = "picspacer";
    > obj.appendChild(spacer);


    Spacing should be done with CSS, not with 'spacer' elements. You are
    also creating a heap of global variables which may get you into trouble,
    especially with counters like 'i'. To keep variables local, declare
    them inside functions using the 'var' keyword, e.g.:

    var obj = document.getElementById("pgallery");
    var galholder = document.createElement("div");

    > }
    >


    Here's a small test:

    <script type="text/javascript">
    function addClick ( el ){
    el.onclick = function() { alert('hi from blah'); return false;};
    }
    function addA ( el ) {
    var x = document.createElement('A');
    x.appendChild(document.createTextNode('blah'));
    x.href = 'http://www.apple.com';
    addClick( x );
    document.getElementById('toMe').appendChild(x);
    }
    </script>

    <div onclick="addA(this);">click me<br></div>
    <div id="toMe"></div>




    --
    Rob
     
    RobG, Jul 18, 2005
    #2
    1. Advertising

  3. All I needed was "return false;". getThumbs() worked fine after that. I
    don't quite understand why I need to put return false in there,
    however... Thanks about the variable scope--I thought the opposite was
    true. div.spacer is simply set to {clear:both} in the css file, and I
    use it to prevent the floating thumbnails from starting on the same
    line as the floating gallery links. If you can suggest a better
    solution, I'm all ears.

    Aaron
     
    Aaron Gervais, Jul 18, 2005
    #3
  4. Aaron Gervais

    RobG Guest

    Aaron Gervais wrote:
    > All I needed was "return false;". getThumbs() worked fine after that. I
    > don't quite understand why I need to put return false in there,


    It cancels nagivation via the href - IE has a few odd behavious with A
    elements, I'll assume the lack of an href was causing an problem.

    > however... Thanks about the variable scope--I thought the opposite was
    > true. div.spacer is simply set to {clear:both} in the css file, and I
    > use it to prevent the floating thumbnails from starting on the same
    > line as the floating gallery links. If you can suggest a better
    > solution, I'm all ears.


    Please quote what you are replying to and trim any excess.

    The above is not really a javascript question, it should be asked at:

    comp.infosystems.www.authoring.stylesheets

    Anyhow, there are a thousand ways of skinning a cat. I can't see your
    markup or layout, so I have no idea what a potential fix may be. But
    your page should work with CSS disabled, if you are dependent on spacer
    divs as above, it isn't.

    I'll take a guess that your links have a thumbnail above with text below
    and are centered in some element. Try the following example, the
    gallery div can be set to any width and if the body has 'text-align:
    center;' it will float in the middle (unless there are competing
    elements...). The thumbs and links float in the middle of the div.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Show random matrix</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function doStuff( x ) {
    if ( x.blur ) x.blur();
    return confirm('Navigate to ' + x.href + '?');
    }
    </script>

    <style type="text/css">
    body {
    background-color: #000000;
    color: gold;
    }
    #gallery {
    margin-top: 0;
    padding: 0;
    text-align: center;
    width: 10em;
    }
    #gallery img {
    margin-top: 30px;
    text-decoration: none;
    border: 2px solid gold;
    }

    #gallery a {
    color: gold;
    font-style: italic;
    text-decoration: none;
    }
    #gallery a:active {color: gold;}
    #gallery a:visited {color: gold;}
    #gallery a:hover {color: red;}

    </style>
    </head>
    <body>
    <div id="gallery">
    <a href="http://www.apple.com"
    onclick="return doStuff(this);"><img
    src="a.gif" alt="Go to Apple"><br>Apple
    </a><br>
    <a href="http://www.Google.com"
    onclick="return doStuff(this)"><img
    src="a.gif" alt="Go to Google"><br>Google
    </a><br>
    <a href="http://www.Yahoo.com"
    onclick="return doStuff(this);"><img
    src="a.gif" alt="Go to Yahoo"><br>Yahoo
    <br></a>
    </div>
    </body></html>

    --
    Rob
     
    RobG, Jul 18, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jeff
    Replies:
    13
    Views:
    1,155
    vanilla
    Oct 6, 2007
  2. msdngroup
    Replies:
    5
    Views:
    721
    msgroup
    Jan 30, 2008
  3. msdngroup
    Replies:
    0
    Views:
    592
    msdngroup
    Dec 15, 2007
  4. msdngroup
    Replies:
    5
    Views:
    373
    msgroup
    Jan 30, 2008
  5. Replies:
    16
    Views:
    261
    Richard Cornford
    Sep 7, 2006
Loading...

Share This Page