Widget Examples

Javascript Widget

Benefits over iFrame

  • Links open in new Tab
  • Takes less Real-Estate
  • Modern/Dynamic GUI

Default Embedding

The widget will add its CSS to the header & append this widget to the HTML Body. By default it displays at the top right. You just have to place this code anywhere in your HTML:
<script src="http://www.zebrastrut.com/devs.js"></script>

Easy Placement

You can pass in "top", "left", or "right" values to be used for the widget's CSS, as I've done on this page. The widget will automatically detect which side of the page it is on, and cause the flyouts to open in the correct direction.
<script src="http://www.zebrastrut.com/devs.js?top=250px&left=3px"></script>

Specifying a Container

The widget floats over other HTML elements, so it can be useful to specify a container that will cause the widget to displace other HTML elements. You must have a <div> with a position:relative that you can place anywhere on the page & a div inside that one with id="zebrastrut". The <script> must be added AFTER those divs, or it will create its own div at the top right of the page because it cannot see any "zebrastrut" div in the DOM yet.
<div style="position:relative;overflow:visible;width:80px;">
    <div id="zebrastrut"></div>
</div>
<script src="http://www.zebrastrut.com/devs.js"></script>

WARNING: CSS "Cascades"

Our CSS shouldn't collide with anything on your site, as it is all beneath the qualifier "#zebrastrut" (it will only affect elements inside the <div> with id="zebrastrut"), but that doesn't mean your CSS can't affect our widget.
If you have generic CSS specifications for <a>, <div>, <ul>, or <li>, it can affect our widget.
While our CSS will override many potential cascading oddities, it is not comprehensive. If the widget doesn't look correct, you should consider removing generic CSS specifications and scoping them with either classes or parents. If you cannot figure out where the CSS collision is occurring, the iFrame widget may work better for you.

iFrame Widget

Benefits over JS Widget

  • Static Size
  • Easy to Skin
  • Banners Rotate
  • Can have more than 1

Default (no special parameters)

URL: http://zebrastrut.com/community/widget.php


CSS you should use:

iframe { height:350px; width:350px; border:solid 1px black; }

Dark Skin (customizable colors)

URL: http://zebrastrut.com/community/widget.php?a=00ff00&text=3F7346&background=000


Light Skin (& include @CynicPlacebo)

URL: http://zebrastrut.com/community/widget.php?a=00f&text=000&background=ffffff&who=CynicPlacebo