CODEWITHSUNDEEP
jqueryhtmlcss
Omar Abid
Omar Abid

Reputation: 15976

How to re-size a box with CSS or Javascript

I found by browsing some pages source code that they resize a box using either CSS or Jquery. The code and files are very long so I thought if someone knows how to do this.

What's it?

On images files, I find a box (designed with an editor), this box has a size of xxx X yyy. A way to use it on a division, is to use it as a background and then your division have the same look as this box, however it can't scale in size.

it seems that there's a solution to dynamically (most likely with JS) resize this box (may be by cropping the top, bottom, left and right) and then resizing it.

Does anyone have an idea about this or a simple example/tutorial??

Upvotes: 0

Views: 1554

Answers (2)

deau
deau

Reputation: 1223

The most basic way to resize an element is to change it's height property using a script.

element.height = pixels;

You find the element through the Document Object Model (DOM) which is just an abstraction of a document's markup into objects for something like jscript, sometimes called javascript. An example on how to do this is given within the w3schools jscript tutorial:

<html>
  <head>
    <script type="text/javascript">
      function changeSize() {
        document.getElementById("compman").height="250"
        document.getElementById("compman").width="300"
      }
    </script>
  </head>
  <body>

    <img id="compman" src="compman.gif" width="107" height="98" />
    <br /><br />
    <input type="button" onclick="changeSize()" value="Change size of image">

  </body>
</html>

If you want to do fancy transitions and animations then all you need is a bit of DOM and jscript knowledge and you can write your own. To get such fancies working smoothly on different browsers, however, you must first spend six months in a small cellar and a text editor without sunlight, food, water or soap.

Most people choose to use someone else's sweat and use a library like jQuery instead. Once you have figured out how to change somethings height in plain jscript the jQuery documentation will make a lot more sense to you. jQuery isn't your only option either. There are loads of feature rich libraries. If it's just fancy doo-dah's your looking for, scriptaculous might take your fancy.

Here's a function i once used to resize (or Morph in scriptaculous-speak) an element with the id attribute set to 'page-header':

//used to control position/animation of the page header
var POS_UP = 1;
var POS_DOWN = 2;
var POS_DURATION = 1.0;
var POS_HEIGHT = {POS_UP:"180px;", POS_DOWN:"400px;"};

//the header effect can be referred to;
header_effect = null;

//header position is used as an index for POS_HEIGHT
var header_position = POS_UP;

/**************************************
*    headerScroll()                   *
*    Morphs the header's size         *
**************************************/
  function headerScroll() {
    header_position = (POS_UP+POS_DOWN) - header_position;
    header_effect = new Effect.Morph('page-header', {style: 'height:'+POS_HEIGHT[header_position], duration: POS_DURATION  });

  }

This resizes the element in a very smooth transition, allowing my <div id="page-header"> to expand and reveal hidden content. All you'd need to toggle up/down would be a <a onclick="headerScroll();">Toggle Up/Down</a> and we're away.

There's so much you can do very easily once you get started. Either way, it would be best to spend some time learning jscript and the basics of the HTML DOM before plunging in.

Upvotes: 1

thatryan
thatryan

Reputation: 1559

jQuery has a pretty rad UI, not sure if this is what you mean, but check out their easy demo here,

jQuery Resizeable

Upvotes: 1

Related Questions