I'm having an issue getting two Javascripts to work on one page. It seems that one disables the other and only one is working when previewed together. I know of a code that can be inserted so that both codes can function on one page, but I just can't lay my hands on it right now. I'm sure people have answered this question before but I have done all the research and tried everything but nothing works. please help and thank you in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Slide Down Box Menu with jQuery and CSS3</title>
<!--- Nivo Slider --->
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" />
<!-- The end-->
<h1>We are currently working on a new website.<br/> Stay tuned for more information.</h1>
<p>
We provide Top Calibre Promoters that are pre-screened, personality tested and geared to sell.<br><br>We Drive one on one communication between a client’s brand and a client’s target market.<br><br>Our Aim Is to provide the best possible promotional service to clients in South Africa.<br><br>Our Success is driven by our passion, continued dedication and the human touch.<br><br>
<strong>ZEUS Promotions</strong> has Level 1 BBBEE certification.<br><br>We bring brands to life.
</p>
</div>
</div>
<div class="end">
<div class="wrapper">
<div class="footer">
<h1> the footer is here </h1>
</div>
</div>
<!-- Nivo Slider javasrcipt-->
<script type="text/javascript" src="nivo-slider/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- The JavaScript Navigation Menu-->
<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/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
Thanks man for your help and i did try your the solution on that page but it just made both the java-scripts not work. If you mind, i set-up a temporary link with my files please may you take a look at them and see what you can do. Thank Again
<div class="end">
<div class="wrapper">
<div class="footer">
<h1> the footer is here </h1>
</div>
</div>
<!-- Nivo Slider javasrcipt-->
<script type="text/javascript" src="nivo-slider/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
//$.noConflict();
jQuery(document).ready(function() {
/*$(window).load(function() {*/
jQuery('#slider').nivoSlider();
});
</script>
<!-- The JavaScript Navigation Menu-->
<script type="text/javascript">
jQuery(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
jQuery('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
Reply With Quote
Bookmarks