I Think I Am Having A Herpes Outbreak

How can you protect yourself from Phorm?

We often have a very large table in the eKVV Search for free rooms . In each cell, the spaces are shown, with the same space can be in different cells at different positions. This can not be prevented because the table would otherwise be even greater. order to view the users yet simple, if the room in other cells (ie, at other times) is available with Javascript and CSS is the following Functionality implemented:

Once the cursor is on a particular area all occurrences of the space in the table are formatted differently.

When the mouse pointer leaves the room is re-established the old format again.

preparation of the common formatting: CSS classes

ensure that the formatting of all occurrences of a room can be done easily with CSS to get the links of the rooms another CSS class that derives from the name space. Example:

\u0026lt;a href=".." class="… raum_h1"> ... \u0026lt;/ a> Because basically in the room with all the characters are allowed an adjustment must be carried out. In the cleanup, all characters except az and away 0-9.

can be marked on a CSS statement like the following, all places with the same room with this preparation:

a.raum_h1

{border: 1px solid black;}

Here are set of fantasy, of course, no limits. The manipulation of the style sheet just for large tables performance advantages compared to the manipulation of each to format element, such as adding / removing a particular class to all links of the same area in the onmouseover / onmouseout

events.

JavaScript functions for the events onmouseover and onmouseout

All we need now are two event handlers to the anchor tag:

onmouseover: when 'entering' the room area with the mouse, the marking with CSS enabled onmouseout:

When leaving the marking must be disabled in order not marked by one, all rooms remain

Because there are so many links, we store the two Actions in its own function definitions. This saves space in the generated HTML code. The anchor tags look like this:
\u0026lt;a class = ".. raum_h11 "

onmouseover =" javascript: zr ('raum_h11' ); "

onmouseout =" javascript: vr () , "...

Now we need only the functions zr

(for

show room) and

vr

implement (for

hiding space) and put in the HTML code of the page. Why the call to

vr

no parameter is passed? This is what we see.

useful instructions on how to manipulate the stylesheet using Javascript, for example, in
DADABase Blog
and the javascript.faqts

. With these tools you can get quickly out the necessary functions. The essential element is the DOM

document.styleSheets

:

\u0026lt;- This empty STYLE tag is used for the following JS! Features ->

\u0026lt;style> \u0026lt;/ style> \u0026lt;script type="text/javascript">

function zr (CssClass) {

& # 160; vr ();
1. & # 160; var = SSHEET document.styleSheets [document.styleSheets.length-1]; ; var selector = "a." + CssClass; var rule = "border: 1px solid black; "
sSheet.insertRule (" "+ selector +" {" + rule + "}", 0);}
2. vr function () { & # 160; was sSheet = document.styleSheets [document.styleSheets.length-1];
while (sSheet.cssRules & & sSheet.cssRules.length> 0) {

; sSheet.deleteRule (0);}

;}

\u0026lt;/ Script>

We make it easy here and attack us with document.styleSheets [document.styleSheets.length-1]

directly on the extra for this purpose created, initially empty STYLE day. If there should follow other style tags, of course, that does not that easy!

This construct works fine in Firefox 3.0.8, 2.0.x in Chrome, Safari 4 Public Beta and Opera 9.64. But of course it works so far on Internet Explorer. And it does not, in fact in MSIE 8th The reason is that the MSIE insertRule not know, but a addRule function. The same applies to the functions of removing Rules . An example of how to handle it, is found in CodingsForums.com . An even more sophisticated trick is described on

TUTORIALHELPDESK.COM

. There, for the MSIE stylesheet object simply adds the missing features. This approach may be the single methods is only when you add the Rules its border, since insertRule fewer parameters than expected addRule .

Armed with this knowledge, we now extend the functions so that they also MSIE work. Here are the results, which now also works in MSIE 8:

\u0026lt;- This empty STYLE tag is used for the following JS functions ->
\u0026lt;style> \u0026lt;/ style>



\u0026lt;script type="text/javascript">

;
function zr (CssClass) {
vr();
        var sSheet = provideSSheet();
        var selector = "a." + cssClass;
        var rule = "border: 1px solid black;";
        try {           
sSheet.insertRule (" , "+ selector +" {"+ rule +"} ", 0); & # 160;} catch (msie) {

& # 160; try {

sSheet.addRule(selector, rule);

            } catch (err) {             }         }

    }

    function vr () {

was sSheet provideSSheet = ();

& # 160; while (sSheet.cssRules & & sSheet.cssRules.length> 0) { ; sSheet.deleteRule (0); & # 160; }     }     function provideSSheet() {         var sSheet = document.styleSheets[document.styleSheets.length-1];         // Check to see if we are operating in Internet Explorer         if (sSheet.rules)         {             // Map the standard DOM attributes and methods to the internet explorer             // equivalents             sSheet.cssRules = sSheet.rules;  sSheet.deleteRule = function (ruleIndex) { & # 160 this.removeRule (ruleIndex) }; & # 160;}

& # SSHEET return;, 160

} \u0026lt;/ script>

We're done! And so it looks like this:

experience

The solution seems to react differently in different browsers quickly. Here are some initial experience:


Firefox:
Basically, the easiest. Everything is fluid.


Opera:
Similar to Firefox.


Chrome / Safari:
The very first call to the JS functions takes a certain time, after which all liquid


MSIE 8:
Never really fast, the rapid scrolling through the pages is sometimes hampered by the JS functions