Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Hi guys,

    I have an image which changes the background colour when I hover over it, but gives me an unavailable web page when I click on it.
    Is there a way I can disable any action, on the mouseclick, so it just retains the hover quality?


    Thanks

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Worked it out.

    Just type the html page followed by the # key.

  4. #3
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Thank you very much :-)

  5. #4
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    Just an FYI, when you use #, it's actually going to scroll back to the top of the page...also, you don't need to type in the entire path, you only need to put in "#" and it should work for you too.

    The way I would actually suggest to do it, however, is to use the event's preventDefault() method. If you're using jQuery, it would look something like this:

    Code:
    $(document).ready(function(){
      $("#myLink").click(function(e){
        e.preventDefault();
        //anything else you want to happen can go here...
      });
    });

  6. #5
    Junior Member
    Join Date
    Nov 2010
    Posts
    23
    Member #
    24956
    Just to add on to paintingtheweb's post ...

    e.stopPropagation() is also available to you to, well, stop the propagation (bubbling up) of the event through the DOM.

    Also, you can ...

    return false;

    which is essentially calling preventDefault() and stopPropagation() in one statement.

  7. #6
    Junior Member
    Join Date
    Nov 2010
    Posts
    23
    Member #
    24956
    Maybe I wasn't clear with my stopPropagation() explanation.

    Sometimes preventDefault() is all you are going to need, other times you may require both stopPropagation() and preventDefault().

    Here is a code snippet:

    Code:
    <html>
    <head>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    
    <script type="text/javascript">
    
    $(function() {
    
    	$('p').click(function() {
    		alert("Paragraph clicked");
    	});
    	
    	$('a').click(function(e) {
    		e.preventDefault();
    		alert("Anchor clicked");
    	});
    	
    });
    
    </script>
    
    </head>
    <body>
    
    <p>Here is a <a href="#">link</a>.</p>
    
    </body>
    </html>
    Notice in this example both the anchor and the paragraph are handling a click event.

    When a user clicks on the anchor the alert box "Anchor clicked" is displayed, the user clicks "OK" and then the alert box "Paragraph clicked" gets displayed.

    Sometimes this is not the effect that you desire and to prevent the event from bubbling up the DOM you would also have to include the stopPropagation() statement in the anchor's click function.

    Hope that makes sense.

  8. #7
    Junior Member
    Join Date
    Oct 2010
    Posts
    17
    Member #
    24485
    Thanks guys!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com