How to blogs and code snippets - HTML/CSS/JS

How to use and append data to Masonry in responsive jQueryMobile with JSF 2 and ajax

Posted Monday March 02, 2015 18:48:00

   Using Masonry in jQueryMobile with JSF 2 and Ajax
This is a demonstration on using Masonry, a grid layout JavaScript library, in a responsive JSF 2 page with jQueryMobile framework. This also shows how to do partial update, appending new grid items to Masonry by fetching additional data from the server via JSF <.f:ajax /> requests. The following assumes that you have included in a page the necessary jQuery, jQueryMobile, Masonry, and ImagesLoaded JavaScript and CSS files. This is based on MyFaces 2.2.3 JSF implementation, version 1.43 of jQueryMobile (JQM), and Masonry version 3.2.

As a demo please check out our Gallery page, it employs the same code as described here.


Continue reading

How to play a sound when an element is clicked in HTML page

Posted Saturday February 22, 2014 13:57:43

   How to play a sound when an element is clicked in HTML page
In this example we will demonstrate how to play a "click" sound when a link or other element is clicked in HTML pages. A sample code for jQueryMobile is also provided. An MP3 audio file is used play the actual sound. You have to have jQuery in your page for this to work.

Sound is played through HTML5 <audio /> tag but instead of embedding the tag manually, the tag is created via Javascript/JQuery. Below is how this is done.


Continue reading

Using Google Custom Search engine in PrimeFaces Overlay Panels

Posted Thursday February 20, 2014 23:59:02

The following is an example on how to implement a custom Google Search engine in PrimeFaces version 4 <p:overlayPanel />. First create an account with Google Custom search (CSE) here https://www.google.com/cse. You will get your own Custom Search engine ID. From within your CSE account you will find a place to generate the following basic CSE Javascript code. Place this code in the head section or in the body just before the closing </body> tag, whichever is prefered.


Continue reading

How to create a JQuery Mobile page with responsive grids

Posted Wednesday August 21, 2013 23:01:26

This blog aims to demo examples on how to implement a responsive page targeting various handheld screen sizes. What we decribe here is similar to what we use in our XHTML JSF home page that uses JQuery mobile but is no different when applied to a JQuery mobile page in HTML.


Continue reading

How to display a custom styled Google map

Posted Wednesday July 31, 2013 19:38:18

Styling a Google map is available since the introduction of API version 3. Custom styles are custom colors applied to map features, like "road", "water", etc. This is done either by setting the styles property of a standard map's MapOptions with custom values or by creating a separate custom map.


Continue reading

Using Rhinoslider with image and youtube content in JSF pages

Posted Saturday May 04, 2013 18:44:17

Rhinoslider demo   
Rhinoslider sample.   
Rhinoslider is a beautiful JQuery slider plugin that can handle images, video and other HTML content with many custom options. Using the plugin in HTML pages is quite simple and straightforward. Their website even has a generator that will give you a code and start customizing the plugin from there. Here in this blog, we will demostrate how to integrate this plugin on images and youtube videos into a JSF page based on version 1.05 of the plugin. We will provide 2 options of embedding the plugin. Live demo is available in the home page with this site.

Listing 1 below, is a sample generated page. Please make sure that items from 6 to 11 of the snippet are accessible from the page itself. These items are part of the plugin download. If using PrimeFaces, you may want to remove lines 6 to 8. Also lines 10 and 11 are optional and are controlled by the values of "easing" and "controlsMousewheel" parameters of the plugin (see Listing 7).


Continue reading

Using Google+ interactive post for web pages

Posted Tuesday March 05, 2013 01:48:08

A Google+ interactive post is similar to a basic share post but adds a call-to-action button to the post. In a product post for example, the call-to-action button can be "Add to cart", engaging your users direct from Google+ stream. The call-to-action button appears just below the main post area. Aside from the call-to-action, the interactive post will ask for user permission the first time the share button is used through the standard Google+ OAuth consent dialog or always depending on the value of data-approvalprompt attribute.


Continue reading

Tracking user interactions with Facebook and Twitter buttons with Google Analytics

Posted Sunday January 20, 2013 02:05:28

In this blog we will demonstrate how to track user interaction with Facebook like button and Twitter tweet button in a webpage using Google Analytics. We will use the asynchronous versions of Facebook and Twitter JavaScript SDK. We will also show how to track other user actions in your page like opening a lightbox.


Continue reading

Using Google Map directions in HTML pages

Posted Friday January 11, 2013 03:52:26

This demonstration uses the DirectionsService JavaScript API of Google Map version 3 to request for the directions.   It uses DirectionsRenderer to display the results instead of handling them ourselves manually.   This demonstration does not use WayPoints.

See the DirectionsService documentation for information and options.


Continue reading

Using JQuery Asynchronous Image Loader with preloader on resized images

Posted Sunday November 04, 2012 12:39:14

JQuery Asynchronous Image Loader (JAIL) is a jQuery plugin that lazy load images making your page load faster. It works best with a preloader image that is shown while the main image is not yet fully loaded. You can get JAIL from their github page here https://github.com/sebarmeli/JAIL .

This blog shows you how we used this plugin on resized images with a preloader. By resize, we mean using the height/weight attribute of an <img/> element and still use an unresized preloader.


Continue reading

Adding Pinterest button to a lightbox

Posted Monday October 22, 2012 22:36:57

In this demonstration we will use slimbox 2, a lightbox 2 clone. Slimbox, like lightbox, and most its clones, uses the title attribute of a link to render a caption near the bottom of the frame, below the image. It is this title that we also use to add our Pinterest button. Using a link as title directly will not work, aside from the resulting title, which become the tool tip of the link, is ugly.

Slimbox is an image only lightbox.


Continue reading

Using jQuery plugin stickyPanel in HTML and PrimeFaces/JSF pages

Posted Tuesday February 14, 2012 23:20:07

A stickyPanel described in this blog is a div element positioned anywhere in a HTML page. This div element sticks and remains visible at the top of the page as the page is scrolled down. We have implemented the plugin in our PrimeFaces pages and is currently being used in this page.


Continue reading

Image manipulation using HTML Div and CSS - image overlay on image, cropping and image caption

Posted Friday January 27, 2012 21:44:07

In this blog we'll show you how to place an image inset on top of a larger image using div elements and appropriate CSS style of a HTML page. We don't display the inset right away, instead we hover over the image to actually show the inset image. We will also demonstrate how to crop images to desired sizes without scaling the image.

A link to a working demo of this blog can be found near the bottom of this article. View the source of the demo page to get the entire source.


Continue reading

Using Google Earth in HTML pages with KML, load progress bar, ballons, placemarkers and events

Posted Thursday January 12, 2012 15:02:24

This is to share our recent work with Google Earth. The procedure we describe below works with HTML as well as with PrimeFaces/JSF pages. This is based on Google Code playground excercises. You may also want to get an Google API key if you don't have it already.


Continue reading