jQuery Forum

I've got the following code:

2. <img id="emailme" src="images/email.png" /> 
3. <div id="emailAddress" style="height:50px;">
4.         <form>
5.             <INPUT name="email" type="text" id="email" style="height:25px;">
6.                 
7.                 <input type="submit" name="button" id="button" value="Send" style="height:40px;"/>
8.             </form>
9.         </div>
10. <script>
11.             $("#emailme").click(function () {
12.             $("#emailAddress").slideToggle("slow");
13.             });    
14.             </script>
15.   </div>

The problem is, that when I click on the submit button, the #emailAddress div closes immediately. I'm not sure why this is happening.

Thanks

Dan

I'm using sprites and jQuery to animate links on a mouse enter and mouse leave events.

Here's my code:

3. a#home {
4. background: url(images/blinksprite.png) no-repeat 0 0;
5. }
6. a#portfolio {
7. background: url(images/plinksprite.png) no-repeat 0 0;
8. }
9. a#contact {
10. background: url(images/clinksprite.png) no-repeat 0 0;
11. }
12. 
    
13. 
    
14.  $(document).ready(function(){ 
15. 
    
16.   $(".menu a").live('click',function(){
18. $(this).css('backgroundPosition', '0 -85px');
20.  });
21.   
22.     $( '.menu a' ).mouseenter(function() { 
23.      $(this).css('backgroundPosition', '0 -85px');
24. 
    
25.  });
26.  
27. $( '.menu a' ).mouseleave(function() { 
28.     $(this).css('backgroundPosition', '0 0');
29. 
    
30.  });
32. });  
34. 
    
35. <ul class="menu">
36.   <li ><a  class="active" id="home" href="">
37.     <div class="heading" style="position:relative; top:85px;">Home</div>
38.     </a></li>
39.   <li ><a  id="portfolio" href="2.html">
40.     <div class="heading" style="position:relative; top:85px;">about</div>
41.     </a></li>
42.   <li ><a  id="contact" href="3.html">
43.     <div class="heading" style="position:relative; top:85px;">contact</div>
44.     </a></li>
45. </ul>

The mouse enter and leave events are all working great.

What I'm struggling with is when the user clicks on a link, I want the mouse enter and mouse leave events for the clicked link to stop and for the background image to stay at 0 -85px. I tried that in the click event above but I have no idea how to go about this.

Thanks

Dan

I've got this script which effectively should change the clicked link's opacity to full and its siblings' opacity to 0.6.

The only part that works though is the changing the text color to black.

Here's the script:

2. <script type="text/javascript">
3.   $(document).ready(function(){ 
4.   $(".menu a").live('click',function(){
5. 
   
6.   $(this).siblings().css('color','red');
7.   $(this).css('color','black');
8. $(this).css('opacity',1);
9.  });
10.   
11.   });
12. </script>
13. 
    
14. <ul class="menu">
15. <li ><a class="home" href="#"><div class="heading" style="position:relative; top:85px;">Home</div></a></li>
16. <li ><a class="about" href="#"><div class="heading" style="position:relative; top:85px;">About</div></a></li>
17. <li ><a class="contact" href="#"><div class="heading" style="position:relative; top:85px;">Contact</div></a></li>
18. </ul>

Thanks

Dan

I'm running an AJAX and jQuery script which seems to be conflicting with another query plugin called fancy box (used to display images) which is supposed to run if a link is clicked in the portfolio section of the site. If I remove the AJAX script then the fancy box works.

The AJAX and jQuery script thats causing the problem is found in the ajax.js file. The AJAX is used to load and animate content of the various pages. The other jQuery script is used to fade in content of different divs on the home page.

I've tried using the .noConflict method with various combinations throughout the .js files but to no avail.

I've put a test version of the site up at here

Please any help would be so appreciated.

Thanks

Dan

I've got 2 scripts for my website.

The first is an AJAX script which loads the different pages when the links are clicked.

The second script fades content in and out on the home page when another set of links are in.

I'm struggling to change the color of both sets of links when they're clicked.

Here's the code:

2. $(document).ready(function() {
4. //AJAX: loading contens of pages   
5. var hash = window.location.hash.substr(1);
6. var href = $('#nav li a').each(function(){
7. var href = $(this).attr('href');
8. if(hash==href.substr(0,href.length-5)){
9. var toLoad = hash+'.html #content';
10. $('#content').load(toLoad)
11. }
12. });
14. 
    
15. $('#nav li a').live('click',function(){
18. var toLoad = $(this).attr('href')+' #content';
19. $('#content').hide('fast',loadContent);
20. $('#load').remove();
21. $('#load').fadeIn('normal');
22. window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
23. function loadContent() {
24. $('#content').load(toLoad,'',showNewContent())
25. }
26. function showNewContent() {
27. $('#content').show('normal');
28. $("#nav ul li a").removeClass("active");
29. }
34. 
    
35. return false;
37. });
40. //fading in and out divs on home page
41. $('#fadingNav a').live('click',function(){
42. var $cont = '.'+$(this).attr('class')+'content';
43.  if (!$($cont).hasClass('clicked'))$($cont).fadeIn().addClass('clicked');
44.   $('.clicked').not($cont).fadeOut().removeClass('clicked');
45.   });
46.   
47. });

Thanks 

mc

I have a number of links with content related to each link. When the user clicks on a link, the current content fades out and the new content (for the clicked link) fades in. This works alright but when the page is first loaded and I click on the about or content link, the hidden content for the clicked link flashes in and out before it fades in correctly. This seems to only happen the first time the links are clicked.

The code is below

I don't understand why this is happening.

Thanks

Dan

I'm using Jquery to create a rollover effect on 2 images (placed on top of each other) to fade the bottom image in on a mouseover and out on a mouse out. Clicking the faded in image also opens a fancybox gallery. The problem is that sometimes the animation (the fade in and out) gets stuck after closing the fancybox window and the mouseover doesn't work anymore.

here's my code for the mouseover:

2. $(document).ready(function(){
3.   $(".appearing-image img").css("opacity",0).fadeTo(500, 0);
4. $(".appearing-image img").mouseover(function () 
6. {
7. if ($(this).is(':animated'))
8. {
9. $(this).stop().fadeTo(250,1);
10. }
11. else
12. {
13. $(this).fadeTo(250, 1);
14. }
16.      
17.     });
18. $(".appearing-image img").mouseout(function () {
19.      if ($(this).is(':animated'))
20. {
21. $(this).stop().fadeTo(250,0);
22. }
23. else
24. {
25. $(this).fadeTo(250, 0);
26. }
27.     });

and here's my html code:

2. <div class="thumbnail" style="margin-top:1%; ">
3.     <div class="visible-image">
4. <img src="images/projectslabel.jpg" />
5. </div> 
6.          <div class="appearing-image">
7.          <img onclick='$("a.projects:first").trigger("click");' src="images/projects.jpg" />
8.                               </div>
9. </div>

this has been giving me hastles for weeks now.

any help would be awesome!!

Dan

i've got links on a website that takes the user to different parts of the same page (i.e, no reloading of the page)

I would like 2 things to happen when a link is clicked:

1) the url changes eg. from mysite.com/home to  mysite.com/about when the about link is clicked.

2) when refreshing the page that it stays where it's at and not go back to the top of the page.

thanks

What I have is this:

this:

1. 1. $('\'#' + $element + '\'').css({ backgroundImage : "url(images/home_animate.jpg)" });

where $element stores the id of the link clicked.

any help would be great.

Thanks