Add pixels to existing CSS element with Javascript

Question

here is my trouble.

I'm using a plugin for a lightbox. For some reason, one of the divs is 28px too short. I've looked all over for a solution for this, but nobody seems to be having the same problem.

The solution I've come up with is to find that element (which I have) and create a javascript snippet that will add "28" to the existing number. The height and width is being calculated directly on the div, not in an element in a stylesheet.

Example:

<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; position: absolute; width: 892px; height: 602px; top: 2234px; left: 500px;">

I want the Javascript code to add 28 pixels to the width and 55px to the height.

How would I go about doing this?

I would like to say that I'm not looking for just an answer; if you could explain it to me, that would be great. Thanks so much, guys!

Edit: this is how I called the JQuery

Also, this is where you can see the page with the gallery: http://olsencustomhomes.com.previewdns.com/designs/verona-2/#gallery

EDIT FOR KRIS:

Is this the right code? It's in my header

<script>



 $(document).ready(function() {
        function changeSize(){
          var colorbox   = $("#colorbox");
          var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
          var initHeight = $("#colorbox").outerHeight(); // get colorbox height


          var newWidth   = 28; // set your desired width
          var newHeight  = 55; // set your desired height
          var height     = initHeight + newHeight; // add heights together
          var width      = initWidth + newWidth;   // add widths together


          colorbox.css({"height" : height, "width": width});

      }

      $(document).ajaxStop(function() {
         changeSize();
      });
  });

</script>

Would increasing padding-bottom of the div resolve your problem? — Vikram Deshmukh
– Vikram Deshmukh, Commented Jul 25, 2014 at 15:00
$(".selector") should be whatever your selector is. I am not sure where in your code you call colorbox.. but the call back should be added there — khollenbeck
– khollenbeck, Commented Jul 25, 2014 at 16:16
Also you have function changeSize() twice.. nested inside of itself. — khollenbeck
– khollenbeck, Commented Jul 25, 2014 at 16:17
To be honest, I have no idea where colorbox is called. I'm adding onto a wordpress plugin called "WP Simple Galleries". To clarify: I'm not changing the plugin code. I'm just adding this to my header. — Tara
– Tara, Commented Jul 25, 2014 at 16:22

Mike Bell · Accepted Answer · 2014-07-25 15:05:12Z

2

Pretty straightforward application of jQuery, but I commented it up for you anyway:

//select the box element using jQuery
var box = $('#colorbox');

//get the current width and height
var curWidth = box.width();
var curHeight = box.height();

//set the width and height with modified values
box.width(curWidth + 28);
box.height(curHeight + 55);

fiddle: http://jsfiddle.net/579s2/

answered Jul 25, 2014 at 15:05

Mike Bell

1,39611 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tara Over a year ago

Mike, that script looks like it would work (and it definitely does in the fiddle), but its not working on my website. I did call the jquery correctly, right? (please see edited original post for more details)

khollenbeck · Accepted Answer · 2014-07-25 16:21:38Z

1

If you want to add height and width dynamically. Something like this should work:

function changeSize(){
    var colorbox   = $("#colorbox");
    var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
    var initHeight = $("#colorbox").outerHeight(); // get colorbox height


    var newWidth   = 28; // set your desired width
    var newHeight  = 55; // set your desired height
    var height     = initHeight + newHeight; // add heights together
    var width      = initWidth + newWidth;   // add widths together


    colorbox.css({"height" : height, "width": width});

}changeSize();

Also if you want to insure your code is happens after the colorbox opens you could use .ajaxStop(); Also note, outerWidht() and outerHeight() will get colorbox width plus the padding and borders.

To fire function after ajax events are finished:

$(document).ajaxStop(function() {
  changeSize();
});

Update:

Okay, it looks the function fires initially. You can see width is null because the colorbox has not opened. What you want to do is fire the function after the colorbox opens. That is where ajaxStop() would come into play. But it might actually be better to use the colorbox callback function:

enter image description here

But not after the colorbox opens. So try doing the ajaxStop() approach. Also note, if you do this you will need to remove changeSize(); after function changeSize() For example:

$(document).ready(function() {
    function changeSize(){
      // function stuff
    }

    $(document).ajaxStop(function() {
      changeSize();
    });
});

Or, Colorbox OnComplete:

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

Update 2:

I am not sure where you are calling colorbox exactly. But I see you have this: Found here

jQuery(function($){
    $('#wpsimplegallery a').colorbox({
        maxWidth: '85%',
        maxHeight: '85%'
    });
});

So try:

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

edited Jul 25, 2014 at 16:21

answered Jul 25, 2014 at 15:05

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

7 Comments

Tara Over a year ago

This solution is straightforward, but for some reason it doesn't work for me. Please refer to my edits in the original post to see where the problem is occurring.

khollenbeck Over a year ago

Make sure the changeSize(); function is inside your $(document).ready() function. Also if you hit f12 you can set a breakpoint in dev tools to check if the function is being executed.

Tara Over a year ago

Trying it now, hang on

Tara Over a year ago

Please see my update. Also, thanks soooo much for helping me with this! I'm ready to pully my hair out!

Tara Over a year ago

That would require me to change the plugin code. Is there any way around that?

|

Collectives™ on Stack Overflow

Add pixels to existing CSS element with Javascript

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related