Articles - Page 4

Text Selection Color

A lesser know property of CSS3 is the selection property. This allows you to change the properties of text when selected so you can highlight it in any way you want

/* Webkit */
::selection {
        background: #000; 
        }
/* Firefox */
::-moz-selection {
        background: #000; 
}

This sentence should highlight in black. And this in red.

Don't forget that some browsers won't show this as it's CSS3

Read post... Posted in 'Web development'

Turn off Chrome's textarea resizing

When building forms for websites, much time can be spent making sure that all the elements fit together in a nice way, all lining up and looking neat. So then along came Google's Chrome browser and with it came the ability to drag resize a text area to any size possible. Great. Great?

While the ability to resize the text are to be the right size for the content being entered is a great feature, the need to do it on a well designed and styled site may make everything mess up. A well designed form should anticipate the users need and supply forms that are able to fit the data they are collecting.

Luckily you can disable it easily with one line of styling.

textarea{resize: none} 

Alternatively you could anticipate the need for bigger text areas and constrain the user's resizing to a value that will fit your design. You can even constrain to just one axis by setting a min and max width/height. The following would allow a textarea to be resized to 400px high but the ...

Read post... Posted in 'Web development'

Using git with media temple

Using the wonderful GS server from mediatemple allows the use of svn & git versioning systems. SVN was really easy to setup as was git, but git has a few issues when trying to push to it in the way that mediatemple suggest.

Since git likes to push back to its 'origin' the best way to do this is to clone from the ssh side rather than the read only http side. If you set up the repo on a subdomain of your site such as git.mt-example.com then you can clone the repo like this (all one line, I just broke it to fit it in):

git clone ssh://serveradmin%mt-example.com@mt-example.com
/home/#####/domains/git.mt-example.com/html/mt-example.git

Once you have that cloned you can then push without having to specify the url.

Read post... Posted in 'Web development'

Widgets Galore!

Widgets are a simple and quick way to share your photos, videos, general chatter and other information from the big sites to your own site or blog. In an ideal situation it would probably be better to write your own custom implementation of each of these, so they can be fitted in to your site with a more seamless result. Here are some links to some of the more popular sites and their widget generators:

 

Flickr: http://www.flickr.com/badge.gne

Twitter: http://twitter.com/about/resources/widgets/widget_profile

YouTube: http://code.google.com/apis/youtube/getting_started.html#widgets

Facebook: http://developers.facebook.com/docs/reference/plugins/like-box

 

Read post... Posted in 'Web development'

Forcing iOS phone numbers to link on a webpage

If you ever wondered how to remove the auto phone number conversion on webpages then look no further. Just place this in the head of your document and all should be ok.

<meta name="format-detection" content="telephone=no" />

Of course you may want to force pages to link a number. You can do this using:

<a href="tel:+1-123-3456-7890">
Call my fake number on: 123-3456-7890
</a>

Of course if you are browsing other peoples sites on your i/Pad/Phone/OS device then I have no idea how to turn it off in the settings.

Read post... Posted in 'Web development'

Implementing related items for a Django blog

Having searched and searched and researched to figure out how to get a related article to show along side a blog post or article I stumbled upon this gem of an example which I am now using to show related articles. This works by comparing the words and the frequency of their existence, dropping any common words and giving a result between 0 and 1, with 1 being a 100% match. I have been modifying some of the implementation also to also sort the results by the rating of related-ness.

Now the problems with this method. The only issue I have had with looking for similar results is that the calculations are slow, even just comparing titles of articles has a small lag. For the full documents the comparison adds extra seconds to load time. This leads me nicely on to possible solutions that I am thinking of so far... Cacheing and/or creating lookup tables for the results... Or moving the comparison to a save and using a database to store the results.

Sources ...

Read post... Posted in 'Web development'

Django Apps on MediaTemple and main.fcgi error

I was having had an issue with Django on my mediatemple hosting and the urls being affected by a certain "main.fcgi". It happened a while back, and then again recently so I decided to share the solution I found.

Simply add the following to your settings.py file. Then restart the app and you should be good to go.

    FORCE_SCRIPT_NAME = ''
Read post... Posted in 'Web development'

Move up a level in a PHP string

To remove the last part of a string of words or directory structures in PHP you can use this wonderful bit of code:

$b = substr($a, 0, strrpos($a, " "));

Just replace the " " with "/" for removing the last dir from a string (to go up a level)

Read post... Posted in 'Web development'

ie6 double float margin bug

Here is the quickest fix I have found for fixing the ie6 double float margin bug, where all margin values are doubled on floating elements.

Just apply:#element { display: inline; }

And the element float will be rendered as expected. Go figure...Thanks to http://www.positioniseverything.net/explorer/doubled-margin.html for shining a light on, and fixing this issue.

Read post... Posted in 'Web development'

Vertical align image in a ul li

Here is a quick solution to get a list item with an image to vertically align to the middle of the text in the same li.Simply apply “vertical=align:middle” to the image in the list like this:ul. li img { vertical-align:middle;}

  • Text in the list item

Remember: You are aligning the image to the text so it gets the text-align property!

Read post... Posted in 'Web development'