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:

    Code:
    /* —

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

    http://61924.nl/projects/jsimgbox.html

    Copyright (c) 2010 Frank Smit
    License: http://www.gzip.org/zlib/zlib_license.html

    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
    distribution.

    — */

    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/
    this.overlay.id = ‘js2-overlay’; this.box.id = ‘js2-box’;
    this.body.appendChild(this.overlay); this.overlay.appendChild(this.box);
    this.box.appendChild(this.image); this.box.appendChild(this.text);
    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) { self.show(a); return false; }
    });

    this.box.onclick = 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
    this.overlay.style.cssText = ‘display: block;min-height: ‘ + Math.max(this.html.offsetHeight, this.html.scrollHeight) + ‘px;’;
    this.box.style.cssText = ‘margin-top: ‘ + (this.html.scrollTop || this.body.scrollTop) + ‘px;’;

    // Load image
    var self = this; this.image.src = obj.href;
    if (this.image.complete) { self.text.style.display = ‘none’; self.image.style.display = ‘block’; }
    this.image.onload = function() { self.text.style.display = ‘none’; self.image.style.display = ‘block’; }
    },

    // Hide the overlay and image and make the loading message visible
    hide: function()
    {
    this.overlay.style.display = ‘none’;
    this.image.style.display = ‘none’; this.image.src = ”;
    this.text.style.display = ‘inline’;
    },

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

    Jsimgbox.init('jsimgbox');

    The CSS:

    Code:
    #js2-overlay
    { 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:

    Code:

    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,
    Frank

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

FSX
# February 7, 2010 at 6:30 pm

Help?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".