Wednesday, May 23, 2012

Responsive Web

Responsive Web Design and Development

Monday, January 31, 2011

Passing links to the anchor using jquery

Passing links to the anchor

Insert this script in head section
<style type="text/css">
.hovfn{margin:0 auto; padding:0; list-style:none}
.hovfn li{float:left; padding:5px 10px;}
.hovfn li.hovr{background-color:#ccc}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var tab1Links=["home.html", "abt.html", "services.html", "contact.html"]
$(document).ready(function(){
    $(".hovfn li").hover(function(){
    $(this).addClass("hovr");
}, function(){
    $(this).removeClass("hovr")
    });
    $(".hovfn a").each(function(x) {
    $(".hovfn a:eq("+x+")").attr("href",tab1Links[x] );
});
    var i=1;

$("li").each(function(i){
    i++;
    $(this).prepend(i+")"+"     ");
});
    });
</script>

After that the html strutter for sample is like this

<ul class="hovfn">
<li class=""><a href="#">home</a></li>
<li class=""><a href="#">about us</a></li>
<li class=""><a href="#">services</a></li>
<li class=""><a href="#">contact</a></li>
</ul>