Flabell’s Flash XML Survey allows unlimited number of questions and variable number of answers passed through the XML file. Each question allows only one answer and it’s necessary to choose one in order to move to the next question. All the answers are saved in the XML file for later visualization, the process being transparent to the user.
General information:
by Gabriel posted in AJAX Library, JavaScript Library | 1 comment
jQuery Tools is a collection of the most important user-interface components for today’s websites. It’s a single .js file that weights only 5.8 kb.
The following tools are available:
You can use all individual tools and or select only a combination of the tools you need.
The file size is definitely not the primary reason why this library speeds up your site. The fact that this tool is a single file makes it performance friendly. According to Yahoo experts, this is the first rule for making highly responsive websites.
PHP.JS is an open source project in which PHP functions are ported to JavaScript. This library can speed up development for programmers who are increasingly confronted with client-side technology.
Some of the higher-level functions implemented in PHP.JS are: file_get_contents(), mktime(), serialize(), md5(), date(), base64_decode().
Developer Kevin van Zonneveld was once working on a project with a lot of client(JS) / server(PHP) interaction, and he found himself coding PHP functions (like base64_decode & urldecode) in JavaScript to smoothen communication between the two languages.
He stored the stored the functions in a file called php.js which was included in the project. But even when the project was done, it remained fun trying to port PHP functions to JavaScript, and so the library grew.
Kevin decided to share the little library on his blog, triggering the enthusiasm of a lot of PHP developers longing for PHP functionality in JavaScript. The project was open sourced in 2008, and many people contributed their own functions in the comments sections of Kevin’s blog.
by Gabriel posted in AJAX Library, JavaScript Library
Do you want to have a nice protection against SPAM on the forms of your website? Checkout the following scripts:
AJAX Fancy Captcha is a jQuery plugin useful to prevent your forms from being automatically submitted by bots. The coll thing about it is that you don’t have to type a security code to prove that you are a human. You only need to drag & drop an object into a specific area.
Catpcha’s security level is medium with the emphasis of nice looking and user friendly quality, while still offering reasonable protection against unwanted “guests”.
The basic design and its elements can be easily changed and customized.
s3Captcha is a jQuery plugin made by an example of WebDesignBeach Ajax Fancy Captcha. Instead oftyping hardly readable letters and number you just have to select an icon from a set of icons.
Quick features:
by Gabriel posted in AJAX Library, HTML & CSS, JavaScript Library
A tooltip is a short and informative text that appears in a box that pops out when you hover the mouse cursor over an element (link, button, div etc.).
1. DHTML JavaScript Tool Tips is a JavaScript Cross Browser library to create tool tips (information pop-up boxes). This script can be customized in multiple ways and may contain plain-text as well as HTML (images, line breaks).
* Implementation
1. Download the JS File: wz_tooltip.js.
2. Include the library in your HTML page by inserting the following line in the BODY section of your page (it can be added after the last tag containing a tool tip):
<script language="JavaScript" type="text/javascript" src="http://www.your-domain-name.com/path/to/wz_tooltip.js"></script>
3. Each of the tags requires only the onMouseOver attribute (onMouseOut is not required):
<a href="photos.htm" onmouseover="return escape('Your text here')">Photos</a>
* Browsers Compatibility: Netscape 4 and 6+, Mozilla, Galeon, Opera 5, 6 and 7+, MSIE 4, 5+, Konqueror 3
2. Fading JavaScript Tooltips 2kb is an animated JS tool tip script that is very easy to use and lightweight. To see how the script is implemented check the index.html file from the ZIP archive.
Tested in: IE6+, FireFox, Opera, Safari
To see a walk-through of the code and the logic check this post.
This is an excellent & free unique set of social icons from WeFunction. A small bonus is offered to anyone who buys the full set.
The set is perfect for anyone who is building a website, an online application or any app of any kind. It’s similar in style to other icon sets from WeFunction. Therefore, you can use them along side with any of the other sets.
ColoRotate is an AWESOME tool useful to browse and create your color palettes in 3D mode & real time, offering you the freedom to let your imagination fly. This online tool is innovative because it removes the conventional complexity in colors selection on computers and it’s easier to use than the traditional computer palettes.
Joining the ColoRate community is absolutely free and you can use your Google Account to do that. Your personal information remains completely confidential. You can save your color palettes, share them with other members and also participate in the full spectrum of the ColoRotate community.
This excellent tool is efficient because offers you the possibility to quick drag-and-drop to adjust hue, brightness and saturation. Moreover you can import and export in Adobe Swatch Exchange (ASE).
ColoRotate’s intuitive interface helps you to eliminate the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs. In the process, you can uncover color relationships that give your designs an aesthetic balance that will please the most discriminating eye.
by Gabriel posted in Adobe Flash, JavaScript Library
Uploadify is a JQuery Plugin that allows you to easily upload multiple files on your site without needing to reload the page. The script requires Flash and any backend development language. A progress bar is shown while uploading the file(s). The plugin is available under the GPL and MIT licenses. It can be used in a number of applications and commercial products.
FancyUploader is a MooTools file-input replacement script which features an unobtrusive, multiple-file selection menu and queued menu with an animated progress bar. It’s easy to integrate, being server independent & completely customizable via CSS and XHTML.
JqUploader works as a substituter for the classical HTML file input fields. It uses Flash and shows a progress bar while the file is uploaded.
by Gabriel posted in Adobe Flash, JavaScript Library | 1 comment
Do you need a free flash player to play music on your website? Checkout the following list of players!
Free MP3 Music Player for Website from Royalty Free Music
Flash MP3 Player from Reality Software. You do not need any programming skills to install or use it. Once you embed the player on your website, it will automatically scan a specified folder and form a playlist.
Requirements: PHP
[Go to project page | View Demo]
jPlayer is a CSS styleable jQuery mp3 player plugin developed by Happyworm.
[Go to project page | Download | View Demo | View Back-End Demo]
(more…)
If you need an easier way to edit the extra metadata added to your posts you can try The Custom Field Template Plugin.
A quick feature list includes:
Hoverbox Image Gallery is a super light-weight (8kb) roll-over photo gallery that uses CSS. It pop outs an image without affecting the page’s layout.
[Go to Project Page | View Demo | Download]
Fancy Thumbnail Hover Effect w/ jQuery is a nice tutorial that teaches you how to add a nice hover effect to an image. A bigger image pops out above the thumbnail.
by Gabriel posted in JavaScript Library, PHP Library | 5 comments
This is a PHP Contact Form having an Image Verification (Captcha) and fields’ validator (PHP & JavaScript).
First, let’s create the page where the data will be parsed:
form.php
<?php
include_once 'common.php';
include_once 'process.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
function new_captcha()
{
var c_currentTime = new Date();
var c_miliseconds = c_currentTime.getTime();
document.getElementById('captcha').src = 'image.php?x='+ c_miliseconds;
}
function validate(field_name, field_value)
{
switch (field_name)
{
// E-MAIL
case "email":
var email_enter = "<?php echo $errors['email_enter']; ?>";
var email_not_valid = "<?php echo $errors['email_not_valid']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("email_status").innerHTML = '<div class="field_error">'+ email_enter +'</div>';
}
else
{
if(!regIsEmail(field_value))
{
document.getElementById("email_status").innerHTML = '<div class="field_error">'+ email_not_valid +'</div>';
}
else
{
document.getElementById("email_status").innerHTML = '';
}
}
break;
// NAME
case "name":
var name_enter = "<?php echo $errors['name_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("name_status").innerHTML = '<div class="field_error">'+ name_enter +'</div>';
}
else
{
document.getElementById("name_status").innerHTML = '';
}
break;
// SUBJECT
case "subject":
var subject_enter = "<?php echo $errors['subject_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("subject_status").innerHTML = '<div class="field_error">'+ subject_enter +'</div>';
}
else
{
document.getElementById("subject_status").innerHTML = '';
}
break;
// MESSAGE
case "message":
var message_enter = "<?php echo $errors['message_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("message_status").innerHTML = '<div class="field_error">'+ message_enter +'</div>';
}
else
{
document.getElementById("message_status").innerHTML = '';
}
break;
}
return true;
}
function regIsEmail(field_value)
{
var reg = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
return reg.test(field_value);
}
-->
</script>
</head>
<body>
<center>
<h1>Contact Us</h1>
<div align="left" style="width: 500px;">
<?php
if(isSet($status))
{
echo $status;
}
if(!$mail)
{
?>
<form name="register" method="post" action="">
<span id="name_status"><?php if($error['name'] != "") { ?><span class="field_error"><?php echo $error['name']; ?></span><?php } ?></span>
<label>Name</label><input id="name" onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" size="30" type="text" name="name" value="<?php echo $name; ?>"><br />
<span id="subject_status"><?php if($error['subject'] != "") { ?><span class="field_error"><?php echo $error['subject']; ?></span><?php } ?></span>
<label>Subject</label><input id="subject" onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" size="30" type="text" name="subject" value="<?php echo $subject; ?>"><br />
<span id="message_status"><?php if($error['message'] != "") { ?><span class="field_error"><?php echo $error['message']; ?></span><?php } ?></span>
<label>Message</label><textarea onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" id="message" name="message" rows="5" cols="31"><?php echo $message; ?></textarea><br />
<span id="email_status"><?php if($error['email'] != "") { ?><span class="field_error"><?php echo $error['email']; ?></span><?php } ?></span>
<label>Your E-mail</label><input onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" id="email" size="30" type="text" name="email" value="<?php echo $email; ?>"><br />
<label> </label><img border="0" id="captcha" src="image.php" alt=""> <a href="JavaScript: new_captcha();"><img border="0" alt="" src="images/refresh.png" align="bottom"></a><br />
<div class="field_error"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div>
<label>Security Code</label><input size="13" type="text" name="security_code"><br />
<label> </label><input class="button" type="submit" name="submit" value="Submit"><br />
</form>
<?php
}
?>
</div></center>
</body>
</html>
by Chris Reynolds posted in Design | 2 comments
This is an article from C. Reynolds – working with WHS and specializing in eCommerce Web Hosting. Chris is an enthusiastic designer, market researcher and a person enjoying the technical side of the online industry.
Choosing a color palette for your website may be one of the most important decisions you make when starting a new website. Believe it or not but the colors you choose could dictate the real success of your site when and if it becomes popular. If you choose really poor colors then people will typically tend to turn away and leave. Hence try to choose a palette that is inspiring and makes visitors come back. There are a number of factors to take into consideration when choosing a color palette. First good tip is to look at what other, successful websites, are doing with their choices of website colors? Check out 3 to 5 other sites (preferably in a niche related to yours) and note the color design parts that appeal you the most. Do you like bright and vibrant colors, Earthly tones (blue, mild brown to green) or maybe even pastel textures? Don’t be afraid to put a little of your own taste and imagination in your site. It is a reflection of you and it has to be something you believe in as well.
(more…)
Breadcrumbs are a form of website navigation that keep track on the path followed by a website visitor. They are sequential links telling the user the location of the page within the website (example: category / subcategory / sub-sub subcategory / product).
Here is a list of tutorials that will give you an idea of how you can setup a CSS based breadcrumb on your site:
Simple scalable CSS based breadcrumbs
CSS Breadcrumbs from Dynamic Drive
Create apple.com-like breadcrumb using simple CSS
CSS Design: Taming Lists – Breadcrumb trails
by Gabriel posted in AJAX Library, JavaScript Library | 1 comment
Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.
To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.
© Copyright Bit Repository. All Rights Reserved.
