Hello- My jQuery navigation plugin is conflicting with three other jQuery effects- three buttons that adjust the font size and a fadeIn and fadeOut effect (picture and greeting). I have already tried $.noConflict(); and no luck. Here is a link to the page:
http://bit.ly/1cr93gD[
^]
Here is the code from my main page:
<doctype mode="hold"><html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<link href='http://fonts.googleapis.com/css?family=Geostar' rel='stylesheet' type='text/css'>
<link href="css/base2.css" rel="stylesheet" />
<link rel="stylesheet" href="css/lavalamp.css">
</head>
<body>
<div id="wrapper">
<h1>site title</h1>
<ul id="menu" class="lavaLampWithImage">
<li class="current"><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="minus">-</div>
<div class="plus">+</div>
<div class="reset">reset</div>
<div id="headshot">
<img src="http://ctec.clark.edu/~j.aragon2/ctec126/project%20folder/img/cupcake.jpg" alt="headshot" width="150" height="150">
</div>
<div id="greeting">
<h2>Hi there...</h2>
</div>
<p>Ice cream jelly fruitcake sweet roll tiramisu jelly beans cupcake. Cupcake
jelly bonbon pie chocolate halvah tiramisu. Marshmallow toffee chocolate bar
chocolate. Chocolate bar topping marzipan cake marzipan pudding tootsie roll
tart powder. Sweet powder icing carrot cake. Pastry gingerbread bonbon croissant
pastry jelly-o lemon drops tart carrot cake. Bonbon sesame snaps biscuit dessert wafer..</p>
</div>
<script src="js/final_project.js"></script>
<script src="js/jquery-1.2.3.min.js"></script>
<script src="js/jquery.lavalamp.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$(function() {
$("#menu").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
});
</script>
</body>
</html>
Here is the code from the final_project.js file for the three effects:
$(document).ready(function() {
//-- picture test
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
});
Submit an article or tip