enlarge a div on button press

I want to be able to use javascript to make an absolutely positioned div go from 0px by 0px to width:388px; height:315px; within roughly half of a second. I could wrap this in an empty div and set it to these width and height values and use percentages with the width and height of the element inside to make it evenly resize within each time interval and eventually resize to 100% of the wrapper div. But how is this done in javascript? I have already tried to manually keep on increasing the width and height and it seems like this will work since I have the overflow set to hidden for the main div. I could also entertain a css transitions solution although I don't think that would be as reliable as js and it has to be for the on click event of the buttons above it in the outermost div called navButtons which is set to relative positioning to allow for absolute positioning of the child

#quoteForm
{
    z-index:2;
    position:absolute;
    top:34px;
    right:-2px;
    border-radius:7px;
    border:2px solid #deeffa;
    overflow:hidden;
    /*width:388px;
    height:315px;*/
    width:0px;
    height:0px;
    background-color:#152f56
}

#navButtons
{
    text-align:right;
    margin-bottom:5px;
    position:relative;
}

<div id="navButtons"><img src="images/quoteButton.jpg" alt="Get a Quote" /><img src="images/uploadButton.jpg" alt="Get a Quote" />
                <div id="quoteForm">
                    <div class="headingBg"><h1 style="text-align:left">Get a Quote</h1></div>
                    <div style="padding:10px;height:100%;background-color:#03b382;">
                        <iframe src="quoteForm.aspx" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
                    </div>
                </div>
            </div>

Open in new window

LVL 9
BobHavertyComhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

plusone3055Commented:
I would suggest using  
.slide Toggle  

http://api.jquery.com/slideToggle/

code and examples are included :)
0
GaryCommented:
So something like this
http://jsfiddle.net/fx2aA/1/

Don't know what it is you want clicking so I just added a button

$("button").click(function(){
    $('#quoteForm').animate({'width':'388px','height':'315px'}, 500, 'linear');
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Hi plusone, I don't know JQuery very well at all so the article confuses me a little, so you can you help me out a little more? If I wanted this div, which has nested elements including an IFrame, all set to 100% width and height, so that their width and height will hopefully readjust as needed, how can I make it go from 0 0 to the desired width and height by growing from the top right down to the bottom left of it's final size?

Thanks
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

BobHavertyComhAuthor Commented:
Hi Gary, your example looks like it might be simple and might work. I want this to grow from the top right to the bottom left, rather than from top to bottom. Is this really as simple as just adjusting the linear property to something else? If so, what? Also note all of the nested items I have within this div including an IFrame. Note all elements within have 100% width and height so that hopefully they will grow as needed. But it seems to me that since I have overflow set to hidden on the main div that maybe it will do the right thing and just readjust the main div itself without having the worry about the resizing of the elements within.
0
GaryCommented:
It already grows from top right to bottom left
As long as everything is 100% then they will grow as the div expands.
I actually removed the overflow because that prevents you seeing all the content - think you need to adjust your width/height so that there isn't any overflow

Also note this uses jquery - but all you have to do is add a reference to it in your code e.g.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
0
BobHavertyComhAuthor Commented:
OK, thanks Gary. I will try this. Where does this Jquery code go? The button is an image. Can I embed it inline right into the img tag for the button? I don't know JQuery yet.

So for example, would I do the following?

<img src="my image" "$("button").click(function(){
    $('#quoteForm').animate({'width':'388px','height':'315px'}, 500, 'linear');
})"/>
0
GaryCommented:
No.
Add the jquery framework into your HEAD tag - this line
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Add the following just before your closing BODY tag.
<script>
$(function() {
$(".showquote").click(function(){
    $('#quoteForm').animate({'width':'388px','height':'315px'}, 500, 'linear');
}) 
});
</script>

Open in new window

And for your image use this template
<img src="myimage.jpg" class="showquote">

The class of showquote is what I am using to identify the image in jQuery.
0
BobHavertyComhAuthor Commented:
Hi Gary, sorry if I seem dumb. But I thought I did what you said and the image itself disappears so it can't be clicked on. But this does means it's doing something, so I must be close.
Here's what I have

<head runat="server">
    <title></title>
    <link href="~/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Open in new window


<div id="navButtons"><a href="#"<img src="images/quoteButton.jpg" alt="Get a Quote" class="showquote" /></a><img src="images/uploadButton.jpg" alt="Upload a File" />
                <div id="quoteForm">
                    <div class="headingBg"><h1 style="text-align:left">Get a Quote</h1></div>
                    <div style="padding:10px;height:100%;background-color:#03b382;">
                        <iframe src="quoteForm.aspx" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
                    </div>
                </div>
            </div>

Open in new window


<script>
        $(function () {
            $(".showquote").click(function () {
                $('#quoteForm').animate({ 'width': '388px', 'height': '315px' }, 500, 'linear');
            })
        });
    </script>
</body>

Open in new window


#navButtons
{
    text-align:right;
    margin-bottom:5px;
    position:relative;
}

#navButtons img
{
    margin-left:5px;
    /*border: 1px solid #152f56;*/
    border-radius:7px;
   
}

#quoteForm
{
    z-index:2;
    position:absolute;
    top:34px;
    right:-2px;
    border-radius:7px;
    border:2px solid #deeffa;
    overflow:hidden;
    width:0px;
    height:0px;
    background-color:#152f56;
    display:none;
}
0
BobHavertyComhAuthor Commented:
Correction Gary, I did not close my <a href> tag around the image. Now the image shows up, but clicking on it does nothing.
0
GaryCommented:
Can you post your amended HTML
0
BobHavertyComhAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 200 points for GaryC123's comment #a39539737
Assisted answer: 100 points for plusone3055's comment #a39539722
Assisted answer: 200 points for GaryC123's comment #a39539856
Assisted answer: 0 points for BobHavertyComh's comment #a39539961

for the following reason:

Hi Gary, When I set my display to block for formQuote in my css, it works. Wow, this is really powerful stuff. I need to start learning this.

Had to split the points a little as paulone's solution probably would work, but I couldn't figure out the article he linked and you walked my through this. Thanks.
0
GaryCommented:
Remove display:none from the #quoteForm css. It has no height/width so isn't visible to start with anyway.
0
GaryCommented:
Don't accept your own comment as an answer, you just block the closing process.
0
BobHavertyComhAuthor Commented:
I thought I awarded points,

Hi Gary, When I set my display to block for formQuote in my css, it works. Wow, this is really powerful stuff. I need to start learning this.

Had to split the points a little as paulone's solution probably would work, but I couldn't figure out the article he linked and you walked my through this. Thanks.

Thanks again.
0
GaryCommented:
np
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.