Category Archivecss
css &gadget &html &ipad &www rob on 09 Apr 2010
View Source from Safari on iPad
I’ve been enjoying the iPad quite a bit. This device is going to change everything. I have lots of thoughts, one of which is that the iPad will be a high productivity device. Feeding into that, here’s a quick way to view the html, css and javascript source code of a web page from Safari on the iPad.
This guide is adapted from Dustin Caruso’s note on viewing source in Safari for the iPhone.
1. Visit this page using Safari on your iPad. Continue Reading »
Apple &css &iphone &mobile computing &programming &sdk rob on 26 Jun 2009
Using an HTML Web View with a Transparent Background in iPhone SDK’s Interface Builder and Xcode
Something almost every iPhone application needs is an About and Help view that allows the user to learn a little bit about the application they’re using and how it should be operated. The problem with a UITextView in Apple’s XCode and Interface Builder SDK is that you can not use rich-text styling or even bold one line over another.
One solution to this problem would be to create image files containing stylized text and then rasterize them and allow the user to page through them. The problem with this is that you can’t have tappable URLs or links embedded in the text.
David Peixotto, coding ninja and my business partner for Neutrinos, suggested we look at using a Webview or HTML view and put an imageview in the background. The trick is telling the iPhone to display a UIWebView with a transparent background. I looked around for the solution to this and came across this helpful post in the iPhone Developer SDK forums.
Step one of getting a transparent web view in interface builder is to create HTML in the controller.m for the view containing the webview that contains the CSS line: <body style=”background-color:transparent”> Inside the <head> </head> sections of the html.
Step two is to set the background color of the webview to clear or transparent: myWebView.backgroundColor = [UIColor clearColor]; Continue Reading »
css &design &programming &www rob on 20 May 2009
Display a Simple Loading Message and Animated Loading Gif Using JavaScript
Some pages require an inordinate amount of time to load. For most sites, this is a big problem. Webmasters and SEO specialists know the value of a quick landing page load, because they know that netizens have short attention spans.
Dynamically built webpages, (especially applications), require time to load and visual feedback that something is happening. The most famous example is the gmail loading page:
Gmail uses a more sophisticated progress bar to represent the loading of the webpage. I found an article on yensDesign that gives some great advice on how to do this, if you want to get really fancy.
If you have a dynamically built page that you’d like to give a loading message to that doesn’t require a full progress bar, I recommend simply displaying a message and an animated gif.
The Method
The trick to accomplishing this is a small mix of JavaScript and CSS. You don’t have to be using <div>’s to display your content, but you should. My example uses <div>’s. Continue Reading »
css &programming &www rob on 06 May 2009
Custom Styling the ShareThis Button Using CSS Without API Calls
I was just doing a ShareThis icon for a client I’m working with and found that how to properly style the button is poorly documented. In order to replace the whole icon and text, you are supposed to use the developer API.
I only wanted to style the text, so I was hunting for some CSS to style the text and could not find the right classes to call. Some hunting turned up the following: Continue Reading »
