BUG in el.getStyle and em-value
36 views
Skip to first unread message
hamburger
Jun 16, 2011, 6:54:46 AM6/16/11
to MooTools Users
Hello,
i have defined my text in em.
now i'am trying to get the style of the given text to add 0.1em on
each click.
el.getStyle('font-size'); gives the size only in px.
1. is there a possibility to get the value in em
2. i think the given pixel value is wrong.
I have a general text-size from 16px.
my text is 1.8 em: 1/16 = 0,0625 that means 1px = 0,063em
1.8 em gives so 28,57px but the given value is 23,003px
1,25 em gives wrong 12,8px and not 20,48px
any idea or help?
thx in advance
i have defined my text in em.
now i'am trying to get the style of the given text to add 0.1em on
each click.
el.getStyle('font-size'); gives the size only in px.
1. is there a possibility to get the value in em
2. i think the given pixel value is wrong.
I have a general text-size from 16px.
my text is 1.8 em: 1/16 = 0,0625 that means 1px = 0,063em
1.8 em gives so 28,57px but the given value is 23,003px
1,25 em gives wrong 12,8px and not 20,48px
any idea or help?
thx in advance
Kelvin
Jun 16, 2011, 9:18:47 AM6/16/11
to MooTools Users
hamburger
Jun 16, 2011, 9:39:11 AM6/16/11
to MooTools Users
Kelvin you are right. The calculation is Ok. I compared the value
after decreasing ... stupid and my fault.
Is there a possibility to get the value in em or do i have to
calculate myself?
thx
after decreasing ... stupid and my fault.
Is there a possibility to get the value in em or do i have to
calculate myself?
thx
robdb
Jun 16, 2011, 9:54:08 AM6/16/11
to MooTools Users
1em is equal to the current font-size of the given element. So you've
got a general text size of 16px thats being multiplied by 1.8 =
approx 28.8.
This might be of interest: http://css-tricks.com/css-font-size/
In terms of calculating it it good get tricky quickly depending on
your markup. Pretty sure the browser will convert font sizes into px
when they render the page.
http://jsfiddle.net/robdb/pECHA/
got a general text size of 16px thats being multiplied by 1.8 =
approx 28.8.
This might be of interest: http://css-tricks.com/css-font-size/
In terms of calculating it it good get tricky quickly depending on
your markup. Pretty sure the browser will convert font sizes into px
when they render the page.
http://jsfiddle.net/robdb/pECHA/
hamburger
Jun 17, 2011, 5:12:41 AM6/17/11
to MooTools Users
thx robdb
as your example show
font-size: 1.8em will become 1.75em
so you have to deal a little bit with round() to get twice the same
result ...
as your example show
font-size: 1.8em will become 1.75em
so you have to deal a little bit with round() to get twice the same
result ...
robdb
Jun 17, 2011, 6:24:55 AM6/17/11
to MooTools Users
I suppose you could. Can you not use pixels to achieve the same/
similar result, save you some overhead and possibly a few headaches?
No idea of what your actually doing or aiming for, so grain of salt,
just 2cents worth :)
similar result, save you some overhead and possibly a few headaches?
No idea of what your actually doing or aiming for, so grain of salt,
just 2cents worth :)
hamburger
Jun 17, 2011, 6:43:14 AM6/17/11
to MooTools Users
robdb
the text is placed in a div witch is scaleable by user over a slider.
here it is nessessary to have the same scale-factor relative to the
div-size. the div.size is controlled by text-size:16px
after scaling i will save the relative setted text-size-value.
i do not have any other idea to solve it
the text is placed in a div witch is scaleable by user over a slider.
here it is nessessary to have the same scale-factor relative to the
div-size. the div.size is controlled by text-size:16px
after scaling i will save the relative setted text-size-value.
i do not have any other idea to solve it
robdb
Jun 17, 2011, 8:21:32 AM6/17/11
to MooTools Users
I replied again but the post seems to have disapeared... anyhow.
Is something like this what you had in mind?
http://jsfiddle.net/robdb/gVhVs/
http://jsfiddle.net/robdb/f6L5C/
Neither are perfect but might give you something to run with.
Is something like this what you had in mind?
http://jsfiddle.net/robdb/gVhVs/
http://jsfiddle.net/robdb/f6L5C/
Neither are perfect but might give you something to run with.
robdb
Jun 17, 2011, 8:16:27 AM6/17/11
to MooTools Users
Is something like this what you had in mind?
http://jsfiddle.net/robdb/f6L5C/
http://jsfiddle.net/robdb/gVhVs/
Neither are perfect but might give you a couple of ideas to run with.
Rolf -nl
Jun 17, 2011, 9:35:01 AM6/17/11
to MooTools Users
Hi Hamburger,
Using/saving the em value is what I would do also (or percentage
values, but I'm used to em). This way you are more flexible when you
alter the body font-size (or some parent value for that matter) and
the rest scales just with it. If you save pixels than you'd have to
recalculate all the time.
Regarding the slider, I think it only works with pixels and not ems.
So you probably need to work with pixel values initially when dealing
with Slider.
You can calculate the px vs em ratio and use the ratio to convert
changes made by Slider from px to em after the onComplete event for
example.
Also, make sure you specify the correct initialStep for the slider in
pixels if you have a starting size in ems that you want to use.
> http://jsfiddle.net/robdb/f6L5C/http://jsfiddle.net/robdb/gVhVs/
Using/saving the em value is what I would do also (or percentage
values, but I'm used to em). This way you are more flexible when you
alter the body font-size (or some parent value for that matter) and
the rest scales just with it. If you save pixels than you'd have to
recalculate all the time.
Regarding the slider, I think it only works with pixels and not ems.
So you probably need to work with pixel values initially when dealing
with Slider.
You can calculate the px vs em ratio and use the ratio to convert
changes made by Slider from px to em after the onComplete event for
example.
Also, make sure you specify the correct initialStep for the slider in
pixels if you have a starting size in ems that you want to use.
> http://jsfiddle.net/robdb/f6L5C/http://jsfiddle.net/robdb/gVhVs/
hamburger
Jun 17, 2011, 9:43:04 AM6/17/11
to MooTools Users
robdb
thanks for your ideas.
i still have all sliders.
here is my test-file that you have an idea what i'am working to.
http://www.opteynde.com/test/test_todesanzeige_5a.html
use the upper-left slider to change the picture.
the user shoud change the text-size over the menue like here:
http://www.opteynde.com/test/test_toolbar_1.html
so he can design his own layout.
(sorry i do not have both together in one file / it's very messy)
I'am using this layout in other files in different sizes. For that and
to have the text in the same proportion i'am using em to set the
dimensions-relations.
cheers
thanks for your ideas.
i still have all sliders.
here is my test-file that you have an idea what i'am working to.
http://www.opteynde.com/test/test_todesanzeige_5a.html
use the upper-left slider to change the picture.
the user shoud change the text-size over the menue like here:
http://www.opteynde.com/test/test_toolbar_1.html
so he can design his own layout.
(sorry i do not have both together in one file / it's very messy)
I'am using this layout in other files in different sizes. For that and
to have the text in the same proportion i'am using em to set the
dimensions-relations.
cheers
hamburger
Jun 17, 2011, 9:48:11 AM6/17/11
to MooTools Users
to Rolf -nl,
here is my working slider with em
http://www.opteynde.com/test/test_todesanzeige_5a.html
"I think it only works with pixels and not ems."
it depence ...
here is my working slider with em
http://www.opteynde.com/test/test_todesanzeige_5a.html
Rolf -nl
Jun 17, 2011, 3:58:44 PM6/17/11
to MooTools Users
Hi,
I'm sorry, there's so much going on there that I can't see it quickly
enough :)
I mean, I see it resizing etc. but I can't verify if the result is in
ems (or did you do some re-calculation with setStyle?)
If you see here: http://jsfiddle.net/tmgUR/
the text is set in the css as 1em, but when the slider is initialized
and set to "20" for the initialStep the result is that the text
becomes 20px and when you slide it changes the size in px not ems
Can you put up a fiddle with just the slider doing it's job in ems
directly (without any new setStyle code onChange or onComplete I
mean)..?
:) anyway if you got it working, you got it working!
I'm sorry, there's so much going on there that I can't see it quickly
enough :)
I mean, I see it resizing etc. but I can't verify if the result is in
ems (or did you do some re-calculation with setStyle?)
If you see here: http://jsfiddle.net/tmgUR/
the text is set in the css as 1em, but when the slider is initialized
and set to "20" for the initialStep the result is that the text
becomes 20px and when you slide it changes the size in px not ems
Can you put up a fiddle with just the slider doing it's job in ems
directly (without any new setStyle code onChange or onComplete I
mean)..?
:) anyway if you got it working, you got it working!
robdb
Jun 17, 2011, 7:05:47 PM6/17/11
to MooTools Users
Hello,
Nice one getting it working Hamburger!
As long as you don't have to read the font size you can avoid doing
any calculations in px, if you set up the defaults properly you can
just set the font-size in em.
http://jsfiddle.net/robdb/vftKa/
(Sorry my brain was a bit fried last night, about 2am were I am)
Nice one getting it working Hamburger!
As long as you don't have to read the font size you can avoid doing
any calculations in px, if you set up the defaults properly you can
just set the font-size in em.
http://jsfiddle.net/robdb/vftKa/
(Sorry my brain was a bit fried last night, about 2am were I am)
Rolf -nl
Jun 18, 2011, 7:25:34 AM6/18/11
to MooTools Users
yep you're right, also about coding at 2am..
robdb
Jun 19, 2011, 12:16:33 AM6/19/11
to MooTools Users
I couldn't leave a dirty Math.log() in...
http://jsfiddle.net/robdb/sj2c2/
Procrastination wins again :)
http://jsfiddle.net/robdb/sj2c2/
Procrastination wins again :)
Reply all
Reply to author
Forward
0 new messages