frdl.watchFor

- The DOM observer
Aus der Kategorie: Resources

window.frdl.watchFor

Observes the DOM and triggers if a specific selector is found or was created.




Example (taken from "default" Themes .js)

If a LEGEND tag appears in the DOM, the snippet checks if the LEGEND tag is wrapped by a P tag and if this is NOT the case (then: the Legend appears inline because the "default" themes .css * ) it provides a linebreak (
) BEFORE the LEGEND tag, so a paragraph is forced before the legend but not imperatively after it. 

 

 

/* webfan (C) Till Wehowski, Webfan.de - All rights reserved. */
(function(){
 var name = 'default';   
 var obs = frdl.watchFor('legend:not([data-flow-prepared-theme="'+name+'"])').every(function(el){
     el.setAttribute('data-flow-prepared-theme', name); 
     if('P' !== el.parentNode.tagName){
         $(el).before( "<br>");
     }
   return true;   
});
}());
  

The observation of the DOM can be terminated by calling

     obs.destroy();

 

themes/default/css/app.css

legend{
    font-weight:bold;
    font-size:1.1em;
    margin:2px;
    padding-right:15px;
    display:inline-block;
}






Erstellt von WEBFAN (Monday 1st of August 2016 08:24:27 AM - vor 238,42 Tagen)
in der Kategorie Resources als statische Seite
Zuletzt geändert: Monday 1st of August 2016 08:48:04 AM von WEBFAN
Der Beitrag wurde insgesamt 446 mal gelesen (durchschnittlich 1,87 mal am Tag)

Bewertung des Beitrages: - Noch keine Bewertung - von 10 Punkten (bei 0 Stimmen)

Für Benachrichtigung über neue Beiträge aus der Kategorie Resources:
Jetzt kostenlos als Benutzer von "frdl" registrieren...!

Kommentar zu diesem Beitrag verfassen:

Dein Name (* Pflichtfeld):


Deine Website:
(mit http://)


Deine E-Mail Adresse:
(Nicht öffentlich, wird intern bei Webfan gespeichert, aber niemandem angezeigt.)


Track Back Url:
(mit http:// - Auf dieser Url hast Du auf den vorliegenden Artikel verlinkt)


Bewertung des Artikels abgeben:
(10=besonders gut | 0=besonders schlecht)


Dein Kommentar zu diesem Beitrag (* Pflichtfeld):

Html erlaubt: a> <b> <blockquote> <br> <center> <div> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ul> <li> <p> <pre> <small> <sub> <sup> <table> <td> <tr> <u> <strong> <span> <nodocu> <docu> <wemc> <dl> <dt> <dd> <abbr> <em> <tbody


Bitte mit TAN D2 bestätigen:



Bewertung des Beitrages: - Noch keine Bewertung - von 10 Punkten (bei 0 Stimmen)

Kommentare zu diesem Beitrag:


- keine Kommentare zu diesem Beitrag vorhanden -