jQuery Forum

Hi there, I'm using the jQueryUI select menu tool which is currently still under development. All is working well except that when you click the dropdown to show the options, the web page scrolls to the bottom of the page and the browser kind of... 'flashes' as if the styling is all being reloaded or something.

I have a series of thumbnail images which have been loaded using AJAX. I tried to add the following effect to them: http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-11/

The effect fades the rolled over thumbnail to 50% opacity and a large version of the image appears by the mouse pointer. If you move the mouse whilst still hovering over the thumbnail, the large image moves with your mouse. Once your mouse leaves the thumbnail, the large iamge dissapears. I ahd this working perfectly when I followed the tutorial but now it's not working, nothing happens when you roll over the images. Infact, I tried to just change the initial opacity of the thumbnails to 50% (before any of the roll over handling code is run) and even that doesn't work.

Is this something to do with it being loaded with AJAX first?

jQuery:

1.                 var offsetX = 20;
2.                 var offsetY = 10;
3.                 $('#infoImageBox img').animate({
4.                     "opacity": 0.5
5.                 });   
6.                 $('#infoImageBox a').hover(function (e) {
7.                 // mouse over
8.                 var href = $(this).attr('href');
9.                 $(this).stop().animate({ "opacity": 0.5 });
10.                 $('<img id="largeImage" src="' + href + '/>')
11.                     .css('top', e.pageY + offsetY)
12.                     .css('left', e.pageX + offsetX)
13.                     .appendTo('body');
14.                 }, function () {
15.                    
16.                 // mouse off
17.                 $(this).stop().animate({ "opacity": 1.0 });
18.                     $('#largeImage').remove();
19.                 });
20.                 $('a').mousemove(function (e) {
21.                     $('#largeImage')
22.                         .css('top', e.pageY + offsetY)
23.                         .css('left', e.pageX + offsetX);
24.                 });

HTML:

1.             <div id="infoImageBox">
2.                 <h2>Rooms</h2>
3.                 <div id="infoDiningImage">
4.                     <h3>Dining Room</h3>
5.                     <a href="images/dining.jpg"><img style="width:100px; height:75px" src="images/dining.JPG" alt="DiningImage"/></a>
6.                 </div>
7.                 <div id="infoKitchenImage">
8.                     <h3>Kitchen</h3>
9.                     <a href="images/kitchen.jpg"><img style="width:100px;height:75px" src="images/kitchen.JPG" alt="KitchenImage"/></a>
10.                 </div>
11.                 <div id="infoLoungeImage">
12.                     <h3>Lounge</h3>
13.                     <a href="images/lounge.jpg"><img style="width:100px; height:75px" src="images/lounge.JPG" alt="LoungeImage"/></a>
14.                 </div>

CSS:

1. #largeImage
2. {
3.     position: absolute;
4.     padding: 0.5em;
5.     background: #e3e3e3;
6.     border: 1px solid #BFBFBF;
7. }

Ok, so I have some code which listens for when an anchor tag in a nav menu is clicked. The content pane is hidden using slideUp. It then removes the old data and loads the new data using AJAX into the content pane. The content pane then slides down again with the new content shown.

All works well except the animation is a bit screwed. When the content pane slides back down (after getting new content), it slides down to it's previous size (which is was when it had the previous content in it), it then jumps to the right height once the animation is finished.

Here is my code:

1. $(document).ready(function() {
2.            
3.                 //Check for hash in URL.
4.                 var hash = window.location.hash.substr(1); 
5.                 var href = $('#navBar a').each(function(){ 
6.                     var href = $(this).attr('href'); 
7.                     if(hash==href.substr(0,href.length-5)){ 
8.                         var toLoad = hash+'.html #contentWrap'; 
9.                         $('#contentWrap').load(toLoad) 
10.                     } 
11.                 }); 
12.                 $('#navBar a').click(function(){ 
13.   
14.                 var toLoad = $(this).attr('href') + ' #contentWrap'; 
15.                 $('#contentWrap').slideUp(500,loadContent); 
16.                 $('#load').remove(); 
17.                 $('#contentWrap').append('<span id="load">LOADING...</span>'); 
18.                 $('#load').fadeIn('normal'); 
19.                 function loadContent() { 
20.                     $('#contentWrap').load(toLoad,'',showNewContent()) 
21.                 } 
22.                 function showNewContent() { 
23.                     $('#contentWrap').slideDown(1000,hideLoader()); 
24.                 } 
25.                 function hideLoader() { 
26.                     $('#load').fadeOut('normal'); 
27.                 } 
28.                 window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
29.                 return false; 
30.                
31.                 }); 
32.             });

I am still experimenting but I have a href which runs a function with a delay of 1 seconds, in that time; jQuery is also playing a 1 second animation. The new page is then loaded successfully. However, when I navigate with the browser Back button, how would I make sure that the initial page is reset to it's inital state as at the moment it appears as it would after the animation (which occurs when the href is clicked) has played.

Thanks
Andy

Still a jQuery & relative web design noob.

Hey, I'm trying to make a div animate using the slideToggle function which runs after a link is clicked. For now it is just when any link is clicked because I'm just trying to get it to work. However, When I click a link I have made, nothing happens.

Here is my code and css below:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.     <meta http-equiv="X-UA-Compatible" content="IE=9" />
6.     <title>Millwood - Home Page</title>
7.     <link href="siteStyle.css" rel="stylesheet" type="text/css" />
8.    
9.     <script type="text/javascript">
10.         $(function () {
11.             $('a').click(function () {
12.                 $('#contentWrap').slideToggle(1000);
13.             });
14.         });
15.     </script>
16.    
17. </head>
18. <body>
19.     <div id="pageWrap">
20.         <div id="titleBar">
21.             <h1>Millwood - Bexhill Holiday Home</h1>
22.         </div>       
23.         <div id="navBar"><a href="#">Click Me</a></div>
24.        
25.         <div id="contentWrap">
26.             <p>It is a long established fact that a reader will be distracted by the readable content
27.                 of a page when looking at its layout. The point of using Lorem Ipsum is that it
28.                 has a more-or-less normal distribution of letters, as opposed to using 'Content
29.                 here, content here', making it look like readable English. Many desktop publishing
30.                 packages and web page editors now use Lorem Ipsum as their default model text, and
31.                 a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
32.                 versions have evolved over the years, sometimes by accident, sometimes on purpose
33.                 (injected humour and the like).</p>
34.         </div>
35.     </div>
36. </body>
37. </html>

CSS:

1. /* Global  styles */
2. body
3. {
4.     background-color: #999966;
5. }
6. h1
7. {
8.     font: 18px times new roman;
9.     color: #333300;
10.     letter-spacing: .4em;
11.     font-weight: bold;
12. }
13. /* ID  styles */
14. #pageWrap
15. {
16.     margin-left: 3.5em;
17.     margin-top: 1.5em;
18.     margin-right: 3.5em;
19.     width: auto;
20.     height: auto;
21. }
22. #titleBar
23. {
24.     margin-left: 0.5em;
25. }
26. #navBar
27. {
28.     background-color: #D9E8E8;
29.     min-height: 32px;
30.     position: relative;
31.     border-radius: 15px 15px 15px 15px;
32.     -moz-border-radius: 5px;
33.     -webkit-border-radius: 5px;
34. }
35. #contentWrap
36. {
37.     background-color: #bbd5d5;
38.     width: auto;
39.     /*height: auto;*/
40.     -moz-border-radius: 5px;
41.     -webkit-border-radius: 5px;
42.     position: static;
43.     margin-top: -10px;
44. }
45. #contentWrap p
46. {
47.     margin-left: 10px;
48.     margin-right: 10px;
49.     padding-top: 8px;
50.     padding-bottom: 8px;
51. }
52. /* Class  styles */

Thanks in advance for any help.

Hi there.

I am very new to jQuery and am trying to learn by incorporating and editing things I have done in tutorials into an actual website design.

The problem I am having is how to get some text to slide down from behind an image after it is clicked. So for instance; I'd have an image which says "Things to do" or whatever then when the image is rolled over/clicked some text will slide down from behind the image with links to pages of different things to do.

I think it might be something like what was done in this tutorial: http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-8/

...but that tutorial uses two images rather than an image and a div with text in it which is what I am trying to achieve.

Here's the code for the tutorial above:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title>Title</title>
       <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
       <script type="text/javascript">
           $(function () {
               $('.wrap').hover(function () {
                   $(this).children('.front').stop().animate({ "top": '300px' }, 700);
               }, function () {
                   $(this).children('.front').stop().animate({ "top": '0' }, 400);
               });
           });
       </script>
   
       <style type="text/css">
       #container
       {
           width: 250px;
           text-align: center;
           margin: auto;
       }
       .wrap
       {
           width: 200px;
           height: 150px;
           position: relative;
           overflow: hidden;
           float: left;
           padding: 0 lem;
       }
          
       img
       {
           position: absolute;
           top: 0;
           left: 0;
       }
       </style>
   </head>
   <body>
       <div id="container">
           <div class="wrap">
               <img style="width: 200px; height: 150px" src="back.jpg" alt="image" />
               <img style="width: 200px; height: 150px" src="front.jpg" class="front" alt="image" />
           </div>
       </div>
   </body>
   </html>

Thanks in advance for any help you can give.

Andy