Swadharsan’s Weblog

Marqued Text Box

{ May 13, 2008 @ 11:58 am } · { Uncategorized }
{ } · { Comments }

Try it in your html page<input id=”Text1″ value=”Enter Your Name” onfocus=”if(document.getElementById(’Text1′).value == ‘Enter Your Name’)document.getElementById(’Text1′).value = ”;” onblur=”if(document.getElementById(’Text1′).value == ”)document.getElementById(’Text1′).value = ‘Enter Your Name’;” type=”text” />

css message box

{ May 13, 2008 @ 11:55 am } · { Uncategorized }
{ } · { Comments }

<div class=“clean-gray”>Css message box</div>

Code Css

.clean-gray{

border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;

}

popupp

{ May 13, 2008 @ 11:45 am } · { Uncategorized }
{ } · { Comments }

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<base href=”http://www.ajaxdaddy.com/web20/greybox/”>
<style type=”text/css”>
body {color: white;background: #52616F;}
a { color: white; }
</style>
<title>GreyBox - Examples</title>

<h3>One website</h3>
<ul>
<li>
<a href=”http://google.com/” title=”Google” rel=”gb_page_center[640, 480]“>Launch google.com in a 640×480 window</a>
</li>
<li>
<a href=”http://google.com/” title=”Google” rel=”gb_page_fs[]“>Launch google.com in fullscreen window</a>
</li>
</ul>

<h3>Website gallery</h3>
<ul>
<li>
<a href=”http://google.com/” title=”Google” rel=”gb_pageset[search_sites]“>Launch Google search</a>
</li>
<li>
<a href=”http://search.yahoo.com/” rel=”gb_pageset[search_sites]“>Launch Yahoo search</a>
</li>
<li>
<a href=”http://www.koders.com/” rel=”gb_pageset[search_sites]“>Launch Koders search</a>
</li>
</ul>

<h3>Image gallery</h3>
<script type=”text/javascript”>
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
{'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>

<ul>
<li>
<a href=”#” onclick=”return GB_showImageSet(image_set, 1)”>Launch gallery</a>
</li>

<h3>Without loading</h3>
<script type=”text/javascript”>
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
show_loading: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}
</script>
<ul>
<li>
<a href=”http://google.com/” onclick=”return GB_myShow(’Google’, this.href)”>Visit Google without loading</a>
</li>
</ul>

</body>
</html>

popup and links

{ May 13, 2008 @ 11:44 am } · { Uncategorized }
{ } · { Comments }

http://www.ajaxdaddy.com/demo-greybox-window.html
http://www.mehdiplugins.com/misc/frontbox/onlinedemo.htm
http://slideshow.triptracker.net/howto.html
http://slideshow.triptracker.net/
http://www.huddletogether.com/projects/lightbox2/#download
http://jquery.com/demo/thickbox/
http://orangoo.com/labs/GreyBox/
———————————–

one:

[...]
var viewer = new PhotoViewer();
viewer.add(’photo1.jpg’, ‘A special photo’, ‘11/01/2006 10:12′);
viewer.add(’photo3.jpg’, ‘Just another caption’);
viewer.add(’photo4.jpg’);
[...]

————————————————————————————————–
<body onload=”MM_preloadImages(‘/images/menu_on.gif’)…;”>

body{ margin: 0; padding: 0; }

<a href=”images/image-4.jpg” rel=”lightbox” title=”<a href="link.html">my link</a>”>Image</a>

——————————————————————————————————–
<script type=”text/javascript” src=”path-to-file/jquery.js”></script>
<script type=”text/javascript” src=”path-to-file/thickbox.js”></script>

—————————————————————————————————

————————————————————————————————————-

<a href=”images/plant1.jpg” title=”add a caption to title attribute / or leave blank” class=”thickbox” rel=”gallery-plants”><img src=”images/plant1_t.jpg” alt=”Plant 1″ /></a>
<a href=”images/plant2.jpg” title=”add a caption to title attribute / or leave blank” class=”thickbox” rel=”gallery-plants”><img src=”images/plant2_t.jpg” alt=”Plant 2″ /></a>
<a href=”images/plant3.jpg” title=”add a caption to title attribute / or leave blank” class=”thickbox” rel=”gallery-plants”><img src=”images/plant3_t.jpg” alt=”Plant 3″ /></a>
<a href=”images/plant4.jpg” title=”add a caption to title attribute / or leave blank” class=”thickbox” rel=”gallery-plants”><img src=”images/plant4_t.jpg” alt=”Plant 4″ /></a>
————————————————————————————————————-
<a href=”ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400″ title=”add a caption to title attribute / or leave blank” class=”thickbox”>Example 1</a>
<a href=”ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500″ title=”add a caption to title attribute / or leave blank” class=”thickbox”>Example 2</a>
<a href=”iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true” title=”add a caption to title attribute / or leave blank” class=”thickbox”>Open iFrame Modal</a>

—————————————————————————————————————–
<a href=”ajaxOverFlow.html?height=300&width=300″ title=”add a caption to title attribute / or leave blank” class=”thickbox”>Scrolling content</a>
<a href=”ajax.PHP?height=220&width=400″ class=”thickbox” title=”add a caption to title attribute / or leave blank”>No-scroll content</a>
<a href=”ajaxLogin.html?height=85&width=250&modal=true” class=”thickbox” title=”Please Sign In”>login (modal)</a>
<a href=”ajaxTBcontent.html?height=200&width=300″ class=”thickbox” title=”">Update ThickBox content</a>
—————————————————————————————————————–

code:

/*
* Thickbox 3.1 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/

if(tb_detectMacXFF()){
$(”#TB_overlay”).addClass(”TB_overlayMacFFBGHack”);//use png overlay so hide flash
}else{
$(”#TB_overlay”).addClass(”TB_overlayBG”);//use background and opacity
}

if(caption===null){caption=”";}
$(”body”).append(”<div id=’TB_load’><img src=’”+imgLoader.src+”‘ /></div>”);//add loader to the page
$(’#TB_load’).show();//show loader

var baseURL;
if(url.indexOf(”?”)!==-1){ //ff there is a query string involved
baseURL = url.substr(0, url.indexOf(”?”));
}else{
baseURL = url;
}

var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == ‘.jpg’ || urlType == ‘.jpeg’ || urlType == ‘.png’ || urlType == ‘.gif’ || urlType == ‘.bmp’){//code to show images

TB_PrevCaption = “”;
TB_PrevURL = “”;
TB_PrevHTML = “”;
TB_NextCaption = “”;
TB_NextURL = “”;
TB_NextHTML = “”;
TB_imageCount = “”;
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $(”a[@rel="+imageGroup+"]“).get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === “”)); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = “<span id=’TB_next’>  <a href=’#'>Next ></a></span>”;
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = “<span id=’TB_prev’>  <a href=’#'>< Prev</a></span>”;
}
} else {
TB_FoundURL = true;
TB_imageCount = “Image ” + (TB_Counter + 1) +” of “+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;

// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing

TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$(”#TB_window”).append(”<a href=” id=’TB_ImageOff’ title=’Close’><img id=’TB_Image’ src=’”+url+”‘ width=’”+imageWidth+”‘ height=’”+imageHeight+”‘ alt=’”+caption+”‘/></a>” + “<div id=’TB_caption’>”+caption+”<div id=’TB_secondLine’>” + TB_imageCount + TB_PrevHTML + TB_NextHTML + “</div></div><div id=’TB_closeWindow’><a href=’#’ id=’TB_closeWindowButton’ title=’Close’>close</a> or Esc Key</div>”);

$(”#TB_closeWindowButton”).click(tb_remove);

if (!(TB_PrevHTML === “”)) {
function goPrev(){
if($(document).unbind(”click”,goPrev)){$(document).unbind(”click”,goPrev);}
$(”#TB_window”).remove();
$(”body”).append(”<div id=’TB_window’></div>”);
tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}
$(”#TB_prev”).click(goPrev);
}

if (!(TB_NextHTML === “”)) {
function goNext(){
$(”#TB_window”).remove();
$(”body”).append(”<div id=’TB_window’></div>”);
tb_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}
$(”#TB_next”).click(goNext);

}
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
tb_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == “”)){
document.onkeydown = “”;
goNext();
}
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == “”)){
document.onkeydown = “”;
goPrev();
}
}
};

tb_position();
$(”#TB_load”).remove();
$(”#TB_ImageOff”).click(tb_remove);
$(”#TB_window”).css({display:”block”}); //for safari using css instead of show
};

imgPreloader.src = url;
}else{//code to show html

var queryString = url.replace(/^[^\?]+\??/,”);
var params = tb_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;

if(url.indexOf(’TB_iframe’) != -1){// either iframe or ajax window
urlNoQuery = url.split(’TB_’);
$(”#TB_iframeContent”).remove();
if(params['modal'] != “true”){//iframe no modal
$(”#TB_window”).append(”<div id=’TB_title’><div id=’TB_ajaxWindowTitle’>”+caption+”</div><div id=’TB_closeAjaxWindow’><a href=’#’ id=’TB_closeWindowButton’ title=’Close’>close</a> or Esc Key</div></div><iframe frameborder=’0′ hspace=’0′ src=’”+urlNoQuery[0]+”‘ id=’TB_iframeContent’ name=’TB_iframeContent”+Math.round(Math.random()*1000)+”‘ onload=’tb_showIframe()’ style=’width:”+(ajaxContentW + 29)+”px;height:”+(ajaxContentH + 17)+”px;’ > </iframe>”);
}else{//iframe modal
$(”#TB_overlay”).unbind();
$(”#TB_window”).append(”<iframe frameborder=’0′ hspace=’0′ src=’”+urlNoQuery[0]+”‘ id=’TB_iframeContent’ name=’TB_iframeContent”+Math.round(Math.random()*1000)+”‘ onload=’tb_showIframe()’ style=’width:”+(ajaxContentW + 29)+”px;height:”+(ajaxContentH + 17)+”px;’> </iframe>”);
}
}else{// not an iframe, ajax
if($(”#TB_window”).css(”display”) != “block”){
if(params['modal'] != “true”){//ajax no modal
$(”#TB_window”).append(”<div id=’TB_title’><div id=’TB_ajaxWindowTitle’>”+caption+”</div><div id=’TB_closeAjaxWindow’><a href=’#’ id=’TB_closeWindowButton’>close</a> or Esc Key</div></div><div id=’TB_ajaxContent’ style=’width:”+ajaxContentW+”px;height:”+ajaxContentH+”px’></div>”);
}else{//ajax modal
$(”#TB_overlay”).unbind();
$(”#TB_window”).append(”<div id=’TB_ajaxContent’ class=’TB_modal’ style=’width:”+ajaxContentW+”px;height:”+ajaxContentH+”px;’></div>”);
}
}else{//this means the window is already up, we are just loading new content via ajax
$(”#TB_ajaxContent”)[0].style.width = ajaxContentW +”px”;
$(”#TB_ajaxContent”)[0].style.height = ajaxContentH +”px”;
$(”#TB_ajaxContent”)[0].scrollTop = 0;
$(”#TB_ajaxWindowTitle”).html(caption);
}
}

$(”#TB_closeWindowButton”).click(tb_remove);

if(url.indexOf(’TB_inline’) != -1){
$(”#TB_ajaxContent”).append($(’#’ + params['inlineId']).children());
$(”#TB_window”).unload(function () {
$(’#’ + params['inlineId']).append( $(”#TB_ajaxContent”).children() ); // move elements back when you’re finished
});
tb_position();
$(”#TB_load”).remove();
$(”#TB_window”).css({display:”block”});
}else if(url.indexOf(’TB_iframe’) != -1){
tb_position();
if($.browser.safari){//safari needs help because it will not fire iframe onload
$(”#TB_load”).remove();
$(”#TB_window”).css({display:”block”});
}
}else{
$(”#TB_ajaxContent”).load(url += “&random=” + (new Date().getTime()),function(){//to do a post change this load method
tb_position();
$(”#TB_load”).remove();
tb_init(”#TB_ajaxContent a.thickbox”);
$(”#TB_window”).css({display:”block”});
});
}

}
if(!params['modal']){
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
tb_remove();
}
};
}

} catch(e) {
//nothing here
}
}
//helper functions below
function tb_showIframe(){
$(”#TB_load”).remove();
$(”#TB_window”).css({display:”block”});
}
function tb_remove() {
$(”#TB_imageOff”).unbind(”click”);
$(”#TB_closeWindowButton”).unbind(”click”);
$(”#TB_window”).fadeOut(”fast”,function(){$(’#TB_window,#TB_overlay,#TB_HideSelect’).trigger(”unload”).unbind().remove();});
$(”#TB_load”).remove();
if (typeof document.body.style.maxHeight == “undefined”) {//if IE 6
$(”body”,”html”).css({height: “auto”, width: “auto”});
$(”html”).css(”overflow”,”");
}
document.onkeydown = “”;
document.onkeyup = “”;
return false;
}
function tb_position() {
$(”#TB_window”).css({marginLeft: ‘-’ + parseInt((TB_WIDTH / 2),10) + ‘px’, width: TB_WIDTH + ‘px’});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$(”#TB_window”).css({marginTop: ‘-’ + parseInt((TB_HEIGHT / 2),10) + ‘px’});
}
}
function tb_parseQuery ( query ) {
var Params = {};
if ( ! query ) {return Params;}// return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split(’=');
if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ‘ ‘);
Params[key] = val;
}
return Params;
}
function tb_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}
function tb_detectMacXFF() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(’mac’) != -1 && userAgent.indexOf(’firefox’)!=-1) {
return true;
}
}

———————————

css:

/* —————————————————————————————————————-*/
/* ———->>> global settings needed for thickbox <<<———————————————————–*/
/* —————————————————————————————————————-*/
*{padding: 0; margin: 0;}
/* —————————————————————————————————————-*/
/* ———->>> thickbox specific link and font settings <<<——————————————————*/
/* —————————————————————————————————————-*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* —————————————————————————————————————-*/
/* ———->>> thickbox settings <<<—————————————————————————–*/
/* —————————————————————————————————————-*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’);
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’);
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

————————————————————–

example;

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>

————————————————————————————

one:

————————————————————————————

light box

{ May 13, 2008 @ 11:44 am } · { Uncategorized }
{ } · { Comments }

lightbox.js
————–
/*
Lightbox JS: Fullsize Image Overlays
by Lokesh Dhakar - http://www.huddletogether.com

For more information on this script, visit:
http://huddletogether.com/projects/lightbox/

Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
(basically, do anything you want, just leave my name and link)

Table of Contents
—————–
Configuration

Functions
- getPageScroll()
- getPageSize()
- pause()
- getKey()
- listenKey()
- showLightbox()
- hideLightbox()
- initLightbox()
- addLoadEvent()

Function Calls
- addLoadEvent(initLightbox)

//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = ‘loading.gif’;
var closeButton = ‘close.gif’;

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array(”,yScroll)
return arrayPageScroll;
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}

//
// getKey(key)
// Gets keycode. If ‘x’ is pressed then it hides the lightbox.
//

function getKey(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
key = String.fromCharCode(keycode).toLowerCase();

if(key == ‘x’){ hideLightbox(); }
}

//
// listenKey()
//
function listenKey () { document.onkeypress = getKey; }

//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById(’overlay’);
var objLightbox = document.getElementById(’lightbox’);
var objCaption = document.getElementById(’lightboxCaption’);
var objImage = document.getElementById(’lightboxImage’);
var objLoadingImage = document.getElementById(’loadingImage’);
var objLightboxDetails = document.getElementById(’lightboxDetails’);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
if (objLoadingImage) {
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + ‘px’);
objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + ‘px’);
objLoadingImage.style.display = ‘block’;
}

// set height of Overlay to take up whole page and show
objOverlay.style.height = (arrayPageSize[1] + ‘px’);
objOverlay.style.display = ‘block’;

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
objImage.src = objLink.href;

// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);

objLightbox.style.top = (lightboxTop < 0) ? “0px” : lightboxTop + “px”;
objLightbox.style.left = (lightboxLeft < 0) ? “0px” : lightboxLeft + “px”;

objLightboxDetails.style.width = imgPreload.width + ‘px’;

if(objLink.getAttribute(’title’)){
objCaption.style.display = ‘block’;
//objCaption.style.width = imgPreload.width + ‘px’;
objCaption.innerHTML = objLink.getAttribute(’title’);
} else {
objCaption.style.display = ‘none’;
}

// A small pause between the image loading and displaying is required with IE,
// this prevents the previous image displaying for a short burst causing flicker.
if (navigator.appVersion.indexOf(”MSIE”)!=-1){
pause(250);
}

if (objLoadingImage) { objLoadingImage.style.display = ‘none’; }

// Hide select boxes as they will ‘peek’ through the image in IE
selects = document.getElementsByTagName(”select”);
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = “hidden”;
}

objLightbox.style.display = ‘block’;

// After image is loaded, update the overlay height as the new image might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] + ‘px’);

// Check for ‘x’ keypress
listenKey();

return false;
}

imgPreload.src = objLink.href;

}

//
// hideLightbox()
//
function hideLightbox()
{
// get objects
objOverlay = document.getElementById(’overlay’);
objLightbox = document.getElementById(’lightbox’);

// hide lightbox and overlay
objOverlay.style.display = ‘none’;
objLightbox.style.display = ‘none’;

// make select boxes visible
selects = document.getElementsByTagName(”select”);
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = “visible”;
}

// disable keypress listener
document.onkeypress = ”;
}

//
// initLightbox()
// Function runs on window load, going through link tags looking for rel=”lightbox”.
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName(”a”);

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];

if (anchor.getAttribute(”href”) && (anchor.getAttribute(”rel”) == “lightbox”)){
anchor.onclick = function () {showLightbox(this); return false;}
}
}

// the rest of this code inserts html at the top of the page that looks like this:
//
// <div id=”overlay”>
//       <a href=”#” onclick=”hideLightbox(); return false;”><img id=”loadingImage” /></a>
//   </div>
// <div id=”lightbox”>
//       <a href=”#” onclick=”hideLightbox(); return false;” title=”Click anywhere to close image”>
//           <img id=”closeButton” />
//           <img id=”lightboxImage” />
//       </a>
//       <div id=”lightboxDetails”>
//           <div id=”lightboxCaption”></div>
//           <div id=”keyboardMsg”></div>
//       </div>
// </div>

var objBody = document.getElementsByTagName(”body”).item(0);

// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement(”div”);
objOverlay.setAttribute(’id’,'overlay’);
objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = ‘none’;
objOverlay.style.position = ‘absolute’;
objOverlay.style.top = ‘0′;
objOverlay.style.left = ‘0′;
objOverlay.style.zIndex = ‘90′;
objOverlay.style.width = ‘100%’;
objBody.insertBefore(objOverlay, objBody.firstChild);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// preload and create loader image
var imgPreloader = new Image();

// if loader image found, create link to hide lightbox and create loadingimage
imgPreloader.onload=function(){

var objLoadingImageLink = document.createElement(”a”);
objLoadingImageLink.setAttribute(’href’,'#’);
objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
objOverlay.appendChild(objLoadingImageLink);

var objLoadingImage = document.createElement(”img”);
objLoadingImage.src = loadingImage;
objLoadingImage.setAttribute(’id’,'loadingImage’);
objLoadingImage.style.position = ‘absolute’;
objLoadingImage.style.zIndex = ‘150′;
objLoadingImageLink.appendChild(objLoadingImage);

imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs

return false;
}

imgPreloader.src = loadingImage;

// create lightbox div, same note about styles as above
var objLightbox = document.createElement(”div”);
objLightbox.setAttribute(’id’,'lightbox’);
objLightbox.style.display = ‘none’;
objLightbox.style.position = ‘absolute’;
objLightbox.style.zIndex = ‘100′;
objBody.insertBefore(objLightbox, objOverlay.nextSibling);

// create link
var objLink = document.createElement(”a”);
objLink.setAttribute(’href’,'#’);
objLink.setAttribute(’title’,'Click to close’);
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);

// preload and create close button image
var imgPreloadCloseButton = new Image();

// if close button image found,
imgPreloadCloseButton.onload=function(){

var objCloseButton = document.createElement(”img”);
objCloseButton.src = closeButton;
objCloseButton.setAttribute(’id’,'closeButton’);
objCloseButton.style.position = ‘absolute’;
objCloseButton.style.zIndex = ‘200′;
objLink.appendChild(objCloseButton);

return false;
}

imgPreloadCloseButton.src = closeButton;

// create image
var objImage = document.createElement(”img”);
objImage.setAttribute(’id’,'lightboxImage’);
objLink.appendChild(objImage);

// create details div, a container for the caption and keyboard message
var objLightboxDetails = document.createElement(”div”);
objLightboxDetails.setAttribute(’id’,'lightboxDetails’);
objLightbox.appendChild(objLightboxDetails);

// create caption
var objCaption = document.createElement(”div”);
objCaption.setAttribute(’id’,'lightboxCaption’);
objCaption.style.display = ‘none’;
objLightboxDetails.appendChild(objCaption);

// create keyboard message
var objKeyboardMsg = document.createElement(”div”);
objKeyboardMsg.setAttribute(’id’,'keyboardMsg’);
objKeyboardMsg.innerHTML = ‘press <a href=”#” onclick=”hideLightbox(); return false;”><kbd>x</kbd></a> to close’;
objLightboxDetails.appendChild(objKeyboardMsg);

}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison’s weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != ‘function’){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}

}

addLoadEvent(initLightbox); // run initLightbox onLoad

lightbox.css
—————-

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}

admin login model dotted

{ May 13, 2008 @ 11:43 am } · { Uncategorized }
{ } · { Comments }

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html><!– InstanceBegin template=”/Templates/E-croixmodele.dwt” codeOutsideHTMLIsLocked=”false” –>
<head>
<LINK REL=”SHORTCUT ICON” href=”../favicon.ico”>
<!– InstanceBeginEditable name=”doctitle” –>
<title>Contact - Mehdi - Plugins Photoshop</title>
<!– InstanceEndEditable –>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<meta name=”description” content=”Mehdi’s site offers a huge and free collection of plug-ins for photoshop or other retouching software. Use these plugins to enhance your photos or to obtain nice effects.”>
<meta name=”keywords” content=”photo shop plugins, photoshop CS,
plugin, download free, best, plug-ins,
Adobe, Paint Shop Pro,PSP, photo Paint, fireworks,
filter, filters, effect, effects, xtras,
graphics, retouch, retouching,
creation, image, mehdi, medhi”>
<!– InstanceBeginEditable name=”head” –>
<style type=”text/css”>
<!–
.gray_dots { background-color: whitesmoke;
border: 2px dotted gray;
padding-right: 15px;
padding-left: 15px;
}
.orange_dots { border: 2px dotted orange;
padding-left: 15px;
background-color: bisque;
}
–>
</style>
<!– InstanceEndEditable –>
<script language=”JavaScript”>
<!–
if(typeof(myfile) ==’string’) { //anticaching trick
var today = new Date();
var time = today.getTime();
var myscript=’<’+’script type=”text/javascript” ‘;
myscript+=’src=”../getfolderpath.js?refresh=’+ time +’”>’;
myscript+=’<’+'/script>’;
document.write(myscript);
}

function enableDownload() {
if( typeof(folderpath)!=’string’ || typeof(myfile) !=’string’ ) return;
var filepath = “../” + folderpath + “/” + myfile;
var downloadelement = document.getElementById(’downloadid’);
if(downloadelement)
downloadelement.innerHTML = ‘<a href=\”‘+ filepath + ‘\” > Download now! </a>’;
}
//–>
</script>

<tr>
<td align=”center”>
<strong style=”font-size: 30px; white-space:nowrap;”>Free Plugins for Photoshop* etc…
</strong><br>
<strong>*</strong><em>and any compatible software</em>
</td>
</tr>
</table>
</td>
</tr>

</table></td>
</tr>
<tr>
<td class=”top_menu”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<!– removed google ad , must keep this –>
<iframe width=”0″ height=”32″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ vspace=”0″ hspace=”0″ allowtransparency=”true” scrolling=”no”> </iframe>
<a href=”../misc/index.htm”> Misc… </a>
<a href=”../index.htm” >Home</a>

<a href=”links.htm”>Links</a>
<a href=”faq.htm”>FAQ</a>
<a href=”contact.htm”>Contact</a>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td height=”62″ valign=”top”> <table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr valign=”top” align=”left”>
<td width=”200″ style=”border: 1px solid gray;border-top:none” bgcolor=”whitesmoke” background=”../images/common/scratch.jpg”> <table width=”200″ border=”0″>
<tr>
<td height=”10″>
<script type=”text/javascript”>
var gaJsHost = ((”https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(”%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
if (typeof(_gat) == ‘object’){
var pageTracker = _gat._getTracker(”UA-3361291-1″);
pageTracker._initData();
pageTracker._trackPageview();
}

</script>
</td>
</tr>
<tr>
<td class=”flag_fr”>
<a href=”../pages/index.htm” >
Version Française </a> </td>
</tr>
<tr>

<td height=”10″></td>
</tr>
<tr>
<td align=”center” class=”white-transp-back”><strong>Shareware:</strong></td>
</tr>
<tr>
<td class=”main_menu”><a href=”zoomengine.htm”>Zoom Engine </a></td>
</tr>

<tr>
<td height=”10″ ></td>
</tr>
<tr>
<td align=”center” class=”white-transp-back”><strong>Free Plugins :</strong></td>
</tr>
<tr>
<td class=”main_menu”>
<!– ————————————————————————— –>
<a href=”absolute.htm” >

Absolute Color </a>
<!– ————————————————————————— –> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”blots.htm” >
Blots 2 </a> </td>
</tr>

<tr>
<td class=”main_menu”>
<a href=”colormegamix.htm” >
Color MegaMix </a></td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”contrastbalance.htm” >
Contrast Balance </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”curves.htm” >
Curves </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”edgesfx.htm” >
Edges Fx </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”equalizer.htm” >
Equalizer </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”eraserclassic.htm” >
Eraser Classic </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”erasergenuine.htm” >
Eraser Genuine </a> </td>
</tr>
<tr>
<td class=”main_menu”><a href=”finethreshold.htm”>Fine Threshold </a></td>

</tr>
<tr>
<td class=”main_menu”><a href=”flatmedian.htm”>Flat Median</a></td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”fur.htm” >
Fur 2 </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”gradientsmithy.htm” >
Gradient Smithy </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”grainnatural.htm” >
Grain Natural 2</a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”hslplus.htm” >
HSL Plus </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”juliaworld.htm” >
Julia World </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”kaleidoscope.htm” >
Kaleidoscope 2.1</a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”localequalization.htm” >
Local Equalization </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”melt.htm” >
Melt 1.1</a></td>
</tr>
<tr>
<td class=”main_menu”><a href=”projection.htm”>Projection</a></td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”posterizer.htm” >
Posterizer </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”quickmirror.htm” >
Quick Mirror </a> </td>

</tr>
<tr>
<td class=”main_menu”>
<a href=”seamlessborder.htm” >
Seamless Border 2 </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”sortingtiles.htm” >

Sorting Tiles </a> </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”vibrations.htm” >
Vibrations 1.1 </a> </td>
</tr>

<tr>
<td class=”main_menu”>
<a href=”wavylab.htm” >
Wavy Lab 1.1</a>                </td>
</tr>
<tr>
<td class=”main_menu”>
<a href=”weaver.htm”   >
Weaver </a>                </td>

</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width=”777″ style=”padding-bottom:5px; padding-left:18px; padding-right:5px; padding-top:15px “>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr>
<td height=”4″ bgcolor=”red”></td>
</tr>
<tr>
<!– InstanceBeginEditable name=”titrecroix” –>
<td height=”44″ width=”100%” class=”white-title”>
Contact
</td>
<!– InstanceEndEditable –>

</tr>
<tr>
<td height=”4″ bgcolor=”red”></td>
</tr>
<tr>
<td height=”4″ bgcolor=”white”></td>
</tr>
<tr>
<!– InstanceBeginEditable name=”tapez description ici” –>

<td colspan=”3″ style=”border:1px solid darkred; padding-left:15px; padding-right:15px” align=”left” valign=”top”><p align=”justify”> </p>
<p align=”justify”>You can contact me by using this form.
It will automatically send me an email. <br>
- If you have any question, maybe this one is already answered in <a href=”faq.htm”>FAQ</a>. <br>
- Please consider posting general or unspecific questions or comments to my <a href=”../forum”>message board</a>.
By doing so you may get help by other people, too. </p>
<form action=”checksend.php” method=”post” name=”mehdi” id=”mehdi” style=”margin-bottom:0px “>

<table border=”0″ cellspacing=”5″ cellpadding=”0″ >
<tr>
<td width=”80″ class=”orange_dots”>Name:</td>
<td><input name=”nom” type=”text” class=”gray_dots” id=”nom” value=”Your name” size=”40″></td>
</tr>
<tr>
<td class=”orange_dots”>Email:</td>
<td><input name=”email” type=”text” class=”gray_dots” id=”email” value=”Your mail” size=”40″></td>

</tr>
<tr>
<td class=”orange_dots”>Subject:</td>
<td><input name=”sujet” type=”text” class=”gray_dots” id=”sujet” value=”Subject of your comments.” size=”40″></td>
</tr>
<tr>
<td> </td>
<td> </td>

</tr>
<tr>
<td> </td>
<td><table width=”116″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”116″ class=”orange_dots”>Comments</td>
</tr>
</table></td>

</tr>
<tr>
<td colspan=”2″><textarea name=”commentaires” cols=”41″ rows=”13″ class=”gray_dots” id=”commentaires”>Type your comments here
</textarea></td>
</tr>
<tr>
<td> </td>
<td><input type=”submit” name=”Submit” value=”Send!” style=”border:5px double orange; background-color:bisque “></td>
</tr>

</table>
</form> <br>
</td><!– InstanceEndEditable –>
</tr>
</table></td>

<td valign=”top” style=”padding-left:5px; “>
<script type=”text/javascript”><!–
google_ad_client = “pub-2831522608122460″;
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = “160×600_as”;

google_ad_channel =”";
google_color_border = “FFFFFF”;
google_color_bg = ["FFFFFF","FFFBF0","FFF7E2","FFFFFF"];
google_color_link = ["0000FF","8B0000","000000","7F5BFB"];
google_color_url = ["808080","000000","000000","FB207F"];
google_color_text = “000000″;
//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>

</tr>
<tr>
<td style=”border: 1px solid bisque”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”white”>
<tr>
<td width=”26%”> </td>
<td width=”41%”>Copyright © 2004-2008 Mehdi - All rights reserved</td>
</tr>
</table></td>

</tr>
</table>
</body>
<!– InstanceEnd –></html>

Ajax form submit

{ May 12, 2008 @ 11:07 am } · { Uncategorized }
{ } · { Comments }

form-submit.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<HTML>
<HEAD>
<title>Demo: Ajax form submit</title>
<script type=”text/javascript” src=”js/form-submit.js”></script>
<script type=”text/javascript” src=”js/ajax.js”></script>
<style type=”text/css”>
body{
margin:0px;
font-size:0.8em;
font-family:Trebuchet MS
}
#mainContainer{
width:840px;
margin:5px;
}
table,tr,td{
vertical-align:top;
}
.textInput{
width:300px;
}
html{
margin:0px;
}
.formButton{
width:75px;
}
textarea,input,select{
font-family:Trebuchet MS;
}
i{
font-size:0.9em;
}
</style>
</head>
<body>

<div id=”mainContainer” style=”">
<fieldset>
<legend>Ajax form submit</legend>
<form action=”someplace.html” method=”post” name=”myForm”>
<div id=”formResponse”>
<table>
<tr>
<td><label for=”firstname”>First name:</label></td>
<td id=”_firstname”></td>
<td><input type=”text” class=”textInput” name=”firstname” id=”firstname”></td>
</tr>
<tr>
<td><label for=”lastname”>Last name:</label></td>
<td id=”_lastname”></td>
<td><input type=”text” class=”textInput” name=”lastname” id=”lastname”></td>
</tr>
<tr>
<td><label for=”address”>Address:</label></td>
<td id=”_address”></td>
<td><textarea class=”textInput” name=”address”></textarea></td>
</tr>
<tr>
<td><label for=”zipCode”>Zip code:</label>
<td id=”_zipCode”></td>
<td><input type=”text” name=”zipCode” size=”10″ id=”zipCode” minLength=”4″ maxlength=”10″></td>
</tr>
<tr>
<td><label for=”age”>Age:</label></td>
<td id=”_age”></td>
<td><input type=”text” name=”age” id=”age” maxlength=”3″ size=”3″ minlength=”2″></td>
</tr>
<tr>
<td><label for=”email”>Email:</label></td>
<td id=”_email”></td>
<td><input class=”textInput” type=”text” name=”email” id=”email” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”url”>Url:</label></td>
<td id=”_url”></td>
<td><input class=”textInput” type=”text” name=”url” id=”url” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”alpha”>Alpha chars:</label></td>
<td id=”_alpha”></td>
<td><input type=”text” class=”textInput” id=”alpha” name=”alpha” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”custom”>Code:</label></td>
<td id=”_custom”></td>
<td><input type=”text” class=”textInput” id=”custom” name=”custom” maxlength=”255″></td>
</tr>
<tr>
<td><label for=”custom”>Code 2:</label></td>
<td id=”_custom2″></td>
<td><input type=”text” class=”textInput” id=”custom2″ name=”custom2″ maxlength=”255″></td>
</tr>

<tr>
<td>Country:</td>
<td id=”_country”></td>
<td><select name=”country”>
<option value=”"></option>
<option value=”NO”>Norway</option>
<option value=”DK”>Denmark</option>
<option value=”SE”>Sweden</option>
<option value=”UK”>United Kingdom</option>
<option value=”US”>United States</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″><label for=”comments”>Comments:</label></td>
<td><textarea class=”textInput” name=”comments”></textarea> </td>
</tr>
<tr>
<td>Gender:</td>
<td id=”_gender”></td>
<td>
<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td><input type=”radio” name=”gender” value=”F” id=”genderFemale”></td>
<td><label for=”genderFemale”> Female</label></td>
<td> <input type=”radio” name=”gender” value=”M” id=”genderMale”></td>
<td><label for=”genderMale”> Male</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Hobbies:<br></td>
<td id=”_hobbies[]“></td>
<td>
<input type=”checkbox” name=”hobbies[]” value=”games” id=”hobby_games”><label for=”hobby_games”>Computer games</label><br>
<input type=”checkbox” name=”hobbies[]” value=”soccer” id=”hobby_soccer”><label for=”hobby_soccer”>Soccer</label><br>
<input type=”checkbox” name=”hobbies[]” value=”stamps” id=”hobby_stamps”><label for=”hobby_stamps”>Stamps</label><br>
<input type=”checkbox” name=”hobbies[]” value=”shopping” id=”hobby_shopping”><label for=”hobby_shopping”>Shopping</label><br>
</tr>
<tr>
<td></td>
<td id=”_agree”></td>
<td><input type=”checkbox” name=”agree” id=”agree” value=”agree”> <label for=”agree”>I agree</label></td>
</tr>
<tr>
<td colspan=”2″>
</td>
<td>
<input type=”button” id=”mySubmit” class=”formButton” value=”Send” onclick=”formObj.submit()”>
<input type=”reset” class=”formButton” value=”Reset”>
</td>
</tr>
</table>
</div>
</form>
</div>

</body>
</html>

formSubmit.php

<?
echo “<h1>Form posted with Ajax</h1>”;
echo “<h4>POST variables</h4>”;
foreach($_POST as $key=>$value){

if(is_array($value)){
for($no=0;$no<count($value);$no++){
echo “<b>”.$key.”[$no]</b>: “.$value[$no].”<br>”;
}
}else{
echo “<b>”.$key.”</b>: “.$value.”<br>”;
}

}

echo “<h4>GET variables:</h4>”;
foreach($_GET as $key=>$value){
if(is_array($value)){
for($no=0;$no<count($value);$no++){
echo “<b>”.$key.”[$no]</b>: “.$value[$no].”<br>”;
}
}else{
echo “<b>”.$key.”</b>: “.$value.”<br>”;
}

}

thumbnails images popup

{ May 12, 2008 @ 10:19 am } · { Uncategorized }
{ } · { Comments }

<html>
<head>
<style>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = “thumbNormal”;
}
document.getElementById(id).className = “thumbSelected”;
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
</head>
<body>
Click a photo on the left to view full size.
<table border=0>
<tr>
<td valign=top>
<img id=1 class=”thumbNormal” src=”http://www.codetoad.com/images/3lio103.jpg” width=120 onclick=”SelectImg(1)”>
<br><img id=2 class=”thumbNormal” src=”http://www.codetoad.com/images/3lio20.jpg” width=120 onclick=”SelectImg(2)”>
<br><img id=3 class=”thumbNormal” src=”http://www.codetoad.com/images/3lion19.jpg” width=120 onclick=”SelectImg(3)”>
</td>
<td width=15> </td>
<td valign=top>
<img id=0 src=”">
</td>
</tr>
</table>
</body>
</html>

125 code snippets

{ May 12, 2008 @ 10:03 am } · { Uncategorized }
{ } · { Comments }

http://www.paulspoerry.com/index.php/2007/05/18/125-code-snippets-for-web-designers/

Cross Browser Multi-Page Photograph Gallery

{ May 12, 2008 @ 10:01 am } · { Uncategorized }
{ } · { Comments }

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title> Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery</title>
<meta name=”Author” content=”Stu Nicholls” />
<style type=”text/css”>

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

</head>

<body>

<div class=”photo”>
<ul class=”topic”>
<li><a class=”set” href=”#Portraits”>Portraits<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”lbox/portrait1.jpg”><img src=”http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait2.jpg”><img src=”lbox/portrait2a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait3.jpg”><img src=”lbox/portrait3a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait4.jpg”><img src=”lbox/portrait4a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait5.jpg”><img src=”lbox/portrait5a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait6.jpg”><img src=”lbox/portrait6a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait7.jpg”><img src=”lbox/portrait7a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait8.jpg”><img src=”lbox/portrait8a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait9.jpg”><img src=”lbox/portrait9a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait10.jpg”><img src=”lbox/portrait10a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait11.jpg”><img src=”lbox/portrait11a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait12.jpg”><img src=”lbox/portrait12a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait13.jpg”><img src=”lbox/portrait13a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait14.jpg”><img src=”lbox/portrait14a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait15.jpg”><img src=”lbox/portrait15a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/portrait16.jpg”><img src=”lbox/portrait16a.jpg” alt=”" title=”" /></a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>

<li class=”active”><a class=”set” href=”#Landscapes”>Landscapes<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”lbox/landscape1.jpg”><img src=”http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape2.jpg”><img src=”lbox/landscape2a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape3.jpg”><img src=”lbox/landscape3a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape4.jpg”><img src=”lbox/landscape4a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape5.jpg”><img src=”lbox/landscape5a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape6.jpg”><img src=”lbox/landscape6a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape7.jpg”><img src=”lbox/landscape7a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape8.jpg”><img src=”lbox/landscape8a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape9.jpg”><img src=”lbox/landscape9a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape10.jpg”><img src=”lbox/landscape10a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape11.jpg”><img src=”lbox/landscape11a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape12.jpg”><img src=”lbox/landscape12a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape13.jpg”><img src=”lbox/landscape13a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape14.jpg”><img src=”lbox/landscape14a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape15.jpg”><img src=”lbox/landscape15a.jpg” alt=”" title=”" /></a></li>
<li><a href=”lbox/landscape16.jpg”><img src=”lbox/landscape16a.jpg” alt=”" title=”" /></a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a class=”set” href=”#Flowers”>Flowers<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#flower1″><img src=”http://www.cssplay.co.uk/menu/lbox/flower1.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower2″><img src=”lbox/flower2.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower3″><img src=”lbox/flower3.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower4″><img src=”lbox/flower4.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower5″><img src=”lbox/flower5.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower6″><img src=”lbox/flower6.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower7″><img src=”lbox/flower7.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower8″><img src=”lbox/flower8.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower9″><img src=”lbox/flower9.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower10″><img src=”lbox/flower10.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower11″><img src=”lbox/flower11.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower12″><img src=”lbox/flower12.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower13″><img src=”lbox/flower13.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower14″><img src=”lbox/flower14.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower15″><img src=”lbox/flower15.jpg” alt=”" title=”" /></a></li>
<li><a href=”#flower16″><img src=”lbox/flower16.jpg” alt=”" title=”" /></a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>

</li>
<li><a class=”set” href=”#Trees”>Trees<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#tree1″><img src=”http://www.cssplay.co.uk/menu/lbox/tree1.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree2.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree3.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree4.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree5.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree6.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree7.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree8.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree9.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree10.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree11.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree12.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree13.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree14.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree15.jpg” alt=”" title=”" /></a></li>
<li><a href=”#tree1″><img src=”lbox/tree16.jpg” alt=”" title=”" /></a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a class=”set” href=”#Birds”>Birds<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>

<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
</ul>
<br class=”clear” />
</div>

</body>
</html>

Newer entries » · « Older entries

Swadharsan’s Weblog

Marqued Text Box

css message box

popupp

popup and links

light box

admin login model dotted

Ajax form submit

thumbnails images popup

125 code snippets

Cross Browser Multi-Page Photograph Gallery

Search

Pages

Archives

Categories

Calendar

Blogroll

Meta

July 2008
M	T	W	T	F	S	S
« Jun
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31