I use two different kinds of JS libraries, but apparently, there is an error when using both.
The two things I use are Mootools and JQuery UI
<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>
When I use this snippet, the Agenda slider failed to work. However, when I delete this line
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
The Agenda slider works again, but the Datepicker refuses to work...
How can I combine both scripts and end up with two working javascript-based elements?
EDIT
The only JS included in the .php files are those three little snippets
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
// Alternative
$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<script type="text/javascript">
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent( _lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},
interval:3000,
direction :'hrleft' } );
object.start( true, _lofmain.getElement('.preload') );
</script>
Here's some jQuery documentation explaining how to use other libraries in conjunction with jQuery.
From the docs:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
So, for your particular case, try:
<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>
Then, don't forget to change all references from $ to $j when you are trying to use jQuery rather than MooTools.
Related
Yes, I did my research and as far as I can find so far I am unable to figure out why seemingly out of nowhere the product tabs are no longer functioning as expected. In the Console, I see:
app.js:932 Uncaught TypeError: jQuery is not a function
We noticed this after updating from Magento 1.9.3.3(ish) to 1.9.3.6 (Now 1.9.3.8). We use the RWD theme as the parent theme, and have a custom theme on top of it. There are two jQuery libraries, but if I take away jQuery 1.11.0.min.js parts of the layout of the product page disappear.
It would be much appreciated if you can help me with this odd situation.
Here are all the scripts when they are loaded:
<link rel="stylesheet" type="text/css" href="<removed>/skin/frontend/base/default/css/nwdthemes/ultratabs_base_default.css" media="all" />
<script type="text/javascript" src="<removed>/js/prototype/prototype.js"></script>
<script type="text/javascript" src="<removed>/js/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<removed>/js/lib/jquery/noconflict.js"></script>
<script type="text/javascript" src="<removed>/js/lib/ccard.js"></script>
<script type="text/javascript" src="<removed>/js/prototype/validation.js"></script>
<script type="text/javascript" src="<removed>/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="<removed>/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="<removed>/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="<removed>/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="<removed>/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="<removed>/js/varien/js.js"></script>
<script type="text/javascript" src="<removed>/js/varien/form.js"></script>
<script type="text/javascript" src="<removed>/js/mage/translate.js"></script>
<script type="text/javascript" src="<removed>/js/mage/cookies.js"></script>
<script type="text/javascript" src="<removed>/js/calendar/calendar.js"></script>
<script type="text/javascript" src="<removed>/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="<removed>/js/varien/product.js"></script>
<script type="text/javascript" src="<removed>/js/varien/product_options.js"></script>
<script type="text/javascript" src="<removed>/js/varien/configurable.js"></script>
<script type="text/javascript" src="<removed>/js/video/video.js"></script>
<script type="text/javascript" src="<removed>/js/video/jquery.fitvids.js"></script>
<script type="text/javascript" src="<removed>/js/video/masonry.js"></script>
<script type="text/javascript" src="<removed>/js/video/html5lightbox.js"></script>
<script type="text/javascript" src="<removed>/js/video/owl.carousel.min.js"></script>
<script type="text/javascript" src="<removed>/js/fileuploader/filepop.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/jquery.noconflict.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/matchMedia.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/matchMedia.addListener.js"></script>
<script type="text/javascript" src="<removed>/js/nwdthemes/enquire.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/modernizr.custom.min.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/selectivizr.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/matchMedia.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/matchMedia.addListener.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/enquire.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/app.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/imagesloaded.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/minicart.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/<removed>2/default/js/readmore.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/js/et_advancedcompare/noreload.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/magehit_bestseller/js/noconflict.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/magehit_bestseller/js/owl.carousel.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/magehit_newproducts/js/noconflict.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/magehit_newproducts/js/owl.carousel.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/js/flexibleblog/general.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/js/flexibleforms/jquery-noconflict.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/js/flexibleforms/stars.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/<removed>2/default/js/image-hijacker.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/nwdthemes/revslider/public/assets/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/nwdthemes/revslider/public/assets/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="<removed>/skin/frontend/base/default/js/nwdthemes/ultratabs.js"></script>
<link rel="stylesheet" href="//opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" />
Also, a lot of the solutions I found for other similar issues ask for say replace "$" with "$j", but as you may now in the no-confict.js files for RWD theme there's already an implementation of that.
Updated:
Here's the code within app.js (RWD Theme) that is being complained about. I put a comment before the line where it errors out. I am very confused on hwo to fix this issue.
// ==============================================
// UI Pattern - Toggle Content (tabs and accordions in one setup)
// ==============================================
$j('.toggle-content').each(function () {
var wrapper = jQuery(this);
var hasTabs = wrapper.hasClass('tabs');
var hasAccordion = wrapper.hasClass('accordion');
var startOpen = wrapper.hasClass('open');
var dl = wrapper.children('dl:first');
var dts = dl.children('dt');
var panes = dl.children('dd');
var groups = new Array(dts, panes);
//Create a ul for tabs if necessary.
if (hasTabs) {
var ul = jQuery('<ul class="toggle-tabs"></ul>');
dts.each(function () {
var dt = jQuery(this);
var li = jQuery('<li></li>');
li.html(dt.html());
ul.append(li);
});
ul.insertBefore(dl);
var lis = ul.children();
groups.push(lis);
}
//Add "last" classes.
var i;
for (i = 0; i < groups.length; i++) {
groups[i].filter(':last').addClass('last');
}
function toggleClasses(clickedItem, group) {
var index = group.index(clickedItem);
var i;
for (i = 0; i < groups.length; i++) {
groups[i].removeClass('current');
groups[i].eq(index).addClass('current');
}
}
//Toggle on tab (dt) click.
dts.on('click', function (e) {
//They clicked the current dt to close it. Restore the wrapper to unclicked state.
if (jQuery(this).hasClass('current') && wrapper.hasClass('accordion-open')) {
wrapper.removeClass('accordion-open');
} else {
//They're clicking something new. Reflect the explicit user interaction.
wrapper.addClass('accordion-open');
}
toggleClasses(jQuery(this), dts);
});
//Toggle on tab (li) click.
if (hasTabs) {
lis.on('click', function (e) {
//This line here is where it errors.
toggleClasses(jQuery(this), lis);
});
//Open the first tab.
lis.eq(0).trigger('click');
}
//Open the first accordion if desired.
if (startOpen) {
dts.eq(0).trigger('click');
}
});
EDIT post comment from Kevin...
Change
jQuery(...)
To
$j(...)
I'm using single-page-nav to have an 'animated' menu and Photoswipe for a photo gallery. The problem is I'm not able to have both work together. Now, if I have:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").photoSwipe();
});
</script>
I've Photoswipe working, but not singlePageNav.. While doing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gallery a").photoSwipe();
});
</script>
I've singlePageNav working, but not Photoswipe. Tried with jQuery 1.11.1, but none of them working.. I've see that:
Can I use multiple versions of jQuery on the same page?
So I try:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_6_1 = $.noConflict(true);
</script>
<script type="text/javascript">
$(document).ready(function(){
jQuery_1_6_1("#gallery a").photoSwipe();
});
</script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_7_1 = $.noConflict(true);
</script>
<script src="js/jquery.singlePageNav.min.js"></script>
but still no luck, none of them working.. Something else that I colud try, before looking for an alternative to Photoswipe?
I have a website with a huge part of js functions I wnat to add a login form from mootools.
I added the form and the needed files it works but the other site is stop I know it is javascript conflict this is my header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="tr" >
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script language="javascript" type="text/ecmascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
</head>
The script is for the mootools and the needed files are commented.
I get this error when I run the site:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
and:
Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;} has no method 'ajax'
Do anybody could help me to know if I should change the order of the JS files or is there anything I could do to stop conflict??
P.S: When I change the place of the mootools file in the header I get different messages.
Replace $ with jQuery
For example, instead of using
$("div p").hide() use jQuery("div p").hide(); instead
http://api.jquery.com/jQuery.noConflict/
Aslo try this
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Try to replace order your mootool js and jquery scripts and check again?
Example
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
Try using this, Your codes
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!--///// MOOTOOLS /////-->
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
<!--///// JQUERY /////-->
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
// jquery scripts
});
</script>
I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)
I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try