Problems with media stylesheets and zoom funcitons
by Agustin Moyano
Hi, I'm doing a web page that has links to two different media css files, one for screen media and one for print media.
The thing is that this page has zoom buttons, which modifies size (width, height, margin and padding) and font-size properties of several elements (divs) of the same class. Also, when you put the mouse over a div it changes the border-color, border-width, width, height and font-size properties (it reduce them a little) of that individual div.
So I have two events, one that modifies all divs and one that modifies one particular div. Both have to work at the same time. To do this I assigned an individual id to each div and use document.getElementById(id).style
example:
function individual(id) {
e = document.getElementBy(id).style;
e.width ....
}
function zoom(id) {
e = document.getElementBy(id).style;
e.width ....
}
I could do it fine. The problem begins when I try to print it, because the document.getElementById(id).style modifies properties of both stylesheets. It prints with the wrong font-size.
I googled arround the problem and found that I could use document.styleSheet[0].cssRules (for firefox, for ie document.styleSheet[0].rules) to modify properties of the firs stylesheet, which in this case was de screen media stylesheet. It solved the problem of the printing, but I can't use it for the individual div event (I didn't find a way to specify an individual element in document.styleSheet[0]).
example:
function individual(id) {
e = document.getElementBy(id).style;
e.width ....
}
function zoom(ssheet, rule) {
e = document.styleSheet[ssheet].cssRules[rule].style;
e.width ....
}
So I keep using getElementById for it, but once I use it (I put the mouse over the individual div) the document.styleSheet[ssheet].cssRules[rule].style used in zoom function wont overwrite the document.getElementBy(id).style used in individual function, so when I click the zoom button that calls the zoom function it shows the size and the font-size of the individual function on the div that called it.
My questions are:
Is there a way to specify an element to modify for document.styleSheet[0]?
Is there a way to specify a stylesheet to modify for document.getElementById(id)?
Is there another way to specify an individual stylesheet for an individual element?
anyone had a similar problem?
Thanks,
Agustin.
Pd.: sorry if there are misspellings or if my writing wasn't very clear, I'm not a native english speaker, and this is a complex problem.