0

I have a div that I want the height set to the same size as the width, so I added a javascript file that looks like this

var cw = $('.block-me').width();
$('.block-me').css({
    'height': cw + 'px'
});

to my javascript files. When I load the page the height is not being added in the code, however the file is being called in the head.

I am using the Jetpack plugin's CSS editor so I'm wondering if I have to specify which css file to add too or what?

redf150flames
  • 21
  • 2
  • 10

2 Answers2

0

Unless you've just entered it here with a typo, I think it's just an extra : in your code:

var cw = $('.block-me').width();
$('.block-me').css({
    'height': cw + 'px'
});

You have 'height:': and it should be 'height':

FIDDLE

ethorn10
  • 1,889
  • 1
  • 18
  • 29
  • I had that typo in the code, but removing the extra : didn't fix the problem :/ – redf150flames Aug 04 '13 at 04:13
  • If that isn't working, then there must not be an element present with the class `.block-me` or it doesn't have a width defined. – ethorn10 Aug 04 '13 at 04:18
  • I think it has something to do with me using a % value for the width. Is there a way to convert the % to px after the page loads? – redf150flames Aug 04 '13 at 04:18
  • Here is the code I'm working with, made a couple changes. [link](http://jsfiddle.net/redf150flames/DKFFT/1/) – redf150flames Aug 04 '13 at 04:23
  • In that link, you'll need to change your `.block-me` to `#block-me` (id selector vs class selector), and the add jquery to the frameworks on the left. I've updated [HERE](http://jsfiddle.net/DKFFT/2/) – ethorn10 Aug 04 '13 at 04:27
  • There must be other factors being introduced by other js files or css or something that you aren't showing. As you can see by the fiddle, the code shown works. – ethorn10 Aug 04 '13 at 04:58
  • Those "other factors" are what I was asking about. – redf150flames Aug 04 '13 at 05:06
  • I have no way of knowing what your wordpress environment might be doing to this code. – ethorn10 Aug 04 '13 at 05:09
  • Its not anything in the other js files because everything I am doing is a custom addition, so the answer should be something general that would be the case with any wordpress site – redf150flames Aug 04 '13 at 05:10
  • Again, without seeing all of the relevant code, I can only guess. And I'll guess that there is an issue with the element in question. It either doesn't have a width or you are trying to get the width via the wrong selector. – ethorn10 Aug 04 '13 at 05:21
  • All the code I'm using on WordPress is the code we used on Fiddle, character for character, minus the alert. [link](http://jsfiddle.net/DKFFT/2/) – redf150flames Aug 04 '13 at 05:30
  • So, keep the alert. See what you get. The fiddle works so then your html must not have an element with class `.block-1` or id `.block-me` anywhere. – ethorn10 Aug 04 '13 at 05:42
  • The HTML has both the class block-1 and id block-me. Here is the code from my homepage source `
    `     – redf150flames Aug 04 '13 at 05:55
0

The problem with uploading a JavaScript/jQuery file to WordPress is the file needs to be coded for no-conflict mode.

The answer on this question is what helped me find the answer stackoverflow answer.

Basically anywhere you use a $ in jquery on WordPress you need to write jQuery

Community
  • 1
  • 1
redf150flames
  • 21
  • 2
  • 10
  • No, you don't have to do that. Just wrap your code in a self-invoking function that passes `jQuery` as the value of a param named `$`. – Ray Nicholus Aug 04 '13 at 17:43