SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery toggle problem? Novice

    Hi all

    I currently have the below working fine:

    Code JavaScript:
    <script>
      $(document).ready(function(){
    	$('#toggle').click(function(){
         $('#toppic').toggle("slow");
       });
      });
      </script>

    Code HTML4Strict:
    <img src="images/index-main-intro.jpg" name="toppic" width="366" height="116" class="block" id="toppic">
     
    <input type="submit" id="toggle" value="Remove image" name="toggle"/>

    As you can see just a basic fade out of the img 'toppic' my problem is how can I add a text link instead of a input button to do the same job? and when the img is hidden get the value to say 'Show image' and vise-verse?

    Thanks Guys

  2. #2
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi computerbarry.

    There is no point to use toggle() in this situation, why not use show() and hide()?

    Here is what I've done for you,

    Java Code:
    Code:
    <script>
      $(document).ready(function(){
        $("#hideimg").click(function(){
         $("#toppic").hide("slow");
         $("#hideimg").hide();
         $("#showimg").show("slow");
       });
       
       $("#showimg").click(function(){
         $("#toppic").show("slow");
         $("#showimg").hide();
         $("#hideimg").show("slow");
       });
       
       
       
      });
      </script>
    HTML Code:
    Code:
    <img src="sample.jpg" name="toppic" width="366" height="116" class="block" id="toppic">
     
    <a href="javascript:;" id="hideimg">Remvoe Image</a>
    <a href="javascript:;" id="showimg" style="display:none;">Show Image</a>
    Live version: http://mzeb.com/sitepoint/toggle.html

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Zeb working great now

    Just wondering if theres a way I can create something similar so I can apply this method to a no. of div's (<div>), meaning create some sort of .class so i can use the same snippet over and over?

    ...or will I need to create a new piece of code every time I need to apply this effect to a different id?

    hope that makes sense

    Thanks again

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another example

    some text blar blar....... read more>
    some text blar blar....... read more>
    some text blar blar....... read more>
    some text blar blar....... read more>
    some text blar blar....... more text when clicked.. blar blar.... read less>


  5. #5
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have now created a function for you which you can use everwhere, just call it and thats it.

    Function Code:

    Code JavaScript:
    function doImage(imgID,linkID,work) {
     
         if(work=="hide") {  
         $("#"+imgID).hide("slow");
         $("#"+linkID).replaceWith("<a href='javascript:;' id='add' onclick=doImage('image1','add','show')>Show Image</a>");
         } else if(work=="show") { 
         $("#"+linkID).replaceWith("<a href='javascript:;' id='add' onclick=doImage('image1','add','hide')>Hide Image</a>");
         $("#"+imgID).show("slow");
         }     
     
    }
    Now with the above function you just need an image and a link so when you try the following html code:


    Code HTML4Strict:
    <img src="sample.jpg" name="image1" width="366" height="116" class="block" id="image1">
     
    <a href="javascript:;" id="remove" onclick="doImage('image1','remove','hide');">Remvoe Image</a>


    Look at the above HTML code, you are telling the function that (the image you need work with is 'image1' the link you need to work with is 'remove' which is that text link and the final argument is 'hide' which means hide this image)

    I have updated that file so u can see the working version:
    http://mzeb.com/sitepoint/toggle.html


    Good Luck

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great thanks, my problem now is how will I get the same function to work with different images or a <p>, <div> or <span> id's?

    This is where the toggle will be ok.

    I'm working on a FAQ's page and need to ask questions so when somebody clicks the question/link it will drop down and show the answer, click it again and it goes back up.

    Will I need a separate function for each? Is there a way I can apply just one function to take care of them all?

    Thanks

    Example:

    1. What is the hex of blue?
    2. What is the hex of green?
    3. What is the hex of white? - (when clicked shows answer)
    The hex of white is #FFFFFF
    4. What is the hex of black?

    and so on..

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the FAQ page you could do something like this:

    You can mark it up however you want as long as the appropriate elements have either a class of "answer" or "question" -->

    Code html4strict:
    <ul>
        <li>
            <p class="question">What is the hex of blue?</p>
            <p class="answer">0000ff</p>
        </li>
        <li>
            <p class="question">What is the hex of green?</p>
            <p class="answer">00ff00</p>
        </li>
    </ul>

    Code JavaScript:
    $(function(){
        $('.answer').hide(); // Hides answers on page load...
        $('.question').click(function(){
            $(this).next('.answer').toggle('slow');
        });
    });

    One thing you have to consider here is usability - it seems that you are putting an unnecessary barrier between the user and the content (the answers) - I would understand this being necessary if it was a quiz or test but it's an FAQ so visitors should ideally have all the content in front of them as soon as they open the page... (IMO)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jimmy just what I'm after!

    One thing you have to consider here is usability - it seems that you are putting an unnecessary barrier between the user and the content (the answers)..
    Yes with you on that Jimmy, I might have to reconsider the format but this method will be coming in handy for a few other things I have in the pipe line.

    back to the above... I've just copied and pasted the code you supplied but nothing is working? the answer is showing and it doesn't let me click the question?

    Thanks again

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    Now working. Does that look right?
    Code JavaScript:
    <script>
    $(document).ready(function(){
    $(function(){
        $('.answer').hide(); // Hides answers on page load...
        $('.question').click(function(){
            $(this).next('.answer').toggle('slow');
        });
    });
    });
    </script>

    And how do I get the question's to follow my link uniform, as it stands the questions just look like static text and don't show any cursor or color change like my other links?

    Thanks

  10. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd - It works perfectly for me.

    Could you try it here and let me know if it works: http://enhance.qd-creative.co.uk/JS-code.php (Just paste in the html & js and click "run your code")

    If not the I'll upload a working version for u to see.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh... Working now! ... Good!

    To make the questions act like links add this code:

    Code JavaScript:
    $('.question').each(function(){$(this).replaceWith('<a href="#">' + $(this).text() + '</a>') });

    You'll also have to return false now... Here is the modified script (with everything):

    Code JavaScript:
    $(function(){
        $('.question').each(function(){$(this).replaceWith('<a href="#">' + $(this).text() + '</a>') });
        $('.answer').hide(); // Hides answers on page load...
        $('.question').click(function(){
            $(this).next('.answer').toggle('slow');
            return false;
        });
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and by the way:

    This:
    Code JavaScript:
    $(function(){
       // stuff
    });

    Is the same as:
    Code JavaScript:
    $(document).ready(function(){
       // stuff
    });

    So.. you don't need both.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  13. #13
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WAIT A SEC....

    Don't use the earlier chunk because by replacing it with an anchor it gets rid of the class:

    Try this instead:

    Code JavaScript:
    $(function(){
        $('.question').each(function(){$(this).html('<a href="#">' + $(this).text() + '</a>') });
        $('.answer').hide(); // Hides answers on page load...
        $('.question').click(function(){
            $(this).next('.answer').toggle('slow');
            return false;
        });
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working Great Jimmy!

    I wish you was on-line yesterday been at this for hours...

    Ok a couple of questions:

    1. $(document).ready(function(){ ----- $(function(){ -- whats the difference?
    2. Why do the answers flash very quick as the page loads then hide?
    3. How can I get just the link to be active and not all the blank space to the right of the link?

    thanks

    Update:

    4. If javascript is switched off - how do I show the answers onload?

  15. #15
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    $(function(){}) is just shorthand code for $(document).ready(function(){}) - they both do exactly the same...

    The answers flash very quick because all of the page's DOM has to load before this line initiates:

    Code JavaScript:
    $('.answer').hide();

    Unfortunately there is no way to get around that other than setting the answers to display:none; within the CSS of the page - BUT this would mean that users without JS enabled would not see the answers at all...

    The entire area to the right of the link is clickable because the click event is attached to the paragraph (a block-level element) and not the anchor.

    To fix this we need to apply the click event to the anchor (within each iteration of the question paragraph'/s) and upon the click we need to traverse "upwards" to find the corresponding answer instead of just looking for a DOM sibling:

    New code:

    Code JavaScript:
    $(function(){
        $('.question').each(function(){
            $(this).html('<a href="#">' + $(this).text() + '</a>');
            $('a',this).click(function(){
                $(this).parent().next('.answer').toggle('slow');
                return false;
            });
        });
        $('.answer').hide(); // Hides answers on page load...
    });

    Hope it works!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  16. #16
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and you might want to move $('.answer').hide() to the top so that it runs first.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  17. #17
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working great again!

    Thanks for your time Jimmy and good explanations.

    Cheers!

    On another note if you have time/ if not just ignore this message.

    Just having a little problem trying to apply a link to my code on my goggle map, it's a couple of threads down from this on, the link below:

    http://www.sitepoint.com/forums/showthread.php?t=563077



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
  •