Save HTML Table to Excel using jQuery

Dylan — Fri, 07 Nov 2008 18:47:08 +0000
After a few hours work looking into this, this turned out really easy to implement using jQuery and server side PHP programming as follows:
On the client side the following HTML code needs adding to the page:
"/SaveToExcel.php" method="post" target="_blank"
onsubmit='$("#datatodisplay").val( $("").append( $("#ReportTable").eq(0).clone() ).html() )'>
"image" src="/images/icons/Floppy-48x48.png" width="12" height="12">
"hidden" id="datatodisplay" name="datatodisplay" />

Note – variables used above – ReportTable is the id of the table you want to save and datatodisplay is a hidden variable used to post the table to the server.
The jQuery commands were added to the form’s onsubmit event but could easily be in your $(function(){}); fuction
The hard part here was getting all of the 
 HTML code. The standard jQuery .html() command gets the innerHTML and was cutting off the 
 HTML code. Getting all the HTML code was accomplished using the code $(“#datatodisplay”).val( $(“”).append( $(“#ReportTable”).eq(0).clone() ).html() ) which effectively gets the outerHTML of the named HTML object (in this case the table we want to save to excel).
On the server side create a file called’SaveToExcel.php’ and add the following code:
<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=export.xls");
// Fix for crappy IE bug in download.
header("Pragma: ");
header("Cache-Control: ");
?>





Updated: April 8, 2010 – modified to add fix for crappy IE download bug.
Post from: Top SEO Tips

Save HTML Table to Excel using jQuery
Related posts:
jQuery Automatic Trim of Input Fields
HTML Meta Tags – What are they and how do you use them on your website?
jQuery – Add a default button to a page
The Importance of Clean HTML Code
Issues Creating and Downloading File in IE from PHP



Make WordPress Mobile Friendly
Dylan — Tue, 15 Jul 2008 19:01:41 +0000
 
 
 
Following on my theme for this week, here are the steps to make WordPress mobile friendly. This assumes you are using a separate URL for your mobile friendly wordpress (such as sitename.mobi):
1 – Buy your domain and park it on your current WordPress site, so sitename.com and sitename.mobi are generating the same content
2 – Add (or modify) the file /wp-content/themes/yourtheme/functions.php and add the following lines:
 remove_action(‘template_redirect’, ‘redirect_canonical’);
function elixir_urlrewrite( $url ) {
 �if ( strpos( $url, get_bloginfo(“url”,”raw”) ) === false )
 ��return $url ;
 ��
 �$urlparts = parse_url($url) ;
 �$url = str_replace( $urlparts[scheme] . “://” . $urlparts[host] , “” , $url ) ;
 �if ( strlen( $url ) == 0 )
 ��$url = “/” ;
 �return $url ;
 }
add_action(‘day_link’, ‘elixir_urlrewrite’);
 add_action(‘feed_link’, ‘elixir_urlrewrite’);
 add_action(‘month_link’, ‘elixir_urlrewrite’);
 add_action(‘page_link’, ‘elixir_urlrewrite’);
 add_action(‘post_link’, ‘elixir_urlrewrite’);
 add_action(‘the_permalink’, ‘elixir_urlrewrite’);
 add_action(‘year_link’, ‘elixir_urlrewrite’);
 add_action(‘category_link’, ‘elixir_urlrewrite’);
 add_action(‘bloginfo_url’, ‘elixir_urlrewrite’);
 ?>
This will cause your wordpress installation to rewrite all links to remove sitename.com from them – this stops a mobile visitor always being redirected to the .com site
3 – Modify your .htaccess file and add the following lines (replacing sitename with your site name as applicable):
Options All -Indexes

 RewriteEngine On
 RewriteBase /
 RewriteCond %{HTTP_HOST} ^sitename\.com$
 RewriteRule ^(.*)$ http://www.sitename.com/$1 [R=301,L]
 RewriteCond %{HTTP_HOST} ^sitename\.mobi$
 RewriteRule ^(.*)$ http://www.sitename.mobi/$1 [R=301,L]
 
This replaces the built in ‘redirect_canonical’ so that it handles .com and .mobi correctly.
4 – modify your template so that it changes the doctype for a mobile device. Modify your header.php fie and replace the current ‘doctype’ line as follows:
 function checkmobile(){
 �// Always mobile enabled on .mobi
 �if ( strpos( strtolower( $_SERVER['HTTP_HOST'] ) , “.mobi” ) !== false )
 ��return true ;
 ��
 ��
 �if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
 �
 �if(preg_match(“/wap\.|\.wap/i”,$_SERVER["HTTP_ACCEPT"])) return true;
 �
 �if(isset($_SERVER["HTTP_USER_AGENT"])){
 �
 �$uamatches = array(“midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320″, “opwv”, “chtml”, “pda”, “windows\ ce”, “mmp\/”, “blackberry”, “mib\/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up\.b”, “audio”, “SIE\-”, “SEC\-”, “samsung”, “HTC”, “mot\-”, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “eric”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “\d\d\di”, “moto”);
 �
 �foreach($uamatches as $uastring){
 ��if(preg_match(“/”.$uastring.”/i”,$_SERVER["HTTP_USER_AGENT"])) return true;
 �}
 �
 �}
 �return false;
 } �
if ( checkmobile() == true &&
 �strcmp( strtolower( $_SERVER['HTTP_HOST'] ) , “www.sitename.mobi” ) != 0 &&
 �strcmp( strtolower( $_SERVER['REQUEST_METHOD'] ) , “get” ) == 0 &&
 �$_SERVER['SERVER_PORT'] == 80 )
 {
 �header(“HTTP/1.1 301 Moved Permanently”);
 �header(“Location: http://www.sitename.mobi” . $_SERVER['REQUEST_URI']);
 �exit();
 }
 if ( checkmobile() == true )
 { ?>
 http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtd“>
  }
 else
 { ?>
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
  }
 ?>
�
5 – view with a mobile device. This is when you will need to change your CSS and page layout to take into account the limitations of the mobile environment. THis was covered in previous posts:
Making Your Site Mobile Friendly – CSS
�To see this in action visit http://www.fionndownhill.mobi/�
Post from: Top SEO Tips

Make WordPress Mobile Friendly
Related posts:
Making Your Site Mobile Friendly
Making Your Site Mobile Friendly – CSS
Search Engine Friendly 301 Redirect in PHP
Copywriting Makeover: Search Engine-Friendly Can Also Mean Visitor-Friendly
Search Engine Friendly 301 Redirect in CFM Coldfusion



Making Your Site Mobile Friendly – CSS
Dylan — Tue, 08 Jul 2008 23:34:01 +0000
 
 
 
CSS is vitally important in making your site mobile ready. I ended up making 3 CSS media sections in one CSS file:
@media screen – contains all the CSS positioning informaiton, font sizes needed for the screen, etc.
@media handheld – the CSS for handhelds. This removed a lot of unneeded parts of the screen (footer text), and doesn’t include positioning information.
@media print – CSS for when the page is printed. This changes the font size for printing, labels links for printing, turns off unnecessary navigation (left hand menus, footer, etc) and anything else to make your site look good when printed.
All CSS for these sections should be contained within curly brackets {}
@media print{
�*{
�	font-size: 12pt;
�	font-family:Georgia, "Times New Roman", Times, serif;
�}
�a{
�	color: #520;
�	background: transparent;
�	font-weight: bold;
�	text-decoration: underline;
�}
}
All of these sections can be in their own CSS files and included using the include syntax:
or
Post from: Top SEO Tips

Making Your Site Mobile Friendly – CSS
Related posts:
Making Your Site Mobile Friendly
Make WordPress Mobile Friendly
Search Engine Friendly Site Map
Copywriting Makeover: Search Engine-Friendly Can Also Mean Visitor-Friendly
SEO Site Review – http://www.silvaheeren.com



Making Your Site Mobile Friendly
Dylan — Thu, 03 Jul 2008 20:31:21 +0000
 
 
 
Setting up CSS for mobile phones is easy enough but what about modifying your site to handle these users. Considering the total people using a mobile phone to surf in a business environment is minimal so you want to minimize the additional webmaster time spent supporting this implementation.
I found this script at http://www.brainhandles.com/2007/10/15/detecting-mobile-browsers/�that detects mobile phones. It’s very simple to implement. I call this script and use it to decide what parts of a page to send to the visitor. For example the top nav on our main site is graphics, by checking the visitor is mobile I output an unordered list of navigation links.
Post from: Top SEO Tips

Making Your Site Mobile Friendly
Related posts:
Making Your Site Mobile Friendly – CSS
Make WordPress Mobile Friendly
Search Engine Friendly Site Map
Calls-To-Action: Making Them Fit Makes All the Difference
Making It Easy for Customers To Choose You
Top SEO Tips » Accessibility

Save HTML Table to Excel using jQuery

Make WordPress Mobile Friendly

Making Your Site Mobile Friendly – CSS

Making Your Site Mobile Friendly
