jquery datebox for mobile devices

DateBox is a jQuery-mobile based date and time picker.

DateBox Features

----------------

* Multiple Data-Entry Modes:

  * Android style date picker

  * Calendar style date picker

  * Slide style date picker

  * Flip Wheel style date or time picker

  * 12 and 24 hour time picker

  * Duration time picker

* 4 Different display modes:

  * Standard, click-outside-to-close popup mode

  * Forced input modal popup mode

  * Unique page dialog mode

  * Inline mode

* Fully localized:

  * Configurable Month names

  * Configurable Day Names

  * All labels and buttons configuratble

  * Multiple languages can be loaded at once for dynamic reconfigure

* Supports data-limiting of input:

  * Configurable maximum and minimum years (android mode)

  * Configurable maximum and minimum number of days from "today" (both date modes)

  * Allows blacklisting of days of the week or specific dates (calendar mode)

  * Allows selecting specific day from any week selection (calendar mode)

* Automatically parses hand-entered or pre-entered dates on open

* Auto-bind's to data-type='datebox', options are configurable via data-options.

------------------------------------------------------------------------------

Download

------------------------------------------------------------------------------

jquery datebox for mobile devices

jquery google maps for mobile device

Google Maps based on jQM element with following features:

Google maps with geolocation

Using clusters with MarkerClusteredPlus

Microformats, Google streetview and jQuery dialog

Click and drag events with Google geo search

Show markers from JSON

Show markers with microdata

Show markers with microformats

------------------------------------------------------------------------------

Download

------------------------------------------------------------------------------

jQuery mobile examples

Jquery Image Gallery for mobile and touch devices

Jquery Image Gallery for mobile and touch devices

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices moreover PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

------------------------------------------------------------------------------

Download

------------------------------------------------------------------------------

IMAGE GALLERY FOR MOBILE AND TOUCH DEVICES

jQuery Mobile Pagination

A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard!

Simply add this plugin to your page and link together documents via ordinary HTML anchors. jQuery Mobile Pagination will enhance those links with touch-drag navigation in browsers that support touch events.

This is implemented on top of jQuery Mobile's Ajax Navigation Model, meaning this plugin ties into your browser's history, so back and forward buttons work as expected!

To use:

1.      Reference jquery.mobile.pagination.css and jquery.mobile.pagination.js from your page.

2.      Place the following markup somewhere inside each document that you want to make draggable. The links should point to the next and previous pages.

Markup:

<ul data-role="pagination">

    <li class="ui-pagination-prev"><a href="2.html">Prev</a></li>

    <li class="ui-pagination-next"><a href="4.html">Next</a></li>

</ul>

Download

Create Modal Subscribe Box Using jQuery

Step 1: Design > Add Gadgets, Add HTML/JavaScript.

Step 2: Add Below code Below code in Content.(Do not had tittle).

<link media="screen" rel="stylesheet" href="http://www.freshinterview.com/blogpopup/colorbox.css" />
        <link media="screen" rel="stylesheet" href="http://www.freshinterview.com/blogpopup/pop.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://www.freshinterview.com/blogpopup/js/jquery.colorbox.js"></script>
            <script src="http://www.freshinterview.com/blogpopup/js/jquery.colorbox-min.js"></script>
         <script src="http://www.freshinterview.com/blogpopup/Script.js"></script> 



        <!-- This contains the hidden content for inline calls -->
         <div style='display:none'>
                <div id='subscribe' style='padding:10px; background:#fff;'>
                <h2 class="box-title">Never Miss Any Update From Us!</h2>
                <h3 class="box-tagline">Get notified about our updates.</h3>

                <!-- BEGIN #subs-container -->
                <div id="subs-container" class="clearfix">

                    <!-- BEGIN .box-side -->
                        <div class="box-side left">

                        <div class="box-icon"><a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=SourceHub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/feed.png"/></a></div>

                        <h4><a href="http://feedburner.google.com/fb/a/mailverify?uri=SourceHub" target="_blank">Subscribe by Email</a></h4>


                         <div class="box-icon"><a class="email" href="http://feeds.feedburner.com/sourcehub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/rss.png"/></a></div>
                        <h4><a href="http://feeds.feedburner.com/sourcehub" target="_blank">Subscribe by Feed</a></h4>
                        
                       <div class="box-icon"><a class="email" href="http://in.linkedin.com/pub/nagesh-tech-spark/48/458/780" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/in.png"/></a></div>
                        <h4><a href="http://in.linkedin.com/pub/nagesh-tech-spark/48/458/780" target="_blank">Subscribe by LinkedIn</a></h4>                    
                        <!-- END .box-side -->
                    </div>

                    <div id="box-or">OR</div>

                    <!-- BEGIN .box-right -->
                        <div class="box-side right">

                        <div class="box-icon"><a class="rss" href="http://www.facebook.com/pages/Tech-spark/232340523506801" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/like.png"/></a></div>

                        <h4><a href="http://www.facebook.com/pages/Tech-spark/232340523506801" target="_blank">Subscribe by Facebook</a></h4>



                        <div class="box-icon"> <a class="email" href="https://plus.google.com/b/102093994164315503941" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/plus.png"/></a></div>
                             <h4><a href="https://plus.google.com/b/102093994164315503941" target="_blank">Subscribe by Google+</a></h4>
                        
 <div class="box-icon"><a class="email" href="https://twitter.com/#!/sourcehub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/twitter.png"/></a></div>
                        <h4><a href="https://twitter.com/#!/techspark99" target="_blank">Subscribe by Twitter</a></h4>                    
                    <!-- END .box-side -->

                    </div>

                <!-- BEGIN #subs-container -->
                </div>
                </div>
        </div>

Step 1:Save the changes.



Please comment on it if you are facing any problem.

JQuery Moving background Image

Today I’m going to explain about how to make JQuery moving background image.
Here it goes…
Step1: Download these two files: jquery-1.3.1.min.js and jquery.bgscroll.js Link this to your html file.
Step2: call below function:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bgscroll.js"></script>
<script type="text/javascript" language="javascript">
$( function() {
$('.clouds1').bgscroll({direction:'v' });
$('.clouds2').bgscroll({scrollSpeed:5 , direction:'h' });
$('.clouds3').bgscroll({scrollSpeed:10, direction:'d'});
});
</script>

Step3: put below style in css file
.clouds{background:#3e83c8 url(images/875-cloud_article.jpg) repeat-x 0 bottom; width:564px; height:310px; float:left; border:2px solid #ccc; margin:10px;}
Step:write below single line code inside body tag
<div class="clouds"></div>

NOTE: Please comment on it. if you are facing Problem.