Forums

aaronheine

I'm trying Chris' tutorial #20. It is below all the widgets http://www.aaronheine.com

I had to add "return false" to keep the links from making the page jump to the top of the browser. But the first link is not working with "return false" Am I entering it correctly? I tried a couple different ways.



jQuery(document).ready(function() {
			jQuery(\"li.action-one\").click(function(){
				jQuery(\"#page-wrap2\").animate({  
					width: \"300px\"  return false;

				});
			});
			jQuery(\"li.action-two\").click(function(){
				jQuery(\"p\").toggle(); return false;

			});
			jQuery(\"li.action-three\").click(function(){
				jQuery(\"#header2\").slideUp(); return false;

			});
		});

Thanks

Robskiwarrior

you could try...


jQuery(document).ready(function() {
         jQuery(\"li.action-one\").click(function(){
            jQuery(\"#page-wrap2\").animate({ 
               width: \"300px\"  
            });
			return false;
         });
		 
		 
         jQuery(\"li.action-two\").click(function(){
            jQuery(\"p\").toggle(); 

         });
		 
		 return false;
		 
         jQuery(\"li.action-three\").click(function(){
            jQuery(\"#header2\").slideUp(); 

         });
		 
		 return false;
		 
      });

aaronheine

Now it is not working at all. :( Seems like there are a lot of quirks to working with jquery/PHP. This is my entire header if you want to give it another try.

Thanks

<!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\" <?php language_attributes(); ?>>

	<head profile=\"http://gmpg.org/xfn/11\">
	  <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

		<title>
			<?php if (is_home()) { echo bloginfo('name');
			} elseif (is_404()) {
			echo '404 Not Found';
			} elseif (is_category()) {
			echo 'Category:'; wp_title('');
			} elseif (is_search()) {
			echo 'Search Results';
			} elseif ( is_day() || is_month() || is_year() ) {
			echo 'Archives:'; wp_title('');
			} else {
			echo wp_title('');
			}s
			?>
		</title>

	


 <meta http-equiv=\"content-type\" content=\"<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>\" />
 <meta name=\"description\" content=\"<?php bloginfo('description') ?>\" />
		
<?php if(is_search()) { ?>
		<meta name=\"robots\" content=\"noindex, nofollow\" /> 
	    <?php }?>
	
		<link rel=\"stylesheet\" type=\"text/css\" href=\"<?php bloginfo('stylesheet_url'); ?>\" media=\"screen\" />
		<link rel=\"alternate\" type=\"application/rss+xml\" title=\"<?php bloginfo('name'); ?> RSS Feed\" href=\"<?php bloginfo('rss2_url'); ?>\" />
		<link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />

	
	<?php wp_head(); ?>
		
		
					
			<script src=\"http://css-tricks.com/js/jquery-1.2.6.min.js\" type=\"text/javascript\"></script>
			<script src=\"jquery.js\" type=\"text/javascript\"></script>
			<script src=\"main.js\" type=\"text/javascript\"></script>
	
	
		
	
<script type=\"text/javascript\">

		
jQuery(document).ready(function() {
         jQuery(\"li.action-one\").click(function(){
            jQuery(\"#page-wrap2\").animate({ 
               width: \"300px\"  
            });
         return false;
         });
       
       
         jQuery(\"li.action-two\").click(function(){
            jQuery(\"p\").toggle(); 

         });
       
       return false;
       
         jQuery(\"li.action-three\").click(function(){
            jQuery(\"#header2\").slideUp(); 

         });
       
       return false;
       
      });
</script>




	
	
<script type=\"text/javascript\">

		jQuery(function(){
		
			jQuery.getJSON('http://twitter.com/status/user_timeline/aaronheine.json?count=3&callback=?', function(data){
				jQuery.each(data, function(index, item){
					jQuery('.twitter .inside').append('<div class=\"tweet\"><p>' + item.text + '</p></div>');
				});
			});
			
			jQuery.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?id=80049922@N00&lang=en-us&format=json&jsoncallback=?\", function(data){
			  jQuery.each(data.items, function(index, item){
				jQuery(\"<img/>\").attr(\"src\", item.media.m).addClass(\"thumb\").appendTo(\".flickr .inside\").wrap(\"<a href='\" + item.link + \"'></a>\").wrap(\"<div class='flickr-thumb' />\");
			  });
			});
			
		});
	</script>


		<?php wp_head(); ?>


	</head>

Robskiwarrior

yea it was a random stab in the dark as to say lol - I shall have another look, cant promise anythin though :)

Robskiwarrior

Ok this works for me...


		jQuery(document).ready(function() {
         
		 
		 jQuery(\"li.action-one\").click(function(){
         

		 jQuery(\"#page-wrap2\").animate({ 
               width: \"300px\"
            });
			return false;	
         });
		 
		 
         jQuery(\"li.action-two\").click(function(){
            jQuery(\"p\").toggle();
			return false;
         });
		 
		 
		 
         jQuery(\"li.action-three\").click(function(){
            jQuery(\"#header2\").slideUp();
         });
		 return false;
      });

Just to point out you had an extra ";" after your width: "300px" - so I took that out and it removed an error :)

jackfranklin

An easier way is to pass the event throught the function and use the preventDefault function in jQuery:


$(\"li\").click(function(event) {
event.preventDefault(); //link wont go to destination now
..do the rest of your stuff...
});

treehouse : what would you like to learn today?

Forums

jQuery "return false"