jQuery Mobile overview

jQuery Mobile

jQuery Mobile is the most broadly compatible HTML5 library for building web sites and apps and we've very proud of our commitment to accessibility, universal access, and staying true to the principles of the web. For anyone who needs to reach the greatest number of people worldwide, our broad support for all popular platforms is a distinct advantage.In Beta 1, we've added support for both Blackberry 5 devices and Opera Mini in Beta 1 which dramatically increases the reach of the framework. Both of these platforms had issues with handling the Ajax-based navigation so they receive a B grade experience with all the enhancements except for Ajax navigation.

With the use of more and more of smartphones and tablets, giving visibility and notoriety to your mobile site has become indispensable.

The problem with mobiles, and the webmaster who already snapped up the hair with four or five browsers are well aware, is that the multitude of phones and smartphones as well as the many resolutions do not make available development very easy.

Fortunately, jQuery Mobile will get you out of this mess.

HTML5, CSS3, nothing has been forgotten in this beta very promising.

 

Get more information here.

Read more about jQuery Mobile overview

jQuery background image slideshow

If you asked how to make a full background image slideshow, here is the solution !

background image slideshow

The jQuery image background slideshow purposed here is simply terrific !

var photos = [ {
      "title" : "Title 1",
      "image" : "SourceImage1.jpg",
      "url" : "http://www.url.1",
      "firstline" : "First line 1",
      "secondline" : "Second line 1"
   }, {
      "title" : "Title 2",
      "image" : "SourceImage2.jpg",
      "url" : "http://www.url.2",
      "firstline" : "First line 2",
      "secondline" : "Second line 2"
   }
   // More pictures if we want
];
 
var slideshowSpeed = 6000;

The results is very impressive as you can see in the Demo page.

After you integrate the.js files and integrate the .html one, you'll have to deal with your .css code. The documentation is perfect and so easy.

Official site is here.

Enjoy jQuery !

Read more about jQuery background image slideshow

Lof JSliderNews 1.0 - Jquery 1.3 and Easing plugin

jQuery sliderAnother elegant and very efficient solution for your slideshow and images slider.

It comes from landofcoder and is very simple to use.

For joomla users, available plugin.

For others, you have to code, but it's not too bad !

direction: '', //support 2 directions, opacity and slide from right to left (as default) mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector: 'li' ,
navigatorEvent: 'click',
wapperSelector:'.lof-main-wapper',mainWidth:600, // set width of slider
interval: 4000, // set time to play next slide
auto: true, // whether to automatic play the slideshow
maxItemDisplay: 3,
startItem: 0,
navPosition: 'vertical',
navigatorHeight: 100,//set height of navigator item (note: add padding of item)
navigatorWidth: 310,//set width of navigator item (note: add padding of item)
duration: 600,
navItemsSelector: '.lof-navigator li',
navOuterSelector: '.lof-navigator-outer' ,
isPreloaded: true,
easing: 'easeInOutQuad',
buttons:null

jQuery slider

Read more about Lof JSliderNews 1.0 - Jquery 1.3 and Easing plugin

Slides, a jQuery plugin for slideshow

slideshow

If you need an elegant and very simple solution to introduce slideshow on your website, Slides is made for you.

All is perfect in this jQuery plugin and it works with every browser.

With it you've got a linking solution for your slideshow, with images preload, delay parameters, and a lot of other options very very useful.

$(function(){
  $("#slides").slides({
    preload: true,
    preloadImage: '/img/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true
  });
});

See it in action on the author website.

Read more about Slides, a jQuery plugin for slideshow

Cufon, fonts for your website

cufonCufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

  • No plug-ins required – it can only use features natively supported by the client
  • Compatibility – it has to work on every major browser on the market
  • Ease of use – no or near-zero configuration needed for standard use cases
  • Speed – it has to be fast, even for sufficiently large amounts of text

Browser support: IE 6,7,8 and 9 - Firefox 1.5+ - Chrome - Safari 3+ - Opera 9+ - iOS - Webkit

How it works

Cufon.replace('h1', { fontFamily: 'Vegur' });

Cufon.replace('h2', { fontFamily: 'Myriad Pro' });

<h1>This text will be shown in Vegur.</h1>

<h2>This text will be shown in Myriad Pro.</h2>

Enjoy here !

Read more about Cufon, fonts for your website