jQuery Plugin To Generate Responsive Image Header - BrowserWrap

BrowserWrap is a simplest jQuery plugin that adds a flat style, responsive Safari browser header to your image. No images required.

How to use it:

1. Load the jquery-browserWrap.css in the head section and the jquery.browserWrap-min.js at the bottom of the webpage.

<link rel="stylesheet" href="dist/jquery-browserWrap.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.browserWrap-min.js"></script>

2. Just call the function on the img tag and done.

$("img").browserWrap();

3. Modify or override the default styles of the image header.

.bw-browser { display: inline-block }

.bw-browser__header {
  background-color: #dedede;
  border-radius: 5px 5px 0 0;
  height: 30px
}

.bw-browser__button {
  background-color: #E74C3C;
  border-color: solid #000 1px;
  border-radius: 100px;
  display: inline-block;
  height: 10px;
  left: 10px;
  margin: 0 5px 0 0;
  position: relative;
  top: 10px;
  width: 10px
}

.bw-browser__button:nth-child(2) { background-color: #F6BA59; }

.bw-browser__button:nth-child(3) { background-color: #27AE60; }

---

This awesome jQuery plugin is developed by toddmoy. For more Advanced Usages, please check the demo page or visit the official website.