rob's blog » css http://banagale.com I have a theory that the truth is never told during the nine-to-five hours. -Hunter S. Thompson Tue, 26 Jul 2011 08:14:11 +0000 en hourly 1 http://wordpress.org/?v=3.0 View Source from Safari on iPad http://banagale.com/view-source-from-safari-on-ipad.htm http://banagale.com/view-source-from-safari-on-ipad.htm#comments Fri, 09 Apr 2010 08:19:27 +0000 rob http://banagale.com/?p=476 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.

2. Use your touch selection skills to copy the following line of javascript:

3. Tap  + then Add Bookmark

4. The first text field is the Title field. Use the title, View Source.   Leave the second field (the Address Field) alone and hit save.

5. Tap the Bookmarks icon and then edit.  Find View Source in the list and tap the right arrow for the bookmark’s details. Now tap the Address Field and hit the X icon to clear it. Tap and paste the javascript from the clipboard.

5. Tap the Bookmarks navigation item to save the changes.

Voila.  Go to any web page using Safari, tap the Bookmarks icon and hit View Source.  Safari will open a page of source code in plain text in a new window.

]]> http://banagale.com/view-source-from-safari-on-ipad.htm/feed 46 Using an HTML Web View with a Transparent Background in iPhone SDK’s Interface Builder and Xcode http://banagale.com/using-an-html-web-view-with-a-transparent-background-iphone-interface-builder.htm http://banagale.com/using-an-html-web-view-with-a-transparent-background-iphone-interface-builder.htm#comments Fri, 26 Jun 2009 16:32:36 +0000 rob http://banagale.com/?p=340 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];

Step three is to make sure that the “Opaque” box on the inspector of properties of the WebView is unchecked.

That should be all you need to do.  Drop a UIImageView behind the newly transparented web view object and you should be able to use a scrollable rich text with hyperlinks.  Horray.

If this helped you or confused you more, please post in the comments!  We do have it working on 3.0 much to the happiness of our client.

]]> http://banagale.com/using-an-html-web-view-with-a-transparent-background-iphone-interface-builder.htm/feed 3 Display a Simple Loading Message and Animated Loading Gif Using JavaScript http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm#comments Wed, 20 May 2009 19:57:28 +0000 rob http://banagale.com/?p=310 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:

Loading Message and Animated Gif Example Javascript

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.

Let’s begin by assuming you have the majority of your page’s content within a series of nested DIV’s, where the outermost DIV is called “container.”

 <div id="container">
    <div id="heading">
       ...heading content...
     </div>
     <div id="body">
       ...body content...
     </div>
  </div>

Normally, the dynamic content in your container would be rendered by the browser after it has downloaded and performed the main JavaScript routines.  What we want to do is hide the container when the page is first loaded and instead display a DIV that contains a waiting message and a little animated gif icon.

Begin by using the CSS display property to hide the container DIV like so:

  <div id="container" style="display:none">

Next, you need to add a new DIV that contains your “Please Wait, loading…” message.  I chose to include an animated gif icon of a twirling circle, which I easily created using the AjaxLoad.info, a site created by Catherine Roman.   If you want to download my animated loading gif, you can get it here.

Here is an additional set of nested DIV’s that contain the loading content.  This should be placed outside the container DIV:

      <div id='siteLoader'> 
        <div id='siteDetailLoader'> 
        <img src='/path/to/your/animated/gif/loading.gif' border='0'> 
        Please wait while the page loads...<br /> <br /> 
        </div> 
      </div> 

You’ll note that the display property is not set on siteLoader because it is visible by default.  This is what we want.  The trick now is to make the siteLoader DIV dissappear once the dynamic page content is done loading while simultaneously displaying the container DIV with the real page content.

This is handled using the global event handler onLoad.  There a few ways to make use of the onLoad event, I recommend including an external JavaScript file.  Do this by saving a new text file called actions.js in the same directory as the page you’re changing.  Just after your <title> tag on your document include this external JavaScript  file using:

<script src=”actions.js” type=”text/javascript”></script>

Inside actions.js, you need to include a function based on window.onload as follows:

window.onload = function() {
   document.getElementById("siteLoader").style.display = "none";
   document.getElementById("container").style.display = "block";
}

What this is doing is saying to the browser, “as soon as you’re done loading the webpage, you should hide the ‘please wait’ stuff and show the meat and potatos of my webpage.”

To view all of this in action, have a look at my recently updated online portfolio which of course, talks up what a great person I am. :)  I hope this has been helpful, as always–please post your comments!

For further reading on busy indicators and the important visual feedback and attention cueing needed to be successful with the display of heavy dynamic webpages, have a look at the article series on SAP Design Guild by Gerd Waloszek called “Waiting at the Computer: Busy Indicators and System Feedback.”   There is a wonderful table giving guidelines on the type of feedback that should be displayed based on user wait time.

]]> http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm/feed 1 Custom Styling the ShareThis Button Using CSS Without API Calls http://banagale.com/custom-styling-the-sharethis-button-using-css-without-api-calls.htm http://banagale.com/custom-styling-the-sharethis-button-using-css-without-api-calls.htm#comments Wed, 06 May 2009 17:34:41 +0000 rob http://banagale.com/?p=302 ShareThis CSS Style Classes Button

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:

.stbuttontext – This class will allow you to change the look of the text, ShareThis.  You can style it with any normal styling like color or font-family but text-decoration does not seem to work. :p

.stico_default – This class allows you to style the icon itself.  An example on how to replace the ShareThis icon with your own site’s favicon webmonkey is: 

{
	background: transparent url(http://www.banagale.com/favicon.ico) no-repeat scroll 0px 0px !important;
}

I’m interested in any other css that can be used to style the ShareThis button without requiring API calls (if there are any).   if you know of additional classes, or this helped you please post a reply.

Follow me on Twitter

]]> http://banagale.com/custom-styling-the-sharethis-button-using-css-without-api-calls.htm/feed 1