The jQBoxModel plugin is a plugin for jQuery that allows you to quickly prototype complex layouts.

This plugin was developed to streamline the page layout process by using % widths to have your main content width take up a percentage of the parent width then have sibling widths automatically calculated to take up the remaining space among themselves.

The demo also highlights the use of CSS3 Media Queries to dynamically serve different layout based on the screen width (resize the browser to see it in action).

To see the demo and fork on GitHub visit the website.

One thing I envy about more advanced programming languages is their heavy use of XML to set the properties of controls. This demo is my attempt to use jQuery’s XML processing capabilities to mimic similar behavior. In particular, this demo will display notifications of various types with some robust customization options all within a nicely formed XML file.

1. Giving our notifications some default styling

The boxes follow a familar color scheme to indicate what type of message it is. You can of course change these criteria in the CSS file, but as you will find later, most of these properties will be available to be changed in the XML notifications file when a new message is created. These are the default styles that are used when no styles are included in the XML notifications file.

CSS

/* Common Syles */
.jQN-warning-style, .jQN-success-style,
.jQN-caution-style, .jQN-information-style
  {
    position:relative;
    width:500px;
    margin-top:30px;
    padding:15px;
    padding-left:75px;
    padding-bottom:25px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  }

/* Warning box styles */
.jQN-warning-style
  {
    border:1px solid #999;
    color:#999;
    background-color:#ddd;
    background:#ddd url('../images/milky (117).png') no-repeat 15px 15px;
  }

/* Success box styles */
.jQN-success-style
  {
    border:1px solid #009E00;
    color:#009E00;
    background-color:#85F56D;
    background:#85F56D url('../images/milky (50).png') no-repeat 15px 15px;
  }

/* Caution box styles */
.jQN-caution-style
  {
    border:1px solid #B9BE86;
    color:#B9BE86;
    background-color:#FEEA98;
    background:#FEEA98 url('../images/milky (26).png') no-repeat 15px 15px;
  }

/* Information box styles */
.jQN-information-style
  {
    border:1px solid #6A64A5;
    color:#6A64A5;
    background-color:#C6D8EF;
    background:#C6D8EF url('../images/milky (66).png') no-repeat 15px 15px;
  }

/* Customize the look of boxes here */
.jQN-warning-style
  {
    border:1px solid #FF0000;
    color: #FF0000;
    background-color: #FFB0C3;
  }

2. Initializing the plug-in

After downloading the plug-in you need to reference either the included jQuery library or one of your own, the jQNotifications.js file, and the default styles CSS file

<!-- HTML -->

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jQuery/jquery-1.4.2.js">
<script type="text/javascript" src="jQuery/jQNotifications.js">
<script type="text/javascript">
  $(function(){

    // Load a specific notifications xml file (loads notifications.xml if not defined here)
    $("body").jQNotifications({xmlLoad: "notifications1"});

  });
</script>

3. Create and customize your notifications in the notifications.xml file

As the following XML indicates, there are four types of notifications you can group your messages into: warnings, successes, cautions, and informations. This gives you 4 default notification styles but each message is fully customizable regardless of what group the notification is placed. Here is a list of properties that can be changed on an individual notification message: custom class name [custom-name], styles [width, font-color, background-color, border-color, background-image, display(none)], the actual message

[/text]

, and which element the notification will appear after [placement]. **The notification will not appear unless the placement element is defined and it must be a valid class or id for an element in your html file. Placement will accept jQuery selectors minus the quotes. For example, .foo works as will .foo, #bar because these are valid jQuery selectors. Additionally, by default the injected notification will have 2 class names that are dependent on where the notification is placed in the XML file. Namely, if the notification is placed in the warnings block, the classes jQN-warning-style and jQN-warning-message-[number] will be added to the notification block. The [number] indicates the number of the notification in the warning block (e.g. the third notification will have the class jQN-warning-message-3). If a custom-name is indicated, in addition to those two classes, an additional class as you defined will be added to the notification block. The display(none) element is useful for AJAX style notifications where an event triggers the notification (e.g. a successful form submit).

<!-- XML -->

<?xml version="1.0" encoding="UTF-8"?>
-<messages>
    +<styles>
    -<warning>
      -<message>
         <custom-name>fooBar</custom-name>
        -<styles>
          <apply-style>custom</apply-style>
          <width>150px</width>
          <display>none</display>
        </styles>
        <text>Please enter a number from 0 - 100000000000</text>
        <placement>.bar</placement>
      </message>
      -<message>
        <text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</text>
        <placement>#foo</placement>
       </message>
    </warning>
    +<success>
    +<caution>
    +<information>
    +<custom>
</messages>

4. View and download the Demo

Please click the button to see a demo and also download the plugin.

The advent of the smartphone has marked an explosive increase of users accessing the internet on the go. With worldwide numbers well above 1% of all internet usage, companies have taken notice and started creating mobile versions of their full websites to cater to mobile users. This showcase highlights some standouts from companies you have heard of like CBS, Disney, and also some you may not have heard of. Each of these mobile websites attempt to make the mobile experience as good as possible even with limited bandwidth and screen space.

*Disclaimer* This is the original article that was written by me and then written in bad faith here. Since the author on that other blog did not see fit to pay me or give me attribute for writing the article as agreed, I have decided to post the article on this blog.

1. A List Apart

2. Android and Me

3. Bamboo

4. CBS News

5. CNN

6. Disney

7. ESPN

8. H&M

9. Jaguars NFL

10. Marcel Muller

11. Mashable

12. Mercedes Benz (USA)

13. Microsoft

14. Procab Studio

15. Topix

16. Tripadvisor

17. Twitter

18. Vimeo

19. Volkswagen

20. Yahoo

Mobile – Is it time to care?

The latest numbers indicate mobile internet usage accounts for about 1.26% of all internet usage. Is that enough to cater specifically to mobile users, as these companies have done? What’s your opinion?

1. Use Better Fonts with @font-face

Upload the font you want to use to your web folder then add something like this to your css file.

/* CSS */

/*Initialize the font*/
@font-face {
  font-family:cabnd;
  src:url("fonts/CA BND Bold Web/CABNDWebBold.otf") format("truetype);
}

/*Use the font*/
#header h1 {
  font-family:cabnd, helvetica, arial, verdana;
}

2. Make your container div transparent but not it’s children

Notice that each container div can have it’s own transparency set. This can lead to some nice effect where transparency appears stacked.

/* CSS */

#some-container {
  background-color:rgba(255,255,255,0.7);
}

3. Rounded Corners!

Rounded corners can instantly convert a plain looking site and give it a more modern look.

/* CSS */

/* Safari and Chrome */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
                     - or -
-webkit-border-radius: 5px; /* all four corners */

/* Firefox */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
                     - or -
-moz-border-radius: 5px; /* all four corners */

/* CSS3 Compliant Browsers */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
                      - or -
border-radius: 5px;  /* all four corners */

4. Add Content to the page with CSS

/* CSS */

#somediv:after {
  content:"some content";
}

5. Add a drop shadow to your div

Graphic designers know that the easiest way to portray depth is by using a drop shadow. Now this trick is readily available to web designers using CSS3 box-shadow property.

/* CSS */

#shadow-boxing {
  -moz-box-shadow: 0px 0px 5px #000;
  -webkit-box-shadow: 0px 0px 5px #000;
  box-shadow: 0px 0px 5px #000;
}

6. Use text-shadow to create inset effect

The key to creating an inset effect is to match the depth and color of the text-shadow compared to the color of the text being used and the color of the background the text is surrounded by.

/* CSS */

#letter-press h1{
  text-shadow: 0px 1px 1px #eee;
}

7. Use negative text-shadow to create inset effect

In this example, a negative text-shadow is used to create a deeper inset effect.

/* CSS */

#header h1 {
  color: #fff;
  text-shadow: -1px -1px -1px #333;
}

8. CSS Transition

/* CSS */

#menu li a {
background-color:#1f1f1f;

/* Opera */
-o-transition:background-color 300ms linear 200ms;

/* Safari and Chrome */
-webkit-transition:background-color 300ms linear 200ms;

/* Firefox */
-moz-transition:background-color 300ms linear 200ms;

/* CSS3 Compliant Browsers */
transition:background-color 300ms linear 200ms;
}

Do you use CSS3 to progressively enhance your websites? In what ways?

Do you think this is an interesting way to do a roundup? Have you seen any other examples of roundups using interesting techniques to display the information?

jQuery

The slider is a small jQuery function and is pretty standard as it is. Of course, there are many fancy jQuery sliders on the internet that can be used to show more advanced transitions between images. For this demo I used the following code to activate the slide transition and the navigation bar that controls the slider.

$("#nav ul li").slider();

HTML

The images used in the slider are in a folder called images while the image tags in the html document are in a container with an id of imgContainer on the web page.

CSS3

As mentioned the site is enhanced for browsers that support text shadow, box shadow and border-radius. I tested the page on Chrome 5.0.3, Firefox 3.6.3, Opera 10.53, and Safari 4.0.3. Furthermore, I tested the page on IE 7 just to make sure the page looked okay even without the enhancements since IE 6-8 don’t support most CSS3 properties.

*Download source here

Please see the demo and download links below.

*Download source here

*View live demo here

Feel free to download the full demo which includes the HTML and CSS file used to produce the effect. **Edit** I have included the jQuery demo which has the same effect as this demo only it uses jQuery to enhance the tool-tip UI with a transition effect.

*Download source here