Most Recent Articles
Prevent Double Submit on Forms with jQuery
The following snippet disables the submit button of all forms in scope of the function after the submit button has been initially clicked. To prevent users from submitting your forms more than once.
|
1 2 3 4 5 |
$('form').submit(function(){
$(':submit', this).click(function() {
return false;
});
}); |
How does it work?
When the submit button of the form is clicked, it triggers the form submit function of jquery, then takes the submit handler of the current form and makes it return false so it can’t submit the same form again.
Read MoreEqual Column Heights with jQuery
The function:
|
1 2 3 4 5 6 7 8 9 10 |
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
} |
This function loops through each of the elements passed in as parameters and sets each one equal to the tallest element in the group.
Usage:
|
1 2 3 |
$(document).ready(function() {
equalHeight($("#left,#right,#content"));
}); |
Read More
Zebra Stripe a Table or List with jQuery
This snippet lets you strip the even/odd rows of your tables/lists different colors for easier reading:
|
1 2 3 4 5 6 |
$(document).ready(function() {
var oddhex = "#364146";
var evenhex = "#102227";
$("table.zebra tr:odd, ul.zebra li:odd").css("background-color", oddhex);
$("table.zebra tr:even, ul.zebra li:even").css("background-color", evenhex);
}); |
Read More
Enable HTML5 Markup on Older Browsers
HTML5 is definitely the future of client-side web development. Unfortunately, some old browsers do not even recognize new tags such as header or section. This code will force old browsers to recognize the new tags introduced by HTML5.
|
1 |
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() |
A better solution is to link the .js file to the <head> part of your HTML page:
|
1 2 3 |
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
Source: http://remysharp.com/2009/01/07/html5-enabling-script/
Read MoreConvert an Image to Grayscale in HTML/CSS
First create a file called filters.svg with the following code:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg> |
The CSS:
|
1 2 3 4 5 6 7 8 9 10 |
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
} |
Customize UINavigationBar Background Property
Make sure you replace the two lines that create the UIImages with your image names.
Copy And paste the function into your app delegate right above applicationDidFinishLaunchingWithOptions:
then simply call
[self customizeAppearance]; inside your app delegate:
|
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 |
- (void)customizeAppearance
{
// Create resizable images
UIImage *gradientImage44 = [[UIImage imageNamed:@"gradient_textured_44"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage *gradientImage32 = [[UIImage imageNamed:@"gradient_textured_32"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
// Set the background image for *all* UINavigationBars
[[UINavigationBar appearance] setBackgroundImage:gradientImage44
forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:gradientImage32
forBarMetrics:UIBarMetricsLandscapePhone];
// Customize the title text for *all* UINavigationBars
[[UINavigationBar appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0],
UITextAttributeTextColor,
[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],
UITextAttributeTextShadowColor,
[NSValue valueWithUIOffset:UIOffsetMake(0, -1)],
UITextAttributeTextShadowOffset,
[UIFont fontWithName:@"Arial-Bold" size:0.0],
UITextAttributeFont,
nil]];
} |
Read More
Deselect UITableViewCell on Load
If you’ve ever paid attention to mail.app in iOS, when you navigate back to the main table view of mail items, the items that you previously selected shows for a second then deselects itself and animates out. Here’s how to do that:
|
1 2 3 |
- (void)viewWillAppear:(BOOL)animated {
[self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES];
} |
UITableView Delegate Methods
UITableViews work better as subclasses of UIViews instead of a stand along UITableView classes. One prime example is with iAds, in order to configure them correctly and have them display at the bottom of your table and not over the last cell, the UITableView needs to be a subview of a UIView class. No need to create a new UITableView subclass just to get the delegate methods. Copy and paste the UITableView delegate methods from below and paste into your classes implementation file:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
#pragma mark -
#pragma mark Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return 0;
}
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
// Configure the cell...
return cell;
}
/*
// Override to support conditional editing of the table view.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
// Return NO if you do not want the specified item to be editable.
return YES;
}
*/
/*
// Override to support editing the table view.
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
if (editingStyle == UITableViewCellEditingStyleDelete) {
// Delete the row from the data source
[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
}
else if (editingStyle == UITableViewCellEditingStyleInsert) {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}
*/
/*
// Override to support rearranging the table view.
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath {
}
*/
/*
// Override to support conditional rearranging of the table view.
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {
// Return NO if you do not want the item to be re-orderable.
return YES;
}
*/
#pragma mark -
#pragma mark Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// Navigation logic may go here. Create and push another view controller.
/*
<#DetailViewController#> *detailViewController = [[<#DetailViewController#> alloc] initWithNibName:@"<#Nib name#>" bundle:nil];
// ...
// Pass the selected object to the new view controller.
[self.navigationController pushViewController:detailViewController animated:YES];
[detailViewController release];
*/
}
/*
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 44.0f;
}
*/ |
Read More