Hello,

 

I'm hoping this is a fairly easy question for someone here, but I'm lost right now. Any help would be greatly appreciated.

 

I have 3 different jQuery plugins working on one page.

 

1 - a menu slider effect (called LavaLamp)

2 - a script that expands the text area when you're filling it out

3 - a javascript that imports tweets from a twitter account and displays the feed

 

I can get them to work individually, but NOT together on one page.

 

Depending on how I order them in the header, the menu effect or the text area expander stops working.

 

Here's the text expander working, but the menu broken:

 

//Expand the Text Area
$(function(){
   $('textarea').autoResize({
       // On resize:
       onResize : function() {
           $(this).css({opacity:1});
       },
       // After resize:
       animateCallback : function() {
           $(this).css({opacity:1});
       },
       // Quite slow animation:
       animateDuration : 300,
       // More extra space:
       extraSpace : 30
   });   
});

//Twitter Feed
getTwitters('tweets', {
           id: 'twitter_account',
           count: 3,
           clearContents: true,
           enableLinks: true,
           ignoreReplies: true,
           newwindow: true,
           template: '<p>%text%</p>'
});

//Animate The Menu
$(function() {
$("#menu").lavaLamp({
   fx: "backout",
   speed: 800
});
});

 

Can I get them all to work? What's the conflict here?

 

Again, it would be great if you could help, I've been working on it all night...

 

- Larry.

Hello,

 

I'm hoping this is a fairly easy question for someone here, but I'm lost right now. Any help would be greatly appreciated.

 

I have 3 different jQuery plugins working on one page.

 

1 - a menu slider effect (called LavaLamp)

2 - a script that expands the text area when you're filling it out

3 - a javascript that imports tweets from a twitter account and displays the feed

 

I can get them to work individually, but NOT together on one page.

 

Depending on how I order them in the header, the menu effect or the text area expander stops working.

 

Here's the text expander working, but the menu broken:

 

//Expand the Text Area
$(function(){
   $('textarea').autoResize({
       // On resize:
       onResize : function() {
           $(this).css({opacity:1});
       },
       // After resize:
       animateCallback : function() {
           $(this).css({opacity:1});
       },
       // Quite slow animation:
       animateDuration : 300,
       // More extra space:
       extraSpace : 30
   });   
});

//Twitter Feed
getTwitters('tweets', {
           id: 'twitter_account',
           count: 3,
           clearContents: true,
           enableLinks: true,
           ignoreReplies: true,
           newwindow: true,
           template: '<p>%text%</p>'
});

//Animate The Menu
$(function() {
$("#menu").lavaLamp({
   fx: "backout",
   speed: 800
});
});

 

Can I get them all to work? What's the conflict here?

 

Again, it would be great if you could help, I've been working on it all night...

 

- Larry.

 

and where is the full html?

and where is the full html?

 

I wasn't sure you'd need it. Here it is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <meta name="description" content="description goes here" />

       <!-- Welcome to the code  -->

       <title>  Title - Home  </title>

       <!-- Stylesheets -->
       <link type="text/css" rel="stylesheet"    href="css/style.css" />
       <link type="text/css" rel="stylesheet"    href="css/buttons.css" />

       <!-- Javascript -->
       <script type="text/javascript" 	src="js/jquery.js">     </script>
       <script type="text/javascript"  src="js/twitter.js">    </script>
       <script type="text/javascript" 	src="js/easing.js">     </script>
       <script type="text/javascript" 	src="js/lavalamp.js">   </script>
       <script type="text/javascript" 	src="js/init.js">       </script>

       <!--[if lte IE 6]><script>location = "http://browser-update.org/en/update.html";</script><![endif]-->

   </head>

   <body>
       <!--Map Pieces-->
       <div id="map_piece_top_left"></div>
       <div id="map_piece_top_right"></div>

       <!--Content Container-->
       <div id="repeat_container">

           <div id="background_sky"></div>
           <div id="background_hill"></div>
           <div id="background_leaves"></div>
           <div id="background_title"></div>
           <div id="background_river"></div>
           <div id="background_building"></div>

           <!--Fixed Footer-->
           <div id="footer_container">
           </div>

           <!--Menu-->
           <ul id="menu">        
               <li class="current"><a id="home" href="index.php"></a></li>
               <li><a id="services" href="#"></a></li>
               <li><a id="about" href="#"></a></li>
               <li><a id="offers" href="#"></a></li>
               <li><a id="testimonials" href="testimonials.php"></a></li>
               <li><a id="contact" href="contact.php"></a></li>
               <li><a id="links" href="#"></a></li>
           </ul>

           <!--Left Box-->
           <div id="left_box">
               <div id="left_box_top">Tweets</div>
               <div id="left_box_content">
                  <div id="tweets">
                     <p>Loading Tweets...</p>
                   </div>
               </div>
               <div id="left_box_bottom"><a href="#" id="twitter_link" >Follow on Twitter.</a></div>
           </div>

           <!--Body Box Content-->
           <div id="body_box">
               <div id="body_box_top"></div>
               <div id="body_box_repeat"></div>
               <div id="body_box_bottom"></div>
               <div id="body_box_content">
                   <p>Content</p>
               </div>
           </div>

           <!--Right Box-->
           <div id="right_box">
               <div id="right_box_content">  
                  <p>further content</p>
               </div>
               <div id="right_box_repeat"></div>
               <div id="right_box_top"></div>
               <div id="right_box_bottom"></div>
           </div>
           <div class="spacer1"></div>

       </div>

       <!--Footer Bar-->
       <div id="footer_bar_container"><div id="footer_bar">Footer Text</div></div>
   </body>
</html>

 

The problem is in the file "init.js" where I call the various javascript effects. If I rearrange that file I can get either the menu working or the text area expander working.

 

Would you like the other files too? Let me know and any help would be great!

Hello everyone,

 

I forgot to include a script. The problem has been resolved.

 

This has been a fairly pointless thread, lacking in insight, it might even be worth deleting.

 

I'm sorry. What have I become?

lol thats why i asked ur html;)anyway nice u got it sorted

Glad you figured it out!

 

[thread closed]