Developers Feed: jQuery

Showing posts with label jQuery. Show all posts

Monday, November 3, 2014

10 Awesome Mobile Menu plugins and tutorials

Due to high usage of smartphones, creating mobile apps, mobile site or responsive site has become a must have thing which helps to expand the customer base. Create mobile specific site or responsive site is a challenging things due to presence of different mobile OS, different screen size phones with different resolution, different software and hardware. As limited space is available on mobile device for displaying website, so creating menu is challenging. But not to worry.

Today we have complied list of 10 awesome, free and ready to use jQuery plugins and tutorials for creating mobile menus. Enjoy..

Shifter is a jQuery plugin for simple slide-out mobile navigation. Shifter works by checking for target elements in the DOM and binding events to them.

SlickNav

SlickNav is a responsive mobile menu plugin for jQuery with features like multi-level menu support, cross-browser compatibility, Flexible, simple markup and degrades gracefully without JavaScript.

Menutron

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.

Responsive and Touch-Friendly Menu

Tutorial for creating responsive and touch-friendly dropdown navigation. The technique consists of 3 main parts which are Simple drop-down navigation based on HTML and CSS, Responsiveness implementation using media queries and Adoption for touch screen devices with the help of a super tiny jQuery plugin.

jQuery.mmenu

mmenu is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website or responsive website.

Navobile

jQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.

FlexNav

FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

Responsive Retina-Ready Menu

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, use an icon font so that the icons of the menu won’t get pixelized on resize.

slimMenu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.With slimMenu, you’ll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. It is 100% mobile responsive.

Horizontal Slide Out Menu

A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Tuesday, April 1, 2014

jQuery Sheetrock : Plugin for Load data from Google Spreadsheets

Sheetrock is a jQuery plugin for querying, retrieving, and displaying data from Google Spreadsheets. Use it to load entire sheets or leverage SQL-like queries to treat Google Spreadsheets as a quick-and-dirty JSON datastore. All you need is the URL of a public Google Spreadsheet. It requires no backend code whatsoever—everything is done in the browser.

Features:

Query sheets using the SQL-like Google Visualization query language (filters, pivots, sorting, grouping, and more)
Lazy-load large data sets (infinite scroll with ease)
Mix in your favorite templating system (Handlebars, Underscore, etc.)
Customize to your heart’s content with your own handlers and callbacks

Read More Demo Download

jQuery-Pjaxr : Pushstate aJAX eXtended Replacements

jquery-pjaxr is jQuery plugin that uses ajax and pushState to deliver a fast browsing experience.It is able to replace multiple containers and different head tags with full back-forward functionality.

There is already an awesome plugin called jquery-pjax on which this project is based. For not breaking existing frontends but to support the same port to the server this library is named pjaxr and accepts the same header X-PJAX.

Read More Demo Download

Monday, March 31, 2014

jQuery HTML5 Radio Station Player

This was a long term project which has been improved multiple times. It includes Multi-server Shoutcast & Icecast Stats PHP Class to parse current playing track and its playtime. Currently the script supports Icecast & Shoutcast (Tested on Latest Versions). It is not responsive (adding responsiveness should be fairly easy). This player also allows your visitors to customize their experience, they can choose between different streams, enable or disable auto start feature, enable or disable flash as primary player and change player background. Its easy to set-up and add to any existing web site.

I really encourage you to check preview.

Features

Easy to Configure and Deploy
Based on JPlayer (HTML5 & Flash Fall back)
LastFM API for showing Artists Images
Includes 12$ worth PHP Class Multi-server Shoutcast & Icecast Stats PHP Class
Includes amazing PHP caching class that works with memcache, memcached, APC (user cache) and HDD cache (default)
Allows your listeners to customize experience (Turn Flash on/off, Auto Play on/off, Change Background, Change Stream Quality (if you have multiple streams))
Creates Play-list files on the fly from configured streams
Best Deployed as POPUP or IFRAME so your listeners can keep browsing your site while listening

Platforms and Browsers

Windows: Firefox, Chrome, Opera, Safari, IE9, IE10+
OSX: Safari, Firefox, Chrome, Opera
iOS: Mobile Safari: iPad, iPhone, iPod Touch
Android 2.3+: Chrome, Firefox, Opera and most other mobile browsers
Blackberry: OS 7 Phone Browser, PlayBook Browser

Note: Playback support varies by stream you use. For example: Icecast with OGG codec will not play on Android.

Requirements

PHP 5+
PHP CURL or file_get_contents() must have enabled “REMOTE ACCESS” (check with host)
LastFM Developer API key (Optional)
Shoutcast/Icecast Admin access
Some space to cache artist images (If LastFM API key is provided) (optional)

If you have issues with player, please check support section (FAQ) first, If you are unable to find issue, contact me via email and I will help you!

Changes log

    6.3.2014 - v.1.01
    - Fixed issue with Shoutcast V1
    - Fixed issues with older PHP versions (PHP5+ required!)

    25.2.2014 - v1.00
    - Initial Release

Monday, March 24, 2014

How to create social content locker using jQuery plugin

I saw a website where for some work and at the main content they add a box with message to The content is locked! Please like us to to unlock content. So I found the way how he did that and found a jQuery plugin added to do this so decided to give my reader this functionality so the can implement in there web application and give useful data with little contribution like tweet, like, plus or share on social network and get information they want.

I have used a jQuery plugin which add social media buttons for Twitter tweet, follow, Facebook like, Google plus or LinkedIn share instead of your content, actually it hide your data and show buttons once you like or tweet it will hide buttons and show you content and create a cookie on your browser so you will get content every time until cookie available on your browser.

Include jQuery and Plugin:

<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://demo.phpgang.com/social-locker-jquery/social-locker.js"></script>

1 2	<script src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="http://demo.phpgang.com/social-locker-jquery/social-locker.js"></script>

jQuery to initialize social locker:

<script type="text/javascript">
    jQuery.noConflict();                    
    jQuery(document).ready(function ($) {
        $("#lock-my-div").sociallocker({
            text: {
                header: "The content is locked!", // replace content with this heading
                message: "Please support us, click like button below to unlock the content." // hidden content message
            },

            theme: "starter", // Theme

            locker: {
                close: false,
                timer: 0
            },

            buttons: {   // Buttons you want to show on box
                order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"] 
            },

            facebook: {  
                appId: "2068418453432508",
                like: {
                    title: "Like us",
                    url: "https://www.facebook.com/9H9Gang" // link to like in Facebook button
                }
            },

            twitter: {
                tweet: {
                    title: "Tweet", 
                    text: "PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos.", // tweet text
                    url: "http://www.phpgang.com/" //tweet link
                },
                follow: {
                    title: "Follow us", 
                    url: "http://twitter.com/phpgang" // Twitter profile to follow 
                }
            },

            google: {                                
                plus: {
                    title: "Plus +1",
                    url: "http://www.phpgang.com/" // Google plus link for +1
                }
            },

            linkedin: {
                url: "http://www.phpgang.com/",      // LinkedIn url to share 
                share: {
                    title: "Share"
                }
            }
        });
    });
</script>

jQuery.noConflict();

jQuery(document).ready(function ($) {

$("#lock-my-div").sociallocker({

text: {

header: "The content is locked!", // replace content with this heading

message: "Please support us, click like button below to unlock the content." // hidden content message

theme: "starter", // Theme

locker: {

close: false,

timer: 0

buttons: { // Buttons you want to show on box

order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"]

facebook: {

appId: "2068418453432508",

like: {

title: "Like us",

url: "https://www.facebook.com/9H9Gang" // link to like in Facebook button

}

twitter: {

tweet: {

title: "Tweet",

text: "PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos.", // tweet text

url: "http://www.phpgang.com/" //tweet link

follow: {

title: "Follow us",

url: "http://twitter.com/phpgang" // Twitter profile to follow

}

google: {

plus: {

title: "Plus +1",

url: "http://www.phpgang.com/" // Google plus link for +1

}

linkedin: {

url: "http://www.phpgang.com/", // LinkedIn url to share

share: {

title: "Share"

}

});

</script>

In above jQuery we give our links to user to like or share and initialize social locker plugin for a div with id lock-my-div and that div will be replaced with social content and your defined message once user perform any activity it will hide that social buttons box and show your content div.
CSS used to beautify the display:

<style type="text/css">

    .jo-sociallocker.jo-sociallocker-msie {
        background-color: hsl(200, 65%, 91%);
        border-color: hsl(190, 65%, 84%);
        color: hsl(200, 50%, 45%);
    }
    .jo-sociallocker {
        background-color: hsl(50, 81%, 94%);
        border: 1px solid hsl(39, 83%, 91%);
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 20px;
        padding: 8px 35px 8px 14px;
        -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
        width:60%;
        margin-left: auto;
        margin-right: auto;
    }
    .jo-sociallocker-button{
        float: left;
        margin-left: 10px;
    }
    .jo-sociallocker-after-text{
        margin-bottom: 20px;
    }
    .jo-sociallocker-buttons{
        height:35px;
    }
    .jo-sociallocker-strong{
        font-size: 30px;
        color: hsl(0, 0%, 0%);
    }
</style>

.jo-sociallocker.jo-sociallocker-msie {

background-color: hsl(200, 65%, 91%);

border-color: hsl(190, 65%, 84%);

color: hsl(200, 50%, 45%);

}

.jo-sociallocker {

background-color: hsl(50, 81%, 94%);

border: 1px solid hsl(39, 83%, 91%);

-moz-border-radius: 4px 4px 4px 4px;

-webkit-border-radius: 4px 4px 4px 4px;

border-radius: 4px 4px 4px 4px;

margin-bottom: 20px;

padding: 8px 35px 8px 14px;

-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);

width:60%;

margin-left: auto;

margin-right: auto;

}

.jo-sociallocker-button{

float: left;

margin-left: 10px;

}

.jo-sociallocker-after-text{

margin-bottom: 20px;

}

.jo-sociallocker-buttons{

height:35px;

}

.jo-sociallocker-strong{

font-size: 30px;

color: hsl(0, 0%, 0%);

}

</style>

You can customize CSS as per your website layout.
Content div replaced with social buttons

<div id="lock-my-div" style="display: none;">
    <p>
        <!-- YOUR CONTENT GOES HERE -->
    </p>
</div>

<p>

</p>

</div>

DOWNLOAD CODE DEMO