|
JavaScript - Hey Guys! Can I Get Some Help With Conflicting Javascripts? :)
Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using:
http://tympanus.net/codrops/2010/04/...n-with-jquery/ http://www.baijs.nl/tinycircleslider/ And here's my script so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<title>Awesome Bubble Navigation with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
}
.title{
width:548px;
height:119px;
position:absolute;
top:300px;
left:250px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>User</h2>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Offers</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Prints</a></li>
<li><a href="#">Submit</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Love</h2>
<ul>
<li><a href="#">Social</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
</body>
</html>
Similar TutorialsHey, I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out. Here is the page with the conflict. Help? Can someone help me figure out why these two scripts conflict in Firefox and Safari? They work fine in Internet Explorer, and they work fine in ALL browsers when they don't have to work together on the same page. When they both need to work on the same page, it's the div/column resize script that is acting up in Safari and Firefox (again, it works fine in IE). What's really strange is that when I click on my firebug icon (in the lower righthand corner) in Firefox the divs/columns resize like they should and everything looks fine. It's almost as if it's not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something. Any help given with this matter would be greatly appreciated! Resize two Divs (columns) to be the same height: Code: // Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns. Just delete the ones you're not using.
var divs = new Array('col1, 'col2');
// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }
// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; }
else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
else { elm['on' + evType] = fn; }
}
// Start Column Script
function setTall() {
if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
}
for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
}
}
}
// Assign one of the columns to the TextResizeDetector.
function initTall() {
if (document.getElementById) { for (var i = 0; i < divs.length; i++)
{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
setTall(); }
}
// Fire Events
addEvent(window, 'load', initTall, false);
addEvent(window, 'resize', setTall, false);
/* Detects changes to font sizes when user changes browser settings
Fires a custom event with the following data:
iBase : base font size
iDelta : difference in pixels from previous setting
iSize : size in pixel of text
author Lawrence Carvalho carvalho@uk.yahoo-inc.com */
// @constructor
TextResizeDetector = function() {
var el = null;
var iIntervalDelay = 200;
var iInterval = null;
var iCurrSize = -1;
var iBase = -1;
var aListeners = [];
var createControlElement = function() {
el = document.createElement('span');
el.id='textResizeControl';
el.innerHTML=' ';
el.style.position="absolute";
el.style.left="-9999px";
var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
// insert before firstChild
if (elC)
elC.insertBefore(el,elC.firstChild);
iBase = iCurrSize = TextResizeDetector.getSize();
};
function _stopDetector() {
window.clearInterval(iInterval);
iInterval=null;
};
function _startDetector() {
if (!iInterval) {
iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
}
};
function _detect() {
var iNewSize = TextResizeDetector.getSize();
if(iNewSize!== iCurrSize) {
for (var i=0;i <aListeners.length;i++) {
aListnr = aListeners[i];
var oArgs = { iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
if (!aListnr.obj) {
aListnr.fn('textSizeChanged',[oArgs]);
}
else {
aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
}
}
}
return iCurrSize;
};
var onAvailable = function() {
if (!TextResizeDetector.onAvailableCount_i ) {
TextResizeDetector.onAvailableCount_i =0;
}
if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
TextResizeDetector.init();
if (TextResizeDetector.USER_INIT_FUNC){
TextResizeDetector.USER_INIT_FUNC();
}
TextResizeDetector.onAvailableCount_i = null;
}
else {
if (TextResizeDetector.onAvailableCount_i<600) {
TextResizeDetector.onAvailableCount_i++;
setTimeout(onAvailable,200)
}
}
};
setTimeout(onAvailable,500);
return {
/*
* Initializes the detector
*
* @param {String} sId The id of the element in which to create the control element
*/
init: function() {
createControlElement();
_startDetector();
},
/**
* Adds listeners to the ontextsizechange event.
* Returns the base font size
*
*/
addEventListener:function(fn,obj,bScope) {
aListeners[aListeners.length] = {
fn: fn,
obj: obj
}
return iBase;
},
/**
* performs the detection and fires textSizeChanged event
* @return the current font size
* @type {integer}
*/
detect:function() {
return _detect();
},
/**
* Returns the height of the control element
*
* @return the current height of control element
* @type {integer}
*/
getSize:function() {
var iSize;
return el.offsetHeight;
},
/**
* Stops the detector
*/
stopDetector:function() {
return _stopDetector();
},
/*
* Starts the detector
*/
startDetector:function() {
return _startDetector();
}
}
}();
/*** end TextResizeDetector */
TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
TextResizeDetector.USER_INIT_FUNC = function() {
var iBase = TextResizeDetector.addEventListener(setTall, null);
};
Click link to show hidden text: Code: function expand(ele) {
if (document.getElementById('answer'+ele).style.display == '')
document.getElementById('answer'+ele).style.display='none';
else
document.getElementById('answer'+ele).style.display='';
for (i=0;i <= 75;i++) {
if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
}
}
function collapse(ele) {
document.getElementById('answer'+ele).style.display='none';
}
Im pretty sure I have some javascript conflicts on my site. Can any one offer advice on how to correct this. Heres a link to a page where there are problems. Every time I refresh that page in IE8 it loads differently - sometimes it loads OK and others it stops loading before the end - a symptom of the js problems I believe? http://tinyurl.com/ocqsmv Hi guys I have to scripts on my page and they work fine on their own but when i put them together one stops working ?? One is the colorbox script and the other toggles some hidden content. Any ideas why they wont work on the same page ? This is whats in my head section and the start of the body section Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../../js_files/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../js_files/jquery.tools.min.js"></script>
<!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../../colorbox/colorbox.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../../colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='slides']").colorbox({transition:"none", width:"70%", height:"70%", scalePhotos:false});
});
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#tabs").tabs("#tabscontent section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400
});
});
</script>
Hi All, I have been racking my brain over this the last few days, and am hoping I can get help with an issue I am having. The website i am working on is using Wordpress as a CMS. I created a custom splash page that features 3 tabs that operate using CSS/Javascript to show and hide content in DIVs. One of those DIVs contains the login form to the rest of the site, and is housed in a sub-DIV generated by short code from a plugin. I am no expert with JavaScript, but understand that its code displays a given div while hiding the others, by telling the active div to Code: display:block; and the inactive ones to Code: display:none; . The problem is that the div that contains the login form, which has a plugin-generated div within it, is being hidden, so that when the page is loaded, everything appears, but when you click the other tabs and return to it, it disappears. You can see what I mean by going to http://le-raq.com/test/tab. For whatever reason, the sub div is being told to Code: display:none; (as verified by Firebug). Any idea of what code i can put in to stop this? Im banging my head against a wall here. Here is the code to the site as reviewed in Firebug: Code: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LE-RAQ.com | Independent Street/ Urban Wear</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://le-raq.com/home.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/cufon-yui.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#plink', {hover: true});
Cufon.replace('.links', {hover: true});
Cufon.replace('#slink', {hover: true});
</script>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=160852
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
</head>
<body>
<div id="maindivbox">
<div id="leftbox">
<script type="text/javascript"><!--
var img = new Array();
img.push("http://www.le-raq.com/indeximages/SplashLEFT2.png");
img.push("http://www.le-raq.com/indeximages/splashslide2.png");
var num = 1;
for(i=0;i<num;i++) {
rand = Math.floor(Math.random()*img.length);
document.write("<img src=\"" + img[rand] + "\" />");
}
//--></script>
<br><br>
<center><iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com/pages/le-raqcom/148545595176936&layout=standard&show_faces=true&width=450&action=like&font=segoe+ui&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></center>
<br><center><p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px;">Copyright © 2010 LE-RAQ.com, a division of <a href="http://nxtlvl-media.com">NXTLVL Media, LLC</a> - All Rights Reserved</p></center>
</div>
<div id="rightboxtop" align="left">
<img src="http://www.le-raq.com/smlogo.png" style="margin-top:10px;"></img>
</div>
<div id="middlerightbox" >
<div style="width:100%; height:30px; margin-bottom:10px;"" align=center>
<p id="slink" style="margin-top:10px;"> <a href="#login" onclick="show_visibility('logintab')" class="tab">LOGIN</a> | <a href="#subscribe" onclick="show_visibility('subscribe')" class="tab">SUBSCRIBE</a> | <a href="#howitworks" onclick="show_visibility('howitworks')" class="tab">HOW</a></p>
</div>
<div id='lnks' style="margin-top:35px;">
<!--LOGIN/REGISTER-->
<DIV id="logintab" style="margin: 20px 20px; display: block;">
<li><h2>Welcome, Administrator</h2>
<div class="login" id="theme-my-login1">
<div class="tml-user-avatar"><img alt='' src='http://0.gravatar.com/avatar/c6cdbf9cbd96c836560d6031fc24027d?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G' class='avatar avatar-50 photo' height='50' width='50' /></div>
<ul class="tml-user-links"><li><a href="http://le-raq.com/test/wp-admin/">Dashboard</a></li>
<li><a href="http://le-raq.com/test/wp-admin/profile.php">Profile</a></li>
<li><a href="http://le-raq.com/test/?action=logout&_wpnonce=d9d35f125f">Log out</a></li>
</ul>
</div></li>
</DIV>
<!--END LOGIN/REGISTER-->
<!--Subscribe-->
<DIV id="subscribe" style="margin: 20px 20px; display: none;">
<P id="plink" style="margin-top: 20px; margin-left: 10px; color:#FFFFFF;"> SIGN UP FOR OUR FREE PRE-LAUNCH<BR>NEWSLETTER, AND GET FIRST DIBS ON THE<BR>HOTTEST APPAREL AND DEALS!!<br><br>JOIN NOW AND YOU CAN ALSO EARN UP TO $15*!!</P>
</DIV>
<!--END Subscribe-->
<!--Howitworks-->
<DIV id="howitworks" style="margin: 20px 20px; display: none;">
</DIV>
<!--END Howitworks-->
</div>
</div>
<div id="rightboxbottom">
<p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px; margin-top:10px;">*<strong>THE FINE PRINT</strong>: Offer available to only the first 1,500 Subscribers. Earn $10 in store credit for signing up with LE-RAQ.com and an extra $5 in store credit for inviting a friend, to a limit of $15 store credit. Offer may end without notice.<br><br>
PRIVACY NOTICE: Your privacy is important to us. Therefore, we will not sell or rent your information to anyone else for any reason.<br> QUESTIONS?: Contact <a href="mailto: info@le-raq.com">info@le-raq.com</a> </p>
</div>
</div>
<script src="chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>
</html>
<!-- Dynamic Page Served (once) in 0.749 seconds -->
Thanks in advance!! I'm trying to get a javascript lightbox and a background image resize script to work on the same webpage but one's causing the other to work incorrectly. If anyone can help combine the 2 into a working script it would be hugely appreciated: <!-- BG script --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 0, }; $('#supersize').supersized(); }); </script> <!-- lightbox script --> <script type="text/javascript" src="imagezoom.js"></script> <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script> <link href="imagezoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.addEvent("domready", function() { initImageZoom(); }); </script> I have some kind of conflict in my Javascript he http://www.SonomaCountyFamilyLaw.com Drop down menu pops up when one scrolls over "Family Law," but rollover images do not load on other menu items as they should I am relatively new to Javascript; would much appreciate any assistance. Thank you kindly.... Here is the code in question: Code:
<script type="text/javascript">function mmLoadMenus() {
if (window.mm_menu_0514172011_0) return;
window.mm_menu_0514172011_0 = new Menu("root",298,24,"Arial, Helvetica, sans-serif",14,"#FFFFFF","#020056","#3C3A7D","#FFFFFF","left","middle",5,0,100,-5,7,true,true,true,5,true,true);
mm_menu_0514172011_0.addMenuItem("DIVORCE","location='divorce.html'");
mm_menu_0514172011_0.addMenuItem("CUSTODY","location='custody.html'");
mm_menu_0514172011_0.addMenuItem("ADOPTION/GUARDIANSHIP","location='adoption.html'");
mm_menu_0514172011_0.addMenuItem("PRIVATE JUDGING & SETTLEMENTS","location='private.html'");
mm_menu_0514172011_0.hideOnMouseOut=true;
mm_menu_0514172011_0.bgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorder=1;
mm_menu_0514172011_0.menuLiteBgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorderBgColor='#434089';
mm_menu_0514172011_0.writeMenus();
} // mmLoadMenus()var switchTo5x=false;
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
menu_02_over = newImage("assets/menu_02-over.jpg");
menu_06_over = newImage("assets/menu_06-over.jpg");
menu_08_over = newImage("assets/menu_08-over.jpg");
menu_10_over = newImage("assets/menu_10-over.jpg");
menu_12_over = newImage("assets/menu_12-over.jpg");
menu_14_over = newImage("assets/menu_14-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'04ce05ad-19c3-4812-98d3-7e46a3d579db'});</script>
<script language="JavaScript" src="mm_menu.js" type="text/javascript"></script>
</head>
<body onload="preloadImages();">
<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
Hi there, I am having trouble getting two javascript's to work at the same time. I am creating a long page that uses anchor links and the jquery.js to scroll the page to these. I am also trying to use lightbox.js to generate a 'contact us' form in a lightbox. Each function works stand alone but not when combined. The head of my html looks like this... Quote: <!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>Acudrill | Specialists in Diamond Core Drilling and Sawing</title> <meta name="keywords" content="acudrill, core diamond drilling, diamond sawing, chasing, lintel installation and erection, " /> <meta name="description" content="Acudrill - Specialists in Diamond Core Drilling and Sawing" /> <meta name="Creation Design and Communication Ltd" content="Acudrill" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" href="css/text.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" media="all" href="css/901_12_25.css" /> <!-- JavaScript --> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="jquery.js"></script> <script> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } </script> </head> The prototype.js and lightbox.js work fine together but the scrolling (jquery.js) does not. When removing the prototype.js and lightbox.js the jquery.js functions. I'm sure I'm just confusing everyone but I hope you can see what I mean. The functions are to run when selecting from the navigation... Quote: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="javascript:void(0)" onClick="goToByScroll('1')">Home</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Services</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Case Studies</a></li> <li><a href="contact.html" class="lbOn">Contact</a></li> <li><a href="#"><orange>Acublog</orange></a></li> </ul> </div> You can see how each link should scroll to a section of the page, apart from contact that should bring up a lightbox. Hope some one can help me with this. Thanks, p.s I have read this article but this has not helped as the scripts do not include 'onLoad" hey all, I'm using a js script for horizontal scrolling as well as a little script that changes the class of a tag when it's clicked, but the latter doesn't work with the horizontal scrolling script. not really sure why, i'm pretty new to javascript, any help would be awesome.. here's the horizontal scrolling: http://code.google.com/p/wplatformer...5e4d03a48bfc07 and the onclick change: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='selected'; Lst=obj; } /*]]>*/ </script></head> <body> <style type="text/css"> #nav .selected { opacity:1.00;} </style> <div id="nav"> <a href="#home" id="hlink" onClick="CngClass(this);" style="margin-left:130px">home</a> <a href="#foamo" class="flink">foamo</a> <a href="#book" class="blink">book</a> <a href="#portfolio" class="plink">portfolio</a> <a href="#contact" class="clink">contact</a> </div> </body> Hi, I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works. Example: <html> <head> <script> function one; </script> <script> function two; </script> <script> function three; </script> </head> <body> <form type=post action=newfile.asp> .................... ................... ................... <input type=submit onclick="one(); two(); three();"> </form> </body> </html The schema is right? How is the best way to force many scripts working fine? Bob So I am not great at Javascript, but i have 2 scripts that i want to work with each other. When i use one by itself, they each work fine, but when i add them together it does not work. I have a user form with a bunch of fields on it. If they choose an option on the drop down menu, some fields either show or disappear. Those fields have an "On Change" event that subtracts one field form another and gives us a total. ////////////////////////////////////// Drop Down Menu ///// rel sets to show the Code: <tr>
<select name="checkout_by" class="textLeft" id="checkout_by" value="<?php if($cont == 'no') { echo $checkout_by; } ?>" > <option value="serial" selected rel="show">Item Series / Serial Number</option>
<option value="isbn" rel="none">Barcode / ISBN Number</option>
//////////////////////////////////// Fields used to subtract Code: <input name="serial_start" onChange="updatesum()" type="text" class="textLeft" id="serial_start" value="<?php if($cont == 'no') { echo $serial_start; } ?>" size="15">
Code: <input name="serial_end" onChange="updatesum()" type="text" class="textLeft" id="serial_end" value="<?php if($cont == 'no') { echo $serial_end; } ?>" size="15">
//////////////////////////////////// Field used to add the total up from above Code: <input name="org_quantity" type="text" id="org_quantity" value="<?php if($cont == 'no') { echo $orig_quantity; } ?>" size="10">
///////////////////////////////////////Update total script Code: <script type="text/javascript">
function updatesum() {
document.form1.org_quantity.value = (document.form1.serial_end.value -0) - (document.form1.serial_start.value -0);
}
</script>
//////////////////////////////////// Hide Filed Script Code: var containerTag = 'TR';
var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);
if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}
var hiddenFormFieldsPointers = new Object();
function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';
var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
addEvent(x[i],'change',showHideFields)
var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('rel'))
{
var y = getAllFormFields(x[i]);
x[i].nestedRels = new Array();
for (var j=0;j<y.length;j++)
{
var rel = y[j].getAttribute('rel');
if (!rel || rel == 'none') continue;
x[i].nestedRels.push(rel);
}
if (!x[i].nestedRels.length) x[i].nestedRels = null;
hiddenFields.push(x[i]);
}
}
while (hiddenFields.length)
{
var rel = hiddenFields[0].getAttribute('rel');
if (!hiddenFormFieldsPointers[rel])
hiddenFormFieldsPointers[rel] = new Array();
var relIndex = hiddenFormFieldsPointers[rel].length;
hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
var newMarker = marker.cloneNode(true);
newMarker.id = rel + relIndex;
hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
waitingRoom.appendChild(hiddenFields.shift());
}
setDefaults();
addEvent(document,'click',showHideFields);
}
function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
if (y[i].checked && y[i].getAttribute('rel'))
intoMainForm(y[i].getAttribute('rel'))
}
var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}
}
function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;
if (tg.nodeName == 'LABEL')
{
var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
tg = document.getElementById(relatedFieldName);
}
if (
!(tg.nodeName == 'SELECT' && e.type == 'change')
&&
!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
) return;
var fieldsToBeInserted = tg.getAttribute('rel');
if (tg.type == 'checkbox')
{
if (tg.checked)
intoMainForm(fieldsToBeInserted);
else
intoWaitingRoom(fieldsToBeInserted);
}
else if (tg.type == 'radio')
{
removeOthers(tg.form[tg.name],fieldsToBeInserted)
intoMainForm(fieldsToBeInserted);
}
else if (tg.type == 'select-one')
{
fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
removeOthers(tg.options,fieldsToBeInserted);
intoMainForm(fieldsToBeInserted);
}
}
function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
var show = others[i].getAttribute('rel');
if (show == fieldsToBeInserted) continue;
intoWaitingRoom(show);
}
}
function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
waitingRoom.appendChild(Elements[i]);
if (Elements[i].nestedRels)
for (var j=0;j<Elements[i].nestedRels.length;j++)
intoWaitingRoom(Elements[i].nestedRels[j]);
}
}
function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
var insertPoint = document.getElementById(relation+i);
insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
if (Elements[i].nestedRels)
{
var fields = getAllFormFields(Elements[i]);
for (var j=0;j<fields.length;j++)
{
if (!fields[j].getAttribute('rel')) continue;
if (fields[j].checked || fields[j].selected)
intoMainForm(fields[j].getAttribute('rel'));
}
}
}
}
function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}
/** ULTRA-SIMPLE EVENT ADDING **/
function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent("on"+type,fn);
}
addEvent(window,"load",prepareForm);
/** PUSH AND SHIFT FOR IE5 **/
function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
this[this.length] = arguments[A_p]
}
return this.length
}
if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}
function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
this[A_s] = this[A_s + 1]
}
this.length--
return response
}
if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
hello .. - I want ask about function in js file , when is it start work ? after calling in somewhere ? or in sequence - can I call function in js file from another js file ? thank you . . I have a page with several javascript (.js files) in the header, is it possible to preload all of these before the actual page content is loaded? I want to hide the javascript execution from taking place after the page has loaded. Any ideas? Thanks! Hi All, I know this has been covered many times on this site, but I just cannot figure out what I'm doing wrong. I've got a jquery slideshow and some lightbox galley images that I'm trying to get to work together. I thought I had taken out the parts that were conflicting but I apparently haven't. Any help would be much appreciated. Here's the page I'm working on: oneeightyone.com/new/index.html So i have this one problem and its been a major pain for a while. I have both a light box function and a fade into page intro on my website. The issue i have is when i put in the lightbox, lightbox seems to not work whats so ever. So i made another page and first put in the lightbox...that worked like a charm but once i put in the fade in intro it basically gets me back to lightbox not working...So...any way to solve this? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
// fade in content.
$( '#wrapper' ).fadeIn("slow");
});
</script>
</head>
<body>
<div id="wrapper">
<table><tr><td><a href="air_pollution copy.jpg" rel="lightbox" ><img src="air_pollution.jpg" /></a></td></tr></table></div>
</body>
</html>
Hello, I'm sure someone on this site is familiar with Lightforms AJAX contact forms. I've downloaded one and am attempting to integrate with my current Contact page. Lightform comes with 3 external .js sheets one of which is formcheck.js. While Lightform has sufficiently functioning and nicely styled JS which checks for valid inputs in the text fields, I would also like to add watermark text in a few of the text fields. I pretty much had what I wanted on my own form until I tired to mix it as inline code with with Lightform Contact form. Here is the mixtu Code: <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; />
Perhaps someone can tell me why my watermark effect won't happen anymore. thanks for your time. I am an amateur web designer and could really use your help. I'm working on a test page right now (http://www.piscatawayacres.com/test.html). I'm trying to have 3 effects going on at the same time, but due to my inexperience with Javascript (I, in fact, copied and pasted most of it), I can't get them to work. To complicate things, my test page works to a certain extent, but when I copy and paste the coding to other pages (like alpacas.html, sheep.html, goats.html, etc.) it ceases to work. I have no idea why it does this. The 3 effects I want to have work: 1. Javascript rollover buttons. 2. A Javascript slideshow--the square picture above the buttons should be changing. 3. I want the image and the buttons to follow the user down the page as they scroll. For some reason though, the buttons (on the couple of pages they work at all) cease to work except at the very top of the page or the very bottom, but not in between. I've been struggling with this obstacle for a long time, so I would greatly appreciate any help someone could give. Thanks so much for your help. PAC P.S. I want to emphasize that some of the coding works on the test.html page, but WON'T work when I copy and paste it elsewhere. I can only assume it is because of conflicts with the coding. I know my coding is not flawless.... Hi guys, I'm working on a site where I need to use javascript for two things on the same page: a slideshow and an inquiry form (more specifically, a popup calendar on the inquiry form). The problem is, I can't get them to work simultaneously. Whichever script is at the bottom of the head section is the one that works. So right now, the calendars are working just fine and the slideshow is not. If I move the slideshow script to the bottom of the head, it works perfectly but the calendars refuse to pop up. This is the test site if you need to see exactly what I'm referring to (username: testsite, password: enter) It seems that whichever script is placed on the bottom of the head section is overriding the other. Both scripts are from independent sources, so I have no idea what needs to be done here. Any help would be greatly appreciated! From my current head section, this is the bit that's required for the slideshow: Code: <link rel="stylesheet" type="text/css" href="images/slideshow/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="images/slideshow/js/mootools.js"></script>
<script type="text/javascript" src="images/slideshow/js/visualslideshow.js"></script>
And this is the part that's required for the calendars: Code: <script type="text/javascript">
function go()
{
location=document.forms[0].gowhere.value;
}
</script>
<script type="text/javascript">
var a = new Image(); a.src = 'menu1.jpg';
var b = new Image(); b.src = 'menuhover1.jpg';
var c = new Image(); c.src = 'menu2.jpg';
var d = new Image(); d.src = 'menuhover2.jpg';
var e = new Image(); e.src = 'menu3.jpg';
var f = new Image(); f.src = 'menuhover3.jpg';
var g = new Image(); g.src = 'menu4.jpg';
var h = new Image(); h.src = 'menuhover4.jpg';
</script>
<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
if (form.salutation.value == "") {
alert( "Please enter your salutation." );
form.salutation.focus();
return false ;
}
if (form.first_name.value == "") {
alert( "Please enter your first name." );
form.first_name.focus();
return false ;
}
if (form.last_name.value == "") {
alert( "Please enter your last name." );
form.last_name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
if (form.country.value == "") {
alert( "Please enter your country of residence." );
form.country.focus();
return false ;
}
if (form.indate.value == "") {
alert( "Please enter your check-in date." );
form.email.focus();
return false ;
}
if (form.outdate.value == "") {
alert( "Please enter your check-out date." );
form.email.focus();
return false ;
}
if (form.elements['00NA000000269Gz'].value == "") {
alert( "Please enter the no. of bedrooms requested." );
form.elements['00NA000000269Gz'].focus();
return false ;
}
if (form.elements['00NA000000269H4'].value == "") {
alert( "Please enter the no. of adults." );
form.elements['00NA000000269H4'].focus();
return false ;
}
if (form.elements['00NA000000269H9'].value == "") {
alert( "Please enter the no. of children." );
form.elements['00NA000000269H9'].focus();
return false ;
}
return true ;
}
//-->
</script>
<style type="text/css">
@import "css/jquery.datepick.css";
/* Or use these for a ThemeRoller theme instead
@import "themes16/southstreet/ui.all.css";
@import "css/ui-southstreet.datepick.css";
*/
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
// $.datepick.setDefaults({useThemeRoller: true});
$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
});
function showDate(dateStr, date) {
if (this.id == 'indate') {
$('#outdate').datepick('option', 'minDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
else {
$('#indate').datepick('option', 'maxDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
}
//function showDate(date) {
// $('#00NA000000268NQ').datepick.minDate = new Date(date);
// $('#00NA000000268NL').val(date)
//}
function showDate2(date) {
// $('#00NA000000268NQ').val(date)
}
</script>
Any ideas? Do you need me to post links to or codes from the js files or stylesheets? Anything more that I can provide to get this resolved, just let me know. Thanks in advance! Hello everyone, I've been scratching my head over this one for quite a while. I'm having trouble running two different scripts on my site- one named accordion and the other named lightbox. I think that it might because of a similar behavior in both the scripts (and if I had to guess I'd say maybe its preload.) I'd appreciate any help/questions. The page that I'm having the problem with is he http://lehdesigns.com/bearpaws.html And here are the codes.. Lightbox Code: LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
overlayOpacity: 0.8, // controls transparency of shadow overlay
animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});
// -----------------------------------------------------------------------------------
var Lightbox = Class.create();
Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
var objBody = $$('body')[0];
objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},
//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;
document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
this.imageArray = [];
var imageNum = 0;
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
},
//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {
this.activeImage = imageNum; // update global var
// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();
var imgPreloader = new Image();
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;
// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}
(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });
this.showImage();
}).bind(this).delay(timeout / 1000);
},
//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},
//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}
new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},
//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {
this.hoverNav.show();
// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();
// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
this.enableKeyboardNav();
},
//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},
//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},
//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;
var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}
var key = String.fromCharCode(keycode).toLowerCase();
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},
//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
},
//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},
//
// getPageSize()
//
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth,pageHeight];
}
}
document.observe('dom:loaded', function () { new Lightbox(); });
|
|||||||