Click here to Skip to main content
15,944,136 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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">&lt;/script>
<script src="js/jquery-1.2.3.min.js">&lt;/script>
<script src="js/jquery.lavalamp.js" type="text/javascript">&lt;/script>
<script type="text/javascript" src="js/jquery.easing.min.js">&lt;/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;
});
Posted

1 solution

try this may this help u
rearrange sequence from :





to




 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900