Front-End Updates : September 2010

Tuesday, September 28, 2010

Chrome, Safari (Webkit) - get rid of the border on fucus

When you set focus on any form field in IE or Firefox the fields don't change their appearance much, but in Safari and Chrome it's quite visible. Set it's outline to none and say goodbye to that annoying border. Here goes the css -

.signup input:focus
{
background: #f00;
background-position: 379px -61px;
outline: none;
-moz-outline-style: none;
-webkit-outline-style: none;
}

HTML combobox(select drop down) issues in Safari

There are two main CSS attributes related to select form tag that Safari browser for windows doesn't understand.

1. If I assign a border to 'select' tag in CSS the Safari browser will not display the 'dropdown icon' at all.

2. If I want to increase the height of combobox I will possibly use a 'height' or 'padding' attributes. Safari doesn't understand both the attributes in case of 'select' tag. In order to increase the height of dropdown box in safari 'line-height' attribute comes to rescue.

Remember: If you set border or background color to combo box, it will not display the drop down arrow on Safari.

select {
padding:2px 3px 2px 2px;
line-height: 20px;
vertical-align:middle;
}

<select>
<option>Please Select</option>
</select>

Saturday, September 25, 2010

CSS3 HTML5 form validation

http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html

http://www.alistapart.com/articles/forward-thinking-form-validation/

Thursday, September 16, 2010

Editable DIV With character count

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Editable DIV and character count</title>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
/*
$(document).ready(function(){
alert($("#content").text().length);
});
*/
</script>

</head>

<body>

<div id="content" contenteditable="true" style="border:1px solid #f00;">ABC</div>

<script type="text/javascript">

var count = document.getElementById("content").innerHTML.length;
alert(count);

</script>

</body>

</html>

Tuesday, September 14, 2010

jQuery: hide div when click outside

Useful for log-in popups/dropdown menus/links

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery: hide div when click outside</title>

<style type="text/css">
a{
text-decoration: underline;
color: blue;
cursor: pointer;
}
.headerLogin{
background: #fe0000;
position: absolute;
top: 40px;
left: 50px;
z-index: 2;
padding: 6px;
margin: 0 -4px 0 0;
width: 200px;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
display: none;
}
</style>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".headerLoginLink").click(function(){
$(".headerLogin").slideDown('slow', function() {
// Animation complete.
});
/*
if ($(".headerLogin").is(':hidden'))
$(".headerLogin").show();
else{
$(".headerLogin").hide();
}
return false;
*/
});

$('.headerLogin, .headerLoginLink').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
//$('.headerLogin').hide();
$(".headerLogin").slideUp('slow', function() {
// Animation complete.
$(".headerLogin").fadeOut('slow');
});

});

});
</script>

</head>

<body>

<a class="headerLoginLink">Login</a>

<div class="headerLogin">
<span>
<input type="text" value="email" onfocus="if(this.value=='email'){this.value=''}" onblur="if(this.value==''){this.value='email'}" />
<input type="password" value="password" onfocus="if(this.value=='password'){this.value=''}" onblur="if(this.value==''){this.value='password'}" />
</span>
<b class="fBeforeLoginText"><input type="checkbox" /> remember   <a href="#">forgot password</a></b> <br />
<span><input type="button" value="login" /></span>
</div>

</body>

</html>

Monday, September 13, 2010

jQuery, CSS overlay popup onload

jQuery: I'm Lovin It!

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>CSS overlay onload</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
color: #000;
}
a{
cursor: pointer;
}
img{
border: 0;
}
.sliderWrap {
margin: -141px auto 0 auto;
position: relative;
background: #ccc;
width: 300px;
height: 159px;
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.openCloseWrap {
position: absolute;
bottom: 0;
font-size: 12px;
font-weight: bold;
}
</style>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".sliderWrap").animate({
marginTop: "0px"
}, 500 );

//$(".sliderWrap").fadeIn().delay(2000).fadeOut('slow');

$("#topMenuImage").html('<img src="close.png" alt="close" />');
/////////////////////////////////////////////////////////////////////////
$(".topMenuAction").click( function() {
$(".sliderWrap").animate({
marginTop: "-160px"
}, 500 );
$("#topMenuImage").html('<img src="open.png" alt="open" />');
});

});
</script>

</head>

<body>

<div class="sliderWrap">
<h1>Isn't this nice?</h1>
<div class="openCloseWrap"><a id="topMenuImage" class="topMenuAction"><img alt="open" src="open.png" /></a></div>
</div>

</body>

</html>

Download source file here

CSS/HTML: Wrap long word/url

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Word Wrap</title>

<style type="text/css">
.wrapMe{
width: 350px;
border: 1px solid #090;
word-wrap: break-word;
}
</style>

</head>

<body>
<div class="wrapMe">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>

</html>

Saturday, September 11, 2010

42 Desing/Tech Magazines to read

In order to keep yourself updated with latest developments in Design, Web-related areas and developments, it's essential to read design/tech online magazines. However the WWW is huge and so are the choices. you can find 42 design/tech magazines in this link - http://www.smashingmagazine.com/2007/03/19/40-designtech-magazines-to-read/

Friday, September 10, 2010

Check what Bing is doing with HTML5

Microsoft, which seems to be pushing Google to try new things, continues to experiment with its Bing search engine. Check out what engineers have done with Bing and HTML5 in the video below:

I will come up with HTML5's all separate implementations(tutorials) soon!

Sunday, September 5, 2010

Developing website for iPhone?

Here is Apple to your rescue - http://developer.apple.com/iphone/index.action

Friday, September 3, 2010

CSS :first-child, :last-child pseudo elements

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS first-child last-child pseudo elements</title>
<style type="text/css">
.pDiv p:first-child {
color: #00f;
}
.pDiv p:last-child {
color: #f00;
}
</style>
</head>

<body>
<h1>First child and last child of any element. Best use for navigation/td borders/float
div margins, paddings/UL LI first and last</h1>

<div class="pDiv">
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</div>

<h4>:last-child doesn't work in IE 7 and 8</h4>

</body>

</html>

CSS :before, :after selectors

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Test paragraph with before and after selectors</title>

<style type="text/css">

p.test:before {
padding-right: 5px;
content: url(googleIcon.jpg);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}

</style>

</head>

<body>

<p class="test">Test paragraph with </p>

</body>

</html>

Front-End Updates