CODEWITHSUNDEEP
jqueryhtmlcss
David Ryder
David Ryder

Reputation: 1311

Javascript - Changing border-width without moving surrounding elements.

I have the following HTML: 

<div style="float:left;">
  <h2>Hover:</h2><br />
  <div class="Size" id="160x600" style="margin:10px;float:left;height:600px; width:160px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center"> Text</div>
  </div>

  <div class="Size" id="336x280" style="margin:10px;float:left;height:280px; width:336px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center">Text</div>
  </div>

  <div class="clear">&nbsp;</div>

  <div class="Size" id="728x90" style="margin:10px;height:90px; width:728px;border:1px solid #90A4AF;text-align:center;position:relative">
    <div style="position:absolute;top:50%;text-align:center">Text</div>
  </div>

</div>

And the following JS that changes border size on hover: 

  $('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
  },
  function() {
    $(this).css('borderWidth', '1px');
  });

The problem is that it's moving elements around it by adding the border-width to the total width of the element. Any suggestions around this?

Upvotes: 10

Views: 13010

Answers (8)

Surreal Dreams
Surreal Dreams

Reputation: 26380

When I do this and I want that same +border -movement result, I like to do this:

function() { 
    $(this).css('borderWidth', '7px');
    $(this).css('margin', '-7px');
});

The negative margin brings everything back in.

You can also condense the styles into an object and pass them in one .css() call:

$(this).css( {borderWidth: '7px', margin: '-7px'} );

Upvotes: 23

Rimantas
Rimantas

Reputation: 1491

You can use "outline" instead of border is browser support is OK with you.

Upvotes: 3

Guffa
Guffa

Reputation: 700342

You can reduce the margin with the same amount that you widen the border.

If you specify a CSS class for the hover style, then you can just add and remove the class instead of adding inline style to the element. That way all the CSS is in the style sheet instead of scattered in the code, which makes it easier to maintain.

I rewrote the code to use a style sheet instead of all those inline styles:

CSS:

.Size { margin: 10px; border: 1px solid #90A4AF; text-align: center; position: relative; }
.Size.Small { float: left; height: 600px; width:160px; }
.Size.Medium { float: left; height: 280px; width: 336px; }
.Size.Large { height: 90px; width: 728px; }
.Size > div { position: absolute; top: 50%; text-align: center; }
.Size.Hover { margin: 6px; border-width: 5px; }

HTML:

<div style="float:left;">
  <h2>Hover:</h2>
  <br />
  <div class="Size Small" id="160x600">
    <div> Text</div>
  </div>

  <div class="Size Medium" id="336x280">
    <div>Text</div>
  </div>

  <div class="clear">&nbsp;</div>

  <div class="Size Large" id="728x90">
    <div>Text</div>
  </div>

</div>

Javascript:

$('.Size').hover(
  function() {
    $(this).addClass('Hover');
  },
  function() {
    $(this).removeClass('Hover');
  }
);

Note: An id should not start with a digit, like for example 160x600.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Decrease the width by two times the border increase ..

 $('.Size').hover(
  function() {
      var width = parseInt($(this).css('width'));
      $(this).css('borderWidth', '5px').css({width:width-8});
  },
  function() {
      var width = parseInt($(this).css('width'));
    $(this).css('borderWidth', '1px').css({width:width+8});
  })

have a look at http://jsfiddle.net/rBrZL/

Upvotes: 0

PleaseStand
PleaseStand

Reputation: 32082

Change the width and height of the element by twice the amount of the border-width change (live demo):

$('.Size').hover(
  function() {
    $(this).css('borderWidth', '5px');
    $(this).css('width', parseFloat($(this).css('width')) - 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) - 8 + 'px');
  },
  function() {
    $(this).css('borderWidth', '1px');
    $(this).css('width', parseFloat($(this).css('width')) + 8 + 'px');
    $(this).css('height', parseFloat($(this).css('height')) + 8 + 'px');
  });

Note: This will only work if the border-width, width, and height use the same unit of length. If using a unit other than 'px', change that accordingly.

Upvotes: 3

Thorbear
Thorbear

Reputation: 2333

decrease the margin with the same amount of pixels you increase the border width with

Upvotes: 0

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

You could add to the padding if you subtract from the border and vice versa.

Upvotes: 2

dionyziz
dionyziz

Reputation: 2452

Yes, add a position: relative; left: -5px; to position it correctly.

Upvotes: 0

Related Questions