Tuesday, January 31, 2012

Detecting Space in Input Boxes - CSS3 vs jQuery

It's 1 A.M and my half brother Jack from Utah pings me. Hey Ric, I got a webdesign issue that's keeping me awake. I paused for 2 minutes..assuming he is going to tell me more about the issue. But it seemed he was expecting me to solve it, whatever the issue is. So I being the nicest guy, asked him to mail me.

Here's the deal.


Jack wanted to find a space character in an <input> but using CSS3 selectors.Well, if you want to create an actual CSS3 rule in your stylesheet, then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..

For eg:

<form>
    <input type="text" value="no-space-here" /><br/>
    <input type="text" value="" /><br/>
    <input type="text" value="space here" /><br/>
    <input type="text" value="" /><br/>
    <input type="submit" value="submit"> type a space and press Submit
</form>

CSS

input[value*=' ']{
    background-color:#fff5f5;
}

Run the code here and see for yourself. http://jsfiddle.net/8BdUV/

A good solution is to use jQuery here


$('form').submit(function(){
    return ($(':input[value*=" "]').addClass('warning').length > 0) ? false : true;
});​

CSS

.warning{
    background-color:#fff5f5;
}

Now run the solution http://jsfiddle.net/PHja9/

Bingo!

Wednesday, January 25, 2012

Horizontal Navigation Menus


Horizontal menus are suitable for pages with menus containing fifteen menu buttons or fewer per row. Obviously, this depends on the length of the labels and the size of the text used on the buttons. With very short labels, more buttons could fit across a page (for instance, if the labels were page numbers 1, 2, 3, 4, etc.). The horizontal tab menus on the BBC web site has fourteen tabs in one row and two other rows with seven links on each. This shows that many more links can be fitted into a page if you can accept several rows. The rows need to be distinctly separated by a divider or by using navigation bars with different colors.


Horizontal menus can be challenging because the commonly advocated inline or float methods each have their problems. Floated menus can be difficult to center on the page, inline menus traditionally could not have equal size buttons. However, now that all the browsers support the muchneglected attribute { display:inline-block; }, horizontal menus are no more difficult than vertical menus, and dimensions can be very easily applied to give equal size buttons, or buttons that automatically vary to accommodate the content. Recipes for horizontal menus often use { display:inline: }, but the resulting buttons are unsatisfactory. All browsers now support { display:inline-block; }.

The attribute { display:inline: } did not allow width, height, margins, or padding to be set. By using { display:inline-block; }, buttons can be displayed inline and have their dimensions set. This provides the best of both worlds, as shown by the second row of buttons in the basic menu below.



The top row of this basic menu shows the unsatisfactory appearance of display:inline. In the second row, the display:inline-block buttons can be given height, line-height, and padding.

The very basic menus shown above are not a rollover menus; that is, they do not change color when the cursor hovers over the buttons. Also, they use paragraphs instead of the traditional unordered lists.

The code below contains two rows of menu buttons. The top row is unaffected by the CSS style sheet. The CSS style sheet, is linked only to the bottom row of  buttons and the style gives the text plenty of horizontal space. This demonstrates the value of the display:inline-block code compared with the default display:inline;.

Creating the Structure for Two Rows of Menu buttons

<!doctype html>
<html lang=en>
<head>
<title>Inline-block content</title>
<meta charset=utf-8>
meta details go here
<link rel = "stylesheet" type = "text/css" href = "inline-block.css">
</head>
<body>
<div id="container">
<p>&nbsp;</p>
<p>inline content (default)</p>
<p>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p>&nbsp;</p>
<p class = "inline-block">inline-block content<br>
<a href = "#">Page 1</a>
<a href = "#">Page 2</a>
<a href = "#">Page 3</a>
<a href = "#">Page 4</a>
<a href = "#">Page 5</a>
<a href = "#">Page 6</a>
<a href = "#">Page 7</a>
</p><p>&nbsp;</p>
</div>
</body>
</html>

The # symbol in the href items must be replaced by your own page URLs. The code here is the style sheet that targets the second row of menu buttons and applies the style display:inline-block; to enable the width of the buttons to be adjusted.

Applying the display:inline-block; Style to the Second Row of Buttons

/* Set styles to equalise the browser rendition*/
html, body, h1, h2, h3, h4, h5, p, ol, ul, li { padding: 0; margin: 0;
}
body { font-size: 100%; font-weight: normal;
}
ul { padding-left: 0;}
/* end of style equalisation */
p { background:white margin:auto; text-align:center;
}
#container { margin:auto; text-align:center; width:97%; min-width:800px; 
max-width:1200px;
}
a { background: orange; color:navy;
}
.inline-block a { display:inline-block; width:110px; height:30px; 
line-height:30px; text-align:center;
}

Here's a Demo




Posted on 7:46 PM | Categories: ,