Results 1 to 15 of 16

Thread: [RESOLVED] Make A Div Slide up

Threaded View

  1. #1
    Join Date
    May 2012
    Hays, KS

    resolved [RESOLVED] Make A Div Slide up


    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:
      <div id="wrapper">
        <div class="icon" background="ICON/thumb.jpg">
          <div class="type">
            <h1>Title of Item</h1>
            <p>Details about this item.</p>
    #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
    $(document).ready(function() {
     $(this).stop().animate({"top" : "-60px"});
    }, function(){
     $(this).stop().animate({"top": "0"});
    Last edited by Tibneo; 02-27-2013 at 01: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