SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot 8Observer8's Avatar
    Join Date
    Jul 2013
    Location
    Russia
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to increase the height of the div?

    Hi

    I want to set the height of the div to 1000px. But I cannot.

    27.png

    index.html
    Code:
    <!--
    To change this template, choose Tools | Templates
    and open the template in the editor.
    -->
    <!DOCTYPE html>
    <html>
        <head>
            <title>Magic</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="js/libs/jqueryui-1.10.0/jquery-ui.min.js"></script>
            <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
            <script type="text/javascript" src="js/script.js"></script>
        </head>
        <body>
            <div id="red">Home</div>
            <div id="blue">Projects</div>
            <div id="yellow">About Me</div>
            <div id="green">Contact</div>
        </body>
    </html>
    css/stylesheet.css
    Code:
    div {
        height: 50px;
        width:100px;
        display: inline-block;
    }
    
    #red {
        background-color:#FF0000;
    }
    
    #blue {
        background-color:#0000FF;
    }
    
    #yellow {
        background-color:#E2BE22;
    }
    
    #green {
        background-color:#008800;
    }
    js/script.js
    Code:
    $(document).ready(function() {
        $('div').mouseenter(function() {
            $(this).animate({
                height: '+=1000px'
            });
        });
        $('div').mouseleave(function() {
            $(this).animate({
                height: '-=1000px'
            });
        });
        $('div').click(function() {
            $(this).toggle(1000);
        });
    });

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Your code seems to work fine for me, so perhaps the paths to your scripts are faulty. Here is a better way to present your code samples (the code below is your own code, and it works fine):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    div {
        height: 50px;
        width:100px;
        display: inline-block;
    }
    
    #red {
        background-color:#FF0000;
    }
    
    #blue {
        background-color:#0000FF;
    }
    
    #yellow {
        background-color:#E2BE22;
    }
    
    #green {
        background-color:#008800;
    }
    
    </style>
    	
    </head>
    <body>
    
    <div id="red">Home</div>
    <div id="blue">Projects</div>
    <div id="yellow">About Me</div>
    <div id="green">Contact</div>
    
    </body>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    
    $(document).ready(function() {
        $('div').mouseenter(function() {
            $(this).animate({
                height: '+=1000px'
            });
        });
        $('div').mouseleave(function() {
            $(this).animate({
                height: '-=1000px'
            });
        });
        $('div').click(function() {
            $(this).toggle(1000);
        });
    });
    
    </script
    </html>
    In future, use the templates shown in this thread for posting code:

    http://www.sitepoint.com/forums/show...Posting-Basics

  3. #3
    SitePoint Zealot 8Observer8's Avatar
    Join Date
    Jul 2013
    Location
    Russia
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's work. I read. Thank you very much! It's very useful!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •