0

So I've got a element that needs to sit underneath an anchored toolbar. And the amount of top-padding necessary to get it underneath said toolbar changes based on the width of the viewport. So I've developed a formula to determine the percent of padding-top needed at any point in time from 2560px down to 320px, the largest and smallest viewport widths our software caters to, but I'm struggling to actually get it into a css style.

This is what I'm working with right now.

getTopPadding = (): void => {
        var x: number = $(window).width(),
            paddingPercent: number = ((0.007589 * (2560 - x)));
        if (paddingPercent < 5) {
            paddingPercent += 5;
        }

        $('#appendHere').css('padding-top', paddingPercent);
    };

So I've got this formula that takes my current width and pumps out what the padding-top should be. So for example, on a width of 320px, padding needs to be, 

padding-top: 17%;

paddingPercent will calculate the number 17 just fine, but if I pass in just paddingPercent as a value for the .css() method it comes out like this

padding-top: 17px;

So what I'm trying to find out is, is there a way to designate whether the value I'm passing in should be px, em, vw, or %? I've tried

$('#appendHere').css('padding-top', (paddingPercent + '%'));

thinking perhaps taking the number and adding a string to the end would add the % symbol I need and stringify the value because you can pass a string in to the .css() method. But thinking about it more I realized the reason it accepts a string is more for things like specifying color etc, not for what I'm doing. I thought about type casting and doing 

Number((paddingPercent + '%'));

But that would come back with NaN, so I'm not sure where to go from here. Hoping someone can offer some insight.

Chris
  • 443
  • 5
  • 25
  • 1
    Not sure I understand that last part, but it sounds like you may be overthinking the problem. Adding a % sign to `paddingPercent` as a string should work just fine. You said you tried it, did it not work? – A. Damond Oct 11 '16 at 19:39
  • In fact: see [the documentation for `.css()`](http://api.jquery.com/css/): "When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method." – A. Damond Oct 11 '16 at 19:43
  • I had used the line, $('#appendHere').css('padding-top', (paddingPercent + '%')); But it wasn't adding the style to the element that had that Id on it. I had figured it was because padding-top didn't accept strings as a value. – Chris Oct 11 '16 at 19:44
  • I don't think that was your issue. Have you tried debugging with dev tools? Are you sure that `paddingPercent` is getting assigned the value you think it is? And that the line you shared is getting hit? Any console errors? – A. Damond Oct 11 '16 at 19:48
  • Your code should work, as it is. Demo http://jsbin.com/tidebesete/edit?html,js,output – Clyde Lobo Oct 11 '16 at 19:56
  • @A. Yeah the value is coming back as the 17 I need, and I was just telling Mohammed how I took the value added a '% !important' to the end of it as part of a definition of another string type variable. And passed that new variable in. In the debugger it says stringify = '17% !important' and that's what my selector looks like .css('padding-top', stringify); but I'm still not getting the style to appear. – Chris Oct 11 '16 at 20:03

1 Answers1

1

I checked what the console gives for a window.width value, and it looks like just the number, but when included in .css(), it adds the px value if nothing else is specified.

What looks to solve it on my end is doing

paddingPercent = paddingPercent + '%';

just before running your .css(), this should do it. Let me know if I misunderstood your question. I tried this in a simple file and it did the trick.

Mo Alsaedi
  • 709
  • 3
  • 15
  • Gotcha, so what I did var x: number = $(window).width(), paddingPercent: number = (((17 / (2560 - 320)) * (2560 - x))); if (paddingPercent < 5) { paddingPercent += 5; } var stringify: string = paddingPercent + '% !important'; console.log('stringify value = ', stringify); //comes out to '17% !important' $('#appendHere').css('padding-top', stringify); But I'm still not getting the style to appear when I run – Chris Oct 11 '16 at 20:00
  • Oh jeez, that was sloppy and had no formatting. Basically I took the paddingPercent variable and I added the string '% !important' to the end and stored it in another variable called stringify and passed that variable into the .css() method. But I'm still not getting the style to appear when everything boots up. Not sure why. – Chris Oct 11 '16 at 20:01
  • Accidentally deleted my comment. So, before the css function call, just do the string = paddingPercent + '%' , then call the css function like this: .css('padding-top', 'string', 'important'); – Mo Alsaedi Oct 11 '16 at 21:12
  • This does not work. See the [documentation for `.css()`](http://api.jquery.com/css/): **Note**: `.css()` ignores `!important` declarations. So, the statement `$( "p" ).css( "color", "red !important" )` does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin. – A. Damond Oct 11 '16 at 21:22
  • It seems that your only solution is to either find the class that's clashing with that property and change or remove it (look for `!important` set on `padding-top` somewhere in your css - try inspecting the element in question to see if it's there), or to use a custom solution like [this one](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) – A. Damond Oct 11 '16 at 21:26