How to use properties in CSS?

Question

"Window": {
    backgroundColor: '#fff'
},
"Label": {
    font: {
        fontSize: 32,
        fontWeight: 'bold'
    }
},
"Button": {
    width: '50%',
    height: Ti.UI.SIZE
},
".button": {
    randomProp: 'OK',
    top: window.height * somevalue;
}

How can i use my Window's Height to set to my button's top.

it seems you are going about things possibly the long way round, please explain what you are trying to achieve and possible use an example site or image. — Andrew Atkinson, Feb 03 '13 at 14:04

score 0 · Answer 1 · edited May 23 '17 at 10:09

You can access styling properties of an object through the .style attribute of the object. I.e:

mybutton.style.top = "10px";

Getting the windows current hight is trickier in pure JS, but the jQuery library does it with ease:

$( 'window' ).height();

If you don't want to use jQuery then here is how to do it with just JS: JavaScript - Get Browser Height

If your intent is achievable with just CSS and percent values that is the best way to go, but I assume you are trying to attach something that is going to float relative to window size, like a footer that is always in the bottom, which without some of the new CSS3 selectors can be a pain in CSS and probably should be solved in JS.

score 0 · Answer 2 · answered Feb 03 '13 at 14:12

0

You don't need JavaScript for this.

You can use position: absolute; to set the position of your button relative to the viewport.

button {position: absolute; top: %/px;}

Here is your jsFiddle.

answered Feb 03 '13 at 14:12

Jezen Thomas

13,619
6
53
91

How to use properties in CSS?

2 Answers2