Sunday, December 27, 2015

Add the jQueryUI to your web site in 5 minutes

In this Step by step Add the jQueryUI to your web site in 5 minutes  post,  we see how to add the jQueryUI style and javascript to your web in 2 short steps.
This is how a web site using jQueryUI is displayed:



And this is how the site looks like in Nexus Galaxy devices :    



Add the jQueryUI to your web site in 5 minutes  

If you are in a hurry and need to add say a nice Calendar to your web, just take a look here at how to add the jQueryUI style and javascripts to your web in this 2 short steps:

1) download the jQueryUI
2) add only this 3 elements to your Web : 1 file CSS - 1 JS and the Images folder. (and discard all the  other files and folders)



1) Download the jQueryUI files:

Browse to  http://jqueryui.com/themeroller/    and select your favorite Theme : 


Click on "Download" and there click again on "Download" :




Save the .zip file somewhere and unzip it.

2) Add only this 3 elements to your Web:

Next, we select only the following 3 files :

 1) The file CSS : jquery-ui.css
 2) The JS file :    jquery-ui.js
 3) The Images folder   "images" :


Paste the files inside your web site project :


Then, import the links to the web page where you want to enable the jQuery components and style :



The style reference must be located in the <head> element.
The scripts will go by the end of the <body> tag, thus ensuring that all HTML5 elements were created , when the compiler will read the scripts.
However, be careful to :
1) referencing the file scripts before you start coding your own javascript code;
2) the "jquery-ui.js" script file must follow the jQuery code "jquery.js" (or "jquery-X.X.X.js") [where "X" is the current version]




That's all. The web site will be shown like this:


1- In Mobile devices : 





2- On Medium and Big desktops:





      by Carmel Schvartzman


כתב: כרמל שוורצמן

Friday, December 4, 2015

Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy

In this Step by step Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  
 post,  we design in 15 minutes a responsive Bootstrap Tab with  Scrollspy , in a from-scratch Application for Mobile devices & desktop computers . All the code is open source at GitHub:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy

This is how the Responsive Tabs with Scrollspy are displayed:




And this is the App in Nexus Galaxy devices :    



Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  

If you are in a hurry and need the Tabs with Scrollspy right now, download it from the following GitHub repository. Afterwards,  adapt it to your needs:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy


You can begin building this app from a free Bootstrap template downloaded from  www.initializr.com/  (we explained this in a short tutorial: Bootstrap Templates). Elsewhere add to your HTML5 page the following CDN  jQuery and Bootstrap references   :


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


...and the following scripts before closing the </body> element  :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

The latest versions of the Bootstrap files are in this CDN server: http://www.bootstrapcdn.com/

If you need a Mobile device Emulator, read this short tutorial on installing the FREE Ripple Emulator.


1) Designing a Responsive Tab:

Following, we give you all the code to create the Tabs: all this code you just copy-paste inside your page.
Let's start.
We begin by creating the Navbar which allows the user to open the corresponding tabs content . We do so by using the Bootstrap classes "nav nav-tabs"   , in order to set the menu :

<ul id="myTabs" class="nav nav-tabs">
                    <li class="active"><a href="#home" id="home-tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
                    <li><a href="#profile" id="profile-tab" data-toggle="tab" aria-controls="profile">Life</a></li>
                    <li class="dropdown">
                        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">More <span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                            <li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">A friend</a></li>
                            <li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Happiness</a></li>
                        </ul>
                    </li>
                </ul>
                <br />

The buttons will open the corresponding "tab-pane fade" , such as the following :

<div class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                        <h3>Happiness</h3>
                        <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                        <br />
                        <p>Men of the most vulgar type, seem to identify the Happiness with pleasure. (Etics, I ch V)</p>
                        <p>It is the mark of an educated mind to be able to entertain a thought without accepting it.</p>
                    </div>








All the Bootstrap Tabs documentation can be found in the GetBootstrap Web Site.


2) Designing a Scrollspy inside a Tab:

Next, we create another Tab content, containing a Scrollspy:



<div class="tab-pane fade" id="profile" aria-labelledby="profile-tab">

                        <div class="bs-example" data-example-id="embedded-scrollspy">
                            <nav id="navbar-example2" class="navbar navbar-default navbar-static">
                                <div class="container-fluid">
                                    <div class="navbar-header">
                                        <button class="navbar-toggle collapsed" type="button" 
                                            data-toggle="collapse" 
                                            data-target=".bs-example-js-navbar-scrollspy">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="#">Points Of View</a>
                                    </div>
                                    <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                                        <ul class="nav navbar-nav">
                                            <li><a href="#happy">A happy life</a></li>
                                            <li><a href="#Truth">Truth</a></li>
                                            <li class="dropdown">
                                                <a href="#" id="navbarDrop1" 
                                                    class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                                    aria-haspopup="true" aria-expanded="false">More About Life <span class="caret"></span></a>
                                                <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
                                                    <li><a href="#love">Love</a></li>
                                                    <li><a href="#privilege">Privilege</a></li>
                                                    <li role="separator" class="divider"></li>
                                                    <li><a href="#perspective">Perspective</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>        

Every <a> button in the Nav will open the corresponding contents, and also, while you navigate from content to content, the corresponding menu will be outlined  .



Now for the Scrollspy:

 <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
                                <h4 id="happy">A happy life</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Very little is needed to make a happy life</p>
                                ...
                                <h4 id="Truth">Truth</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>If someone is able to show me</p>
                                ...
                                <h4 id="love">Love</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>It is not death that a man should fear</p>
                                ...
                                <h4 id="privilege">Privilege</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>You need to avoid certain things in your train of thought</p>
                                ...
                                <h4 id="perspective">Perspective</h4>

                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Everything we hear</p>
                                ...
                            </div>
                </ul>
            </nav>

        </div>
    </header>





That's all. The entire Tab with Scrollspy will be shown like this:


1- In Mobile devices : 












2- On Medium and Big desktops:






This is the style for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}
.scrollspy-example {
    position: relative;
height:400px;
overflow-y:scroll;
}



      by Carmel Schvartzman


כתב: כרמל שוורצמן