Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make div scalable using Jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 259
    Comment on it

    Hello Readers if you are designing the html UI and you want to make div resizable by mouse then you can use the code as below:-

    <!doctype html>  
    <html lang="en">  
       <head>  
    
          <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
          <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
          <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
      </head>        
       <body>  
          <!-- HTML -->   
          <div id="resizable" class="ui-div-content">   
             <h3 class="ui-div-header">This is dummy data. !!</h3>  
          </div>  
      </body>  
    </html>  
    

    Now the Jquery which will make it resizable, will go like this:-

          <script>  
             $(function() {  
                $( "#resizable" ).resizable();  
             });  
          </script>  
    

    Now last add some css to it:-

     <!-- CSS -->  
              <style>  
                 .ui-div-header {  
                    background:Red;  
                    border: 1px solid #ba56b6d;  
                    color: Green;  
                    font-weight: bold;  
                 }  
                 .ui-div-content {  
                    background: Green;  
                    border: 1px solid #ff456g;  
                    color: blue;  
                 }  
                 #resizable { width: 150px; height: 150px; padding: 0.5em;  
                    text-align: center; margin: 0; }  
              </style> 
    

    Now when you load this you well see the outer div have a boarder. When user will put the mouse on it, it will allow user to drag the boarder and scale as large as it got free space. Also when you resize the out div it will auto increase the matter inside it.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: