Connect With WRD
feed via e-mail
feed via e-mail

Perfect multi-column CSS liquid layouts is a series of website layouts use percentage widths and relative positioning and compatible the common web browsers (even Safari on the iPhone and iPod touch).

Multi Column CSS Layout

They’re also ‘stackable’ so you can use multiple column types on the one page.

Features of these CSS layouts:

  • No CSS hacks
  • iPhone & iPod Touch compatible
  • SEO friendly
  • Full length column background colours
  • No Images
  • No JavaScript
  • Resizable text compatible
  • Stackable columns
  • Free to use

These free CSS layouts include 1-column, 2-column & multi-column ones.

Although there may not be a perfect layout with every new browser version, these layouts are promising.

Icojoy has beautiful free icon sets including web development icon sets, pixel icon sets, rss icon sets & smiley icons.

This is the 4th part of their web development icon sets. Click here to find their all free icons.

Web Development Icons

Package: 60 icons
Sizes: 24×24
File Types: .png, .ico, .tif, .gif, .bmp
Colors: Colored with and without shadows, with a subtle gray shade and transparent. .Bmp, .gif formats are optimized for lighter backgrounds

phpWebFtp is an open source web-based FTP application built with PHP.

It is not a simple file manager as it can be installed anywhere and connects to any FTP server.

PHP FTP Script

You can configure the application from a config file. Some configuration options include: maxFileSize, resumeDownload & defaultServer.

Features of this PHP FTP Application:

  • Built-in free 22 language packs
  • Easy Binary/ASCII mode switching
  • WYSIWYG file editor for .html, .htm files
  • Built-in file or directory download mode
  • Special .zip files extraction to the server feature
  • CHMOD function for applying permissions to the files and folder
  • UNZIPing mode for extracting zipped files on the server

Google Trends for Websites is a web-based service where you can compare the visitor statistics of websites.

Google Website Trends

The data displayed is daily unique visitors (after logging in, you can see the numbers that graphs represent) and currently, up to 5 websites can be compared.

Google Ad Planner provides you information about websites by simply entering demographics and sites associated with your target audience. This is a tool to be used when you are planning or searching for websites to advertise.

Google Adplanner

Ad Planner, currently, can be used by invitation only. You can apply for it here.

More info can be found at Inside Adwords blog.

Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.

CSS Icon
Formy
is created by Vladimir Carrer who had created the CSS print framework: Hartija (see WRD post). Thanks to him for the suggestion.

Formy uses Reset.css for maximum browser compatibility. 

  

Here is how a simple form works:

<label for="Name">Name:</label> <input type="text" name="Name" value="Lorem ipsum dolor" /><br />
<label for="City">City:</label> <input type="text" name="City" /><br />

With the download, there are already examples of vertical & horizontal forms.

Markup Factory is an impressive web publishing platform for web designers & developers.

Markup Factory

It is a hosted-platform where you can create simple to complex websites easily with features including:

  • content management system
  • blog
  • calendar
  • event registration
  • online store
  • podcasting
  • newsletter management
  • & much more.

And, you or your customers can manage all the features with a powerful content management & administration interface.

Markup Factory

I have been playing with Markup Factory for a while & the best part is, it does not limit or force you to a new way of development.

It presents you all the logics of a website, blog, online store etc., you continue developing how you used to, creating the template, css, even add JS functions if you want but don’t deal with the time-consuming programming part and take advantage of the ready-to-use modules.

Markup Factory is built with web standards in mind. It has a powerful template engine that supports native XHTML – CSS and system modules have valid XHTML outputs from end to end.

Markup Factory CMS

There are also 2 "in-beta" features that are about to make the system much powerful:

  • built-In customizable online database
  • form builder

The application is very well-documented & not complicated. This makes the adaption period shorter.

Markup Factory is offering different packages for different requirements.

For an example Markup Factory built website, check Marshill.cc.

For an overview/tour of the system, click here.

Conclusion:

Markup Factory is complete website creation platform for web designers/developers. It will enable you to create a  complicated website with a blog, e-commerce features, event registration, calendar, etc in a very short time.

On the other hand, the website manager will be able to manage the whole content & system easily (when needed, there is a ready-to-use documentation).

P.S. This post is a review.

BarackSlideshow is a Mootools slideshow script with a simple & nice interface (which is very similar to the one in Barack Obama’s website & this is where the name comes from).

Mootools Slideshow

The script presents the images with a fade-in, fade-out effect.

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.

Everyday Icons has a playground area, which has a chic interface, presenting free patterns, icons & some PDF note designs.

Specially, patterns are high quality, can be previewed & downloaded in different colors.

Free Patterns

Currently, you can find 100 patterns and 6 small icon sets.

Floating a banner or content definitely increases the visibility of them. But have some limitations (which we’ll remove).

In general, floating banners are used when there is no other content at their column as they are always at the "float" (position:fixed) state.

This is a better & smarter solution that will float the banners when needed, re-position them and can be used in any type of banner – content combinations.

And, best of all, you don’t need to set any fixed heights in the code.

JavaScript Floating Smart Banner

We’ll be using jQuery but these simple functions can easily be ported to other JavaScript frameworks.

Before reading further, here are the examples. Check both example 1 and example 2 and scroll down.

Logic of this smart floating banners:

  • Position of element (probably div) holding the banners won’t be mentioned as "fixed" in the beginning.
  • We insert an identifier element to understand the exact original position of the end of the contents.
  • When a user scrolls, with a JavaScript function, we check if the last part of the content is visible or not.
  • If not visible, we set the position of the div holding the banner to fixed.
  • If visible we re-set the position to relative (or absolute).
  • That’s all.

The HTML:

A standard 2 column webpage.

<div class="mainWrap">
    <div class="leftWrap">contents</div>
    <div class="rightWrap">
        <div class="banner">banner</div>
        <div class="smartBannerIdentifier"></div>
    </div>
</div>

The CSS:

The important part is, we are not setting CSS "fixed" position to the banner.

.mainWrap {
    width: 500px;
    margin: 0 auto;
}
.leftWrap {
    float: left;
    width: 250px;
    background-color: #CCCCCC;
}
.rightWrap {
    float: right;
    width: 250px;
    background-color:#666666;
}
.banner {
    width: 250px;
    background-color: #FF0000;
}

JavaScript:

We have a function which simply:

  • Understands if the scrolled amount is bigger than the "smartBannerIdentifier" which defines the end of contents.
  • If yes, sets the CSS position of the banner to fixed.
  • If no, sets the CSS position of the banner to relative and "top" to the original value using the smartBannerIdentifier’s offset value.

$(document).ready(function(){
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "fixed");
      $("#banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "relative");
      $(".banner").css("top", $(".smartBannerIdentifier").offset);
    }
   });
});

Dependencies:

JavaScript function used requires some objects from jQuery 1.2.6+. For lower jQuery versions, you’ll need the dimensions plugin.

Using this JavaScript floating banners you can:

  • Definitely show your banners or content more with a simple non-flickering method.
  • Order your contents and banners in any way and it will work.
  • Can do some special tricks like adding effects when they begin to float or else.

Download JavaScript Floating Banners

Script is tested on major browsers at Windows OS. I’m not sure about the compatibility on Mac and others but must be ok as it uses standard jQuery functions. If you live any problems, just share them at the comments.

P.S. Download includes 2 example files.

wTag is a shoutbox script (mini chat) written in PHP which uses Ajax to refresh the chat.

It uses MySQL to store the data, has a CSS-based smiley dropdown which can be enabled/disabled and a bad words & spam filter.

PHP Shoutbox Script

Other features of this PHP shoutbox script are:

  • Replace URLs catched in a message with clickable links.
  • UTF-8 encoding for multilingual support.
  • Compliance with XHTML 1.0 Transitional and CSS.
  • Custom designs: it's easy to change the chatbox look by editing the CSS files.
  • A form validation and warnings display system.
Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com