...

View Full Version : Expert Needed for JS Modification



abcdefGARY
01-01-2008, 10:17 AM
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) (http://eight.nl/files/leightbox/) 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:


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

rnd me
01-01-2008, 02:06 PM
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 (http://www.freedomscientific.com/fs_products/software_jaws.asp), 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

vwphillips
01-01-2008, 03:10 PM
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


<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.scrollTo p];
}


/*]]>*/
</script>

vwphillips
01-01-2008, 04:32 PM
needed more work for ie


<!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.scrollTo p];
}

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>

abcdefGARY
01-01-2008, 08:46 PM
wow, thanks so much. I sent you a PM btw.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum