Design Solid

Teaching you Solid Design


Quick Fix Friday: CSS transitions

Ever wanted to make a smooth transition effect on elements on your page when the user passes their mouse over it? Well, with this quick and easy fix you can do just that, purely through CSS.

It is simple, all you have to do is in your css file have:

*
{
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

Next, let’s say you have a link that is black but when you hover over it you want it to be white. Therefore you would have something like this:

a
{
    color: #000;
}

a:hover
{
    color: #fff;
}

Now, when you hover over any link, it will have a smooth transition to white, and back to black when the mouse leaves.

Enjoy!

Quick Fix Friday: PHP include_path

Today for Quick Fix Friday we are going to show you a little tip that is quite helpful in making it easier to use include(‘…’) or require_once(‘…’) in PHP when including another file.

Rather than typing out the entire path to the desired file, you can specifiy what folders you want PHP to look in for a file, so for example, if you have files in say, folders \classes and \modules, that you need to include, you can simply set the include_path to:

ini_set('include_path', 'classes:modules');

After you have defined this, you can now simply just say:

require_once('database.php');

Rather than having to write:

require_once('classes/database.php');

Enjoy!

Expandable Textarea Without Javascript

Here is a quick HTML tip that I found quite helpful that I discovered as I was working on my newest website. Textareas are really annoying when it comes to forms, they take up so much space and if you do not make them big enough to handle all the text a user may write in it they get a scroll bar which is just a pain when it comes to editing the text.

Therefore, to prevent this problem the easiest thing would be to have a textarea that grows as you type. I have looked around online and never have found anything that was sufficently decent to use through javascript, however, I recently discovered that if you simply use a div as a textarea it will simply grow as the user types!

Here is how you do it:

<div contenteditable></div>

Done! It is quite simple. Try it out below.

Try writing some text…

Here is the catch though, this is only really useful if you are submitting the form via javascript, because you will not get any post or get variables otherwise. One way around that would to have a hidden textarea in the form and when you hit submit make javascript grab the innerHTML of the contenteditable div and set the textarea value to that.

So it is not perfect, but in a way it is much nicer than using someone elses plugin for a growing textarea!