Hello, I have been searching the web and this wonderful forum for an answer. It's too the point of desperation. So I have multiple Jquery functions on a page. They work, but not without knocking out my href links (mainnav and my h4 back links).
I've tried using noConflict(), also renaming $ to jQuery, wrapping the functions in jQuery tags, renaming the targets.. no luck. PLEASE assist kind code gods!
Html code before. My apologies for the length. I figured the more I showed the higher chance of a solution being found.
Code:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"> </script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"> </script>
<script src="js/jquery.serialScroll-min.js" type="text/javascript"> </script>
<script src="js/test.js" type="text/javascript"> </script>
</head>
<body>
<div id="back">
<div id="wrapper">
<div id="header">
<script language="JavaScript" type="text/javascript">
(function($){
showImage();
})(jQuery);
</script>
<!-- show random header image-->
<ul id="mainnav">
<li><a href="#web" title="Web">Web</a></li>
<li><a href="#cg" title="CG">Cg</a></li>
<li><a href="#design" title="Design">Design</a></li>
<li><a href="#about" title="About">About</a></li>
<li><a href="#personal" title="Personal">Personal</a></li>
</ul>
</div> <!--/end header -->
<div id="scroll" class="scroll clearfix" >
<div class="scrollContainer">
<div id="home">
<div id="viewer">
<div id="latestheader">
<h5> Latest </h5>
<h3> </h3>
</div><!--/end latestheader -->
<ul id="latestnav">
<li class="thumb1 on"><a href="#panel1" title="Panel 1">Nick</a></li>
<li class="thumb2"><a href="#panel2" title="Panel 2">GTMF</a></li>
<li class="thumb3"><a href="#panel3" title="Panel 3">Nick Avatars</a></li>
<li class="thumb4"><a href="#panel4" title="Panel 4">Cabal Productions</a></li>
<li class="thumb5"><a href="#panel5" title="Panel 5">Nicktropolis</a></li>
</ul>
<div id="panels">
<div id="slider">
<div id="panel1">
<img src="images/maincontainer/trivia.jpg" width="700" height="450" border="0" alt="Trivia" />
</div>
<div id="panel2">
<img src="images/maincontainer/goldenLogo.jpg" width="700" height="450" border="0" alt="Golden Ticket" />
</div>
<div id="panel3">
<img src="images/maincontainer/NickProfile.jpg" width="700" height="450" border="0" alt="Nick Online" />
</div>
<div id="panel4">
<img src="images/maincontainer/CabalMain.jpg" width="700" height="450" border="0" alt="Cabal Productions" />
</div>
<div id="panel5">
<img src="images/maincontainer/GLAstage.jpg" width="700" height="450" border="0" alt="Lunchables GLA Award" />
</div>
</div><!--/end latest slider -->
</div><!--/end panels -->
</div><!--/end viewer -->
<script language="JavaScript" type="text/javascript">
(function($){
//object containing margin settings
var margins = {
panel1: 0,
panel2: -700,
panel3: -1400,
panel4: -2100,
panel5: -2800
}
//handle nav click
$("#latestnav a").click(function(e){
//stop browser default
e.preventDefault();
//remove on states for all nav links
$("#latestnav a").removeClass("on");
//add on state to selected nav link
$(this).addClass("on");
//set margin of slider to move
$("#slider").animate({
marginLeft: margins[$(this).attr("href").split("#")[1]]
});
});
//hide descriptive text
$("#slider p").hide();
//show descriptive text on mouseover (hide on mouseout)
$("#slider img").hover(
function() {
$(this).next().slideDown();
}, function() {
$(this).next().slideUp();
});
})(jQuery);
</script>
</div><!--/end home-->
<div id="web">
<div id="webheader">
<h5> Web </h5>
<h4><a href="#header" title="Home"> ↑↑ <span>Back</span></a></h4>
<h3> </h3>
</div> <!--/end web header -->
<div id="webslider">
<ul id="webslidernav">
<li class="webthumb1"><a href="#webcabal"><img src="images/Caballogo_web.png" width="75" height="75" border="0" alt="Cabal Productions"/></a></li>
<li class="webthumb2"><a href="#webgla"><img src="images/GLAlogo_web.png" width="75" height="75" border="0" alt="Lunchables Awards"/></a></li>
<li class="webthumb3"><a href="#webnick"><img src="images/nicklogo_web.png" width="75" height="75" border="0" alt="Nick Online"/></a></li>
</ul>
<script language="JavaScript" type="text/javascript">
(function($){
//handle nav click
$("#webslidernav a").click(function(e){
//stop browser default
e.preventDefault();
//remove on states for all nav links
$("#webslidernav a").removeClass("on");
//add on state to selected nav link
$(this).addClass("on");
});
})(jQuery);
</script>
<div class="slider">
<div class="sliderContainer" style="width:3000px;">
<div class="webpanel" id="webcabal">
<h2>Cabal Productions</h2>
<img src="../main/images/Caballogo.png" height="80" width="125" border="0" />
<h3> This is a second Header </h3>
</div>
<div class="webpanel" id="webgla" >
<h2>Lunchables</h2>
</div>
<div class="webpanel" id="webnick" >
<h2>Nick Online</h2>
</div>
</div>
</div>
</div>
</div><!--/end web -->
</div> <!--/end scrollContainer-->
</div> <!--/end scroll-->
</div> <!--/end wrapper-->
</div> <!--/end back -->
<div id="footer">
<p> All Rights Reserved. Schöneck ©2009</p>
</div> <!--/end footer>-->
</body>
</html>
JQuery Code
Code:
// JavaScript Document
// --- TOP HEADER CODE --
var theImages = new Array()
theImages[0] = 'images/header5.jpg'
theImages[1] = 'images/header6.jpg'
theImages[2] = 'images/header7.jpg'
theImages[3] = 'images/header8.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
// ---- WEB SLIDER CODE ----
$(document).ready(function() {
var $webpanels = $('#webslider .sliderContainer > div');
var $container = $('#webslider .sliderContainer');
var horizontal = true;
if (horizontal) {
$webpanels.css({
'float' : 'left',
'position' : 'relative'
});
$container.css('width', $webpanels[0].offsetWidth * $webpanels.length);
}
var $slider = $('#webslider .slider').css('overflow', 'hidden');
$slider
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#webslider #webslidernav').find('a').click(selectNav);
function trigger(data) {
var el = $('#webslider #webslidernav').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('#webslidernav a:first').click();
}
var scrollOptions = {
target: $slider,
items: $webpanels,
navigation: '#webslidernav a',
axis: 'xy',
onAfter: trigger,
duration: 500,
easing: 'swing'
};
$('#webslider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
|
