Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change width of website content with toggle option.

    Hi Coders,

    I was wondering if anyone knows how you would create a link when clicked will change the width of the content.

    I have a feeling this will use jQuery?

    E.g.

    A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'.

    When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand'

    Thanks in advance!
    Haydn.

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    You can do this in straight JS, but jQuery would be the easy way to go.

    Most document elements have a CSS width property, correct? So the toggle function just needs to alter this width property, or better yet, change the className of the element that has a different with.

    Example document fragment:
    Code:
    <head>
     <style type="text/css">
       div#container{border: 1px solid red;}
       .fullSize{width: 1000px;}
       .shrinkMe{width: 800px;}
     </style>
    </head>
    <body>
     <div id="container" class="fullSize">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
     </div>
     
     <script type="text/javascript">
      document.getElementById("container").onclick= function(clkEvt){
        this.className= (this.className.match('fullSize')) ? 'shrinkMe' : 'fullSize';
      };
     </script>
    </body>
    All that is happening here, I'm using some basic logic to determine what the className of the div element with the id "container" is, and I change it on-the-fly using the onclick handler. Note the ternary operator there that performs the assignment is the same as doing
    Code:
    if ( this.className.match("fullSize") ) {
      this.className= "shrinkMe";
    } else {
      this.className = "fullSize";
    }
    ..but in a more succinct way.

    Take this and play around with it. If you want to assign that task to a button or anchor tag you can do that, just be mindful that the 'this' inside the event handler is the current object, i.e. the button or anchor or whatever, and you still need to reassign the target element className.


    jQuery can easily do this with the toggle and css methods.
    Last edited by bdl; 01-30-2010 at 06:58 PM.

  • Users who have thanked bdl for this post:

    Reachout2010 (01-31-2010)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, that's great! - Is there any chance this could be animated with jQuery?

  • #4
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Sure. Just take the basic premise I've shown here and add some animation or effect.

    jQuery API : animate


  •  

    Tags for this Thread

    Posting Permissions

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