javascript - Jquery Animate a div to 100% height and width

I am triying to design a Calendar in HTML5 and Jquery. My Code is

HTML

<body>
        <div id="PageContainer">
            <div id="Calendar">
                <div id="MonthBar">February 2014</div>
                <div class="DayHeadding">Monday</div>
                <div class="DayHeadding">Tuesday</div>
                <div class="DayHeadding">Wednesday</div>
                <div class="DayHeadding">Thursday</div>
                <div class="DayHeadding">Friday</div>
                <div class="DayHeadding">Saturday</div>
                <div class="DayHeadding">Sunday</div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay">1</div>
                <div class="MonthDay">2</div>
                <div class="MonthDay">3</div>
                <div class="MonthDay">4</div>
                <div class="MonthDay">5</div>
                <div class="MonthDay">6</div>
                <div class="MonthDay">7</div>
                <div class="MonthDay">8</div>
                <div class="MonthDay ToDay">9</div>
                <div class="MonthDay">10</div>
                <div class="MonthDay">11</div>
                <div class="MonthDay">12</div>
                <div class="MonthDay">13</div>
                <div class="MonthDay">14</div>
                <div class="MonthDay">15</div>
                <div class="MonthDay">16</div>
                <div class="MonthDay">17</div>
                <div class="MonthDay">18</div>
                <div class="MonthDay">19</div>
                <div class="MonthDay">20</div>
                <div class="MonthDay">21</div>
                <div class="MonthDay">22</div>
                <div class="MonthDay">23</div>
                <div class="MonthDay">24</div>
                <div class="MonthDay">25</div>
                <div class="MonthDay">26</div>
                <div class="MonthDay">27</div>
                <div class="MonthDay">28</div>
                <div class="MonthDay NoMonthDay"></div>
            </div>
        </div>
    </body>

CSS

html, body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
}
body{
    min-height: 100%;
}
#PageContainer{
    width: 100%;
    height: 100%;
    float: left;
}
#Calendar {
    width: 100%;
    height: 100%;
    float: left;
    /*display: table;*/
}
#MonthBar{
    float: left;
    width: 100%;
    height: 10%;
    color: #ffffff;
    background-color: #c0392b;
    text-align: center;
}

.DayHeadding, .MonthDay{
    float: left;
    width: 14%;
    color: #ffffff;
    background-color: #d35400;
    text-align: center;
    border-left: 1px dotted #FFFFFF;
    border-top: 1px dotted #FFFFFF;
    position: relative;
    display: table-cell;
}
.DayHeadding{
    background-color: #e74c3c;
    height: 5%;
}
.MonthDay{
    height: 16%;
    cursor: pointer;
}
.NoMonthDay{
    background-color: #e67e22;
}
.ToDay{
    background-color: #f39c12;
}

and Jquery

$(document).ready(function() {
    $(".MonthDay").click(function(evt) {
        // Animate this div to 100% width and 100% height to cover the whole screen and hide every thing
    });
});

When Click on any .MonthDay div a want to maximize it to full screen with a nice animation, just to expend it in four directions and take the whole screen.

Push every thing out of the screen in corresponding direction OR
Expend the div over other content

How I can do it? please help me.

I am triying to design a Calendar in HTML5 and Jquery. My Code is

HTML

<body>
        <div id="PageContainer">
            <div id="Calendar">
                <div id="MonthBar">February 2014</div>
                <div class="DayHeadding">Monday</div>
                <div class="DayHeadding">Tuesday</div>
                <div class="DayHeadding">Wednesday</div>
                <div class="DayHeadding">Thursday</div>
                <div class="DayHeadding">Friday</div>
                <div class="DayHeadding">Saturday</div>
                <div class="DayHeadding">Sunday</div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay NoMonthDay"></div>
                <div class="MonthDay">1</div>
                <div class="MonthDay">2</div>
                <div class="MonthDay">3</div>
                <div class="MonthDay">4</div>
                <div class="MonthDay">5</div>
                <div class="MonthDay">6</div>
                <div class="MonthDay">7</div>
                <div class="MonthDay">8</div>
                <div class="MonthDay ToDay">9</div>
                <div class="MonthDay">10</div>
                <div class="MonthDay">11</div>
                <div class="MonthDay">12</div>
                <div class="MonthDay">13</div>
                <div class="MonthDay">14</div>
                <div class="MonthDay">15</div>
                <div class="MonthDay">16</div>
                <div class="MonthDay">17</div>
                <div class="MonthDay">18</div>
                <div class="MonthDay">19</div>
                <div class="MonthDay">20</div>
                <div class="MonthDay">21</div>
                <div class="MonthDay">22</div>
                <div class="MonthDay">23</div>
                <div class="MonthDay">24</div>
                <div class="MonthDay">25</div>
                <div class="MonthDay">26</div>
                <div class="MonthDay">27</div>
                <div class="MonthDay">28</div>
                <div class="MonthDay NoMonthDay"></div>
            </div>
        </div>
    </body>

CSS

html, body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
}
body{
    min-height: 100%;
}
#PageContainer{
    width: 100%;
    height: 100%;
    float: left;
}
#Calendar {
    width: 100%;
    height: 100%;
    float: left;
    /*display: table;*/
}
#MonthBar{
    float: left;
    width: 100%;
    height: 10%;
    color: #ffffff;
    background-color: #c0392b;
    text-align: center;
}

.DayHeadding, .MonthDay{
    float: left;
    width: 14%;
    color: #ffffff;
    background-color: #d35400;
    text-align: center;
    border-left: 1px dotted #FFFFFF;
    border-top: 1px dotted #FFFFFF;
    position: relative;
    display: table-cell;
}
.DayHeadding{
    background-color: #e74c3c;
    height: 5%;
}
.MonthDay{
    height: 16%;
    cursor: pointer;
}
.NoMonthDay{
    background-color: #e67e22;
}
.ToDay{
    background-color: #f39c12;
}

and Jquery

$(document).ready(function() {
    $(".MonthDay").click(function(evt) {
        // Animate this div to 100% width and 100% height to cover the whole screen and hide every thing
    });
});

When Click on any .MonthDay div a want to maximize it to full screen with a nice animation, just to expend it in four directions and take the whole screen.

Push every thing out of the screen in corresponding direction OR
Expend the div over other content

How I can do it? please help me.

Share Improve this question asked Feb 9, 2014 at 10:51 Kalim 3472 gold badges7 silver badges17 bronze badges

try playing with position:fixed and top and bottom properties or flexbox. – blessanm86 Commented Feb 9, 2014 at 10:55
What do you want to do with the full screen box? Are you really sure you want to expand the cell? Or are you maybe looking into opening a screen sized box with information about the day? – Fabricio Commented Feb 9, 2014 at 11:08

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

Here's a simple jQuery animation that will do the trick.

$('.MonthDay').on('click', function(e) {
    $(e.target).animate({width: '100%', height: 500}, 500);
});

height: 100% does not work in the same way as width: 100% so you can either set a fixed height as in my example above, or you can cache some parent element's height and use that.

Here's a fiddle: http://jsfiddle/BQsQD/

Try this. CSS "only" solution, you just have to add and remove a CSS class.

.MonthDay.fullSize{
   position: absolute;
   top: 10%;
   left: 0;
    z-index: 2;
   height: 100% !important;
   width: 100% !important;
   transition: all 1s;
}

And JavaScript side :

$(".MonthDay").click(function(evt) {
        $(this).addClass('fullSize');
});

You may use a plugin to create a popup the size of the screen and populate it with whatever info you wish.

Here I used a jquery UI dialog to show the popup (not full screen though) but you could use any other plugin.

$(".MonthDay").click(function(evt) {
    $("#dialog").text("Clicked on " + $(this).text());
    $("#dialog").dialog();
});

Fiddle

add the following class to your css

.full {
    height:100% !important;
    width:100% !important;
}

and then use the following jquery

$(document).ready(function () {
    $(".MonthDay").click(function (evt) {
        $(this).toggleClass("full");
    });
});

This would resize to 100% when clicked and back to normal size when clicked again

see demo on http://jsfiddle/QZHFR/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery Animate a div to 100% height and width - Stack Overflow

4 Answers 4

Fiddle

与本文相关的文章

评论列表(0)