Treehouse: Grow your CSS skills. Land your dream job.

[Solved] Jsimgbox2; having some problems with IE

  • FSX
    # February 3, 2010 at 2:49 pm

    Hey, I’m working on a new version of Jsimgbox and I’m having some problems. It works great in Chromium (4), Firefox 3.6, Midori (webkit) and Opera, but not in IE.

    Here’s the code:

    /* —

    Jsimgbox, simple Javascript image box/popup.
    Version 2.0-dev, February 4rd, 2010

    Copyright (c) 2010 Frank Smit

    This software is provided ‘as-is’, without any express or implied
    warranty. In no event will the authors be held liable for any damages
    arising from the use of this software.

    Permission is granted to anyone to use this software for any purpose,
    including commercial applications, and to alter it and redistribute it
    freely, subject to the following restrictions:

    1. The origin of this software must not be misrepresented; you must not
    claim that you wrote the original software. If you use this software
    in a product, an acknowledgment in the product documentation would be
    appreciated but is not required.

    2. Altered source versions must be plainly marked as such, and must not be
    misrepresented as being the original software.

    3. This notice may not be removed or altered from any source

    — */

    var Jsimgbox = {

    // Shotcuts
    html: document.documentElement, // The HTML element
    body: document.getElementsByTagName(‘body’)[0], // The BODY element

    // Create elements
    overlay: document.createElement(‘div’),
    box: document.createElement(‘div’), // The box that holds the loading text and image
    text: document.createElement(‘span’),
    image: new Image(),

    // Insert elements and attach events
    init: function(classname)
    // Insert the elements at the right place and set the IDs and text/ = ‘js2-overlay'; = ‘js2-box';
    this.body.appendChild(this.overlay); this.overlay.appendChild(;;;
    this.text.innerHTML = ‘Loading…';

    // Set the functions for the onclick event
    var self = this;
    this.each(document.getElementsByClassName(classname), function(a){
    a.onclick = function (e) {; return false; }
    }); = function (e) { self.hide(); }

    // Display and set the position of the overlay and image box and load the image
    show: function(obj)
    // Display and set height and position = ‘display: block;min-height: ‘ + Math.max(this.html.offsetHeight, this.html.scrollHeight) + ‘px;'; = ‘margin-top: ‘ + (this.html.scrollTop || this.body.scrollTop) + ‘px;';

    // Load image
    var self = this; this.image.src = obj.href;
    if (this.image.complete) { = ‘none'; = ‘block'; }
    this.image.onload = function() { = ‘none'; = ‘block'; }

    // Hide the overlay and image and make the loading message visible
    hide: function()
    { = ‘none'; = ‘none'; this.image.src = ”; = ‘inline';

    // Got this from Shadowbox
    each: function(obj, fn, scope)
    for(var i = 0, len = obj.length; i < len; ++i)
    if( || obj[i], obj[i], i, obj) === false) return;


    The CSS:

    { position: absolute;top: 0;left: 0;min-width: 100%;z-index: 100;
    background: rgba(0, 0, 0, 0.9);display: none }
    #js2-box { margin: 0 auto;padding: 2em;width: auto;text-align: center;cursor: pointer }
    #js2-box img { display: none;width: 100%;border: 2px solid #fff }
    #js2-box span { padding: 1em 1.5em;background: #fff }

    And this is how you use it:


    A friend tested it for me in IE since I don’t have Windows. And it doesn’t work. It just follows the link when it is clicked instead of opening a box. I can’t really figure out how to prevent this.

    It would be cool if someone could help me with this.

    Thanks in advance,

    Edit, February 4th:
    It works in Opera now. But not in IE.

# February 7, 2010 at 6:30 pm


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.