convert css to jquery

Question

I have this css:

@media only screen and (max-height: 620px) {
#howto img {
    margin-left:150px;
}
.boilerplate {
    text-align:right;
}
.footer .boilerplate .links {
    float:right;
}
.footer {
    text-align:right !important;
}

}

and I want to do this css with jQuery. How can I do it?

This question does make some sense since some CMS's strip out <style> tags when placed in the editor but don't strip javascript/jQuery. If you don't have access to change the code as a developer, sometimes the only way to make a page look right is to use a jQuery css workaround...granted it's not at all a good idea to do consistently. It's best to have a developer with access make the style changes to the stylesheet. — Ian
– Ian, Commented Jan 20, 2014 at 19:43

Ram · Accepted Answer · 2012-04-12 17:16:32Z

2

try this:

$("document").ready(function(){  
    if ($(window).width() <= 620) {
      $("#howto img").css("margin-left", "150");
      $(".boilerplate").css("text-align", "right");
      $(".footer .boilerplate .links").css("float", "right");
      $(".footer").css("text-align", "right");
    }
});

edited Apr 12, 2012 at 17:16

answered Apr 12, 2012 at 17:10

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sven Bieder · Accepted Answer · 2012-04-12 17:08:49Z

0

for example

$("document").ready(function(){
  $(".boilerplate").css("text-align","right");
});

But you must then make every style in jquery. Another possibility would be to make the styles completely database driven and loop through.

answered Apr 12, 2012 at 17:08

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

2 Comments

user1323415 Over a year ago

yes, i know that but how to do this @media only screen and (max-height: 620px) { ?

Sven Bieder Over a year ago

you don't need to do it over media. In jquery you can get the window sizes directly. You set it then in an if

Toni Michel Caubet · Accepted Answer · 2012-04-12 17:21:13Z

0

$(window).resize(function(){  
    if ($(window).width() <= 620) {
      $("#howto img").css("margin-left", "150");
      $(".boilerplate").css("text-align", "right");
      $(".footer .boilerplate .links").css("float", "right");
      $(".footer").css("text-align", "right");
    }else{    /*Asuming you didn't have any inline style before*/
         $('#howto img,.boilerplate,.footer,.footer .boilerplate .links').removeAttr('style'); 
         /*To restore de original styles*/
    }
});

answered Apr 12, 2012 at 17:21

Toni Michel Caubet

20.3k59 gold badges219 silver badges390 bronze badges

2 Comments

Toni Michel Caubet Over a year ago

This way it will be applied everytime the window is resized. not only on document.ready

Toni Michel Caubet Over a year ago

But if you do not need support for older browsers i just don't understand why you need to do this in Jquery

Oliver Drummond · Accepted Answer · 2019-03-29 06:07:05Z

0

Have you ever tried beansoup? They have a nice CSS to jQuery converter.

Sometimes, there are some problems with the conversions, but most of them are great.

answered Mar 29, 2019 at 6:07

Oliver Drummond

5301 gold badge6 silver badges21 bronze badges

Collectives™ on Stack Overflow

convert css to jquery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related