jquery

Image sliders for mobile

Image sliders for mobileHaving image slider is a great way showcase your website, of course for mobile too, say if you built an responsive web for mobile and found that your slider don’t work anymore when you swipe, here are some alternative images slider that work just great on mobile. they are responsive and works great on your finger.

 

Swipe.js

Read More

Phonegap 2.1 Whitelist rejection with Ajax

For those who are using phonegap 2.1 and want to do web app or want to request external data from your server or others,
you get use jquery Ajax.

1
2
3
4
5
6
7
8
$.ajax({
url: 'http://google.com',
   dataType: "text",        // <=== new bit
   success: function(data) {
      alert(data);
                     
   }
});

you are using this and get a error of telling you that you have whitelist rejection, here is the solution
open you Xcode phonegap project Navigate to Resources folder, click on Cordova.plist
at the last row, rightclick and chose to “add a new row”,
enter the name “ExternalHosts” change Type to arrow,
expand this and add in the link url that you want.
for more infos please read
http://docs.phonegap.com/en/2.0.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

jQuery Mouse Wheel Slider

This is one of the project that i created for my full time job, which i want to share this interesting jQuery Wheel slider.
If you haven see the slider before, please check out below

[button link=”https://maxlibin.com/demo/jwslider/” size=”small” target=”self”]Demo[/button]          [button link=”https://github.com/maxlibin/jwSlider” size=”small” target=”blank”]Download[/button]

Lets start with the basic html first
I have included 4 javascript files
jquery1.8.js
jquery.mousewheel.min.j
jquery.easing.1.3.js
Script.js (you can see the code below or download the whole package)
I have also included the html5shiv that allow me to render Html5 in older browsers.

Read More

Instantly get value while you type with jQuery

Many questions have been asked, how do i get that input value to be shown on another DIV box or somewhere while i typing in the form>

luckily jQuery has a easy solutions for us.

lets say we have a form that included a text input, and a label input

Read More

jQuery validation plugins

jQuery has a few plugins for validations that simplify your job and beautify your website.
here are some of them

Read More

Make IE render HTML 5 Tags

The easiest way is to include this tag in your head

1
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Styling select fields

Styling select field is a huge pain, the select field are so limited that we have to look for javascript solutions.

Here are some good jQuery Plugins that you download.

Read More

Smooth scroll and find position of scrollbar with jQuery plugin

As a Html designer we all know that we can navigate to a position within a page using Anchor Point

1
2
3
4
//set a position
<a name="position"></a>This is a position
// button for me to go to that position
<a href="#position">Go</a>

however many designers are building more sexy and easy ways using javascript libraries, one of the easiest way i found that allow me to allow the scrolling smoothly is a plugin, download below
[button link=”http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/” size=”medium” target=”blank”]anchor plugin[/button]      [button link=”http://docs.jquery.com/Downloading_jQuery” size=”medium” target=”blank”]jQuery[/button]

Its very easy to use, all you need to do is call this plugin to header

1
<script type="text/javascript" src="jquery.anchor.js"></script><script type="text/javascript" src="jquery.js"></script>
Read More

Easy way to change stylesheet with jQuery

This is my first article here, so i am going to keep it short and sweet, i am going to write a easiest way to switch between stylesheet using jQuery.

Read More