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 Coder
    Join Date
    Jul 2006
    Posts
    29
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Expert Needed for JS Modification

    Hello, I'm currently producing a site that uses javascript. However, I know nothing about the language and was wondering if someone could help me out.

    I found Leightbox (a modification of the Lightbox script) a few days ago to display inline content on a JS overlay. I tried iBox and Thickbox, but this best suits what I want and the appearance is easy to modify.

    However, I have a problem with the script, and that if the script is called through a link at the bottom of the page, it would display the Leightbox at the top of the page, rather than at the current page. So that means that everytime I have to scroll up to see the box.

    For an example, copy this into a .htm file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Leightbox</title>
    <!-- Meta Tags -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <!-- CSS -->
    <link rel="stylesheet" href="http://eight.nl/files/leightbox/css/screen.css" media="screen,projection" type="text/css" />
    <!-- JavaScript -->
    <script type="text/javascript" src="http://eight.nl/files/leightbox/scripts/prototype.js"></script>
    <script type="text/javascript" src="http://eight.nl/files/leightbox/scripts/lightbox.js"></script>
    </head>
    <body>
    <p style="color: #FFF;">Scroll down. Pretend that blank space is content.</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="container">
    	<h1>Leightbox</h1>
    	<p>I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i've completely removed the AJAX calls.</p>
    	<p>
    		<ul>
    			<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>
    		</ul>
    	</p>
    	<p class="footer">
    		<a href="leightbox.zip" title="Paging Files">Download Source</a>
    		&middot;
    		Simon de Haan
    		&middot;
    		<a href="http://www.eight.nl">Eight Media</a>
    		&middot;
    		The Netherlands
    	</p>
    </div><!--container-->
    
    <div id="lightbox3" class="leightbox">
    	<h1>Leightbox 3</h1>
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquet. Donec sit amet elit at nisl commodo pellentesque. Proin vel odio. Proin vitae mi eu libero consequat rhoncus. Pellentesque aliquam varius purus. Etiam ac mauris sit amet purus facilisis dapibus. Nulla tellus. In aliquam sem. Duis nisi velit, scelerisque egestas, feugiat id, suscipit et, mi. Vestibulum id erat eu enim nonummy fringilla.</p>
    	<p class="footer">
    		<a href="#" class="lbAction" rel="deactivate">Close</a>
    	</p>
    </div>
    </body>
    </html>
    You'll notice that when Leightbox pops up after you click "Leightbox 3", it shows the Leightbox at the very top of the page, rather than in the current view (like the original Lightbox). This causes you to have to scroll up to the very top to view the Leightbox.

    Hopefully I have made my point very clear, I don't know how to explain it any better. My new website has this script implemented and it is very important to the functionality of the site. So, if anyone is capable of fixing this, it would certainly be appreciated. And I would certainly consider a reward since this is very important to me that it's fixed.

    Thanks.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible.
    jaws, and most other rake the dom, so don't worry ajax.



    fixed versus absolute positioning will keep the bar at the top for non-ie folks
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    	displayLightbox: function(display){
    		$('overlay').style.display = display;
    		$(this.content).style.display = display;
    		$(this.content).style.top = (zxcWWHS()[3]+zxcWWHS()[1]/2-$(this.content).offsetHeight/2)+'px';
      	if(display != 'none') this.actions();
    	},
    plus the function

    Code:
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    /*]]>*/
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    needed more work for ie

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Leightbox</title>
    <!-- Meta Tags -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <!-- CSS -->
    <link rel="stylesheet" href="http://eight.nl/files/leightbox/css/screen.css" media="screen,projection" type="text/css" />
    <!-- JavaScript -->
    <script type="text/javascript" src="http://eight.nl/files/leightbox/scripts/prototype.js"></script>
    <script type="text/javascript" src="http://eight.nl/files/leightbox/scripts/lightbox.js"></script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    /*
    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) {
    		this.content = ctrl.rel;
    		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
    		ctrl.onclick = function(){return false;};
    	},
    
    	// Turn everything on - mainly the IE fixes
    	activate: function(){
    		if (browser == 'Internet Explorer'){
    			this.prepareIE(zxcBdyWH()[1]+'px', 'hidden');
    			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;
    		}
    	},
    
    
    	displayLightbox: function(display){
    		$('overlay').style.display = display;
    		$(this.content).style.display = display;
    		$(this.content).style.top = (zxcWWHS()[3]+zxcWWHS()[1]/2-$(this.content).offsetHeight/2)+'px';
      	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.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);
    }
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcBdyWH(){
     if (document.body.scrollHeight>document.body.offsetHeight) return [document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac
     return [document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac;
    }
    
    
    /*]]>*/
    </script>
    </head>
    <body>
    <p style="color: #FFF;">Scroll down. Pretend that blank space is content.</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="container">
    	<h1>Leightbox</h1>
    	<p>I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i've completely removed the AJAX calls.</p>
    	<p>
    		<ul>
    			<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>
    		</ul>
    	</p>
    	<p class="footer">
    		<a href="leightbox.zip" title="Paging Files">Download Source</a>
    		&middot;
    		Simon de Haan
    		&middot;
    		<a href="http://www.eight.nl">Eight Media</a>
    		&middot;
    		The Netherlands
    	</p>
    </div><!--container-->
    
    <div id="lightbox3" class="leightbox">
    	<h1>Leightbox 3</h1>
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquet. Donec sit amet elit at nisl commodo pellentesque. Proin vel odio. Proin vitae mi eu libero consequat rhoncus. Pellentesque aliquam varius purus. Etiam ac mauris sit amet purus facilisis dapibus. Nulla tellus. In aliquam sem. Duis nisi velit, scelerisque egestas, feugiat id, suscipit et, mi. Vestibulum id erat eu enim nonummy fringilla.</p>
    	<p class="footer">
    		<a href="#" class="lbAction" rel="deactivate">Close</a>
    	</p>
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    abcdefGARY (01-01-2008)

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    29
    Thanks
    7
    Thanked 0 Times in 0 Posts
    wow, thanks so much. I sent you a PM btw.


  •  

    Posting Permissions

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