ulvis.paste.net

Paste Search Dynamic
Recent pastes
shadow.js
  1. /* It would probably be a good idea to do some kind of basic DOM or
  2.    browser check in any code that uses this technique. I don’t bother
  3.    here because this is just a demo. */
  4.  
  5. init();
  6.  
  7. function init() {
  8.   var oldOnLoad = window.onload;
  9.   window.onload = function() {
  10.     if (oldOnLoad) oldOnLoad();
  11.     addMattesAndShadows();
  12.   }
  13. }
  14.  
  15. function addMattesAndShadows() {
  16.  
  17. /*
  18.  
  19. 1. Get all the imgs in the document.
  20. 2. Step through the imgs, identifying the shadow ones. (Hi, DOM guys?
  21.    A getElementByCSSSelector functon would kick ass. Kay? Thanks.)
  22. 3. For each img of class shadow:
  23.    a. Create a new div node of class shadow.
  24.    b. Set the width of the new node to the width of the img plus a little
  25.       extra to accommodate the matte we’re adding.
  26.    c. Add a clone of the img to the new div as a child.
  27.    d. Create the four corner divs and add them to the new div as children.
  28.    e. Replace the img with the new shadow div.
  29.  
  30. I’m going to identify each step as I go, so if you see something that doesn’t
  31. make sense, just look for the closest number.
  32.  
  33. */
  34.  
  35.   /* 1. */
  36.   var imgs = document.getElementsByTagName("img");
  37.  
  38.   /* 2. */
  39.   for (var i = 0; i < imgs.length; i++) {
  40.     var thisImg = imgs[i];
  41.     var isShadow = false;
  42.     var extraWidth = 10;
  43.  
  44.     /* A word about extraWidth. This value represents the width of the white
  45.        matte we’re adding around our shadowed images. I like a five-pixel
  46.        matte, hence extraWidth equals ten.
  47.  
  48.        Yes, it’s lame to hard-code the matte into both the CSS and the
  49.        JavaScript. We are, in fact, just asking for trouble by doing it this
  50.        way. But after literally tens of seconds of intense thought, I failed
  51.        to come up with a more clever solution. If you feel like tackling
  52.        it, knock yourself out. Since I’m only applying one kind of matte
  53.        per site-wide instance of this technique, I really don’t care. */
  54.  
  55.     if (thisImg.className) {
  56.  
  57.       /* First we’ll tokenize the className, since classes can have multiple
  58.          space-separated values. */
  59.  
  60.       var classTokens = thisImg.className.split(' ');
  61.       for (var j = 0; j < classTokens.length; j++) {
  62.         var thisToken = classTokens[j];
  63.         if (thisToken == "shadow")
  64.           isShadow = true;
  65.         if (thisToken == "nomatte")
  66.           extraWidth = 0;
  67.       }
  68.  
  69.       /* If thisImg is a shadow image … um  apply the shadow. Duh. */
  70.  
  71.       /* 3. */
  72.       if (isShadow) {
  73.  
  74.         /* 3a. */
  75.         var shadowDiv = document.createElement('div');
  76.         shadowDiv.className = 'shadow';
  77.         /* Yes, you can use setAttribute, but this way works in IE too. */
  78.  
  79.         /* 3b. */
  80.         shadowDiv.style.width = (thisImg.width + extraWidth) + "px";
  81.  
  82.         /* 3c. */
  83.         shadowDiv.appendChild(thisImg.cloneNode(false));
  84.         /* Img elements can’t have children in HTML, so no need for a deep
  85.            clone. That’s what the “falseâ€‌ argument means. Stupid C-like
  86.            non-named-arguments having JavaScript syntax. */
  87.  
  88.         /* 3d. */
  89.         var topLeft = document.createElement('div');
  90.         topLeft.className = "topleft";
  91.         shadowDiv.appendChild(topLeft);
  92.  
  93.         var topRight = document.createElement('div');
  94.         topRight.className = "topright";
  95.         shadowDiv.appendChild(topRight);
  96.  
  97.         var bottomLeft = document.createElement('div');
  98.         bottomLeft.className = "bottomleft";
  99.         shadowDiv.appendChild(bottomLeft);
  100.  
  101.         var bottomRight = document.createElement('div');
  102.         bottomRight.className = "bottomright";
  103.         shadowDiv.appendChild(bottomRight);
  104.  
  105.         /* 3e. */
  106.         thisImg.parentNode.replaceChild(shadowDiv, thisImg);
  107.  
  108.       }
  109.  
  110.     }
  111.  
  112.   }
  113.  
  114. }
Parsed in 0.014 seconds