• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Changing a CSS Rule using jQuery

 
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Some of our web application pages contain page onresize code based on the jQuery library that optimally adjusts the header/content/footer divisions of a page. Basically, the header and footer are allowed to expand to whatever height they need to be completely visible and the remaining height is allocated to the content division (which may overflow). The page itself is not allowed to overflow.

The problem is that is causing a problem in printed pages. Print CSS styles exist to set margin and height to auto when printing so any content within the content division will be printed regardless of whether it is visible on the page or not, i.e. overflowed. However, the page onresize code is changing element style attributes when adjusting the height of the divisions. I believe if the code changed the applicable default display CSS style rule rather than setting the style attribute itself, this approach may solve the problem.

However, I am relatively new to jQuery. I have looked at the documentation but it appears that the .css function ultimately changes the style attribute as well. Is there a jQuery function to change the CSS rule itself? Or is there possibly another solution?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You should not have to USe JS to change the CSS.

Look into Print Media CSS

Lets you set a different style sheet for printing.

Eric
 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Eric, I agree with you and I am using CSS print stylesheet, ie. media="print". However, the problem appears to me to stem from the fact that the onresize function sets a style attribute "height" which carries a greater weight than the height:auto rule specified in the print stylesheet. This is confirmed by the fact that if I comment out the onresize code, the page is printed as one would expect. Believe me, I would rather not change the CSS rule but I don't see any other solution.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Did you try to use !important with the rule in the print style sheet?

Eric
 
For my next trick, I'll need the help of a tiny ad ...
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic