Jquery disable native href clikc function

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Jquery disable native href clikc function

Post 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();
	});
});
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Instead of clicking on the h3, why not use the anchors onclick event to trigger your action, then just return false...
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

How about something more like this?

Code: Select all

$(function() {

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

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

  });

});
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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>
Last edited by Kieran Huggins on Fri May 25, 2007 5:04 pm, edited 1 time in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I agree that it should be an unordered list. you could still use the headings
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
Last edited by RobertGonzalez on Fri May 25, 2007 6:03 pm, edited 1 time in total.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

did you include jquery's base lib? works on mine...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
Post Reply