Pacecode Blog » Javascripts http://www.pacecode.com/blog Tips,Ideas, Free scripts and more... Sat, 24 Apr 2010 16:39:55 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Show Password Text in Password Input Field http://www.pacecode.com/blog/2010/04/24/show-password-text-in-password-input-field/ http://www.pacecode.com/blog/2010/04/24/show-password-text-in-password-input-field/#comments Sat, 24 Apr 2010 16:24:02 +0000 Raja MM http://www.pacecode.com/blog/?p=864 As you know, the user login box of the website contains the following fields username and password. Furthermore, most of them put the “Username” inside user name field and “********” inside password field to save the space within designing.In this post I’ll show you how to show “Password” text in the password field. It doesn’t actually does so but this tips will make it looks like so.

How it’s done

The type of field cannot be changed with Javascript from type=”text” to type=”password” so there are actually two fields for the password: a regular password field, and a second plain text field with the default “Password” value.

When the page is loaded the CSS makes the plain text field hidden. Then the jQuery / js makes the password field hidden and the plain text field visible. It’s best to do it this way so if Javascript is not enabled (or there’s a Javascript error which causes the rest of the script to stop running) then the user still has a regular password field with obscured text.

When the user clicks the plain text field, the jQuery / JS code makes the plain text field hidden, the password field visible and puts focus on the password field. On blur, if the password field contains an empty value the plain text field is restored as the visible one to show the default value.

Demo

Download (Both jQuery type and js type)

]]> http://www.pacecode.com/blog/2010/04/24/show-password-text-in-password-input-field/feed/ 1 Problem with transparent image resizing? – PHP http://www.pacecode.com/blog/2008/12/03/problem-with-transparent-image-resizing/ http://www.pacecode.com/blog/2008/12/03/problem-with-transparent-image-resizing/#comments Wed, 03 Dec 2008 17:33:24 +0000 Raja MM http://www.pacecode.com/blog/?p=88 You will get black background if you resize a transparent image. To fix it, You need set alpha channel imagecolorallocatealpha to 127. With imagecolorallocatealpha, it will allocate a color for an image.

Usage:
int imagecolorallocatealpha ( resource image, int red, int green, int blue, int alpha)

From PHP manual:
imagecolorallocatealpha() behaves identically to imagecolorallocate() with the addition of the transparency parameter alpha which may have a value between 0 and 127. 0 indicates completely opaque while 127
indicates completely transparent. Returns FALSE if the allocation failed.

Before using it, you must set to false the blending mode for an image and set true the flag to save full alpha channel information.

Example:

<?

$newImg = imagecreatetruecolor($nWidth, $nHeight);

imagealphablending($newImg, false);

imagesavealpha($newImg,true);

$transparent = imagecolorallocatealpha($newImg, 255, 255, 255, 127);

imagefilledrectangle($newImg, 0, 0, $nWidth, $nHeight, $transparent);

imagecopyresampled($newImg, $im, 0, 0, 0, 0, $nWidth, $nHeight, $imgInfo[0], $imgInfo[1]);

?>

Another way to fix this issue:

phpThumb() - Resize images on the fly

Description: phpThumb() uses the GD library  to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly. The output size is configurable (can be larger or smaller than the source), and the source may be the entire image or only a portion of the original image.

Download: Download

Site: phpThumb()

Demo: Demo

Installation:

1. unzip the folder and upload the content into the server
2. give the correct path of the phpThumb.php and image path as per the following syntax

Resize Syntax:
<img src=”../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=png” alt=”">
<img src=”../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=gif” alt=”">
<img src=”../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=jpeg” alt=”">

where the bg=FFFFFF represents the bg color of your transparent image.

]]> http://www.pacecode.com/blog/2008/12/03/problem-with-transparent-image-resizing/feed/ 1 Media Box tools package using Mootools JS. http://www.pacecode.com/blog/2008/10/30/media-box-tools-package-using-mootools-js/ http://www.pacecode.com/blog/2008/10/30/media-box-tools-package-using-mootools-js/#comments Thu, 30 Oct 2008 18:23:43 +0000 Raja MM http://www.pacecode.com/blog/?p=80 Media Box tools package using Mootools JS.

Ref: http://iaian7.com/webcode/Mediabox

Demo:open Yahoo Movies »

Download link: MediaBox Download link

I have created this package file for ready  to access. This package contains following list of files

  • index.php
  • css/mediabox.css
  • js/mediabox.js
  • js/swfobject.js
  • js/mootools.js

Installation:

  • extract the zip file in to system.
  • upload mediabox folder into your server.
  • access the mediabox  folder from the browser.

Using the MooTools 1.11 JavaScript library, Media box lets you open flash, video, and html content in a floating “lightbox” style window.

Mediabox will read Flickr, Google, MetaCafe, MySpace, Revver, YouTube, Veoh, Viddler, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.

Flash animation, flash video, QuickTime, windows media, inline content and external html content is all automatically recognised as well. Every link listed below is shown with the code used to make it.

]]> http://www.pacecode.com/blog/2008/10/30/media-box-tools-package-using-mootools-js/feed/ 2 Two Frequently used JQuery Plugins – Ajax forms and Image zooming http://www.pacecode.com/blog/2008/10/07/frequently-used-jquery-plugins/ http://www.pacecode.com/blog/2008/10/07/frequently-used-jquery-plugins/#comments Tue, 07 Oct 2008 19:00:30 +0000 Raja MM http://www.pacecode.com/blog/?p=56 SimpleModal Jquery plugin helps you to create Ajax form with style pop up. It is very easy to setup in the web pages. It supports almost alkind of browsers. This download was written in php(contact.php).

This plugin uses “contact.php” where you need to change your email id.

Click this demo button to see the DEMO instantly

For Dot net developers need to change the contact.php according to their needs.

For more reference and Download link:http://www.ericmmartin.com/simplemodal/

Image zooming using JQuery


This Jquery helps you to integrate small magnifier window close to the image or images on your web page easily. It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product!

Features

  • Fast – the page loads as normal, then the high-resolution image downloads invisibly in the background.
  • Easy – add it to your website in minutes.
  • Customisable – change the size, position, colors to suit your website.

FOR MORE DETAILS AND DOWNLOADS: http://www.mind-projects.it/blog/jqzoom_v10

]]> http://www.pacecode.com/blog/2008/10/07/frequently-used-jquery-plugins/feed/ 0