Results 1 to 5 of 5

Thread: Ajax Tabs & Slimbox - problem in Internet Explorer

  1. #1
    Join Date
    Aug 2008
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Ajax Tabs & Slimbox - problem in Internet Explorer

    1) Script Title: Ajax Tabs Content Script (v 2.2)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

    3) Describe problem: Hi, I use this script in my page and it works perfectly in Firefox. I tried to browse my page in Internet Explorer version 6 & 7 and there's an error pop up window which says "Internet Explorer cannot display the page".

    This is serious and I cannot understand why it happens.

    My page works properly in Internet Explorer if I remove the
    <script type="text/javascript" src="scripts/ajaxtabs.js"></script>
    line.

    What should I do???
    Last edited by ktsixit; 09-04-2008 at 02:30 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Do you experience the same problem on the DEMO page? It's working fine at my end.
    Please provide a link to your page so that we could take a closer look.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2008
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    ok I see now that the Ajax Tabs script does not work in Internet Explorer if I use slimbox too. So I change the post's title. These two cant go together.

    I cant understand why.

    Unfortunately I havent uploaded my page on a remote server. I execute and test it locally.

  4. #4
    Join Date
    Aug 2008
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    This is the slimbox.js code, maybe if you take a look, you will be able to understand the problem.

    Code:
    var Lightbox = {
    
    	init: function(options){
    		this.options = $extend({
    			resizeDuration: 400,
    			resizeTransition: false,	// default transition
    			initialWidth: 250,
    			initialHeight: 250,
    			animateCaption: true,
    			showCounter: true
    		}, options || {});
    
    		this.anchors = [];
    		$each(document.links, function(el){
    			if (el.rel && el.rel.test(/^lightbox/i)){
    				el.onclick = this.click.pass(el, this);
    				this.anchors.push(el);
    			}
    		}, this);
    		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
    		this.eventPosition = this.position.bind(this);
    
    		this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(parent.document.body);
    
    		this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).injectInside(parent.document.body);
    		this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
    		this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.image);
    		this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
    		this.prevLink.onclick = this.previous.bind(this);
    		this.nextLink.onclick = this.next.bind(this);
    
    		this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).injectInside(parent.document.body);
    		this.bottom = new Element('div', {'id': 'lbBottom'}).injectInside(this.bottomContainer);
    		new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
    		this.caption = new Element('div', {'id': 'lbCaption'}).injectInside(this.bottom);
    		this.number = new Element('div', {'id': 'lbNumber'}).injectInside(this.bottom);
    		new Element('div', {'styles': {'clear': 'both'}}).injectInside(this.bottom);
    
    		var nextEffect = this.nextEffect.bind(this);
    		this.fx = {
    			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
    			resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
    			image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
    			bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
    		};
    
    		this.preloadPrev = new Image();
    		this.preloadNext = new Image();
    	},
    
    	click: function(link){
    		if (link.rel.length == 8) return this.show(link.href, link.title);
    
    		var j, imageNum, images = [];
    		this.anchors.each(function(el){
    			if (el.rel == link.rel){
    				for (j = 0; j < images.length; j++) if(images[j][0] == el.href) break;
    				if (j == images.length){
    					images.push([el.href, el.title]);
    					if (el.href == link.href) imageNum = j;
    				}
    			}
    		}, this);
    		return this.open(images, imageNum);
    	},
    
    	show: function(url, title){
    		return this.open([[url, title]], 0);
    	},
    
    	open: function(images, imageNum){
    		this.images = images;
    		this.position();
    		this.setup(true);
    		this.top = window.getScrollTop() + (window.getHeight() / 15);
    		this.center.setStyles({top: this.top, display: ''});
    		this.fx.overlay.start(0.8);
    		return this.changeImage(imageNum);
    	},
    
    	position: function(){
    		this.overlay.setStyles({'top':window.getScrollTop(), 'height': parent.window.getHeight()});
    	},
    
    	setup: function(open){
    		var elements = $A(document.getElementsByTagName('object'));
    		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
    		elements.each(function(el){
    			if (open) el.lbBackupStyle = el.style.visibility;
    			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
    		});
    		var fn = open ? 'addEvent' : 'removeEvent';
    		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
    		document[fn]('keydown', this.eventKeyDown);
    		this.step = 0;
    	},
    
    	keyboardListener: function(event){
    		switch (event.keyCode){
    			case 27: case 88: case 67: this.close(); break;
    			case 37: case 80: this.previous(); break;	
    			case 39: case 78: this.next();
    		}
    	},
    
    	previous: function(){
    		return this.changeImage(this.activeImage-1);
    	},
    
    	next: function(){
    		return this.changeImage(this.activeImage+1);
    	},
    
    	changeImage: function(imageNum){
    		if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
    		this.step = 1;
    		this.activeImage = imageNum;
    
    		this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
    		this.fx.image.hide();
    		this.center.className = 'lbLoading';
    
    		this.preload = new Image();
    		this.preload.onload = this.nextEffect.bind(this);
    		this.preload.src = this.images[imageNum][0];
    		return false;
    	},
    
    	nextEffect: function(){
    		switch (this.step++){
    		case 1:
    			this.center.className = '';
    			this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
    			this.image.style.width = this.bottom.style.width = this.preload.width+'px';
    			this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
    
    			this.caption.setHTML(this.images[this.activeImage][1] || '');
    			this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Image '+(this.activeImage+1)+' of '+this.images.length);
    
    			if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
    			if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
    			if (this.center.clientHeight != this.image.offsetHeight){
    				this.fx.resize.start({height: this.image.offsetHeight});
    				break;
    			}
    			this.step++;
    		case 2:
    			if (this.center.clientWidth != this.image.offsetWidth){
    				this.fx.resize.start({width: this.image.offsetWidth, marginLeft: -this.image.offsetWidth/2});
    				break;
    			}
    			this.step++;
    		case 3:
    			this.bottomContainer.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: ''});
    			this.fx.image.start(1);
    			break;
    		case 4:
    			if (this.options.animateCaption){
    				this.fx.bottom.set(-this.bottom.offsetHeight);
    				this.bottomContainer.style.height = '';
    				this.fx.bottom.start(0);
    				break;
    			}
    			this.bottomContainer.style.height = '';
    		case 5:
    			if (this.activeImage) this.prevLink.style.display = '';
    			if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
    			this.step = 0;
    		}
    	},
    
    	close: function(){
    		if (this.step < 0) return;
    		this.step = -1;
    		if (this.preload){
    			this.preload.onload = Class.empty;
    			this.preload = null;
    		}
    		for (var f in this.fx) this.fx[f].stop();
    		this.center.style.display = this.bottomContainer.style.display = 'none';
    		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
    		return false;
    	}
    };
    
    window.addEvent('domready', Lightbox.init.bind(Lightbox));
    please help

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •