www.webdeveloper.com
Results 1 to 2 of 2

Thread: Resize Div on Mouseover

  1. #1
    Join Date
    Nov 2011
    Posts
    6

    Smile Resize Div on Mouseover

    Hi All,

    I have a "footer" and "footer content". I'd like to hide the "footer content" and show it when the user mouses over the "footer". Or I could shrink the footer content on mouseout and grow it on mouseover. Which do you think would be better? And is it better to use JQuery (or jQuery UI) for this sort of thing? And if so, does anyone know of a plugin that will do the trick? I'd like to animate the thing with some smooth easing, too.

    As a side note (important or not?), I am constructing a "one page" website with a fixed footer and header.

    Here is the link to the page I am working on http://galileedetroit.org/index2.php. And my HTML and CSS are below:

    Code:
    <footer id="pageFooter">
    <div id="pageFooterContent">
    </div>
    </footer>
    Code:
    #pageFooter {
    	width: 100%;
    	background-color: #666;
        position: fixed;
    	bottom: 0;
        /*height: 60px !important;*/
        z-index:100;
    }
    I created a 25 pixel margin above the footer content to use as a trigger area that will "hide/show" or "shrink/grow" the footer content on mouseover.

    Code:
    #pageFooterContent {
    	width: 1000px;
    	height: 250px;
    	margin: 25px auto 0;
    	background-color: #FFF;
    }
    Thanks so much!

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    i would recommend using Jquery animate as it supports easing and is easy to implement. consult their documentation

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