Archive for the ‘ HTML ’ Category

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery Ajax AutoComplete for jQuery Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. [ READ MORE ]

Ajax Forms with jQuery

Ajax Forms with jQueryThere are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a [ READ MORE ]

jQuery all-in-one gallery

jQuery all-in-one galleryjQuery all-in-one gallery Information This gallery has everything. By that I mean that it has many choices of viewing the photographs. The top row of thumbnail images, which are the actual size images scaled down using CSS, can be scrolled left and right by positioning the mouse at the left or right of the line (between the [ READ MORE ]

Create Resizing Thumbnails With Overflow Property

Create Resizing Thumbnails With Overflow Property Create Resizing Thumbnails With Overflow Property Resizing Thumbnails Using Overflow Property This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using [ READ MORE ]

Enlarged view of image Cool CSS Image Pop-up

Enlarged view of image Cool CSS Image Pop-upEnlarged view of image Cool CSS Image Pop-up I discovered this effect at www.phpasks.com this is my modification that I used for one of my real estate sites. This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click [ READ MORE ]

Rotate Image – Image Slide Show

Rotate Image – Image Slide ShowRotate Image – Image Slide Show DEMO imgAr = new Array()[ READ MORE ]

horizontal-gallery slide show

horizontal-gallery slide showhorizontal-gallery slide show DEMO function open_new(image, id){var a = '';$(id).update(a);} Asif Khan HTML CODE <link rel="stylesheet" href="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/gallerystyle2.css" /> <script type="text/javascript" src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/motiongallery2.js"></script> <script type="text/javascript" src="/js/prototype.js"></script> <script language="javascript"> function open_new(image, id) { var a = '<img src='+image+'>'; $(id).update(a); } </script> <div style="overflow:hidden;"> <div id="motioncontainer" style="width:150px; height:300px; overflow:hidden; position: relative;"> <div id="motiongallery" style="position:absolute; left:0; top:0;"> <!--Gallery Contents below--> <a href="#" onclick="open_new('http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dynamicbook1.gif', 'id_image');"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dynamicbook1.gif" border=1></a><br /> <a href="#"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dynamicbook1.gif" border=1></a><br /> <a href="#"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dynamicbook1.gif" border=1></a><br /> <a href="#"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dynamicbook1.gif" [ READ MORE ]

Free CSS Vertical Menu Designs

Free CSS Vertical Menu DesignsFree CSS Vertical Menu Designs No. of Vertical Menu Demo DEMO h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #000;margin: 0px;padding: 0px 0px 0px 15px;}ul {list-style: none;margin: 0;padding: 0;}img {border: none;} /*- Menu 1--------------------------- */#menu1 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #3D261D;border-size: 1px;border-width: 1px;}#menu1 li a {height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: [ READ MORE ]

Free CSS Navigation Menu Designs 2

Free CSS Navigation Menu Designs 2Free CSS Navigation Menu Designs 2 No. of Horizontal Menu Demo Here DEMO body {margin:0;padding:0;font: bold 11px/1.5em Verdana;}h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #000;margin: 0px;padding: 0px 0px 0px 15px;}img {border: none;} /*- Menu Tabs 1--------------------------- */ #tabs1 {float:left;width:100%;background:#F4F7FB;font-size:93%;line-height:normal;border-bottom:1px solid #BCD2E6;}#tabs1 ul {margin:0;padding:10px 10px 0 50px;list-style:none;}#tabs1 li {display:inline;margin:0;padding:0;}#tabs1 a {float:left;background:url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/tableft1.gif") no-repeat left [ READ MORE ]

Pure CSS horizontal Drop Down Menu

Pure CSS horizontal Drop Down MenuPure CSS horizontal Drop Down Menu DEMO @import "http://www.phpasks.com/blogs/wp-content/uploads/2009/11/map_dropDown.css"; Menus CSS Dropdown Current Link Keyboard Special With Images Articles: A-D Accesskeys Branching Drop Caps Articles: E-K ie C.C. ieMac Bugs Images in Heading Images in Table Articles: L-O Location Object Many Layouts Null Links Articles: P-S Popup Windows PNG Overlay Scalable Tabs Styling Pullquotes Articles: T-Z The Perfect FAQ Tip Method Whitespace HTMO CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" [ READ MORE ]

js – slide show1

js – slide show1#exp_content { margin : auto; text-align : left; padding : 10px 40px 19px 4%; height : auto;}#jsss { margin : 0 auto 0; margin-bottom : 1px; text-align : center; width : 500px; height : auto; padding : 8px 10px 8px 10px;}.jsss { [ READ MORE ]

Saturday CSS Menu

Saturday CSS Menuul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}ul#saturday li{display:block;float:left;margin:0;pading:0;}ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgDIVIDER.gif") no-repeat top right;}ul#saturday li a:hover{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgHOVER.gif") no-repeat top right;}ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgON.gif") no-repeat top right;} Saturday CSS Menu This menu is called “Saturday”, well, because I made it on a Saturday. A minty styled menu, with green and [ READ MORE ]

Vert-One CSS Menu

Vert-One CSS Menu #menucase ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;width:200px;} #menucase ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;} #menucase ul.vert-one li a{display:block;text-decoration:none;color:#fff;background:#600;padding:0 0 0 20px;width:180px;} #menucase ul.vert-one li a:hover{background:#900 url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/vert-one_arrow.gif") no-repeat 0 9px;} #menucase ul.vert-one li a.current,ul.vert-one li a.current:hover{background:#933 url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/vert-one_arrow.gif") no-repeat 0 9px;} The first vertical menu to be added to the site. What I like about this one is that it can [ READ MORE ]

Dolphin CSS Menu

Dolphin CSS Menu#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#dolphinnav ul li{display:block;float:left;margin:0 1px;}#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg-OVER.gif) repeat-x bottom left;}#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 [ READ MORE ]

Time 4 Bed CSS Menu

Time 4 Bed CSS Menu#time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}#time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#time4bed-nav ul li{display:block;float:left;margin:0 2px;}#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}#time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}#time4bed-nav ul li a:hover{color:#fff;}#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_left-ON.gif") no-repeat top left;}#time4bed-nav ul li a.current span{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_right-ON.gif") no-repeat top [ READ MORE ]

Matte CSS Menu

Matte CSS Menu#menu { font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin: 50px 0; padding: 0; list-style-type: none; background-color: #eee; font-size: 13px; height: 40px; border-top: 2px solid #eee; border-bottom: 2px solid #ccc;}#menu li { float: left; margin: 0; }#menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; color: #666;}#menu li a:hover, #menu li.active a { background-color: #f5f5f5; border-bottom: 2px solid #DDD; color: #999;}#menu_wrapper ul {margin-left: 12px;}#menu_wrapper {padding: 0 16px 0 0; background: url(grey.png) [ READ MORE ]

Fox CSS Menu

Fox CSS Menu#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:5px 20px 0 20px;height:19px;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OFF.gif) no-repeat top left;}#foxmenu ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OVER.gif) no-repeat top right;}#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;} Fox CSS Menu This menu is called “Fox” it’s crafty, bold and colorful. A great menu for use on dark sites, as it [ READ MORE ]

Pro CSS Menu

Pro CSS Menu#procontainer_brown {position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;}#pronav_brown {position:relative;height:32px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg.gif) repeat-x bottom left;padding:0 0 0 20px;border-bottom: 8px solid #886d53;}#pronav_brown ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#pronav_brown ul li {display:block;float:left;margin:0 1px;}#pronav_brown ul li a {display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:32px;}#pronav_brown ul li a span {padding:12px 20px 0 0;height:21px;float:left;font-weight: normal;font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;}#pronav_brown ul li a:hover {color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg-OVER.gif) repeat-x bottom left;}#pronav_brown ul li a:hover span {display:block;width:auto;cursor:pointer;}#pronav_brown [ READ MORE ]

Simple Hover CSS Menu

Simple Hover CSS Menuul#blue { margin:0; padding:0; list-style-type:none; }ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}ul#blue .current { border-top:4px solid #3d496a;}ul#blue li:hover { border-top:4px solid #3d496a;}ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}ul#blue li a:hover { color:#8895b8; border:none; }ul#blue li [ READ MORE ]

Gloss CSS Menu

Gloss CSS Menu/* CSS Document */.rhm1{width:580px;height:64px;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg.gif) repeat-x; }.rhm1-left{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_l.gif) no-repeat;width:15px;height:64px;float:left;}.rhm1-right{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_r.gif) no-repeat;width:15px;height:64px;float:right;}.rhm1-bg{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg.gif) repeat-x;height:64px;}.rhm1-bg ul{list-style:none;margin:0 auto;}.rhm1-bg li{float:left;list-style:none;}.rhm1-bg li a{float:left;display:block;color:#ffe8cc;text-decoration:none;font:12px 'Lucida Sans', sans-serif;font-weight:bold;padding:0 0 0 18px;height:64px;line-height:40px;text-align:center;cursor:pointer; }.rhm1-bg li a span{float:left;display:block;padding:0 32px 0 18px;}.rhm1-bg li.current a{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_l.gif) no-repeat left 5px;}.rhm1-bg li.current a span{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_r.gif) no-repeat right 5px;}.rhm1-bg li a:hover{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_l.gif) no-repeat left 5px;}.rhm1-bg li a:hover span{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_r.gif) no-repeat right 5px;}.redrhm1{width:580px;height:64px;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg3.gif) repeat-x; }.redrhm1-left{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_l3.gif) no-repeat;width:15px;height:64px;float:left;}.redrhm1-right{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_r3.gif) no-repeat;width:15px;height:64px;float:right;}.redrhm1-bg{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg3.gif) repeat-x;height:64px;}.redrhm1-bg ul{list-style:none;margin:0 auto;}.redrhm1-bg [ READ MORE ]

CSS and round corners: Making accessible menu tabs

CSS and round corners: Making accessible menu tabsli span {display:inline}.example1, .example2, .example3, .example4 {color:#000; background:#ffa20c; font-weight:bold}.example2, .example3, .example4 {background: #ffa20c url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10//navl-article.gif) left top no-repeat}.example3, .example4 {padding-left: 10px}.example3 span, .example4 span {background: #ffa20c url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10//navr-article.gif) right top no-repeat}.example4 span {padding-right: 10px}ul.navigation {list-style:none; padding:0; margin:0}* html ul.navigation {height:1%}.navigation li {float:left; margin:0; padding:0}.border {height:1em; background:#781351; clear:left}.navigation a, .navigation a:visited [ READ MORE ]

CSS Drop Down Menu Tutorial Code

CSS Drop Down Menu Tutorial Code/**************** menu coding *****************/#menu {width: 600px;background: #eee;float: left;}#menu ul {list-style: none;margin: 0;padding: 0;width: 12em;float: left;}#menu a, #menu h2 {font: bold 11px/16px arial, helvetica, sans-serif;display: block;border-width: 1px;border-style: solid;border-color: #ccc #888 #555 #bbb;margin: 0;padding: 2px 3px;}#menu h2 {color: #fff;background: #000;text-transform: uppercase;}#menu a {color: #000;background: #efefef;text-decoration: none;}#menu a:hover {color: #a00;background: #fff;}#menu li {position: [ READ MORE ]

A magnificent menu

A magnificent menu#info {height:400px;}#enlarge {padding:0; margin:2em auto; list-style-type:none; background:#fff url(lines/back.gif); width:200px; height:200px; position:relative;}#enlarge li {width:200px; height:20px;}#enlarge li a {display:block; width:200px; height:20px; overflow:hidden; background:transparent; position:relative; text-indent:-10000px; z-index:100;}#enlarge li a:hover {position:absolute; top:0; left:0; width:200px; height:200px; z-index:1;}#enlarge li a.one:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/one.gif);}#enlarge li a.two:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/two.gif);}#enlarge li a.three:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/three.gif);}#enlarge li a.four:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/four.gif);}#enlarge li a.five:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/five.gif);}#enlarge li a.six:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/six.gif);}#enlarge li a.seven:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/seven.gif);}#enlarge [ READ MORE ]

Another magnifier menu

Another magnifier menu#info {height:400px;}#enlarge {padding:0; margin:4em auto; list-style-type:none; width:240px; height:40px;}#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}#enlarge li a img {width:100%; height:100%; border:0;}#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;} Another magnifier menu Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Information Similar to the last menu but this one is horizontal [ READ MORE ]

An enlarging unordered list

An enlarging unordered list#easel {width:75px; height:100px; margin:3em auto;}#painters { padding:0; margin:0; list-style-type:none; }#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }#painters a { text-decoration:none; color:#000; [ READ MORE ]

Use a Highlighter on this page