JQ widgets – ready made Web UI controls and widgets

jQWidgets provides ready made widgets and controls for Web UI and Mobile. It already has 60+ UI controls and widgets such as buttons, charts, directory trees, tabs, menus, loader, progress bar, and etc..

jQWidgets is built on HTML5, Javascript, and JQuery.

Main benefits of using jQWidgets are:

1.) Compatible on all web browsers ( IE, Safari, Chrome, Mozilla, and etc.. )

2.) Already implemented widgets and controls, no need to create one from scratch

jQWidgets also provide integration to other popular and widely ised web frameworks such as AngularJS and Twitter Bootstrap.

Links:

jQWidgets integration with AngularJS

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm

jQWidgets integration with Twitter Bootstrap

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/bootstrap/jqwidgets-with-twitter-bootstrap.htm

Available widgets for web

http://www.jqwidgets.com/jquery-widgets-demo/

Available widgets for mobile

http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/

jQwidgets also provide web site themes

http://www.jqwidgets.com/themebuilder/

Advertisements

DataTables JS : Quick way to created sorted tables in HTML

DataTables JS is a Jquery plugin to create HTML tables with sorting and paging. No need to code all the table functionalities, just set the data on the JS file and call the Datatables function.

Here’s the main page:
https://www.datatables.net/

Here’s a very basic example with HTML ( in a tr and td format ) and three lines of JavaScript.
https://www.datatables.net/examples/basic_init/zero_configuration.html

Here’s a server side processing using PHP. Notice that the HTML is reduced to Header and Footer of the table.
https://www.datatables.net/examples/data_sources/server_side.html

Here’s an example on how to use DataTables using JSON and Java.
http://stackoverflow.com/questions/24893158/getting-javascript-json-string-to-populate-datatable

And here’s a step by step example on how to use DataTables using JSON and Java
https://dzone.com/articles/how-create-jquery-datatable

Limitations

DataTables loads all data as retrieved and then it has the option to display it via paging. It does not yet support Server data retrieval by each page click.

Parallax Webpage effect : Using Materialize CSS

Parallax: A viewing effect that a foreground moves at a faster speed than its background. One example is when your riding a bus or car and you’re looking beside the road. Notice that the trees moves faster than the clouds in the background.

I created a HTML Parallax page using Materialize CSS. Materialize CSS is a Web UI Framework composed of CSS and JS files.

See their about page: http://materializecss.com/about.html

The sample HTML is using the Materialize CSS and JS files compilation provided. the CDN method is not used, so the sample can run offline.

Step 1.

Jquery 2.1.4 is required for Materialize CSS. Also download the Jquery 2.1.4 ( as used for Materialize.js ).
Important:  JQuery should be in the first order of import, then Materialize.js comes next, or else it would not work.

Step 2.

Download the Materialize CSS files here:
http://materializecss.com/getting-started.html

Step 3. 

Create the two component files as needed. One for the html where all the Materialize CSS and JS are needed. And the other is the JS file to initialize the Parallax function. The source code is given below.

Here is the HTML Parallax page I created.

Here is the demo from materializecss.com
http://materializecss.com/parallax-demo.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="materialize-v0.97.0/materialize/css/materialize.min.css">
</head>
<body>
<div class="parallax-container">
    <div class="parallax"><img src="../parallax/images/family_mart.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
      <p class="grey-text text-darken-3 lighten-3">Integer vitae justo metus. Etiam ut mauris ut turpis imperdiet hendrerit. Etiam dictum augue neque, eu pulvinar nisi faucibus quis turpis. Suspendisse convallis, felis vitae laoreet rhoncus, magna dui congue nulla. </p>
    </div>
  </div>
<div class="parallax-container">
  <div class="parallax"><img src="../parallax/images/cbp.jpg"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="parallax_init.js"></script>
</body>
<footer>
  <div class="section white">
    <div class="row container">
     <p class="grey-text text-darken-3 lighten-3"> Cebu CM Solutions
      quis augue ac sem suscipit laoreet in quis ipsum. Curabitur enim sapien
    </p>
   </div>
  </div>
</footer>
<html>

$(document).ready(function(){
      $('.parallax').parallax();
});

Picture Catalog in HTML and CSS

I created a picture catalog in using HTML and CSS. I will show the source codes and the sample screen shots. A website picture catalog is a set of pictures shown in a tiles or grid pattern. This displays the products, it’s price and other details. The sample pictures I have are taken from my other site : cebucmhotels.wordpress.com.

I used the Sublime text editor to create HTML and CSS. In the samples, the images will automatically arrange when the resolution is adjusted.

See the sample code below.


<html>
<head>
<link rel="stylesheet" type="text/css" href="format.css">
</head>
<body bgcolor="#181818"> <!-- sets the entire page background -->
<ul class="products">
    <li>
        <img src="../catalog/sogod.jpg">
        <a href="#" style="color:white">    
            <h4>North Sky Resort Sogod</h4>
            <p>Sogod, Cebu</p>
        </a>
    </li>
    <li>
        <img src="../catalog/rancho-cancio.jpg">
        <a href="#" style="color:white">   
            <h4>Rancho Cancio</h4>
            <p>Busay, Cebu City</p>
        </a>
    </li>
    <li>
        <img src="../catalog/marriot.jpg">
        <a href="#" style="color:white">    
            <h4>Marriot</h4>
            <p>Cebu Business Park</p>
        </a>
    </li>
    <li>
        <img src="../catalog/plantation-bay.jpg">
        <a href="#" style="color:white">    
            <h4>Plantation Bay</h4>
            <p>Mactan, Cebu</p>
        </a>
    </li><!-- add more list items -->
</ul>
</body>
</html>

ul.products li {
    width: 370px; /* adjust the size of the catalog block */
    display: inline-block; /* this creates the catalog effect */
    text-align: center; /* align the image to center */
    background-color:#282828 ; /* background color of each */
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    border-radius: 10px; /* rounded borders effect */
    border: 2px solid #585858; /* border and color */
}

=========================================

References

1.) Do it with CSS and HTML first

Seamless Responsive Photo Grid

2.) Product View Grid

Using inline-block to Display a Product Grid View

3.) 3×3 html grid

http://www.dreamincode.net/forums/topic/240281-positioning-images-in-a-3×3-grid-sort-of-layout/

References using angular JS ( but I did not added angular JS yet )
making a photo slide show with angular JS

http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/

http://onehungrymind.com/build-a-full-page-angularjs-slideshow/

http://www.sitepoint.com/creating-slide-show-plugin-angularjs/

Hide a textbox and label on dropdown select using Jquery

Here is a sample code on how to hide a text field and its label on dropdown select. See the inline comments for description of each line.


//the "select" drop down has the class name "account_type_class"
//ex. <select id="account-type" class="account_type_class" >	
$("select.account_type_class").change(function(){	

 //get the selected value. This is the "value" set in jsp
 //assigned to an "option"
 //ex. <option id="a-type_business" value="business">Business</option>		
 var value = $(this).val();

 if(value === "business"){
   
   //This code shows the label 
   $('label[for="cust_name"]').show();
   //This code shows the textbox
   $("#c-name").show();
 }
		
 //in this case, we hide the label and text box
 if(value === "personal"){
   $('label[for="cust_name"]').hide()
   $("#c-name").hide();
 }

Here’s the JSP code snippet.

<label>Account Type
<select id="account-type" class="account_type_class" >
  <option id="a-type_business" value="business">Business</option>
  <option id="a-type_personal" value="personal">Personal</option>
</select></label><br/><br/>
<label>Account Name <input type="text" name="accountname" id="s-name"></label><br/><br/>
<label for="cust_name">Customer Name <input type="text" name="customername" id="c-name"></label><br/><br/>

jquery-1.11.3.min.js version is used.

JQuery, Angular JS and Java

Update: One main difference of Angular JS from Jquery is that Angular JS binds HTML elements and controls it in HTML/JSP file, with much less usage of the *.js ( javascript ) unlike Javascript with JQuery. Angular JS has additional attributes called Directives.

Angular JS – A new Javascript Framework that was launched last 2009. For some background, Javascript is a Client-Side scripting for websites. In layman’s term ( or just to make things easier to understand ), Javascript is used to manipulate the menus, buttons, and text fields in a website. Then JQuery comes in as an enhancement ( a set of JavaScript libraries / standard codes ) to encapsulate routine JavaScript code. JavaScript with JQuery creates a much better and code, and with lesser lines, than just JavaScript alone.

Then here comes Angular JS. Angular JS is a Framework. Its not an-add on Library unlike JavaScript. But first, Let’s differentiate a Framework from a Library. To start, a library is a set of additional instructions, mostly common functions that are simplified that are ready to use. Think of it as a set of tools in a tool box. Framework, as other developers say, is just the same as a Library. But then why is it called Framework? For example, Spring Framework as just a Spring Library? Well, I think here’s the difference. Yes a Framework is also a set of common used functions, but the difference is that a Framework is a built-in software platform that is used to enhanced software. Libraries may relate to tools, while Framework may relate to a simple mechanical machine. For example, you can use a pen, a paper and a cash box as a cash register. This is a similar concept of a Library. But then you use a cash register machine, which is a similar concept of a Framework.

Angular JS can write lesser code than JQuery. And Angular JS can do more stuff than JQuery, especially in the unit test area. These are the two main reasons why a lot of Software Developers / Companies are trying out Angular JS development. But other experienced developers are sticking to the JQuery, since Angular JS is not yet time tested. There are still some hesitations, but there is potential.

Here are some reference links on Angular JS:
– JQuery / Angular JS comparison
https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough

– Offical Angular JS page
https://angularjs.org/

– Angular JS and Java Backend intergration using REST
http://www.radcortez.com/java-ee-7-with-angular-js-crud-rest-validations-part-2/
http://www.radcortez.com/java-ee-7-with-angular-js-part-1/

Search/Filter a text list by Javascript key-up

Here’s is a sample code on how to search through a list in Javascript. This code will search from a list of texts from a given key word, and triggers upon key-up ( after typing a keyword/letters ).

For example, given the following list below:

the
quick
brown
quail
fox

Then if given the keyword/text “qui”, it then displays this list

quick
quail

Here is the sample code:

$(.&quot;search-textbox&quot;).keyup(function(){
 var query = $(this).val().toLowerCase //search is case insensitive
 var index;
 var listMember;

 $.each(contactList, function ( Key, val ){
  index = val.index;
  listMem = val.listMember;

 if(listMem.toLowerCase().indexOf(query) !== -1)
 {
  $(&quot;.result_class&quot;).find(&quot;li-li-&quot;+index).show();
 } else {
  $(&quot;.result_class&quot;).find(&quot;li-li-&quot;+index).hide();
 }
}); 

Class names may vary, depnding on the JSP/HTML code.