The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex
Here is my solution (thinking it through a different way):
ReplyDeleteUse a DIV with overflow: hidden; for the navy 'bar' that shows the rating scale.
You then write out two sets of TEXT:
Inside the DIV bar (overflow: hidden;), it would be white (on top)
In the underlying DIV container, it would be black. (container)
The result would be an overlap of the two colored text divs:
________________________________
| 1 | 2 |
|_(dark blue w white)_|__________|
Here is my jsFiddle
It works great because it will 'cut through' letters if the bar is at that width. Check it out, I think its what you are looking for.
Yes that's possible.
ReplyDeleteYou can tie a background and a foreground color together into a class and use that on your text. So you got for example one style class having black text white background and one having white text and black background. You can switch that class then and the text will change with the background color.
And you can use jQuery('body').css('color', '#fff') for example to change the color of the body text to white.
If you provide some sample code it would even be possible to create a more specific answer for your question.
No, you can't do it with just CSS. You need JavaScript for this.
ReplyDeleteWith jQuery/JavaScript you can check if an element has a CSS rule applied to it, and then do what you want, i.e.
if ( $('#element').css('white-space') == 'nowrap' ) {
// do something
} else {
// do something else
}
Also read here: Jquery: How to check if the element has certain css style
Indeed, you need to use javascript. I would approach the problem by doing something like this:
ReplyDeleteCalculate the width of the overlap in pixels. ie width = ${"#container"}.width() - ${"#progressbar"}.width();
Calculate the amount of text you have to highlight, you can use follow this discussion. I would start with an empty string, check its width and if it's lower than the width calculated above add one character and repeat. Once it's higher choose that string
Insert the above string between spans, like this ${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText); Obviously highlitedText is a string containing the characters in 2. and restOfTheText is a string with the rest of the characters.
Good thing of this method is that you can rerun it if you change the width of your progressbar div.
Hope that helps!