www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: [RESOLVED] Make A Div Slide up

Hybrid 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 01:09 PM.

  2. #2
    Join Date
    Feb 2013
    Posts
    46

  3. #3
    Join Date
    Feb 2013
    Posts
    46
    http://jsfiddle.net/9XBhU/2/ is more versatile.. using no fixed numbers for css is better for reusable code.

  4. #4
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    i'm not sure why, but it's still not working right. when i published it, it came out like this.

  5. #5
    Join Date
    Feb 2013
    Posts
    46
    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.

  6. #6
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    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.
    Last edited by Tibneo; 02-27-2013 at 03:05 PM.

  7. #7
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    Quote Originally Posted by s-p-n View Post
    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.

  8. #8
    Join Date
    Feb 2013
    Posts
    46
    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.

  9. #9
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    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>
    Last edited by Tibneo; 02-27-2013 at 04:02 PM.

  10. #10
    Join Date
    Jun 2013
    Posts
    1
    Quote Originally Posted by s-p-n View Post
    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.
    This is spectacular, and thank you. I am trying to modify it so that when hovering over .icon INSTEAD of .type the normal margin animation takes place on .type. So, I'm looking for the same exact animation, but fired upon hover of .icon. I've tried swapping out .type for .icon and 'this' every way I can, and I just can't figure out the magic combination. Any help is totally appreciated. Thanks again.

  11. #11
    Join Date
    Feb 2013
    Posts
    46
    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.

  12. #12
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    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.

  13. #13
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    Quote Originally Posted by s-p-n View Post
    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.

  14. #14
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    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.

  15. #15
    Join Date
    Feb 2013
    Posts
    46
    u dont want to copy and paste, but you have a lot to learn yet so what you have is fine for now..

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