GMP Web Design Resource Center

Welcome to the resource center. Here you'll find some useful scripts/code snippets, also tips and tricks for Web Design.

How to write a simple jQuery PlugIn2/25/2008 12:39:36 AM: PLUGIN SYNTAX jQuery.fn.toggleVal = function(focusClass) { this.each(function() { $(this).focus(function() { // clear value if current value is the default if($(this).val() == this.defaultValue) { $(this).val(""); } // if focusClass is set, add the class if(focusClass) { $(this).addClass(focusClass); } }).blur(function() { // restore to the default value if current value is empty if($(this).val() == "") { $(this).val(this.defaultValue); } // if focusClass is set, remove class if(focusClass) { $(this).removeClass(focusClass); } }); }); } TO USE $(document).ready(function() { $("#search").toggleVal(); });
Simple and fast

Image Replacement 11/18/2007 12:00:24 PM: <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { text-indent: -5000px; background: url(sample-opaque.gif); height: 25px; }
2003 Phark Technique

Liquid 3 col Layout (A List Apart)6/21/2007 10:47:31 PM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>3 columns, fixed width, content tallest</title> <style type="text/css"> #container{ background-color:#9cc; float:left; width:500px; border-left:150px solid #cf9; /* The width and color of the left rail */ border-right:200px solid #c33; /* The width and color of the right rail */ } #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:500px; margin-right:-500px; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative; } </style> </head> <body> <div id="container"> <div id="center">CENTER<br />COLUMN CONTENT</div> <div id="leftRail">LEFT RAIL</div> <div id="rightRail">RIGHT RAIL</div> </div> </body> </html>
Thank you alistapart.com

XHTML Target Blank WorkAround3/23/2007 11:00:58 PM: // XHTML COMPLIANT NEW BROWSER WINDOW window.onload = function() { if (!document.getElementsByTagName) { return false; } // create an array of objects of each link in the document var blankwinlinks = document.getElementsByTagName("a"); // loop through each of these links (anchor tags) for (var i=0; i < blankwinlinks.length; i++) { if (blankwinlinks[i].className == "blankwin") { // add an onclick event on the fly to open a new browser window blankwinlinks[i].onclick = function() { window.open(this.getAttribute("href")); return false; } } } } function openPopUp(linkURL) { window.open(linkURL,'popup') }

CSS2 Reference with Test2/14/2007 10:47:54 PM: Click Here MeyerWeb
CSS2 Compatibility Chart Reference

Min-Height Fast Hack2/10/2007 6:52:19 PM: selector { min-height:500px; height:auto !important; height:500px; }
Assuming IE6 will not fix the correct implementation for the !important declaration and assuming that if IE7 does, they’ll also implement min-height correctly since at the pace they’re going they’re fixing CSS like mad crazy cows. Is that too many assumptions? But wouldn’t you agree? The above snippet of CSS works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

Newest Conditional Commenting11/28/2005 9:37:25 AM:

Javascript Goodies Collection of JS Scripts6/14/2005 3:09:17 PM: Click Here Button, Links, and E-Mail Scripts {These scripts employ buttons, create links to other pages, or deal with e-mail. }

Center Aligned XHTML Three Column Layout with Header and Footer4/21/2005 8:23:05 PM: XHTML layout is here.

Hover Over Menu with Sub-Menu Using CSS and XHTML4/18/2005 3:44:44 PM: You think I've gone a little too XHTML overboard? Example Here.
This menu is not compatible with Inetrnet Explorer Mac Edition.

Center Aligned XHTML Two Column Layout with Header and Footer4/18/2005 3:43:23 PM: That was a mouthful, the fully compliant XHTML layout is here.

2 Col XHTML Compliant CSS Page4/16/2005 1:05:35 AM: <!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"> <head> <title>Two Column Layout with Header and Footer</title> <style type="text/css"> /* Zeroing off consistant zeros for all browsers set alternates below */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a {margin: 0; padding: 0; border: 0;} body {background-color: #fff; color: #333; font: normal 11px/1.5em Arial, Tahoma, sans serif;} #nav {width: 220px; float: left; margin-left: -1px; padding: 10px;} #maincontent {padding: 10px; margin-left: 230px; border-left: 1px solid #006;} #header {background-color: #fff; color: #006; border-bottom: 1px solid #006; margin-bottom: 0px;} #header h1 {padding: 5px;} #footer {background-color: #fff; color: #006; border-top: 1px solid #006; font-size: 11px; text-align: right; padding: 2px 10px 0 0; clear: both;} .clear {clear: both;} </style> </head> <body> <div id="header"> <h1>Header</h1> </div> <div id="nav"> <p>Left Col Nav</p> <div class="clear"> </div> </div> <div id="maincontent"> <p>Main Content Area</p> <div class="clear"> </div> </div> <div id="footer"> <p>Footer</p> </div> </body> </html>

Reference: Inline HTML Elements4/14/2005 12:14:01 AM

ABBR - Abbreviation
ACRONYM - Acronym
CITE - Citation
CODE - Computer code
~~DEL~~ - Deleted text
DFN - Defined term
EM - Emphasis
INS - Inserted text
KBD - Text to be input
SAMP - Sample output
STRONG - Strong emphasis
VAR - Variable

Remote Pop Window Link, Redirect Main (Remote Control)6/18/2004 9:56:40 AM: Here's a great tool that allows remote control via external pages:
http://javascript.internet.com/navigation/remote-control.html

Helper Hover Overs W/CSS4/14/2004 9:01:13 AM: abbr, acronym, .help { border-bottom: 1px dotted #333; cursor: help; } Apply that to a link like such and get the result you want. TITLE attribute

Meta Redirect3/16/2004 3:27:11 PM: Why would you want to use a META refresh? When you're designing a prototype/static site and you need to permenantly redirect a page location to another.
meta http-equiv="refresh" content="0;url=login.html"
That's it. Add that between the <head>
Is valid HTML no need to use object orientied scripting

SQL Vs. Access Discussion2/21/2004 9:20:26 AM: Link to discussion The quite often asked questions of mine. How many concurrent connections can one handle versus the other?

Find out here in this in-depth article. For you who tend not to want to read through this valuable information, Access = 10, SQL Server = 1,000+

How to Stop Jumpers #2/5/2004 10:19:50 AM

In most cases when a user enters a dead link, this usually present a problem while in 'real world' situations.

will cause your links on the bottom to jump up back to the top of the page, because the # indicates and anchor and the browser is looking for it somewhere.

You can use the following, second one is best:

That's it.

Security Hole Check12/17/2003 7:18:22 AM

When a port is open, the software using that port can be attacked. Therefore anti-virus programs, and installing critical security updates for your operating system and other software are still absolutely critical.

Hackers will probe your network frequently to see whether there is a problem with the way you have secured your ports. Here are three programs to test if your router or computer's ports are secure. The first gives the simplest "good / bad" results.

Symantec Security Check (Once on the page, click Start under "Security Scan".)

Gibson Research Corporation (On the page, scroll down, and click ShieldsUP!)

Since these programs are concerned with any possible threat, they may report things that are in practice usually safe. For example, although the Sygate and Gibson sites note ports that are not "stealthy". In practice ports that are "just" closed are usually quite secure.

(For a very detailed and technical explanation of hardware and software firewalls, see Firewalls FAQ.)

Center pop-up window with Javascript4/30/2003 11:45:41 PM: Code
THE JAVACRIPT <script language="javascript" type="TEXT/JAVASCRIPT"> var win= null; function windowPopCenter(page,name,w,h,scroll){ var winl = (screen.width-w)/2; var wint = (screen.height-h)/2; settings='height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',toolbar=no,location=no,status=no,menubar=no,resizable=yes,dependent=no' win=window.open(page,name,settings) if(parseInt(navigator.appVersion) >= 4){win.window.focus();} } </script> THE LINK <a href="javascript:windowPopCenter('LINK.ASP','pop','WIDTH','HEIGHT','yes')" onfocus="blur()">LINK/IMAGE</a>
Example:
Sorry, No Example, please insert into your own page

How to make a nifty Hairline that's NS comp too?4/30/2003 11:44:11 PM: Code
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#666666"> <td bgcolor="#666666"> <table width="100%" border="0" cellspacing="1" cellpadding="3" align="center"> <tr bgcolor="#FFFFFF"> <td width="100%" bgcolor="#FFFFFF">Something here</td> </tr> </table> </td> </tr> </table>

Maximze Current/New Window4/30/2003 11:41:25 PM: Code
<script language="JavaScript"> window.onload = maxWindow; function maxWindow() { window.moveTo(0,0); if (document.all) { top.window.resizeTo(screen.availWidth,screen.availHeight); } else if (document.layers||document.getElementById) { if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth) { top.window.outerHeight = screen.availHeight; top.window.outerWidth = screen.availWidth; } } } </script>
Instructions: Just place this in the file that you want Max'd

Access Database Tip!4/30/2003 11:40:40 PM: Error:
Microsoft JET Database Engine (0x80040E09) Cannot update. Database or object is read-only.
Solution:
You might have done this on the database file, but the actual folder which stores the mdb file needs to have change permission on the IUSR_MachineName account. This allows the built in guest account to create the locking file when you access the database.

More to come... Keep posted.

XHTML Revamp
GMP Web Design V4 has officially launched. as of 4/25/05 we're XHTML 4.01 Transitional Compliant. What does that mean? Other than the fact that we have our nifty little icon below.
: Learn More >>>

GMP Web Design LLC Hosting DNS Server Information
DNS1.SIANT.COM DNS2.SIANT.COM: Control Panel Login >>>

DNS Checkup
Comprehensive and advanced web-based DNS tools, going beyond just ping, tracert, WHOIS and DNS lookups.: DNS Check >>>

Recommend Us to a Friend
Like what you see? Impressed and think a collegue or friend might like what you see?: Tell a Friend >>>