advanced code snippet search

Posted By

noah on 04/07/07


Tagged

css javascript template html DOM example standards layout slidingdoors alistapart nonsemantic


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jonhenshaw
pagetoscreen


Reusable Box with Images and CSS (implements a non-semantic variant of Sliding Doors)

 / Published in: HTML
 

URL: http://onemorebug.com/meme.washer/code_examples/reusableBox/index.html

Reusable balloon, built with JavaScript and css. Expands horizontally (set in the CSS) and vertically (automatically) up the size of its component images. This solution is not semantic, but it is flexible.

The goal was to implement a variant of Sliding Doors that could be boiled down to two snippets of code (one before the content container, and one after) and some CSS.

Expects 3 images, examples of which can be found here: http://onemorebug.com/meme.washer/code_examples/reusableBox/images

Also includes an example JavaScript implementation.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <!--** Time-stamp: <[box.html] modified by Noah Sussman on Saturday, 2007.04.07 at 12 : 41 : 08 on GRIMOIRE> **-->
  5. <title>Reusable Box (sliding doors)</title>
  6. <style type="text/css">
  7. /****************************************************************
  8. ** Reusable Box
  9. ** This is an image-based box design, which allows arbitrary 
  10. ** expansion up to the width and height of its component images.
  11. ** See the "Sliding Doors of CSS" series of articles at A List Apart
  12. ** for in-depth explanation.
  13. ** Note that I have not actually implemented "Slding Doors," as the 
  14. ** markup here is anything but semantic.
  15. ****************************************************************/
  16. body { background: url(images/mars.png) }
  17. .reusableBox { 
  18.     background: url(images/left.png) no-repeat;
  19.     margin-left: -10px;  /* Using a negative margin to avoid overlap of transparent images. I learned to do this by reading css-discuss. NS 2007.04.06 */
  20.     position: absolute;
  21.  }
  22. .reusableBox .presentationTop { 
  23.     background: url(images/top.png) no-repeat top right;
  24.     margin-left: 10px;
  25. /*     padding-top: 10px; */
  26.  }
  27. .reusableBox .rbContent { 
  28.     padding-top: 20px;
  29.     padding-left: 10px;  /* another 10px is added by the margin of presentationTop */
  30.     padding-right: 20px;
  31.     position: relative;
  32.  }
  33. .reusableBox .presentationBottom { 
  34.     height: 10px;
  35.     background: url(images/bottom.png) no-repeat bottom right;
  36.     position: relative;
  37.     top: 10px;
  38. }
  39. .reusableBox .presentationLeftBottom { 
  40.     height: 10px;
  41.     width: 10px;
  42.     margin-left: -10px;
  43.     margin-bottom: -10px;
  44.     background: url(images/bottom.png) no-repeat top left;
  45.     position: relative;
  46.  }
  47. .reusableBox .rbNipple { 
  48.     background: url(images/nipple.png) no-repeat;
  49.     width: 15px;
  50.     height: 11px;
  51.     position: absolute;
  52.     top: 4px;
  53.     left: 22px;
  54.  }
  55. .rbSource {  display: none; } /* this line is optional */
  56. /* styles below here apply to the example implementations */
  57. div#foo { 
  58.     width: 320px; /* set the width of each box by its id */
  59.     top: 40px;
  60.     left: 500px;
  61.     position: relative;
  62.  } 
  63. div#downBalloon { 
  64.     width: 200px;
  65.     top: 110px;
  66.     left: 740px;
  67.     position: relative;
  68.  }
  69. div#downBalloon .rbNipple { 
  70.     left: 134px;
  71.  }
  72. p { display: inline; } /* optional */
  73. code { display: block; padding: .3em; } /* optional */
  74. </style>
  75. <script type="text/javascript">
  76. function makeWeb2Box(elId, width, top, left, hasNipple, nippleOffset) {
  77.   var el = document.getElementById(elId);
  78.   var elContainer = document.createElement('div');
  79.   elContainer.className="reusableBox";
  80.   elContainer.style.width = width;
  81.   elContainer.style.top = top;
  82.   elContainer.style.left = left;
  83.  
  84.   var offset = (nippleOffset ? 'style="left: '+ nippleOffset +'px"' : '');
  85.   var nipple = (hasNipple ? '<div class="rbNipple"' + offset + '></div>' : '');
  86.  
  87.   elContainer.innerHTML = '<div class="presentationTop"><div class="rbContent">' +
  88.   el.innerHTML + 
  89.   '</div><div class="presentationBottom"><div class="presentationLeftBottom">' +
  90. nipple +
  91. '</div></div></div>';
  92.   el.parentNode.insertBefore(elContainer, el);
  93.   el.parentNode.removeChild(el);
  94. }
  95.  
  96. window.onload = function() {
  97.   makeWeb2Box('bar', 400, 10, 40, true, 102);
  98.   makeWeb2Box('jsBox', 200, 300, 400);
  99. }
  100. </script>
  101. </head>
  102. <body>
  103.  
  104. <!-- snippet #1 -->
  105. <div class="reusableBox" id="foo">
  106. <div class="presentationTop">
  107. <div class="rbContent">
  108. <!-- snippet #1 ends -->
  109.  
  110. <p>Reusable box built with css </p>
  111.  
  112. <!-- snippet #2 -->
  113. </div><!-- end of rbContent -->
  114. <div class="presentationBottom">
  115. <div class="presentationLeftBottom">
  116. </div><!-- end of presentationLeftBottom -->
  117. </div><!-- end of presentationBottom -->
  118. </div><!-- end of presentationTop -->
  119. </div><!-- end of reusableBox -->
  120. <!-- snippet #2 ends -->
  121.  
  122.  
  123. <div class="reusableBox" id="downBalloon">
  124. <div class="presentationTop">
  125. <div class="rbContent">
  126. <h3>mars</h3>
  127. <p>this is a popup built with css</p>
  128. </div><!-- end of rbContent -->
  129. <div class="presentationBottom">
  130. <div class="presentationLeftBottom">
  131. </div><!-- end of presentationLeftBottom -->
  132. <div class="rbNipple"></div>
  133. </div><!-- end of presentationBottom -->
  134. </div><!-- end of presentationTop -->
  135. </div><!-- end of reusableBox -->
  136.  
  137.  
  138. <div id="bar" class="rbSource">
  139. <p>Reusable balloon, built with JavaScript.
  140. <code>
  141. makeWeb2Box(someId (string), width (integer), top (integer), left (integer), [hasPointer (boolean), pointerPosition (integer)])
  142. </code>
  143. Turns the hidden div named 'someId' into a popup, 
  144. with or without a pointer (the default is no pointer).  
  145. If a pointer is specified, optionally set the left position 
  146. of the pointer image (the default is set in the CSS).
  147. </p>
  148. </div>
  149.  
  150. <div id="jsBox" class="rbSource">
  151. <p>This is a box (not a balloon, because the pointer is omitted).  This box has been built with JavaScript.</p>
  152. </div>
  153.  
  154. </body> 
  155. </html>

Report this snippet  

You need to login to post a comment.