Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Onload workaround in IE?

    Hey guys, I'm new here. I'm hoping there is someone that knows how to fix my problem.

    First of all I tried to implement a lightbox solution that used Mootools and also have SWFobject in the page, didn't work.

    So I found a solution called leightweight box that works flawlessly inpage with my flash. Now, to get the darn thing to automatically popup when the page loads, a different story. Flawless in Firefox, doesn't even think about working in Internet Explorer.

    Here is the page I am working with:
    http://thecomiccollective.com/Video_...VG_Trailer.php

    Here is the external lightbox JS:
    Code:
    /*
    Created By: Chris Campbell
    Website: http://particletree.com
    Date: 2/1/2006
    
    Adapted By: Simon de Haan
    Website: http://blog.eight.nl
    Date: 21/2/2006
    
    Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
    And the lightbox gone wild by ParticleTree at http://particletree.com/features/lightbox-gone-wild/
    
    */
    
    /*-------------------------------GLOBAL VARIABLES------------------------------------*/
    
    var detect = navigator.userAgent.toLowerCase();
    var OS,browser,version,total,thestring;
    
    /*-----------------------------------------------------------------------------------------------*/
    
    //Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
    
    function getBrowserInfo() {
    	if (checkIt('konqueror')) {
    		browser = "Konqueror";
    		OS = "Linux";
    	}
    	else if (checkIt('safari')) browser 	= "Safari"
    	else if (checkIt('omniweb')) browser 	= "OmniWeb"
    	else if (checkIt('opera')) browser 		= "Opera"
    	else if (checkIt('webtv')) browser 		= "WebTV";
    	else if (checkIt('icab')) browser 		= "iCab"
    	else if (checkIt('msie')) browser 		= "Internet Explorer"
    	else if (!checkIt('compatible')) {
    		browser = "Netscape Navigator"
    		version = detect.charAt(8);
    	}
    	else browser = "An unknown browser";
    
    	if (!version) version = detect.charAt(place + thestring.length);
    
    	if (!OS) {
    		if (checkIt('linux')) OS 		= "Linux";
    		else if (checkIt('x11')) OS 	= "Unix";
    		else if (checkIt('mac')) OS 	= "Mac"
    		else if (checkIt('win')) OS 	= "Windows"
    		else OS 								= "an unknown operating system";
    	}
    }
    
    function checkIt(string) {
    	place = detect.indexOf(string) + 1;
    	thestring = string;
    	return place;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    
    Event.observe(window, 'load', initialize, false);
    Event.observe(window, 'load', getBrowserInfo, false);
    Event.observe(window, 'unload', Event.unloadCache, false);
    
    var lightbox = Class.create();
    
    lightbox.prototype = {
    
    	yPos : 0,
    	xPos : 0,
    
    initialize: function(ctrl) {
        if(ctrl) {
            this.content = ctrl.rel;
            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
            ctrl.onclick = function(){return false;};
        }
    },
    
    initCallable: function(rel) {
        this.content = rel;
    },
    	
    	// Turn everything on - mainly the IE fixes
    	activate: function(){
    		if (browser == 'Internet Explorer'){
    			this.getScroll();
    			this.prepareIE('100%', 'hidden');
    			this.setScroll(0,0);
    			this.hideSelects('hidden');
    		}
    		this.displayLightbox("block");
    	},
    	
    	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
    	prepareIE: function(height, overflow){
    		bod = document.getElementsByTagName('body')[0];
    		bod.style.height = height;
    		bod.style.overflow = overflow;
      
    		htm = document.getElementsByTagName('html')[0];
    		htm.style.height = height;
    		htm.style.overflow = overflow; 
    	},
    	
    	// In IE, select elements hover on top of the lightbox
    	hideSelects: function(visibility){
    		selects = document.getElementsByTagName('select');
    		for(i = 0; i < selects.length; i++) {
    			selects[i].style.visibility = visibility;
    		}
    	},
    	
    	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
    	getScroll: function(){
    		if (self.pageYOffset) {
    			this.yPos = self.pageYOffset;
    		} else if (document.documentElement && document.documentElement.scrollTop){
    			this.yPos = document.documentElement.scrollTop; 
    		} else if (document.body) {
    			this.yPos = document.body.scrollTop;
    		}
    	},
    	
    	setScroll: function(x, y){
    		window.scrollTo(x, y); 
    	},
    	
    	displayLightbox: function(display){
    		$('overlay').style.display = display;
    		$(this.content).style.display = display;
    		if(display != 'none') this.actions();		
    	},
    	
    	// Search through new links within the lightbox, and attach click event
    	actions: function(){
    		lbActions = document.getElementsByClassName('lbAction');
    
    		for(i = 0; i < lbActions.length; i++) {
    			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
    			lbActions[i].onclick = function(){return false;};
    		}
    
    	},
    	
    	// Example of creating your own functionality once lightbox is initiated
    	deactivate: function(){
    		if (browser == "Internet Explorer"){
    			this.setScroll(0,this.yPos);
    			this.prepareIE("auto", "auto");
    			this.hideSelects("visible");
    		}
    		
    		this.displayLightbox("none");
    	}
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    
    // Onload, make all links that need to trigger a lightbox active
    function initialize(){
    	addLightboxMarkup();
    	lbox = document.getElementsByClassName('lbOn');
    	for(i = 0; i < lbox.length; i++) {
    		valid = new lightbox(lbox[i]);
    	}
    }
    
    // Add in markup necessary to make this work. Basically two divs:
    // Overlay holds the shadow
    // Lightbox is the centered square that the content is put into.
    function addLightboxMarkup() {
    
    	bod 				= document.getElementsByTagName('body')[0];
    
    	overlay 			= document.createElement('div');
    	overlay.id			= 'overlay';
    
    	bod.appendChild(overlay);
    }
    And here is the Javascript in the header and the body tag that autoloads the function:
    Code:
    <head> 
    <script type='text/javascript'>
    function lightboxer()
    {
    new lightbox();
    lb.initCallable('lightbox1');
    lb.activate();
    }
    window.onload = lightboxer;
      </script>
      
    </head>
    <body onLoad="lb = new lightbox();lb.initCallable('lightbox1');lb.activate();">
    If anyone can figure this out, Great! I do give credit to the people that help. There should be a credits page on the new site when it launches

    Thanks,
    Axertion
    Last edited by Axertion; 03-30-2008 at 06:02 AM. Reason: iCode meh

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Why do you call the same operations via window.onload and onLoad attribute of body.
    I believe the window.onload = lightboxer; would be enough and you could remove the other one.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Why do you call the same operations via window.onload and onLoad attribute of body.
    I believe the window.onload = lightboxer; would be enough and you could remove the other one.
    I tried that man, it didn't work. Even still I don't think having them both would conflict right?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    But why do you need to call the same operations twice?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    Quote Originally Posted by abduraooft View Post
    But why do you need to call the same operations twice?
    I don't. I called it once, then twice then a different way ect.

    Can you figure this out please? I'm no JS expert and I haven't a clue.

    I just need this script:

    http://eight.nl/files/leightbox/

    To open automatically when the page loads. Do you know how?

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •