Using em's in jQuery Script

Question

I'm working on a website and I'm trying to make every measurement to be in em's, but but the script I repurposed from an old project I can't seem to get working with em's, it only seems to work with pixels.

$(window).scroll(function(){
    $("#nav").css("top",Math.max(0,96-$(this).scrollTop()));
});

Here's a demo of what it does:

http://jsfiddle.net/hwRSF/1/

If anyone can help and show me what I need to do it would be greatly appreciated!

what's wrong with it? what are you trying to accomplish? it looks alright to me — kennypu, Jul 16 '13 at 03:40
In this I would like to use em's in the css, instead if px'. — Phinet, Jul 16 '13 at 03:45
I only saw one thing that wasn't em which was `text-size` (which isn't a valid css btw, it would be `font-size`). setting `font-size : 1em` in the div worked just fine — kennypu, Jul 16 '13 at 03:47
Crap, yah, I have that right in the actual code, I was just typing to fast... — Phinet, Jul 16 '13 at 03:49
What I'm trying to accomplish is to position the div with em's instead of pixels. — Phinet, Jul 16 '13 at 03:50
so what's holding you back? Trying to get scrollTop() to return `em`s? — Zach Lysobey, Jul 16 '13 at 03:56
Yea, not really sure if its easily possible honestly. Perhaps if you measure a page element sized with em's in pixels and used that to construct a conversion ratio? — Zach Lysobey, Jul 16 '13 at 03:59

score 2 · Accepted Answer · answered Jul 16 '13 at 04:00

2

because scrollTop() returns in pixels, you will need to convert it into em values based on your base size.

For this particular question, it looks like your base size is 16, so you just need to divide the pixels by 16.

your navigation css:

#nav {
 ...
 top: 6em; /* 96 / 16 = 6*/
 ...
}

jquery:

$('#nav').css("top",Math.max(0,(96 - $(this).scrollTop())/16) + "em");

example fiddle: http://jsfiddle.net/hwRSF/3/

answered Jul 16 '13 at 04:00

kennypu

5,950
2
22
28

Sorry if I'm really bad at explaining, but basically yes this is what I need, but I was hoping in the end to not have a specific font size (that it can change without having to change all the scripts). But yeah, this is great, I'll only need to edit two things! – Phinet Jul 16 '13 at 04:14
@PS13 what do you mean specific font size? 1em will always be 16px (usually) unless the user sets the browser font-size to something else. – kennypu Jul 16 '13 at 04:18
Yes, I want it to not mess up when that happens. – Phinet Jul 16 '13 at 04:20
in that case you would need to check out the answer here: http://stackoverflow.com/questions/7444451/how-to-get-the-actual-rendered-font-when-its-not-defined-in-css to get the browser's font size, then use that instead of 16 – kennypu Jul 16 '13 at 04:23
Thankyou! That's exactly it. You deserve a hug! – Phinet Jul 16 '13 at 04:26

score 0 · Answer 2 · answered Jul 16 '13 at 03:51

0

It is fine to use em for top:

$("#nav").css("top", '3em');

Working fine for me with Chrome 28 on Linux Mint.

answered Jul 16 '13 at 03:51

Oscar

59
5

I'm not sure what you mean by that... all that does is lock the div in place. But thanks! – Phinet Jul 16 '13 at 03:54
So you want to get top/left using sth like `$.scrollTop()` and but in `em` instead of `px`? – Oscar Jul 16 '13 at 04:02

score 0 · Answer 3 · answered Sep 22 '17 at 20:08

A nice way to do this is to let the browser render 1em and then find out that value using javascript.

HTML

<div class="hidden dummy-em"></div>

CSS

/* only use hidden if you don't want the user to see it
   you can use any element with a height of 1em
   do not use display: none; */

.hidden{
    position: absolute;
    left: 500vw;
}
.dummy-em{
    height: 1em;
}

Javascript(jQuery)

// JS returns these kind of values in px
var oneEm = $('.dummy-em').innerHeight();

Avoid the math and let the browser do the work for you

Using em's in jQuery Script

3 Answers3