Examples: HTML5 Local Storage

Storage Events

Directions: open multiple windows or tabs with this demo and change the text below.

The storage event triggers on the "blurred" windows, giving us a way to communicate across windows using localStorage.

Your test data: (this is only echoed on other windows)

Waiting for data via storage event...

Read More

Stacked Navs

2

<ul class="nav nav-stacked nav-pills"> <li class="active"> <a href="https://www.blogger.com/blogger.g?blogID=192373765027274067#">Home</a> </li> <li> <a href="https://www.blogger.com/blogger.g?blogID=192373765027274067#">Profile</a> <div class="panel-group" id="panel-790548"> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790548" href="#panel-element-712703">Collapsible Group Item #1</a> </div> <div id="panel-element-712703" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790548" href="#panel-element-246103">Collapsible Group Item #2</a> </div> <div id="panel-element-246103" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche... </div> </div> </div> </div> </li> <li class="disabled"> <a href="https://www.blogger.com/blogger.g?blogID=192373765027274067#">Messages</a> </li> </li> </ul>

Read More

Bootstrap: Wide 10-2-8 - Tabs Stacked

• Section 1
• Section 2

I'm in Section 1.

Howdy, I'm in Section 2.

Read More

Bootstrap: Creating Dynamic Tabs via Data Attributes

• Section A
• Section B
• Dropdown
  • Dropdown 1
  • Dropdown 2

Section A content…

Dropdown 1 content…

Dropdown 2 content…

Read More

Bootstrap Tabs Nested In Fluid Columns

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
Learn more

• Section 1
• Section 2

SectionOne

SectionTwo      

• Home
• Profile
• Messages

<div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="jumbotron"> <h1> Hello, world! </h1> This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. <br /> <a class="btn btn-primary btn-large" href="https://www.blogger.com/blogger.g?blogID=398067465316743738#">Learn more</a> </div> <div class="row clearfix"> <div class="col-md-10 column"> <div class="tabbable" id="tabs-763092"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="https://www.blogger.com/blogger.g?blogID=398067465316743738#panel-969377">Section 1</a> </li> <li> <a data-toggle="tab" href="https://www.blogger.com/blogger.g?blogID=398067465316743738#panel-613289">Section 2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel-969377"> SectionOne</div> <div class="tab-pane" id="panel-613289"> <span style="color: red;"><b>SectionTwo      </b></span><br /><br /></div> </div> </div> </div> <div class="col-md-2 column"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="https://www.blogger.com/blogger.g?blogID=398067465316743738#">Home</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=398067465316743738#">Profile</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=398067465316743738#">Messages</a></li> </ul> </div> </div> </div> </div> </div> <!--BEGIN HIDE BLOGGER SIDEBAR -------------------------------------> <br /> <br /> <style id="FF3" type="Text/css"> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; } </style> <br /> <br /> <span style="background-color: white; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 18.5px; padding-bottom: 4px;"></span><br /> <br /> <span style="background-color: white; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 18.5px; padding-bottom: 4px;"><br /> </span>

Read More

JS: Remove Classes

class="myClass1 myClass2" id="myDiv"

<div class="myClass1 myClass2" id="myDiv"> </div> <input id="demo" type="button" value="Demo" /> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#demo").live("click", function () { //Get CSS class var classes = $("#myDiv").attr("class"); alert(classes); //Remove all CSS classes $("#myDiv").removeAttr("class"); //Get Updated CSS class var classes = $("#myDiv").attr("class"); alert(classes); }); </script>

Read More