www.webdeveloper.com
Results 1 to 2 of 2

Thread: Keep size of div area on toggle

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Keep size of div area on toggle

    I have the following code. Functionally, it's working great, but when you toggle between button 1 and button 2 and the div slides into position, the size of the div collapses. I'd like to make it so that the page doesn't resize when toggling back and forth. I'm figuring this is an easy fix, but I can't seem to get it right. Code is below. Any help is much appreciated. Thank you in advance!

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>
    $(function () {
        $("[name=toggler]").click(function () {
            $('.toHide').hide();
            $("#blk-" + $(this).val()).show('slide');
        });
    });
    </script>
    HTML Code:
    <label>
        <input id="rdb1" type="button" name="toggler" value="1" />
    </label>
    <label>
        <input id="rdb2" type="button" name="toggler" value="2" />
    </label>
    
    
    <div id="blk-0" class="toHide">
    <div class="center-form-img" >
    <img src="{{media url="wysiwyg/form-inactive.jpg"}}" alt="" />
    </div>
    </div>
    <div id="blk-1" class="toHide" style="display:none"> {{block type=core/template name=ContactUs template=cmg/ContactUs1.phtml}}</div>
    <div id="blk-2" class="toHide" style="display:none">{{block type=core/template name=ContactUs template=cmg/ContactUs2.phtml}}</div>

  2. #2
    Join Date
    Mar 2009
    Posts
    523
    Incorporate something along these lines when the button is clicked:


    Code:
    //assume the variable 'div' is the reference to the div in question
    
    div.style.height = div.offsetHeight + 'px';
    div.style.width = div.offsetWidth + 'px';

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles