SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show text with the jQuery slideToggle function

    I work on a website and the client wants jQuery on the menu. When a user clicks on "webdesign" link menu a shadow goes down with some text on it(you can try it).
    Right now when I click on that webdesign menu link, the other one "ipone apps" goes down too, but the owner doesn't like this. He likes that shadow, but he doesn't want to see that other menu link to be moved when he clicks on other menu link.

    This is the jQuery that I used:

    Code JavaScript:
    //when the DOM is ready 
    $(document).ready(function() {
      //store in a variable the second paragraph
      var $set1 = $('.menu-item');
      //use hide() method to hide it
      $set1.hide();
     
     
      //when you click on more link
      $('a.more1').click(function() {
    	//show the second paragraph
    	//using slideToogle() method
    	//slow=6sec normal=4sec fast=2sec
        $set1.slideToggle('slow');
     
      //keep the link from activating 
      //its default action
      return false;
     
      });
     
    });

    Can someone give a hand with this?

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,039
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    The solution is not in the JavaScript but in the CSS.
    The ipod apps link has a position relative to the webdesign link. Therefore if the webdesign link gets bigger the ipod apps link goes down.

    My solution would be to give #wrapper position relative, and then give all (or at least the bottom two) buttons position absolute. That way they're not influencing each other.

    PS. I'd also put outline:none on the <a> tags. I get a dotted border around a button when I click it, doesn't look verry pretty
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    The solution is not in the JavaScript but in the CSS.
    The ipod apps link has a position relative to the webdesign link. Therefore if the webdesign link gets bigger the ipod apps link goes down.

    My solution would be to give #wrapper position relative, and then give all (or at least the bottom two) buttons position absolute. That way they're not influencing each other.

    PS. I'd also put outline:none on the <a> tags. I get a dotted border around a button when I click it, doesn't look verry pretty
    Thank you for the outline .
    I put position absolute for iphone apps image but I got the same problem.

  4. #4
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My mistake ScallioXTX. Now works with position absolute. Thank you.


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
  •