SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .load (*.html) on a toggle button

    Hi, i'm new to this forum and I'm approaching to jquery with a sitepoint production "Jquery novice to ninja".
    I'm testing the "Ajax load" method, and I've got this code:
    Code:
    $(document).ready(function(){
      $('#bio a').click(function(e) {
        var url = $(this).attr('href');
        $('#biography').load(url);
        e.preventDefault();
    	
       });
    });
    it works, but I would like to transform the #bio in a toggle button, rather then a #div with a link, so I can switchon and switchoff everytime I want on the html that I load with this method.
    It's possible? I've tried several solutions, but nothing, (I'm not so prepared!!!! )

    Sorry for my english!

    thanks a lot

    Paco

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aidoru View Post
    but I would like to transform the #bio in a toggle button, rather then a #div with a link
    That would seem to be as easily as replacing the link with a button with the location in a different attribute such as value, and using '#bio button' instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi paul, thanks for the answer.
    I've tried this code, but it works just one time and works not good.
    Code:
    $(document).ready(function(){
    
      $('#portfolio a ').click(function(e) {
        var url = $(this).attr('href');
        $('#divMain1').load(url) .toggle("slow");
        e.preventDefault();
      });
    });
    I've got other two button on the page that works good with this code:
    Code:
    $(document).ready(function(){
    $('#mailme').click(function() {
      $('#contact').toggle('slow', function() {
        //here others functions
      });
    });
    $('#bio').click(function() {
      $('#divMain1').toggle('slow', function() {
        //here others functions
    	
      });
    });
    });
    but I'd to put biography and contact informations in the index.html.
    Now I need one button that load another html in a div on the index page with the .load (url)
    But I want that this button has the toggle behaviour.

    I hope I was understandable.....

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aidoru View Post
    But I want that this button has the toggle behaviour.
    You can use the toggleClass method when it's clicked, and check if the button has that class.

    Code javascript:
    $(this).toggleClass('active');
    if ($(this).hasClass('active')) {
        // Add content to div
    } else {
        // Remove content from div
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul...
    I'm tying to follow your reasoning
    I supose that //Add content to div must be replaced by:
    var url = $(this).attr('href');
    $('#divMain1').load(url);
    e.preventDefault();
    It's right?
    sorry i'm just approaching for the first time to jquery...with your and other help I would like to understand quickly this language......

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aidoru View Post
    It's right?
    Yes, that seems right, though I doubt you'd need the preventdefault part with a button now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok...
    I'll test tomorrow morning...now it's too late to test code....thank a lot.....

  8. #8
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul...
    I've solved and it was very simple....
    I've tied with yoour code but it still didn't work....so I've thought and I've tried to give two jquery instructions in the code:
    1) I've assigned a toggle function to the "#div"
    2) I've assigne the .load function to "#div a"
    in this way it works good....
    but now I've got a new problem..
    I've a page with a jquery script to modify a div scrollbar (shape, color, behaviour....)
    when I test it works so good, but when I load in a div on the index.html with jquery function .load(url), jquery scrollbar is not visible...I think it's a jquery conflict, but I don't understand where it is...can you help me or I must open a new tread?
    thanks a lot....you helped me a lot to activate my brain......

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aidoru View Post
    but now I've got a new problem..
    I've a page with a jquery script to modify a div scrollbar (shape, color, behaviour....)
    when I test it works so good, but when I load in a div on the index.html with jquery function .load(url), jquery scrollbar is not visible...I think it's a jquery conflict, but I don't understand where it is...can you help me or I must open a new tread?
    Yes, a new thread is the best option for you here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks, but I solved....
    do you know a reason why ajax load instructions seem not to work on Konqueror and Opera 12?
    thanks


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
  •