[RESOLVED] Make A Div Slide up

**Tibneo** · 02-27-2013 11:54 AM

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"});
});
});

**s-p-n** · 02-27-2013 01:03 PM

http://jsfiddle.net/9XBhU/

**s-p-n** · 02-27-2013 01:11 PM

http://jsfiddle.net/9XBhU/2/ is more versatile.. using no fixed numbers for css is better for reusable code.

**Tibneo** · 02-27-2013 01:46 PM

i'm not sure why, but it's still not working right. when i published it, it came out like this.

**s-p-n** · 02-27-2013 01:53 PM

Put your javascript in the <body> tags... Except for the Dreamweaver ones..
How to normally format an HTML document:

Code:

<!doctype..>
<html>
<head>
  <title>..
  <meta>..
  <style>..
  <!--[if IE...
</head>
<body>
..<div><span><h1...>
  <script..
  <script..
 </body>
</html>

JavaScript is at the bottom inside of the body so that the DOM is visible. In my code, I use the DOM to attach events to elements in the <body> of the document. The only way to do that is to execute the code after that element exists in the DOM. Executing JS in the head section of the DOM before the body is loaded will cause common DOM operations to fail- as the elements they are looking for do not exist.

**Tibneo** · 02-27-2013 02:00 PM

that helps the code a lot!! thanks! now i'm having trouble enabling backgrounds on my divs (Particularly the ones with class id="icons","rainskin", etc). they show up in preview in dreamweaver, but not when it's live.

**Tibneo** · 02-27-2013 02:02 PM

Originally Posted by s-p-n

Put your javascript in the <body> tags... Except for the Dreamweaver ones..
How to normally format an HTML document:

Code:

<!doctype..>
<html>
<head>
  <title>..
  <meta>..
  <style>..
  <!--[if IE...
</head>
<body>
..<div><span><h1...>
  <script..
  <script..
 </body>
</html>

JavaScript is at the bottom inside of the body so that the DOM is visible. In my code, I use the DOM to attach events to elements in the <body> of the document. The only way to do that is to execute the code after that element exists in the DOM. Executing JS in the head section of the DOM before the body is loaded will cause common DOM operations to fail- as the elements they are looking for do not exist.

and if i have multiple divs with the same class, how would i make it so that when i hover over ONE div that has class="type", only that ONE raises up. I have something like 19 different divs with the class="type". thanks again.

**s-p-n** · 02-27-2013 02:28 PM

http://jsfiddle.net/9XBhU/5/ - better?

I only had to change '.type' to 'this' but.. I also made each item independent of eachother's sizes. Just in case since you are probably going to need that feature next.

**Tibneo** · 02-27-2013 02:31 PM

okay now its simpler. but when i hover, it goes up, but when my mouse leaves the div, it goes UP rather than DOWN.

actually ive figured this out. i added this to my code

.type {
margin-bottom: 0px;
}

im still having an issue with my backgrounds on class divs. i want a background on all divs with .icon, .rainskin, .schoolproject, .wallpaper, and .miscellaneous. each (19) item will have its own background. i have it looking like this. thanks again.

HTML Code:

<div class="icon" background="buttons/thumb.jpg">
<div class="type">
<h1>Buttons by Tibneo</h1>
<p>details about buttons</p>
</div>
</div>

**s-p-n** · 02-27-2013 07:07 PM

don't use inline style in html.. use javascript and css for repetitive things like this, for example, give them all a class of 'thumb', and use jQuery to go through each one and implant a url style on the background:

Code:

var bg = ['url1.png', 'url2.png', 'url3.jpeg', 'url4.gif'];
var path = '/images/thumbnails/';
$('.thumb').each(function (i) {
    $(this).css('background', 'url(' + path + bg[i] + ')');
});

Simply code the images in the list in the same order they should appear in html, and you're good to go.

Maintaining this code is much easier than a bunch of html- especial with something as simple as changing the directory the images are stored in- or moving this feature to a subdirectory page in a site- where the images are relatively somewhere else, or adding a few images.. etc etc.

**Tibneo** · 02-27-2013 09:14 PM

Do I apply the class=".thumb" to all of my divs with backgrounds? (the ones i want backgrounds on) i already have classes for them such as ".icon", ".rainskin", ".schoolproject", ".wallpaper", and ".miscellaneous" .... please clarify. thanks.

**Tibneo** · 02-27-2013 10:06 PM

Originally Posted by s-p-n

don't use inline style in html.. use javascript and css for repetitive things like this, for example, give them all a class of 'thumb', and use jQuery to go through each one and implant a url style on the background:

Code:

var bg = ['url1.png', 'url2.png', 'url3.jpeg', 'url4.gif'];
var path = '/images/thumbnails/';
$('.thumb').each(function (i) {
    $(this).css('background', 'url(' + path + bg[i] + ')');
});

Simply code the images in the list in the same order they should appear in html, and you're good to go.

Maintaining this code is much easier than a bunch of html- especial with something as simple as changing the directory the images are stored in- or moving this feature to a subdirectory page in a site- where the images are relatively somewhere else, or adding a few images.. etc etc.

actually i duplicated this script so i had one for each separate div. one that included the thumbs for class="icon" divs, one fore class="rainskin" divs, etc... i have 5. let me know if i can compact it in any way.

**Tibneo** · 02-27-2013 10:43 PM

now for hover effects, i want to add hover effects that when i hover over a main div, i want the h1 text color to change, not the entire div's text color. and i'd also like to add possibly a brighten effect of any sort on hover.

**s-p-n** · 02-28-2013 10:18 AM

u dont want to copy and paste, but you have a lot to learn yet so what you have is fine for now..

**Tibneo** · 02-28-2013 01:44 PM

alright thanks for all your help! glad someone came on here and knows how to explain things well. thanks again!

Thread: [RESOLVED] Make A Div Slide up

Thread Tools

Display

[RESOLVED] Make A Div Slide up

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions