Home › Forums › JavaScript › [Solved] Jsimgbox2; having some problems with IE
- This topic is empty.
-
AuthorPosts
-
February 3, 2010 at 2:49 pm #27861FSXMember
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.htmlCopyright (c) 2010 Frank Smit
License: http://www.gzip.org/zlib/zlib_license.htmlThis 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,
FrankEdit, February 4th:
It works in Opera now. But not in IE.February 7, 2010 at 6:30 pm #70596FSXMemberHelp?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.