The solution is to modify your WPTouch plugin to manually link to the images associated with your webcomics. Now, I ended up buying the WPTouch pro version, because it is more updated, and it gives you themes. I’m hoping that it will be worth it for me since 50% of my sites traffic is from iPhones.

Once you’ve installed WPTouch Pro, edit the file wp-content/plugins/wptouch-pro/themes/classic/iphone/single.php

Add the following code on line 45

<?php
$categories = get_the_category();
$category = $categories[0]->category_nicename;
$webcomic = get_post_meta(get_the_ID(), ‘webcomic’);
if ($webcomic){
echo ‘<img src=”‘.get_bloginfo( ‘url’ ).’/wp-content/webcomic/’.$category.’/’.$webcomic[0]['files']['full'][0].’” alt=”" />’;
}
?>

Here’s what it does. First it grabs the category slug that the post is in. This is needed because that’s how Webcomic organizes your images. Second, it gets the webcomic metadata for the post. If the metadata exists, then we echo out the full sized image. That’s pretty much it!

If you have questions, I will try to help you out as best I can.

Friday – 08/13/2010

• called tech support
  • they said support is only covered under a support contract
• talked with someone on chat support
  • they said they would escalate the case to tier 2 support and they would contact me

Monday – 08/16/2010

• No contact from tier 2 support – case shows as ‘withdrawn’ on Adobe’s website
• used online form to schedule a callback, got a message that callbacks weren’t working until Tuesday
• chatted with chat support (transcript in email)
  • they ended up scheduling a call back from tech support for me
• on the meantime was on hold with tech support
  • spoke to someone who said Flash Builder 4 required a contract for support and they gave me the number
  • 800-585-0774 to purchase a support contract
• callback called me back 12 times
  • several times I chose option 9 to cancel the call back
  • finally used option 1 to speak with person to turn off the call backs
  • the person said he would close the case to stop the callbacks
• 2 more callbacks
  • used option 1 to speak to another person to turn off the callbacks
  • stayed on hold for over 5 minutes and ended the call
• 1 more callback
  • used option 1 again, no one answered within 5 minutes. I ended the call
• contacted @adobe on twitter
  • they referred me to @adobe_care
  • they attempted to find out what my issue with the profiler was
  • they said they would check with the flash builder team and get back to me
• called 800-585-0774 (direct sales) to see why I needed to purchase support for a $700 product that doesn’t work
  • she said that the issue should be handled by tech support without a support contract
  • transferred me to Flash builder tech support team
• speaking with tech support
  • he told me i need a support contract and this is not the right tech support for flash builder 4
  • he also told me he is the same person that I’ve spoken to twice today already (Abhishek)
  • he told me that direct sales was wrong and that if I had purchased a support contract then I would have gotten the right support number to call.
  • I asked to speak with his manager
  • he said he would transfer me to his manager
  • he again advised me that I needed to purchase a support contract
  • the manager came on the line (dsandeep)
  • he confirmed that I needed a support contract and that there is a dedicated flash builder team
  • I told him to put me in touch with that team.
  • he said he would transfer me to that team after documenting my case.
• I was transferred to direct sales (Rueben)
  • he said I should have two incedents covered within 90 days of purchase
  • he didn’t know the proper team to support the product
  • he tried to sell me one incedent for $34, I told him he just told me I had two icenddents to use
• he transferred me back to Abhishek at tech support
  • I related the story to him
  • he asked if I had a support contract #
  • I tried to clarify that direct sales told me I had two free incedents and all I have is an email with serial numbers
  • I gave him the serial number from my email
  • he gave me the number for flash builder support team 888-649-2990
• called that number (enterpise solutions)
  • they hung up on me after I tried to get the name of the person I was speaking to
• called back
  • told her my issue with the profiler and gave her account info
  • she said she is tier 2 and that I should have never spoken to tier 1 (I could have told her that)
  • she said I would be contacted back within 24 hours to do a webex session for the assistence
  • we went through the troubleshooting that I had already done and she confirmed that I would need a webex session to get any further

Tuesday – 08/17/2010

• I was contacted by Bruce on Twitter
  • he asked some basic troubleshooting, then wanted to have tech support contact me
  • I gave him my case number
  • he said he would escalate the case to tier 3 and I would be contacted
• I was called by someone on tier 2 support (I think)
  • he said they are still looking into the problem, but he found information that it could be a bug in flash player 10.1 and to try installing 10.0 and see if the profiler would work
  • he sent me a link with information on the 10.1 problem
  • I installed version 10.0, but the problem still persisted
• I emailed the tier 2 guy back and told him I still had the problem
  • He said they were continuing to look at the problem and would stay in contact with me

Wednesday – 08/18/2010

• Got an email from someone saying they would continue to look into my case

Thursday – 08/19/2010

• Finally got a call from a technician that wanted to remotely connect to my computer
  • He was able to connect and worked on my computer for about 45 minutes until I had to leave
  • all that was accomplished was that he could recreate the problem in a completely sterile environment, thereby determining it wasn’t something that I was doing wrong
  • We agreed to pick it back up again on Monday when I would be back in the office.

Monday – 08/23/2010

• No contact from Adobe

Tuesday – 08/24/2010

• Updated my case online saying I hadn’t heard from anyone on Monday like I was expecting
  • No response
• Contacted Adobe_care on Twitter saying I hadn’t heard anything from them since Thursday
  • Got an almost immediate response to my case asking me to do a couple more trouble-shooting steps
  • All the steps had been done by the tech last week when he was remotely connected to my computer
  • I updated the case with the results from the trouble-shooting and that the problem was still not resolved
  • No response yet from Adobe

Wednesday – 08/25/2010

• Updated my Adobe case with “Hello?” after not receiving any response
• Got an email response 6 hours after updating the case
  • They said that since the mm.cfg file didn’t exist on my computer to create it and put the following contents in it, then relaunch Flash Builder 4 and see if the profiler will work.
    • ErrorReportingEnable=1
    • TraceOutputFileEnable=1
    • TraceOutputEnable=1
  • The suggestion didn’t fix the problem and I updated the case with that information

Thursday – 08/26/2010

• Sent @adobe_care a DM to see what I needed to do to get my case escalated and a resolution
• found this guy’s article which sounds like he’s having as much fun as I am http://iconnectdots.com/2010/08/adobe-gets-1st-prize-for-worst-customer-service-ever.html
• Received an update to my case in which they are trying to convince me that they won’t support it on 64bit Windows 7 referencing the system requirements at http://www.adobe.com/products/flex/systemreqs/
  • OS Requirement: Windows 7 (32 or 64 bit running in 32-bit mode)
    • Ok, so you do support the 64 bit version, if the apps running in 32 bit mode
  • According to this article (which is just a better way of proving my point) http://www.techsupportalert.com/content/how-windows7-vista64-support-32bit-applications.htm if the application is installed in Program Files (x86) then it will always run in 32 bit mode.
  • This is nothing but a poor attempt at prolonging the case

Friday – 08/27/2010

• Got a message from @adobe_care on Twitter that the case had been stuck with tier 2 support and they were escalating it to tier 3
  • They said the 64-bit issue was still on the table

Saturday – 08/28/2010

• I installed Adobe Flash Builder 4 Premium on a second computer running Windows Vista 32-bit operating system
  • I also made sure that Flash Player 10.0 was installed
  • Verified the the profiler would still not launch
  • Updated the Adobe case saying that it still didn’t work with a supported OS so they couldn’t use the “not supported” defense
  • DMed @adobe_care and let them know that I confirmed it didn’t work on 32-bit windows Vista

Monday – 08/30/2010

• Got an update on the case this morning saying “I am escalating this case to my
  Senior, so that a collective research and response mechanism be
  generated.” We’ll see how that goes.
• I asked them to update the case on a daily basis with status
• Got a call from tier 3 support, a guy named Kurt Mossman @kurtmossman.
  • He is my hero!
  • In 5 minutes he had my profiler fixed and the case closed.
  • Below you will find my solution and the short amount of troubleshooting that we did

Conclusion

After almost 2 weeks, and probably 10-15 hours of fighting with Adboe support, we found a resolution to my problem.

Here was the solution:

1. open a command prompt
2. run the command: netstat –ano | find /i “9999”
3. In my case I had an output that showed TCP    0.0.0.0:9999           0.0.0.0:0              LISTENING
4. After identifying that port 9999 was already in use, it was a simple matter to change the port that the Flash Builder 4 Profiler uses
5. Launch Flash Builder
6. Go to Windows > Prefrences
7. Go to Flash Builder > Profiler > Connections
8. Change the port number to something that isn’t being used according to your test.txt file (we used 9997)
9. Click Apply > Ok
10. Close Flash Builder
11. Launch Flash Builder
12. Launch the Profiler
13. WORKS!

I have to say this is one of the worst support cases I’ve ever had the luck to be involved in. If I didn’t have bad luck. I’d have no luck at all.

I quickly turned to Google to see if a solution had already been found for something like this. I knew it was only happening in IE7 and all other browsers rendered it properly. I also had figured that it was a z-index problem. I soon learned that many other people have had the exact same problem that I was having. The bad news is that there were no real solutions to fix the problem. Luckily, for everyone’s enjoyment, I have found a simple and elegant solution that fixes it once and for all.

The solution:

Take the content that is being put in front of the drop-down and for IE browsers only, set the z-index value as a negative. Many solutions say to just make the menu have a high z-index value, but I tried that to no avail. I also saw that it wasn’t a viable solution for at least half of the people out there who were experiencing the problem. I used jquery to implement the solution like this:

$(document).ready(function() {
    // lower the z-index to negative to fix the overlapping drop-down menu problem
    // for IE 7 browsers only
    if(!jQuery.support.leadingWhitespace){
        $('#home_header').css('z-index', -2);
    }
});

You can download a copy of the code here

Part 1: Creating the home page

Part 2: Creating the form handler

Part 3: Creating the logoff handler and adding logic to the home page

1. Keep all your code for a style on one line.
   This is probably going to shock most of you because you are so used to seeing CSS with a single style taking up multiple lines, one line for each style attribute. Why is this wrong? For two reasons. First, it makes an incredibly tall file. Remember our number one goal? To quickly and easily find elements and styles. Tell me what’s easier, finding a class by scrolling through a file with 5000 lines, or finding a class  in a file with only 100 lines. It’s a no brainer. First and foremost you should always give priority to locating the class or id name. For example:
   
   Second, it decreases the amount of whitespace in your code which can help you decrease your file size (goal number four)
2. Use shorthand whenever possible.
   To me, this is a no brainer. By using shorthand you’re making your code easier to follow and you’re decreasing the size of your files at the same time (goals two, three, and four). For example:
   

Your styles should be placed in logical groups that either make sense, and/or follow the layout of your site. This will make it so much easier for you to come back in 6 months to modify something, or allow someone else to make changes with ease. I do both logical groups and site layout groups. This can be done in a couple of ways, using different CSS files, or using comment blocks in a single CSS file, or both (preferred). I typically use several CSS files.

“default.css” will contain styles that I use for every site. It’s usually code that will attempt to globaly reset elements so that they behave the same way on the majority of browsers. It will also contain common formatting classes that I use on all my sites. Styles like text_red, hide, or text_center.

“style.css” will contain styles that are used on more than one page. These will typically be layout related styles, fonts, backgrounds, etc.

“home.css” will contain only styles that are needed for the home page. Only include this file on your home page to try and keep down the overall size of your CSS. I use the same tactic for all my pages. If there are styles that will only be used on a single page, then I always put those in a separate CSS file and only include it on the page that needs them.

Also, you should take care to organize the code in your CSS files. I typically put all my font styling in one single section at the top. I will also have a link styling section. After that I break down the organization that roughly follows the HTML layout. For example, put all of your sidebar styles together, or all your footer styles together.

Next I will talk about coding standards

For styles that have multiple words in the name, put the most common term first, and the more descriptive term last. It will be easier for you to spot your styles later. In my “wrapper” example above I have two wrappers, one around a header, and one around images. Since the wrapper is the object that’s common to both, it gets put first in my style name. Another example is if you have multiple forms I give them ids like “frm_login”, “frm_contact”, “frm_order”, etc.

In my next article, I will discuss how you layout your CSS files.

I will typically use ids to refer to content sections that are unique like header, body, and footer. The rest of the time I use classes.

An interesting way to use classes is to have several mini-classes like text_b (for bold), text_i (for italic), and text_u (for underline). Then I can combine as many or as few of those classes in my HTML. This can really save you some time since it will decrease the amount of CSS code that you have to write.

Sorry that this article is so short, but it’s just a small topic.

In my next article I will talk about CSS Naming Conventions.

In a lot of my mobile websites I have pages that are loaded via ajax. These dynamic pages have elements on them that need to have events attached to them. JQuery (the thing JQTouch is built on) allows you to do this through live binding. You can read more about that here.

The problem with this lies in the fact that iPhones/iPods/iPads need to bind elements to a custom ‘tap’ event rather than a ‘click’ event that browsers need. If you bind things to the ‘click’ event, it will work fine in browsers, but fail in an iPhone (and vice versa with the ‘tap’ event). I needed a simple solution that would do some quick OS detection to logically bind things to either the ‘tap’ or the ‘click’ event. Did you catch that? I said OS detection, not browser detection. How come? By doing OS detection you’ll have a much greater chance of detecting a specific class of device. In my case, all I need to know is if they are on an iPhone/iPod/iPad or something else entirely. This also helps with Google Android compatibility since it also requires the ‘click’ event.

This is my OS Detection script. It’s capable of doing browser detection as well, but I stripped all of that out to make it more light weight for my purposes. Just include this file in your website before you initialize your JQTouch.

Download browserDetect.js

Now, here is how you use it with JQTouch to bind the proper events to elements.

if (BrowserDetect.OS == 'iPhone/iPod'){
	$('.chartnavlink').live('tap', handleClickChartnavlink);
} else {
	$('.chartnavlink').live('click', handleClickChartnavlink);
}

If you find this helpful, please just leave a quick comment. Also, I encourage any feedback. I’m always willing to learn newer and better things!

Specifically I wrote this extension to solve two problems.

The first problem was that my website has an absolute positioned navigation bar at the bottom of the page and it would work fine in the iPhone fullscreen mode, but when viewing the webpage in a UI Webview it was adding about 20 pixels of padding to the bottom of the page causing a large gap.  Also, when viewing the site on an iPad it would add a HUGE amount of padding. You can take this a step further to realize that anytime the height of a browser window is different than the static min-height values in JQTouch (420 pixels), that you would see this problem (affirmed with viewing site in a PC browser with different heights).

The second problem was that when I loaded a new ajax page, the background of the new div was cut off at the min-height value. I was using a radial gradient on the background of the new div, so there was a clear line at the bottom where the gradient was stopped short.

Well, this extension solves all those problems! You no longer have to worry about setting the height of your page!

Installation:

Code:

$(function(){
	// reset our heights on page load
	jQT.resetHeight();
});

Tips:

Use the jQT.resetHeight() function on page load, when you load new ajax content, and when the orientation changes.

Changelog:

1.1

• added an optional parameter to resetHeight() for a hard minimum to be specified. For example, if you never wanted the height to be less than 420 pixels just do

jQT.resetHeight(420);

That’s it! Did you find this useful? Please leave a comment and let me know!