Front-End Updates : October 2010

Wednesday, October 20, 2010

jQuery show hide multiple rows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery show hide multiple rows</title>

<style type="text/css">
.ClassDetails{
width: 330px;
}
.ClassDetails ul li:first-child{
border: 0 none;
width: 100%;
}
.ClassDetails ul li{
display: block;
float: none;
margin: 0 0 10px 0;
}
.ClassDetails .LiLink{
background: url(../images/ClassDetailsLinkIcon.gif) no-repeat left 2px;
padding: 0 0 0 14px;
text-decoration: none;
}
.ClassDetails .LiLinkActice{
background: url(../images/LinkIconActive.gif) no-repeat -1px 4px;
}
.ClassDetails .LinkDesc{
padding: 8px 0 0 12px;
}
</style>

<script type="text/javascript">
//Make the default settings
$(".LinkDesc:not(:first)").hide();
$(".LinkDesc:first").show();
$(".ClassDetails ul li a").addClass("LiLinkActice");

//Show/hide next element after the link
$(".ClassDetails ul li a").click(function(){

$(this).toggleClass()"LiLinkActice");

var currentDescDiv= $(this).next();

$(".LinkDesc").hide(0, function(){
currentDescDiv.show();
});

});
</script>

</head>

<body>

<h4>Show Hide multiple rows with jQuery's $(this) function </h4>
<h4>This example has jquery 'not()' ':first' and '(this)' functions</h4>

<ul>
<li class="ClassDetails">
<ul>
<li>
<a href="#" class="LiLink">Title 1</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 2</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 3</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
</ul>
</li>

</ul>

</body>

</html>

Styling <hr> Element

hr{
margin: 0 0 2px 16px;
padding: 3px 0 0 0;
border-bottom:1px solid #a8a7a2;
border-top:0px;
border-left:0px;
border-right:0px;
line-height:0px;
height:1px;
display:block;
width: 97%;
}

Monday, October 4, 2010

jquery show-hide toggle

Starting with the script =

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

<script type="text/javascript">

$(document).ready(function(){
$(".departDates li").hover(function () {
$(this).children(".showFlightPopup").toggle("slow");
});
});

</script>

CSS =

<style type="text/css">
.departDates{
border-top: 2px dotted #6c6c6c;
padding: 10px 0;
line-height: 18px;
overflow: hidden;
}
.departDates .showFlightPopup{
width: 150px;
border: 1px #d7d7d7 solid;
position: absolute;
background: #fff;
margin: 0 0 0 40px;
display: none;
}
</style>

And the markup
<ul class="departDates">
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
</ul>

Sunday, October 3, 2010

Accordion Forms to avoid multiple pages form submitting process

Accordion forms use dynamic interactions on a single web page to hide and reveal sections of related questions as people go through the process of completing a form. This allows people to focus their attention on one set of questions at a time without requiring them to navigate between different web pages.

Read more on - http://www.alistapart.com/articles/testing-accordion-forms/

hypenation & text-align:justify

Using text-align:justify; looks good for news-paper, magazine and books. In print media they use the typeset called 'hypenation' which adds a hypen('-') at the end of the line if a word is too big to fit in the same line. This technique works very well in print media, but if we want to use the same on web it's very hard to implement and would be foolish to make hard coded efforts like this -

With the electronic word, authority diffuses itself between writer and reader. Although we seldom think of it in this way, the print medium

We need add  in every long word, that's a tedious task to do. Another bad impact of using text-align:justify on web is that the paragraph creates a 'river of spaces' on the page where we loose the readability aspect. Additionally, these  space may create difficulties for search engines. - http://www.cs.tut.fi/~jkorpela/shy.html#se

Read more on - http://www.alistapart.com/articles/the-look-that-says-book/

Front-End Updates