I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
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!