Author Archives: CodeMunkyX
Dec
07
Hovercard jQuery Plugin
A very nice jQuery plugin that will allow you to place a hovercard anywhere in the text of your website. Great for displaying contextual information about a topic you want highlighted / noticed in the body of your page. Now comes with built-in hovercards for both Twitter / Facebook styles. Check it out!
Plugin Blurb
A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice. When should you use hovercard? A hovercard comes handy when displaying Person bio, Book author and price, Loading related information with Ajax, Editing in place, and what not! Check out the following demos to see some of this stuff in action
Dec
05
Indentation in Textarea using jQuery
A quick and easy snippet to allow the user to utilize the tab indentation within a textarea form element. Normally, when a user is filling out a form and use the tab button it advances the cursor to the next form element. This handy piece of code eliminates that and will indent the text instead. Enjoy!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<script language="javascript">
$(document).ready(function(e) {
// Using the <TAB>
$('textarea.tab').keydown(function(e) {
if(e.keyCode == 9) {
var start = $(this).get(0).selectionStart;
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
return false;
}
});
// Using Spaces
$('textarea.space').keydown(function(e) {
if(e.keyCode == 9) {
var start = $(this).get(0).selectionStart;
$(this).val($(this).val().substring(0, start) + " " + $(this).val().substring($(this).get(0).selectionEnd));
$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;
return false;
}
});
});
</script>
<h5>Using the <TAB></h5>
<textarea cols="40" rows="10" class="tab"></textarea>
<h5>Using Spaces</h5>
<textarea cols="40" rows="10" class="space"></textarea>
</body>
</html>
- Source: Eric Potvin @ Book of Zeus
Dec
05
Masked Input Plugin
Masked Input Plugin is a jQuery plugin that will allow you to place masked input form elements on your web page. This allows for more user-friendly forms and keeps your data a certain way when being submitted to database or by email.
Plugin Blurb
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari and Chrome.A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.
Sep
05
30 jQuery Enhanced CSS Button Techniques
A really nice review / post that presents 30 jQuery Enhanced CSS Button Techniques that can be used for the buttons on your web site / web application. These are ideal for web sites wanting to add a little extra flare to menus / navigation / forms. Enjoy.
Article Blurb
Buttons are the most important part of a website, because your visitors can interact with your website. If you are looking for easy and effective way of creating CSS botton with jQuery, this post is for you. In this post, you can find 30 jQuery Enhanced CSS Button Techniques
Sep
05
Improve web application security with jQuery Mobile
A must-read tutorial that takes you through important steps to improve your web application / site security using jQuery Mobile. The author, John Leitch, covers such vulnerabilities such as: Cross-site scripting, Cross-site request forgery, Broken access control, SQL injection, and more.
Article Blurb
Many web developers consider security a low priority. Security is frequently relegated to the end of the software development life cycle, as little more than an afterthought. Sometimes, software security is neglected entirely, resulting in applications rife with common vulnerabilities. Because such bugs might manifest only under conditions present during an attack, they can be hard to detect prior to such events without knowledge of how the exploitation process works. Using a web application built with jQuery Mobile, PHP, and MySQL, this tutorial shows how many types of vulnerabilities occur along with common methods of exploitation and, most importantly, their respective countermeasures.
Sep
05
jQuery Mobile and JSON
Frank Ableson, of Navitend, has written a very nice tutorial that goes into detail about how to utilize the jQuery Mobile framework to build rich content sites regardless of viewing device. The great thing about this tutorial is you can follow along and participate by performing the steps needed and see your results as you are working through it.
Article Blurb
jQuery powers many of the sites on the Internet today, providing dynamic user experience in the browser and helping to make traditional desktop applications increasingly rare. Now that browsers found on the major mobile platforms have caught up to desktop browser functionality, the jQuery team has introduced jQuery Mobile, or JQM. The mission of JQM is to bring a universal experience to all major mobile browsers, enabling rich content across the Internet, regardless of the viewing device. This tutorial examines fundamental design concepts around jQuery Mobile in the context of a sales force automation-oriented application. You create an intuitive and visually appealing mobile web application that interacts with an Internet-hosted website to store and manage sales opportunities.
Aug
31
jQuery 1.6.3 RC1 Released
The jQuery 1.6.3 RC1 was released a couple days ago and is ready for those in the jQuery community to start testing on their development environments. If you feel you can help with the testing process or need to report anything you have found, please visit their official blog for more details below.
Article Blurb
jQuery 1.6.3 is almost ready to roll! We need your help with this release candidate to be sure we’ve got everything right.
Aug
31
Quovolver
Quovolver is a nice little jQuery plugin that will put a revolving quote anywhere on your website. Features fadeIn and fadeOut effects as well as being ideal for placing in an element that will shrink / grow based on the size of the quote being displayed.
Plugin Blurb
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Aug
31
Animated intro page using Jquery
Intro pages have always been at the forefront of web page design. Over the years there have been several techniques used such as Flash, static splash screens, and more. This article takes you through steps that can add a different element to your intro page by using jQuery animations and other effects.
Article Blurb
Since the very beginning of the Web, I always remembered the Intro pages. So, today we are going to create a unique Intro page using Jquery. The magic is that the we will not use Flash or a separate html Intro page. All the content and the Intro buttons will be loaded and displayed in the page itself with some cool animations. Also I have designed one simple template for Joomla 1.5 and 1.6 using the intro
Aug
31
jQuery Loading Animation Without Images
Today, we are going to take a look at how to create a jQuery Loading Animation without the use of images. Using just CSS and jQuery, you can build a capable replacement to a graphical loading animation. Below, we will step you through the what is needed to incorporate this jQuery snippet into your web page.
DIV Tags
Below are the DIV tags needed to display the animation in your page. You may add / remove loaderBox DIVs below for the desired number of boxes you wish to show in your animation. In this example, 8 boxes will be displayed.
<div id="jQuerySnipsLoadAnim"> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> <div class="loaderBox"></div> </div>
CSS Styling
You may place the below in the HEAD area of your html document or add it to a css file that is included in your page. You may change the names below, but keep in mind the jQuerySnipsLoadAnim id should correspond to your wrapper DIV tag id. Also, the .loaderBox class specification should correspond to the internal DIVs.
<style>
#jQuerySnipsLoadAnim {
display: block;
width: 200px;
}
.loaderBox {
display: none;
}
</style>
jQuery Settings
The below settings should reflect how you want each “box” to look or behave when the animation is active. You can change such things as the background color, size of the boxes, the offset width / height (size the box grows too), and speed of the animation, etc. If you change the name of the wrapper DIV (jQuerySnipsLoadAnim), you must also change the array element for jqsOptions below.
var jqsOptions = new Array();
jqsOptions["jQuerySnipsLoadAnim"] = {
'bgcolor' : '#abc',
'position' : 'relative',
'float' : 'left',
'width' : '20px',
'height' : '20px',
'margin' : '2px',
'opacity' : '.5',
'display' : 'none',
'widthOffset' : '+=5px',
'heightOffset' : '+=5px',
'animationSpeed' : '500'
};
var jqsTimer = new Array();
var jqsInt = new Array();
Start / Stop Animation
Now, you will learn how to start and stop the loading animation. You may use any event trigger basically, however for this demo we are starting and stopping from the click event for 2 buttons. Everything in the loaderStart event below is needed to start the loading animation and everything in the loaderStop is needed to stop it. Once again, be sure to change jQuerySnipsLoadAnim if you change the DIV tags.
$("#loaderStart").click(function(){
jqsDiv = "jQuerySnipsLoadAnim";
jqsInit(jqsDiv);
jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);
});
$("#loaderStop").click(function(){
clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);
});
Supporting Functions
And finally, the below are the supporting functions that shouldn’t need to be modified for basic operation.
function jqsInit(jqsDiv) {
$(this).stop();
$(this).clearQueue();
clearInterval(jqsTimer[jqsDiv]);
jqsInt[jqsDiv] = 0;
$("#"+jqsDiv+" > div").css({
"display" : "inline",
"background-color" : jqsOptions[jqsDiv].bgcolor,
"position" : jqsOptions[jqsDiv].position,
"float" : jqsOptions[jqsDiv].float,
"width" : jqsOptions[jqsDiv].width,
"height" : jqsOptions[jqsDiv].height,
"margin" : jqsOptions[jqsDiv].margin,
"opacity" : jqsOptions[jqsDiv].opacity
});
}
function jqsLoader(jqsDiv) {
var jqsBox = $("#"+jqsDiv+" > div");
var jqsBoxes = $("#"+jqsDiv+" > div").size();
$(jqsBox[jqsInt[jqsDiv]]).show().animate({
"display": "inline",
"width": jqsOptions[jqsDiv].widthOffset,
"height": jqsOptions[jqsDiv].heightOffset,
"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {
$(this).animate({
"width": jqsOptions[jqsDiv].width,
"height": jqsOptions[jqsDiv].height,
"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});
}
});
jqsInt[jqsDiv]++;
if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; }
}
Full Code in Action
To bring it all together, we have provided the required code below with a demo. Enjoy!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body><style>
#jQuerySnipsLoadAnim {
display: block;
width: 200px;
}
.loaderBox {
display: none;
}
</style>
<button id="loaderStart">Start Loading Animation</button> <button id="loaderStop">Stop Loading Animation</button>
<div id="jQuerySnipsLoadAnim">
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
<div class="loaderBox"></div>
</div>
<script>
var jqsOptions = new Array();
jqsOptions["jQuerySnipsLoadAnim"] = {
'bgcolor' : '#abc',
'position' : 'relative',
'float' : 'left',
'width' : '20px',
'height' : '20px',
'margin' : '2px',
'opacity' : '.5',
'display' : 'none',
'widthOffset' : '+=5px',
'heightOffset' : '+=5px',
'animationSpeed' : '500'
};
var jqsTimer = new Array();
var jqsInt = new Array();
$("#loaderStart").click(function(){
jqsDiv = "jQuerySnipsLoadAnim";
jqsInit(jqsDiv);
jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);
});
$("#loaderStop").click(function(){
clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);
});
function jqsInit(jqsDiv) {
$(this).stop();
$(this).clearQueue();
clearInterval(jqsTimer[jqsDiv]);
jqsInt[jqsDiv] = 0;
$("#"+jqsDiv+" > div").css({
"display" : "inline",
"background-color" : jqsOptions[jqsDiv].bgcolor,
"position" : jqsOptions[jqsDiv].position,
"float" : jqsOptions[jqsDiv].float,
"width" : jqsOptions[jqsDiv].width,
"height" : jqsOptions[jqsDiv].height,
"margin" : jqsOptions[jqsDiv].margin,
"opacity" : jqsOptions[jqsDiv].opacity
});
}
function jqsLoader(jqsDiv) {
var jqsBox = $("#"+jqsDiv+" > div");
var jqsBoxes = $("#"+jqsDiv+" > div").size();
$(jqsBox[jqsInt[jqsDiv]]).show().animate({
"display": "inline",
"width": jqsOptions[jqsDiv].widthOffset,
"height": jqsOptions[jqsDiv].heightOffset,
"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {
$(this).animate({
"width": jqsOptions[jqsDiv].width,
"height": jqsOptions[jqsDiv].height,
"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});
}
});
jqsInt[jqsDiv]++;
if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; }
}
</script>
</body>
</html>
