If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[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>

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.

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.

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.

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.

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:

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.

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.

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:

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.

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.