IT 4 BLONDES

Beautiful women doing geeky stuff

Bootstrap and JavaSript

Related Posts

23/03/2013 Categories: Bootstrap JavaScript

Notes from "Introduction to Bootstrap" Scott Alan

To have your button toggle on and off like checkboxes - nice turn on/off effect add to your button "buttons-checkbox" or button-radio (only one button can be selcted at the time)

<div id="btngroup" class="btn-group" data-toggle="buttons-checkbox">
</div>

Important! The button state is not set until after you click event fires

data-...-text (i.e.data-loading-text) bootstrap will insert/replace this text on the existing text on the button

 

Modals - introduce modal dialogs on the page (can be used with progress bar)

you need something (a link) to initiate dialog

i.e.:
<h2 id="modal">
Modals</h2>
<a href="#themodal" role="button" class="btn" data-toggle="modal">start dialog</a>
<div id="themodal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;</button>
<h3>
Modal header</h3>
</div>
<div class="modal-body">
<p>
Lore ipsum</p>
<div class="progress progress-striped">
<div id="doitprogress" class="bar">
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a id="yesbutton" href="#" class="btn" aria-hidden="true">jhjhjh</a>
</div>
</div>


<script>
$(function () {

var yesButton = $("#yesbutton");
var theModal = $("#themodal");
var progress = $("#doitprogress");

yesButton.click(function () {

yesButton.button("loading");

var counter = 0;
var countDown = function () {
counter++;
if (counter == 11) {
yesButton.button("reset");
theModal.modal("hide");
}
else {
progress.width(counter * 10 + "%");
setTimeout(countDown, 500);
}
};
setTimeout(countDown, 500);
});

});
</script>


Tooltips

Using bootstrap tooltip in place of browser tooltip give you control over tooltip placement, duration etc.
you can specify tooltip options programativly (in JS) or declaratively (data-)

Pop-overs: similar to tooltips but more persistant - you activate them by clicking on the element you need a script and:

Lore ipsum ..........
<a href="#" ref="popover"
data-content="Here is the text of the popover"
data-original-title="Title of the popover">A</a>, lorem ipsum....

 

Scrollspy - easy way to make a menu synchornised with user's position on the page

<section class="navspy">
<ul id="navigation" class="nav nav-pills nav-stacked affix"
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
</section> Important! all the links in your <ul> have to point to DOM elements that exists on the page

You also need to add to your body element <body data-spy="scroll" data-target=".navspy">

 

Typeahead - creates a text input where user can select form a list of options taht will drop down
You can make it by aading to your <input id"languageInput" type="text"
data-provide="typeahead" data-items="3"
data-source ="[&quot;A&quot;,&quot;B&quot;]>
Other way you can achieve it by using a script

 

Carousel - for a nice efect use pictures of the same resolution!
<div id="slidingcarousel" class="carousel slide"
<div class="carousel-inner">
<div class="item">
<img src="images/A.jpg"/>
<div class="carousel-caption">
<h3>Picture A</h3>
<p>Picture A is awsome</p>
</div>
</div>
<a class="#carosuel-control left" href="#slidingvarousel" data-slide="prev">&lsaquo;</a>
<a class="?carosuel-control right" href="#slidingvarousel" data-slide="next">&lsaquo;</a>
</div>

You can add buttons and/or links in the text (<p>)

<scirpt>
$(funtion () {
$('.carousel').carousel({
interval: 2000
});
});
</script>
)