www.webdeveloper.com
Results 1 to 15 of 16

Thread: [RESOLVED] Make A Div Slide up

Threaded View

  1. #1
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24

    resolved [RESOLVED] Make A Div Slide up

    MAKE A DIV SLIDE UP ON HOVER

    Hi everyone! I'm remodeling my portfolio page (again) and I wanted to know how I could make a div SLIDE up, (I'm not worried about animation effects right now) while inside another div. I'll explain what's what.


    Okay, I have a div that has the class, ie., '.icon'. Inide, I have a div '.type' set for type and a margin set at 110 px on top. And each .icon div has its own background. I want to be able to hover over the div (class=.type) and make it move upwards (50 px). obviously, .icon has overflow=hidden, so it will look like a tab. here's what im working with.


    HTML Code:
    <html>
    <head>
    <title>Portfolio</title>
    </head>
    <body>
      <div id="wrapper">
        <div class="icon" background="ICON/thumb.jpg">
          <div class="type">
            <h1>Title of Item</h1>
            <p>Details about this item.</p>
          </div>
        </div>
      </div>
    CSS
    Code:
    #wrapper {
    	height: 1100px;
    	width: auto;
    	text-indent: 0px;
    	text-align: center;
    	margin-right: 1in;
    	margin-left: 1in;
    }
    #wrapper h1 {
    	font-size: 16px;
    	font-family: Helvetica, Verdana;
    	font-weight: normal;
    	text-indent: 5px;
    	text-align: right;
    	margin: 0px;
    	padding: 0px;
    }
    .type p {
    	text-indent: 0px;
    	font-size: 12px;
    	margin-top: 5px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	text-align: justify;
    }
    .type {
    	background-image: url(portfolio/typebg.jpg);
    	padding: 8px;
    	height: auto;
    	text-align: left;
    	margin-top: 110px;
    	background-repeat: repeat-x;
    	background-position: center;
    	border-top-width: 3px;
    	border-top-style: ridge;
    	border-top-color: #900;
    }
    
    .icon {
    	float: left;
    	width: 191px;
    	margin: 8px;
    	text-indent: 0px;
    	height: 140px;
    	overflow: hidden;
    	padding-bottom: 0px;
    	border: 3px outset #900;
    }
    and finally jQuery
    Code:
    $(document).ready(function() {
    $(".type").hover(function(){
     $(this).stop().animate({"top" : "-60px"});
    }, function(){
     $(this).stop().animate({"top": "0"});
    });
    });
    Last edited by Tibneo; 02-27-2013 at 12:09 PM.

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles