Web Style Press, Best Practices from all the Web, Build Better Websites » JQuery http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 jQuery Fancy Date Picker http://www.webstylepress.com/jquery-fancy-date-picker/ http://www.webstylepress.com/jquery-fancy-date-picker/#comments Sat, 01 Nov 2008 20:11:38 +0000 Hiroshi http://www.webstylepress.com/?p=382 jQuery Fancy Date Picker is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

jQuery date picker is a drop down date picker calendar when input field is focused. We have to use following files for date picker.

jquery.js
ui.datepicker.js
ui.datepicker.css

Download jQuery Date Picker

jQuery Fancy Date Picker is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/jquery-fancy-date-picker/feed/ 0 jQuery Cheats Sheet http://www.webstylepress.com/jquery-cheats-sheet/ http://www.webstylepress.com/jquery-cheats-sheet/#comments Fri, 31 Oct 2008 19:59:50 +0000 Hiroshi http://www.webstylepress.com/?p=379 jQuery Cheats Sheet is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Download jQuery Cheats Sheet printable version or view at your iPhone or iPod Touch containing selectors, css and attributes, traversing, filter, find, access, manipulating, ajax, UI effects, ebents, interaction and more…

jQuery Cheats Sheet for iPhone and iPod Touch
Printable Version jQuery Cheats Sheet

jQuery Cheats Sheet is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/jquery-cheats-sheet/feed/ 0 Create jQuery Basic Hide Show Function http://www.webstylepress.com/jquery-basic-hide-show-based-on-class/ http://www.webstylepress.com/jquery-basic-hide-show-based-on-class/#comments Thu, 30 Oct 2008 19:42:21 +0000 Hiroshi http://www.webstylepress.com/?p=375 Create jQuery Basic Hide Show Function is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> In this example we will see that how we can generate a simple hide show script using jQuery. Consider the following example. We have included jQuery latest file. Then we have created three functions for hide, show and toggle and we have attached these functions with classes on Click Event of mouse and our target is h1 heading text.

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
 
  $(document).ready(function() {
   $('.hideh1').click(function(){
     $('div.showhide,h1').hide();
   });
   $('.showh1').click(function(){
     $('div.showhide,h1').show();
   });
   $('.toggleh1').click(function(){
     $('div.showhide,h1').toggle();
   });
 });
 
</script>
</head>
<body>
<h1>You can hide and unhide this Heading by clicking the links below</h1>
 
<div><a href="#" class="hideh1">Hide</a></div>
<div><a href="#" class="showh1">UnHide</a></div>
<div><a href="#" class="toggleh1">Toggle</a></div>
 
</body>
</html>

Download Example Show Hide Via jQuery

Create jQuery Basic Hide Show Function is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/jquery-basic-hide-show-based-on-class/feed/ 1 Create jQuery Smooth News Rotator http://www.webstylepress.com/jquery-smooth-news-rotator/ http://www.webstylepress.com/jquery-smooth-news-rotator/#comments Wed, 29 Oct 2008 19:42:17 +0000 Hiroshi http://www.webstylepress.com/?p=369 Create jQuery Smooth News Rotator is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Here is a very smooth little jQuery news scroller, ticker or rotator. One news at a time. This rotator adds a vertical news sliding animation with easing effect into content. Script file is as light as 1kb.

Javascript Part

Include this script in head section of web page or via external js file.

<script language="javascript" type="text/javascript">
 var headline_count;
 var headline_interval;
 var old_headline = 0;
 var current_headline = 0;
 $(document).ready(function(){
   headline_count = $("div.headline").size();
   $("div.headline:eq("+current_headline+")").css('top','5px');
   headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
   $('#scrollup').hover(function() {
     clearInterval(headline_interval);
   }, function() {
     headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
     headline_rotate();
   });
 });
 function headline_rotate() {
   current_headline = (old_headline + 1) % headline_count; 
   $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
     $(this).css('top','210px');
   });
   $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
   old_headline = current_headline;
 }
</script>

CSS Part

Include this css in head section.

<style type="text/css">
 #scrollup {
   position: relative;
   overflow: hidden;
   border: 1px solid #000;
   height: 200px;
   width: 200px
 }
 .headline {
   position: absolute;
   top: 210px;
   left: 5px;
   height: 195px;
   width:190px;
 }
</style>

HTML Part

<div id="scrollup">
 
<div class="headline">
<strong>content 1 ...</strong>
<br />
This is content number 1
</div> 
 
<div class="headline">
<strong>content 2 ...</strong>
<br />
This is content number 2
</div> 
 
<div class="headline">
<strong>content 3 ...</strong>
<br />
This is content number 3
</div> 
 
<div class="headline">
<strong>content 4 ...</strong>
<br />
This is content number 4
</div>     
 
</div>

Download jQuery News Rotator

Create jQuery Smooth News Rotator is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/jquery-smooth-news-rotator/feed/ 7 Accessible News Slider jQuery Plugin Download http://www.webstylepress.com/accessible-news-slider/ http://www.webstylepress.com/accessible-news-slider/#comments Mon, 13 Oct 2008 09:05:13 +0000 Hiroshi http://www.webstylepress.com/?p=109 Accessible News Slider jQuery Plugin Download is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements also as outlined by WCAG 1.0.

  • Supported jQuery Version: [ 1.1.3.1 ]
  • Supported Browsers: [ Windows IE 6+, FF 1.5+, Opera 9+ ] [ Mac Safari 2+, FF 1.5+, Opera 9+ ]
  • The newsWidth option was eliminated. Calculates the width of each news item automatically. It made sense that a developer should only have to adjust the CSS, instead of needing to specify any dimensions through the plugin options.

Download
Also see jCarousel JQuery Fancy Scroll

Accessible News Slider jQuery Plugin Download is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/accessible-news-slider/feed/ 0 Markitup – Universal Markup Editor – Rich Text Editor http://www.webstylepress.com/markitup-universal-markup-editor/ http://www.webstylepress.com/markitup-universal-markup-editor/#comments Tue, 23 Sep 2008 22:38:56 +0000 Hiroshi http://www.webstylepress.com/?p=92 Markitup – Universal Markup Editor – Rich Text Editor is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any TextArea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

markItUp! is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. MarkItUp! is not a WYSIWYG editor.

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Toolbar and drop down menus
  • Fully customizable and scriptable
  • Editor’s features callable from any place
  • Ajax dynamic preview
  • Customizable Skins

Markitup Home

Markitup – Universal Markup Editor – Rich Text Editor is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/markitup-universal-markup-editor/feed/ 0 LavaLamp Navigation http://www.webstylepress.com/lavalamp-navigation/ http://www.webstylepress.com/lavalamp-navigation/#comments Sun, 21 Sep 2008 22:45:16 +0000 Hiroshi http://www.webstylepress.com/?p=79 LavaLamp Navigation is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Have you seen flash based menu in which OnMouseOver at each link brings a box background behind that and when you move towards other link, background box shifts its position towards that link. Exactly that beautiful effect this LavaLamp and jQuery built navigation offers.

Requirements

jquery.js
jquery.lavalamp.js
easing.js (Optional)

LavaLamp Homepage

LavaLamp Navigation is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/lavalamp-navigation/feed/ 0 jCarousel Lite Scroll – Fancy Scroll http://www.webstylepress.com/jcarousel-lite-scroll/ http://www.webstylepress.com/jcarousel-lite-scroll/#comments Sun, 21 Sep 2008 21:14:47 +0000 Hiroshi http://www.webstylepress.com/?p=72 jCarousel Lite Scroll – Fancy Scroll is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

jCarousel Lite is a jQuery plugin 2kb in size. jCarousel Lite can be used for fancy scrolls of content including images or text. I have created an example for my need and put it here to download but updates and all documentation as well as complete customization can be found at original website.

Requirements

jquery.js
jcarousellite.js
easing.js (Optional)
mousewheel.js (Optional)

Customizations include Auto Scroll, Scroll More, Mouse Wheel, Mouse Wheel and Buttons, Custom animation – Easing, Custom Animation – Speed, Custom Widget, More or Less content, Non-Image Content, Mixed Content, Vertical, External Controls, Callbacks, Image Slider, Image Slider – External Controls, Fraction Configuration, Non Circular motion.

Download

jQuery jCarousel Fancy Scroll
Website

jCarousel Lite Scroll – Fancy Scroll is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/jcarousel-lite-scroll/feed/ 1