Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Tuesday, 23 September 2014

Bootstrap select box load in dynamically

$('[data-rel="chosen"],[rel="chosen"]').chosen(); // Call this line of script when even to load bootstrap selectbox

Thursday, 21 August 2014

Thursday, 14 August 2014

Bootstrap Tab to set active & show its content in onload or onclick

<div>
    <ul class="nav nav-tabs" id="tabMenu">
        <li class="active"><a href="#Home">Home</a></li>
        <li><a href="#Training">Training</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
Placements <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#dotnet">DotNet</a></li>
                <li><a href="#android">Android</a></li>
                <li><a href="#java">Java</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div id="Home" class="tab-pane fade in active">
            <p>This is the Home page...</p>
        </div>
        <div id="Training" class="tab-pane fade">
            <p>Please select your option regarding on Training...</p>
        </div>
        <div id="dotnet" class="tab-pane fade">
            <p>Welcome to DotNet Placements Section...</p>
        </div>
        <div id="android" class="tab-pane fade">
            <p>Welcome to Android Placements Section...</p>
        </div>
        <div id="java" class="tab-pane fade">
            <p>Welcome to Java Placements Section...</p>
        </div>
    </div>
</div>
Showing Tab targeted by Selector: In order to show our tab manually on start or reload, we have to add the following script to the above code <script type="text/javascript"> $(document).ready(function () { $('#tabMenu a[href="#java"]').tab('show'); // showing the tab targeted by the selector }); </script>
Showing First tab by Default: In order to show the First tab on page reload, Add the below script to the main source <script type="text/javascript"> $(document).ready(function () { $("#tabMenu a:first").tab('show'); // It show the first tab on Reload }); </script>
Showing Last tab by Default: If we need to show the last tab on default, Change the Script like below, <script type="text/javascript"> $(document).ready(function () { $("#tabMenu a:last").tab('show'); // It show the Last tab on Reload }); </script>
Showing Tabs based on Index: We can also show the Default Tab by using Index like in the below script, <script type="text/javascript"> $(document).ready(function () { $("#tabMenu li:eq(1) a").tab('show'); // It shows second tab (0-indexed, like an array) on Reload }); </script>

Tuesday, 5 August 2014

Bootstrap Off Canvas nav toggle viewing windows size

$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});

Wednesday, 25 June 2014

Set Position of Bootstrap Modal Popup

@media screen and (min-width: 768px) {
    .modal-dialog {
        left: 50%;
        right: auto;
        width: 624px;
    }
}
.modal-dialog{
position: absolute;
left: 50%;
//now you must set a margin left under zero - value is a half width your window
margin-left: -312px;
// this same situation is with height - example
height: 500px;
top: 50%;
margin-top: -250px;
}