Results 1 to 3 of 3

Thread: JQuery Simple Nav problem

  1. #1
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default JQuery Simple Nav problem

    Hey,

    Sorry i don't have a live example to show u,
    but ill do my best to explain my problem.

    Full JQuery code:

    Code:
    $(document).ready(function(){
    		$('#mainDiv').load("Home.html");
    		$('li.home').click(function() {
    			$('#mainDiv').load("Home.html");
    	});
    		$('li.about').click(function() {
    		    	   $('#mainDiv').load("About.html");
    	});
    		$('li.products').click(function() {
    			$('#mainDiv').load("Products.html");
    	});
    		$('li.tech').click(function() {
    			$('#mainDiv').load("Technical.html");
    	});
    		$('li.palette').click(function() {
    			$('#mainDiv').load("Palette.html");
    	});
    		$('li.contact').click(function() {
    			$('#mainDiv').load("Contact.html");
    	});	
    		$('.palettebtn').click(function() {
    			  $('#mainDiv').load("Palette.html");
    	});
    
    });
    Html Element code:

    Code:
    <a href="#" class="palettebtn">
    	<img src="images/Palette.png" width="200" height="200" alt="Palette" border="0"/>
    </a>
    The part of the code im having trouble with:

    Code:
             $('.palettebtn').click(function() {
                    $('#mainDiv').load("Palette.html");
    });
    This code used to work fine,
    I have looked over it several times and havnt spotted the problem yet.

    When i open the web page with the element on my local pc
    and when the .palettebtn image is clicked, it sends the user to the top of the screen.
    Where it should load "Palette.html" into #mainDiv

    I hope i have given enough info
    Any input would be appreciated

    Thanks

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    You can choose from either of these two:
    • Code:
      $('.palettebtn').click(function() {
      			  $('#mainDiv').load("Palette.html");
      			  return false;
      	});
    • Code:
       $('.palettebtn').click(function(event) {
                      $('#mainDiv').load("Palette.html");
      event.preventDefault();
      });


    Basically, you just need to cancel the (natural) action of the a tags.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    RipzCurlz (10-30-2008)

  4. #3
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for your reply
    and i have sent you an email with more info

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •