SlideDeck

You may be tired of hearing from me today as this is my third post of the day but as I’m working with WordPress today I wanted to share a useful plugin that I found. SlideDeck is a plugin that automatically creates a slider widget for your WordPress page. These slider widgets are all over the internet. So many sites are using it to callout specific items. SlideDeck is customizable and clean. I haven’t used it but the support is pretty extensive. It’s definitely something to keep in your pocket for that certain client.

iPhone textbox scrolling

I’m an iPhone user and avid Apple fan and I can’t believe I didn’t realize this til now (in my defense I’ve been out of the web design and development mode for a few months but considering I’ve posted two blog posts today maybe I’ll jump start it!)… you can scroll a textbox on the iPhone or iPad using two fingers simultaneously overtop of the textbox. I never realized this before because whenever I saw a textbox I just assumed that was the end of it’s content. I never had to scroll anything on my iPhone except for a full web page and that was intuitive to do.

What confused me was why my scrollable text box on my webpage wasn’t showing up on the iPhone. I couldn’t see the scrollbar and my text was cut off. This is because the iOS doesn’t show the scrollbars on scrollable text boxes but instead takes advantage of the touchscreen capability of the iPhone.

So the next time you’re viewing a webpage on your iPhone and you see a textbox with the text cut off use those fingers and scroll!

Take a look at this forum post for a visual explanation:

http://forum.tipb.com/apple-news-rumors/198723-tip-scrolling-text-boxes.html 

CSS Tip… duh!

It’s 2011 and work is busy – which is great! Aside from my work on Mission US I’m developing a website for an author I met in New York a couple of years ago. Anyway, he has a book coming out (can’t say more about him or the book right now but more to come in the future) and I am designing and developing his site… very exciting!

Today I had a quirky thing happen with my css div layout when viewed on the iPhone. I have 2 columns of text in a page and I’ve set the width of each column, which isn’t suggested but I like being precise. On other browsers the text in each column displays as expected but on the iPhone the text was bigger in one of my columns (the left one) and my links were overflowing into the right column. I thought it was a simple overflow property issue but turns out I needed to explicitly tell the browser not to resize my text.

It was a 15 minute headache and once again Google search has saved me. I knew it had to be a browser issue. At least the solution is simple… so simple in fact that I wanted to write a post on it lest I encounter the same issue in the future. So here is the code snippet that you need to include in your CSS style for the div to prevent the browser from resizing your text:

-webkit-text-size-adjust:none;