Page 1 of 1

Jquery disable native href clikc function

Posted: Fri May 25, 2007 12:41 pm
by RobertGonzalez
I know the title is wonky, but I cannot think of how to phrase what I want to do. Lets say I have this markup:

Code: Select all

<div id="mine-wrapper">
	<h3><a href="http://www.google.com">My content stuff</a></h3>
	<div>
		<h4>Stuff 1</h4>
		<h4>Stuff 2</h4>
		<h4>Stuff 3</h4>
		<h4>Stuff 4</h4>
		<h4>Stuff 5</h4>
	</div>
	<h3>My content stuff more</h3>
	<div>
		<h4>Stuff 1</h4>
		<h4>Stuff 2</h4>
		<h4>Stuff 3</h4>
		<h4>Stuff 4</h4>
		<h4>Stuff 5</h4>
	</div>
	<h3>My content stuff again</h3>
	<div>
		<h4>Stuff 1</h4>
		<h4>Stuff 2</h4>
		<h4>Stuff 3</h4>
		<h4>Stuff 4</h4>
		<h4>Stuff 5</h4>
	</div>
</div>
What I want to accomplish (and what is already working) is that when you click on the <h3> tag, that the <div> just below it toggles. That is not a problem. However, I want to degrade peacefully when JS is not enabled, so I need the h3 tags to be anchors as well (like the first h3 in the example markup). How would I write the Jquery function to allow toggling but not allow following the href in the a tag? This is what I have as far as working Jquery code:

Code: Select all

$(document).ready(function() {
	$("#mine-wrapper").find('h3').css("cursor", "pointer");
//	This does not work as it disables the toggle click
//	$("#mine-wrapper").find('h3').find('a').click(function() { return false;});
	$("#mine-wrapper").find('div').hide().end().find('h3').click(function() {
		$(this).next().slideToggle();
	});
});

Posted: Fri May 25, 2007 1:26 pm
by nickvd
Instead of clicking on the h3, why not use the anchors onclick event to trigger your action, then just return false...

Posted: Fri May 25, 2007 1:35 pm
by Luke
How about something more like this?

Code: Select all

$(function() {

  $("#mine-wrapper h3").attr('href', 'javascript:;').click(function(){

    $(this).find('div').slideToggle();

  });

});

Posted: Fri May 25, 2007 5:01 pm
by Kieran Huggins
Seems like an unordered list to me:

Code: Select all

$(function(){
  $("#mine-wrapper ul").hide();
  $("#mine-wrapper li").click(function(){
    $(this).find('ul').slideToggle().find('li').click(function(){
      return false;
    });
  });
});

Code: Select all

<ul id="mine-wrapper">
  <li>My content stuff
    <ul>
      <li>Stuff 1</li>
        <li>Stuff 2</li>
        <li>Stuff 3</li>
        <li>Stuff 4</li>
        <li>Stuff 5</li>
      </ul>
    </li>
  <li>My content stuff more
    <ul>
      <li>Stuff 1</li>
        <li>Stuff 2</li>
        <li>Stuff 3</li>
        <li>Stuff 4</li>
        <li>Stuff 5</li>
      </ul>
    </li>
  <li>My content stuff again
    <ul>
      <li>Stuff 1</li>
        <li>Stuff 2</li>
        <li>Stuff 3</li>
        <li>Stuff 4</li>
        <li>Stuff 5</li>
      </ul>
    </li>
</ul>

Posted: Fri May 25, 2007 5:03 pm
by Luke
I agree that it should be an unordered list. you could still use the headings

Posted: Fri May 25, 2007 5:58 pm
by RobertGonzalez
Sorry dude, it didn't work. I'll keep playing with this for a bit.

Actually, it is an unordered list and that works out well. I am looking for something that semantically reflects what is being displayed. This is, in essence, a table of contents that will be used for navigation and I wanted the markup to reflect that. However, at the moment, the unordered list is working exactly how I want it to.

Edit | And I still run the same problem as having the headings of the list items as links that will still fire the click.

Posted: Fri May 25, 2007 6:00 pm
by Kieran Huggins
did you include jquery's base lib? works on mine...

Posted: Fri May 25, 2007 6:04 pm
by RobertGonzalez
I am actually using a tutorial from their site to play around. Right now I doing this in the HTML:

Code: Select all

<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.tablesorter.js"></script>
<script src="lib/jquery.autohelp.js"></script>
<script src="lib/jquery.hovertip.js"></script>
<script src="custom.js" type="text/javascript"></script>
Custom is the file that holds all my rules. The other three (other than jquery.js) are plugins.