Tutorials Archives - Page 5 of 8

Scrollable box without using an iframe

Here’s a super simple CSS tip to create a scrollable box on your website, without having to use the dreaded iframe tag. Scrollable boxes are great for cramming lots of content into a small space. They are perfect for announcements or short news feeds.

The solution which forms the basis of this technique is the overflow attribute. It can be set to .scrollable { width:250px; height:300px; overflow:scroll; }

Give a div the class you specified above and you’re good to go.
<div class="scrollable"> [Put your content here] </div>

Example 1:

Ornatus omittam scaevola eos ea, eu his amet quas insolens, nam alii honestatis appellantur id. Vim eirmod imperdiet delicatissimi an, quo pertinax inimicus consetetur at. Id facete euismod mel. Quo mandamus eloquentiam et. Nam ad consul malorum ullamcorper, has ea bonorum verterem. In accusam dissentiunt est, id eos prima mutat solum. Everti percipitur ne vel, ea ubique legimus vix.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.

The problem with setting overflow:scroll is that it creates both vertical and horizontal scroll bars and often the horizontal bar is not required (or desired).

A better idea is to set overflow-y:scroll (or overflow-x if you need horizontal only scrolling) leaving you with the desired effect.

Example 2:

Let us know what you think in the comments here or on Facebook.

Link to a specific post on Facebook

Someone asked me yesterday how to link to a specific post on Facebook and I had to stop and think for a minute. When you get a notification, you get a link to the status or link in question but how do you find this link yourself?

The answer was staring me right in the face. Under each post (be it a status or link post) is a timestamp. It is this timestamp that provides a link to the individual post.

All you need to do is copy this URL and paste it onto Facebook just like any other link. Unfortunately, the results aren’t very pretty but at least it gets the job done (and includes any original comments).

Let us know what you think in the comments here or on Facebook and remember to share with your networks.

Keep your Google account secure

Rick Klau has written up an excellent guide to keeping your Google account secure on his blog. Many of his tips will apply to other accounts too such as choosing a strong password.

Speaking of passwords, did you know that “this is fun” is 10 times more secure than “J4fS<2“? Here’s a great article on making your passwords both secure and useable: The Usability of Passwords. Or, if you’re more of a visual learner, this XKCD cartoon sums up the situation perfectly:

Let us know what you think in the comments here or on Facebook.

View Firefox downloads in a tab

Now that the addon manager opens into a tab instead of a separate window, it makes sense to move other areas of Firefox to this style too. Those of you who have used Chrome will know this is a better way to manage your downloads than a floating window.

It’s as easy as installing the Download in Tab extension and voila, no more downloads window to get hidden. It’s a very simple addon with very little in the way of options.

An alternative to Download in Tab is the very tidy Download Statusbar which puts the current downloads as individual items at the bottom of the screen:

If you are a regular downloader, you might also find DownThemAll a valuable addition to your addon collection.

Let us know what you think in the comments here or on Facebook.

Bypass compulsory registration with BugMeNot

Don’t you just hate it when you have to sign up to some website you’re probably never going to visit again, just to access the free download you’re after? BugMeNot can save you the trouble of form filling and reduce your spam level in the process.

If you want to give it a try, just head over to BugMeNot and type in the address of a site that requires a login. There’s a pretty good chance someone will have already created an account if it’s a popular site. Now just copy and paste the account details into the site you’re trying to access and you’re in!

Some sites don’t like BMN (as it prevents them from harvesting information about you) and so they disable the accounts. There is a rating system which shows the success rate of the particular login you’re trying to use and it’s nice to add a ‘yes’ or ‘no’ if it worked out for you. Some of the more niche sites aren’t featured yet but BMN has a feature to submit a login if you have to create one yourself.

Once you see how useful this is, you can install the BMN Firefox extension which makes the process even quicker. When you have it installed, it’s just a case of right clicking on any login form and choosing “Login with BugMeNot”.

Let us know what you think in the comments here or on Facebook and remember to share with your networks.