CODEWITHSUNDEEP
javascriptjquerycordova
Marc Pursals
Marc Pursals

Reputation: 792

Using javascript inside CSS

Problably it is a silly question (I'm newbie), but I'm developing an app with phonegap and for any device I need to define the height of it. I know that with javascript I can get the size of the screen using:

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

and I want to use screen.height value as a variable on my CSS file. With this solved I can define any item related to the height and consequently I will have the exact image on any device... sounds weird?

I tried to google but I didn't found the way to insert js into css or to insert screen.height value inside it.

Does anyone has an idea?

Thanks in advance.

Upvotes: 2

Views: 1586

Answers (4)

Paladini
Paladini

Reputation: 4572

Okay, let's answer your question.

As you said, you can do that:

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

But is hard to change the css from JavaScript. Instead, if you use jQuery it's easy to do that. The following code can help you:

<script>
$(document).ready(function(){

   var Width = $(document).width();
   $('#id_you_want_change').attr('width','valueYouWantToWidth');

});</script>

Well done! If you want a responsible website, try looking frameworks like Bootstrap and be happy :)

Upvotes: 3

what is sleep
what is sleep

Reputation: 905

see this answer, generally it is considered bad practice to put js into css. Instead, what you can do is use javascript to do some styling for you when it is necessary. You probably want to learn jQuery too, it makes a lot of things a hundred times easier.

I know this is pretty vague, but hope it helps!

Upvotes: 1

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

Try to make your css as flexible as possible. Set heights and widths as percentages rather than fixed values that need to be scaled down. For example if you needed to make a button

.button {
    width:100%;
    padding:0.5em;
}

Let the padding and the text size create the desired height. If you need to be more defined you can do as Alvaro and Vidya said and use media queries to set fixed values for certain device sizes.

Good luck!

Upvotes: 1

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

use @media in Css files to define screen width and height . Check this link out for more info Device layouts using media query - portrait on phones, both on tablets

Upvotes: 2

Related Questions