Phire it Up: Forms

Showing posts with label Forms. Show all posts

Showing posts with label Forms. Show all posts

Friday, February 5, 2010

IE6: Removing Padding on Input Checkbox

If you've ever put a background on an input checkbox and viewed it in IE6, you'll notice there is padding around the checkbox. Other browsers don't have this padding, and it can ruin designs if not dealt with.

An easy way to get rid of the padding through CSS is by adding these styles to the checkbox:

margin:0; width:13px; height:13px; overflow:hidden;

Doing this will not affect any other browser (at least modern ones) and will fix your IE6 issues.

Thursday, February 4, 2010

Images in LABEL tag no clickable in IE

Internet Explorer doesn't allow your images that are within a LABEL tag to be clickable. There is a javascript hack fix for this that works for sure in IE6-8. Sometimes you need, for usability, to have your images work like text in the LABEL tag, this is how you can accomplish this in IE.

Note that all other browsers do this fine...

Get the code: Using Images as Labels in Internet Explorer

Thursday, February 12, 2009

Automatic and Dynamic Title URLs from Titles using Javascript

This is a handy little javascript snipplet that will convert text in one text field to url friendly text in another. This is very useful if you're trying to automatically create title URLs from the title of your post. This helps with search engine optimization by giving you friendly URLs. Below is the javascript and a test form. You can copy it all, paste it, and test it.

<html>
<head>
<script type="text/javascript">
function urltitle(title)
{

// Create the url friendly title
var url = title
.toLowerCase() //change everything to lowercase
.replace(/^\s+|\s+$/g, "") //trim leading and trailing spaces
.replace(/[&]+/g, "and") //replace ampersand
.replace(/[#]+/g, "sharp") //replace pound
.replace(/[@]+/g, "at") //replace at
.replace(/[%]+/g, "percent") //replace percent
.replace(/[+]+/g, "plus") //replace plus
.replace(/[-|\s]+/g, "_") //replace spaces and hyphens to underscore
.replace(/[^a-z0-9_]+/g, "") //remove all non-alphanumeric characters except the underscore
.replace(/[_]+/g, "_") //remove duplicate underscores
.replace(/^_+|_+$/g, "") //trim leading and trailing underscores
;
document.getElementById('title_url').value = url;
}
</script>
</head>
<body>

<input type="text" onkeyup="javascript:urltitle(this.value);" />
<input type="text" id="title_url" />

</body>
</html>

As we usually give credits for what we find, this is where we got the original script before modifying it: Rewrite input to friendly URL

Tuesday, January 27, 2009

Simple Javascript email verification

Here is a simple email verification script in Javascript. Just pass in the email address and it will return true or false depending on if the email is valid. It will also do an alert popup if it is invalid.

function echeck(str) {

var at="@"

var dot="."

var lat=str.indexOf(at)

var lstr=str.length

var ldot=str.indexOf(dot)

if (str.indexOf(at)==-1){

alert("Invalid email address of attendee.")

return false

}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){

alert("Invalid email address of attendee.")

return false

}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){

alert("Invalid email address of attendee.")

return false

}

if (str.indexOf(at,(lat+1))!=-1){

alert("Invalid email address of attendee.")

return false

}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){

alert("Invalid email address of attendee.")

return false

}

if (str.indexOf(dot,(lat+2))==-1){

alert("Invalid email address of attendee.")

return false

}

if (str.indexOf(" ")!=-1){

alert("Invalid email address of attendee.")

return false

}

return true

}

Got this thanks to: Javascript Email Address Validation

Monday, January 26, 2009

Autocomplete textfields

In my search for a cool autocomplete script for my text fields, I came across one that I'd actually recommend. If you aren't familiar with autocomplete scripts, just start typing a url into the latest version of firefox and you'll see what I mean.

Get the script: jQuery plguin: Autocomplete

The script uses jQuery, which is a javascript library. It is really simple to use, everything is included in the download. It comes with a demo page and you can use to make it work the way you want it.

Wednesday, January 14, 2009

IE6 Problem with Form Submit Image Buttons

A lot of times we use images as our submit buttons for forms. I'm sure you've seen it a lot. Well, say you wanted to test if the form was submitted and used the standard way, lets say in PHP, of seeing if the submit button was sent, for example like this:

if (isset($_REQUEST['mysubmitbutton']))
{ ...}

With IE6 this wouldn't work if your submit button was an image. So if you had this as your submit button:

<input name="mysubmitbutton" type="image" value="1" src="someimage.png" alt="" />

Then your script wouldn't work. The reason is that IE6 WILL NOT send over the variable mysubmitbutton.

The workaround is to know that IE6 will send over other information (along with all other browsers). It sends the x and y coordinates of where you clicked on the image. So you'll see mysubmitbutton_x and mysubmitbutton_y. So if you modify your code to look for either of these variables, you'll be good to go!

Credit is to be given to this discussion forum: Differences in form handling btw Mozilla and IE?

Monday, December 22, 2008

Making a Link Select a Select Box in Javascript

I needed to have a link select an option within a selectbox. What I wanted to do was have a bunch of links out there and if a user clicks one, move down the page and have a value in my selectbox already selected according to that link.

I found a solution online that worked great. It uses javascript, but works wonderfully.

Since blogger doesn't let me paste code easily, I'll just direct you to the link. If it ends up being dead in the future, please leave a comment and I'll post the code.

Here is the reference: http://www.willmaster.com/library/demo/ImageClickSelectsDropdownItem/wallpaper-dropdown.html

Wednesday, September 3, 2008

Search button and field alignmnet

CSS DOCUMENT

#email {
margin: 0px 2px;
width: 110px;
_width: 110px;
padding: 2px 2px 0 2px;
_padding-right: 18px;
height: 16px;
_height: 16px;
background-color: #FFF;
border: 1px solid #afa9a6;
-moz-box-sizing: content-box;
float:left;
font-size:10px;
}

.search { background-image:url(/images/layout/speedclub_signup.gif); }

button.icon-replace {
-moz-outline: none;
padding: 0;
border-style: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
margin:0;
}

.icon-replace {
background-repeat: no-repeat;
background-position: center center;
display: inline;
display: inline-block;
display: -moz-inline-box;
_display: inline;
zoom: 100%;
width: 44px;
padding: 0 !important;
overflow: hidden;
white-space: nowrap;
text-align: left;
word-spacing: -2ex;
letter-spacing: -2ex;
min-height: 20px;
_height: 20px;
color: transparent !important;
_font: 1px/0 monospace;
_word-spacing: -2px;
_letter-spacing: -2px;
}

WITHIN HTML
<input name="email" id="email" class="speedclub_input" type="text">

<button type="submit" id="search-submit" class="icon-replace search"><span style="display: none;">Search</span></button>

Subscribe to: Posts (Atom)