Saturday, December 24, 2011

menu open on click and hide when we click outside of div or blank body

Most of time I got stuck when I see click menu into facebook and gmail for opening their account information.
I tried lots of time to make same kind of script or jquery code. But not able to find it anywhere on websites.

So tried to make it by myself and create a little jquery code which perform same work for me.

I hope this will help my designer friends to achieve that kind of functionality.


Example

<div class="userinfo">

        <a href="javascript:void(0);" class="selnot">User Info</a>
        <ul class="hide">
            <li class="user"><asp:Label ID="lblUserName" runat="server" Text=""></asp:Label></li>
            <li class="to"><asp:Label ID="lblTotalPost" runat="server" Text=""></asp:Label></li>
            <li class="fa"><asp:Label ID="lblTotalFcebookPost" runat="server" Text="Label"></asp:Label></li>
            <li class="in"><asp:Label ID="lblTotalLinkedinPost" runat="server" Text="Label"></asp:Label></li>
<li class="tw"><asp:Label ID="lblTotalTwitterPost" runat="server" Text="Label"></asp:Label></li>
<li class="out"><asp:LinkButton ID="lnkBtnLogout" runat="server" OnClick="lnkBtnLogout_Click">Logout</asp:LinkButton></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(".selnot").click(function() {

            if ($(this).next("ul").attr("class") == "show") {
                $(this).next("ul").removeClass("show");
                $(this).next("ul").addClass("hide");
            }
            else {
                if ($(this).next("ul").attr("class") == "hide") {
                    $(this).next("ul").removeClass("hide");
                    $(this).next("ul").addClass("show");
                }
            }
        });

    $(document).click(function(e) {
            if (e.target.className != "selnot") {
                $("ul").removeClass("show");
                $("ul").addClass("hide");
            }
        });

    </script>

This Jquery use DOCUMENT Click to find on which Class we have made click.
If its not our menu class it disable our Menu to show.

Thursday, November 10, 2011

Interview Questions for HTML Developer, Interview Questions for Web designer, Interview Questions for CSS, Interview Question ask by Recuriter

Q 1.: Is CSS Case Sensitive?
Ans: CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects,

Except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.

The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }



Q 2.: What is ID Selectors?
Ans: A CSS id selector applies to the one element in the HTML document with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page.

The id selector is then defined with a hash- or pound-sign (#) before the id name.



Q 3.: What is Pseudo-classes?
Ans: CSS pseudo-classes are used to add special effects to some selectors.

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

a:link { ⋮ declarations }
a:visited { ⋮ declarations }
a:focus { ⋮ declarations }
a:hover { ⋮ declarations }
a:active { ⋮ declarations }



Q 4.: Difference between HTML and XHTML?
Ans: There are very few minor points if we compare them as they are like identical twins. XHTML was actually derived from HTML. The major difference between them is coding in XHTML is comparatively strict than HTML that is if there are some lapses in structure and coding while working in HTML than it could get away easily but that is not a case while working in XHTML. In HTML, there is a liberty to ignore validation of the code. Moreover, tag closing is compulsory in XHTML which is not compulsory in HTML so XHTML closes the tags which were left open by HTML. So we can say that XHTML actually completes HTML.

Also in XHTML, closing of nested tags should be performed in same manner and form in which manner its opening was done. It is also done in HTML but it is not as strict as XHTML. Moreover, tags should be compulsorily used in lowercases in XHTML which is not the case in HTML.



Q 5.: Why we use <doc type="" /> in HTML and XHTML? What happens if we remove <doc type="" />
Ans: The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.
Means inheritance property can not be apply to its tags in regards of CSS. Also due to non standard lots of Scripts will not work properly into your HTML page.



Q 6.: Difference between PADDING and MARGIN?
Ans: Padding is the space inside the border between the border and the actual image or cell contents.Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.



Q 7.: What does !important mean in CSS?
Ans: The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
p { color: #000000; }
Important CSS also override the all inherited or ID attribute css.

User Style Sheets
However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.



Q8:  What is Float? Explain its property.
Ans: The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property,
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element.



Q 9.:   What are the benefit of CSS3?
Ans    CSS3 a new version of CSS or cascading stylesheet benefits from technical features and properties. From better maintenance, loading speed, and layout design properties CSS3 is much more versatile. Designers get to implement the design elements from CSS3 in a simpler manner. Few of its advantages are:

Multi column layout
Multiple backgrounds
Text shadow
@font-face-Attribute
Border Radius
Box shadow
Media queries




Q10 :  What is Responsive Web design? What we need to do to implement RWD(Responsive Web Design).
Ans     Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

Thursday, October 13, 2011

CSS Selectors, Types of CSS Selectors, Why not use IDs in CSS selectors, Problem using ID Selectors

To do styling and formatting to HTML we use Selectors in CSS.

CSS selectors:-


TYPE Selector/ Group Selectors

Type Selector are also called as GROUP Selector. It is easy to understand these selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

Example:-
h6 {color: blue; font-size:1em; }

Result:-

Example Result

Class Selector

Class Selectors are most easy and widely use to give formatting to HTML tags. unlike TYPE selectors it work on every HTML tag.

It can also use to override the formatting style of TYPE Selector.
Class Selectors are defined by DOT [ . ].

Example:-
.excerpt{ color:green }
h6{ color:red; }

Result:-


Example Result

ID selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree.

It can also use to override the formatting style of TYPE Selector.


Example:-
#excerpt{ color:green }
h6{ color:red; }

Result:-


Example Result
ID Selectors are defined by HASH [ # ].

The only difference between ID and Class selectors is we can define ID Selector once in whole HTML document as ID Selectors are unique in nature. But Class Selectors can use as many times on single HTML document we need.

Monday, August 8, 2011

Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color

Blinking text animation is use to catch the user attraction for a particular thing or feature.
This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.

But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.

Now I want to share that Script code with my web friends.

JQuery Script Code
var i = 1;



function color() {



//alert(1);



if (i == 1) {



$('.txt').css("color", "red");



i += 1;



return;



}



if (i == 2) {



$('.txt').css("color", "black");



i += 1;



return;



}



if (i == 3) {



$('.txt').css("color", "blue");



i += 1;



return;



}



if (i == 4) {



$('.txt').css("color", "orange");



i = 1;



return;



}



}



setInterval(color, 400);

Put this script code before end of body tag.
give the class name "txt" to text for whom you want color animation.

you can increase the time of changing color animation by increase the value of 400 to your value in code.

setInterval(color, 400);


you can also change the color code according to your requirement.

Also put Jquery Library file.
JavaScript Library File


Thursday, August 4, 2011

Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS

Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful.

Basic designers use fixed width image to create the rounded corners.

Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.

It helps to make low weight website. So it download fast on client server.

rounded corners using CSS 2.0
<div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;">
        <img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" />
        <img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" />
        <table width="100%;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="color: White;">
                    <td style="text-align: center;">
                        hello
                        <br />
                        how are you
                    </td>
                </tr>
            </tbody>
        </table>
        <img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" />
        <img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" />
    </div>



Rounded Corner using CSS 3.0

how arwe you dear


Its a test Rounded corners

but it uses CSS3

<style>
        .css3
        {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 30px;
            -moz-border-radius-bottomleft: 0;
            background: #eee;
            padding: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 0;
        }
    </style>
    <div class="css3">
        how arwe you dear
        <br />
        Its a test Rounded corners<br />
        but it uses CSS3
    </div> 
But this technique support only for latest browsers who has CSS3 compatibility.

You can also create Pure Rounded corner CSS online:
http://www.spiffycorners.com/index.php

Thursday, July 28, 2011

Random image on refresh using javascript, Change image on every refresh, Another Picture, every refresh

Changing things on every refresh to your website is attractive feature to retain your visitors to your website.

Because it create suspense into visitor about the next information.

So I want to share this JavaScript.

JavaScript Code
var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var quote = new Array(3)
        var lnk = new Array(3)


          quote[0] = "home/modeltiranga.jpg";
          quote[1] = "home/modelbeauty.jpg";        
          quote[2] = "home/modeltiranga.jpg";


          lnk[0] = "product_category.aspx?id=446";      

          lnk[1] = "Product_category.aspx?samemodel=17440"; 
          lnk[2] = "product_category.aspx?id=446"; 

Put this code into HEAD tag.


HTML Code
<script type="text/javascript">                                
 //<![CDATA[
                                    document.write('<a href="' + lnk[ranNum] + '"><img src="' + quote[ranNum] + '" alt="Mart of Images"/></a>')
 //]]>
</script>

put this code into BODY tags



Friday, July 22, 2011

javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery


Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.

Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.

But according to W3C Marquee is not more with HTML tag family it shows error in W3C validation.

after searching long time to web I found the REPLACEMENT of Marquee using JQUERY and this information I would like to share with my designer and Developer friends using this Post.

Its very simple to use and implement into our website whether its Dynamic or static.

HTML CODE
<ul id='ticker02'>
 <li><a href="#">Hello 1</a></li>
 <li><a href="#">Hello 2</a></li>
 <li><a href="#">Hello 3</a></li>
 <li><a href="#">Hello 4</a></li>
 <li><a href="#">Hello 5</a></li>
</ul>
<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); }); 
//]]> 
    </script>

CSS CODE

Now just need to add two Script file URL given Below you can save them too.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js


Saturday, July 16, 2011

Image Slide Show with Typing text effect, Jquery Tutorial for imagegallery, Typing text effect in Jquery, jQuery Image Galleries & Sliders

Last time I share some of Image gallery and slideshows for Image rotators having auto run and clicked event using Jquery.

also share another jquery slideshow and image gallery onhover effect having left scroller and right scroll depending on your mouse cursor position.


Today I am going to share one more simple image gallery with name of image and its description.  Using nice effect of typing to showing image name and its description.

Its easy to implement in your blog or site.

Here I am providing the Jquery tutorial for implementing the image gallery.

HTML Source

<!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" xml:lang="en" lang="en">
<head><title>
 PROMPT:: we envision. we deliver
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/animation1.css" rel="stylesheet" type="text/css" />
<script src="http://web15346.38.ocpwebserver.com/meltbook/CSS/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="css/scripts.js" type="text/javascript"></script>    
</head>
<body>
<div class="mid_ani">
<div id="header">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="">
                            <img id="slide-img-2" src="images/1.jpg" class="slide" alt="Prompt" /></a> <a href="">
                                <img id="slide-img-3" src="images/4.jpg" class="slide" alt="Prompt Solution" /></a> <a href="">
                                    <img id="slide-img-4" src="images/3.jpg" class="slide" alt="Prompt Solution Inc" /></a>
<a href="">
                            <img id="slide-img-5" src="images/0.jpg" class="slide" alt="Prompt Slide" /></a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text">
                                <strong>post: </strong><span></span>
                            </p>
                            <p id="slide-desc" class="text">
                            </p>
<p id="slide-nav">
                            </p>
                        </div>
                    </div>
                    <!--content featured gallery here -->
                </div>

                <script type="text/javascript">
                    if (!window.slider) var slider = {}; slider.data = [
                                    { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here"}];
                </script>

</div>
        </div>
        <!--/header-->
    </div>
</body>
</html>


scripts Code
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  //$.each(css_ims,function(){(new Image()).src=_siteRoot+'../images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a class="num" id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};


Animation1 CSS Code
a img {
border : 0;
}

div.wrap a,div.wrap a:hover
{
    color:#fff;
}
div.wrap {
width : 980px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 980px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 235px;
background : url(../images/ani.png) no-repeat left top ;
}
div#header div#slide-holder {
z-index : 40;
width : 980px;
height : 236px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 1px;
left : 1px;
width : 975px;
height : 224px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 973px;
height : 30px;
display : none;
position : absolute;
background : url(../images/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display:none;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 5px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 17px;
display : inline;
margin : 2px 5px 0 0;
font-size : 0px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
color:#fff;
line-height:22px;
margin : 0 5px 0 0;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../images/images/silde-nav1.png);
}
div#nav ul li a {
background : url(../images/images/nav.png) no-repeat;
}

Tuesday, July 12, 2011

Jquey Tutorial for Slideshow, Jquery Image gallery, Image galley with description using Jquery, Image Slideshow using Lightbox in Jquery Image Slideshow using Lightbox in Jquery

while searching for Slideshow(image gallery) I found Jquery light box plugin which use Modelbox (Light box) to view show gallery image and its description.

This image gallery is too easy to implement on our websites.

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector.

Here I am providing the tutorial to implement the image gallery.

HTML Source Code
<div id="gallery">
    <ul>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

CSS and Script
http://119.82.71.124/fb/jquey_lightbox/js/jquery.js
http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js
http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

Modification
Here we mention the ID selector name in which the gallery exist. you can use any of id exist in you webpage.


$(function() {
        $('#gallery a').lightBox();
    });



Image and thumbnail information

BIG Image: Anchor tags href contain the URL of Bigger image which has to be open after click on image thumbnails.


Description: For inserting Description of image we need to mention all description into anchor tag's TITLE attribute.

Thumb: For Thumbnail we use IMG tag as small image.

<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>



Wednesday, July 6, 2011

jquery tutorial for check all checkbox, Select Multiple checkbox, JQuery Check and Uncheck All Checkboxes

This function is specially designed for dynamic pages with varying numbers of checkboxes.

I found same functionality in JavaScript too but we can't use same script for two control.

So i decide to create Jquery for same script here I am providing both SCRIPT code for JavaScript and Jquery.

JavaScript
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
 if(!document.forms[FormName])
  return;
 var objCheckBoxes = document.forms[FormName].elements[FieldName];
 if(!objCheckBoxes)
  return;
 var countCheckBoxes = objCheckBoxes.length;
 if(!countCheckBoxes)
  objCheckBoxes.checked = CheckValue;
 else
  // set the check value for all check boxes
  for(var i = 0; i < countCheckBoxes; i++)
   objCheckBoxes[i].checked = CheckValue;
}



Jquery

 $('#ctl00_ContentPlaceHolder1_chkPending').live('click',function() {
            if(pending==0){
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", false);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", false);
            });
            pending=1;
            }
            else
            {
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", true);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", true);
            });
            pending=0;
            }
        });

Please do not forget to add Jquery library file.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

You  all need to do is put two id's into script.
$("#ctl00_ContentPlaceHolder1_GridView1_ctl01_ChkAll").toggle

here  you need to put id of whom click you want to check all check-box .


$("#accordion1 input:checkbox").each
here you need to mention in which all check-box should be checked.

Tuesday, July 5, 2011

Jquery Smooth Navigation menu, DropDown Menus, MultiLvel DropDown Menu in Jquery, MultiLevel Menu on Click event

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontalvertical (sidebar) orientation. and

 This menu i found from Dynamic Drive Smooth Navigation Menu and used for multiple website.

because it provides the orientation based Menu. Means we can use this menu as HORIZONTAL and VERTICAL also.

But this menu is work on hover event.

By modifying its jquery I able to run it on click event.

 


Tuesday, June 28, 2011

Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript

Now these days Light box / Model box are widely use in website to show content or some other information.

and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.

Here I am providing simple light box and Model box tutorial with using few lines of script code.

JavaScript Code
function gray_box1() {
document.getElementById('light1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
document.getElementById('fade').style.height='2000px';
}



HTML Code
<div id="fade" class="black_overlay">
div> 

X
Hello! this is light box example. 

CSS Code

Online Link


Thursday, June 23, 2011

Multi Level CSS DropDownn, DropDown Menu, MiltiLevel menu, DropDown menu using CSS

Tomorrow I found an another Simple menu style which using CSS to create its drop down list and also it works upto 4 four level.

it use different  CSS style for this menu to work in IE6 using conditional CSS.

So I decided to put that complete code here so that my Designer friends can use and learn easily.


Head Code Section
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
 font-family: Calibri, "Trebuchet MS", sans-serif;
 font-size: 100%;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
 background: #eee;
 padding: 50px;
}

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu, .menu ul {
 margin: 0;
 padding: 0;
 border: 0;
 list-style-type: none;
 display: block;
}

.menu li {
 margin: 0;
 padding: 0;
 border: 0;
 display: block;
 float: left; /* move all main list items into one row, by floating them */
 position: relative; /* position each LI, thus creating potential IE.win overlap problem */
 z-index: 5;  /* thus we need to apply explicit z-index here... */
}

.menu li:hover {
 z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
 white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
       see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
 float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
 visibility: hidden; /* initially hide all submenus. */
 position: absolute;
 z-index: 10;
 left: 0; /* while hidden, always keep them at the top left corner, */
 top: 0;  /*   to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
 visibility: visible; /* display submenu them on hover */
 top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* -- float.clear --
 force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
 content: ".";
 height: 0;
 display: block;
 visibility: hidden;
 overflow: hidden;
 clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
 min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
 it should not disappear when your mouse moves a bit outside the submenu
 YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
 if you do it, make sure you 110% know what you do */
.menu ul {
 background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
 padding: 10px 30px 30px 30px;
 margin: -10px 0 0 -30px;
 /*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
        you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
 padding: 30px 30px 30px 10px;
 margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */






/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
 color: #eee;
 background: #234;
}

.menu ul {
 width: 11em;
}

.menu a {
 text-decoration: none;
 color: #eee;
 padding: .4em 1em;
 display: block;
 position: relative;
}

.menu a:hover, .menu li:hover>a {
 color: #fc3;
}

.menu li li { /* create borders around each item */
 border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
 border-top: 0;
}

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
 placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
 color: #567;
}

/* Fix for IE5/Mac \*//*/
.menu a {
 float: left;
}
/* End Fix */

/*]]>*/
</style>



<!--  Conditional CSS for IE6 -->


<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */

/*
 this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
 of course, that means that it might require different styling then.
 in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
 */
.menu ul {
 visibility: visible;
 position: static;
}

.menu, .menu ul { /* float.clear */
 zoom: 1;
}

.menu li.adxmhover {
 z-index: 10000;
}

.menu .adxmhoverUL { /* li:hover>ul selector */
 visibility: visible;
}

.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
 top: 100%;
 left: 0;
}

.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a { /* fix clickability-area problem */
 zoom: 1;
}

.menu li li { /* fix white gap problem */
 float: left;
 width: 100%;
}

.menu li li { /* prevent double-line between items */
 margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {  /* li:hover>a selector */
 color: #fc3;
}

.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/*]]>*/
</style>

<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->



HTML Source Code
<div class="example">
        <ul class="adxm menu">
            <li><a href="#">Main menu:</a></li>
            <li><a href="#" title="My writings">Blog</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#feeds/">Feeds</a></li>
                    <li><a href="#archive/">Archive</a></li>
                </ul>
            </li>
            <li><a href="#adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a>
                <ul>
                    <li><a href="#">1st submenu</a></li>
                    <li><a href="#adxmenu/">Overview</a></li>
                    <li><a href="#adxmenu/instructions/">Instructions</a></li>
                    <li><a href="#adxmenu/examples/">Examples</a>
                        <ul>
                            <li><a href="#">2nd submenu</a></li>
                            <li><a href="#adxmenu/examples/htb/">Top to bottom</a></li>
                            <li><a href="#adxmenu/examples/hbt/">Bottom to top</a>
                                <ul>
                                    <li><a href="#">3rd submenu</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                    <li><a href="#">Item 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#adxmenu/examples/vlr/">Left to right</a></li>
                            <li><a href="#adxmenu/examples/vrl/">Right to left</a></li>
                        </ul>
                    </li>
                    <li><a href="#adxmenu/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#wch/" title="Windowed Controls Hider, for Win IE">WCH</a>
                <ul>
                    <li><a href="#wch/">Overview</a></li>
                    <li><a href="#wch/instructions/">Instructions</a></li>
                    <li><a href="#wch/examples/">Examples</a></li>
                    <li><a href="#wch/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#lab/" title="Reusable web techniques">Lab</a>
                <ul>
                    <li><a href="#css/z-pos">z-index tutorial</a></li>
                    <li><a href="#css/forms/">Styling forms</a></li>
                    <li><a href="#css/cfl/">Centered frame layout</a></li>
                    <li><a href="#css/tabs2/">Tabs with variable height</a></li>
                    <li><a href="#css/nestedtabs2/">2-level navigation</a></li>
                    <li><a href="#css/ow/">Tabs: Overlapping Windows</a></li>
                    <li><a href="#scripts/windowopen/">Unobtrusive window.open</a></li>
                    <li><a href="#scripts/fif/">Floating iFrame</a></li>
                </ul>
            </li>
            <li><a href="#deliver/" title="Various sites I (co-)did">Delivered</a>
                <ul>
                    <li><a href="#deliver/sites/">Sites &amp; proof of concepts</a></li>
                    <li><a href="#deliver/wp/">WordPress goodies</a></li>
                </ul>
            </li>
            <li><a href="#about/" title="Relevant info about me">Colophon</a></li>
            <li><a href="#about/contact/">Contact me</a></li>
        </ul>
    </div>

JavaScript link
ADxMenu.js
 
 
 

Wednesday, June 22, 2011

JavaScript Captcha implement, Form Captcha validation, captcha implementation using image and MD5

CAPTCHAs are used in attempts to prevent automated software from performing actions which degrade the quality of service of a given system, whether due to abuse or resource expenditure.

Its very difficult to implement captch into Static HTML  pages. so here i am providing simple code to implement captcha.


use script function to create input and image field in your for and link the md5.js and jcap.js in your HTML source.

<script type="text/javascript">sjcap();</script>

website using this script for using captcha.
 View online
Download source code

Jquery Form validator, Form Validation, Regular form validation mail

Here I am providing form validation code for regular expression using jquery. Just comment the field you don't want.

Live Demo

Monday, June 20, 2011

W3C Checker, Web Accessibility checker, Tools to check W3C and Accessibility tool, Web Accessibility Testing Tools for Designers, W3C Checker for Mobile web, W3C Stamdards

From Last Four Months I am working for Banks website like CBI and OBC as they are our Company's Clients.

To achieve the Web Accessibility Level AA we done few things and features implement to our clients website.

But except all I found that do we know that our page has pass Web Accessibility Test.

After searching long time I found few of link which check the web accessibility Level AA.

I want to share those link on my blog so it will be easy to Implement the Web accessibility Level AA to Designers/Developer.

Accessibility testing tools can assist web designers in making their web site accessible to all visitors. Most of the online testers cannot test some checkpoints in the W3C Web Content Accessibility Guidelines at all and can only partially test others.
The most important part before starting Web Accessibility is to Create a well formed structured web page.
We use W3C checker to check structured Validation of web page.
Tests HTML documents for conformance with HTML standards. The HTML Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”, however it will pick up other accessibility errors such as missing ALT attributes and invalid field labels.
W3C HTML Validator
http://validator.w3.org/

Tests cascading style sheets to ensure they conform with CSS standards. The CSS Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”.
The validator is not 100% accurate but passing validation with no errors or warnings is a good indicator that your code is Standards-compliant. One weakness with the validator is that it can get confused if the CSS version is not specified or if the CSS uses a mix of CSS 1 & 2 for example. This can result in inaccurate reports.
W3C CSS Validator
http://jigsaw.w3.org/css-validator/



Web Accessibility checkers

The WAVE is a page-by-page accessibility evaluator by WebAIM. It tests many, but not all, of the W3C Web Content Accessibility Guidelines. Also not mention the accessibility level so it can be use to implement basic feature(structured) of web page.



AChecker. This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

By using Its options you can check different level of web accessibility and also check the standard of HTML and CSS.

In short you have all checker facility here you needed to implement to your website.
AChecker

Wednesday, June 15, 2011

Create HTML Scroller in div using CSS, CSS Tutorial to create HTML Scroller, CSS Scrollbar content

Last month I was working on my companies client website. he ask to me make scrollable area to show there text. because website content has too much text which increase the height of webpage too much.

So I did some quick research into creating my own Scroll area without using script as i have posted before for JavaScript Scroll bar content.

After Searching I found CSS attribute "Overflow" and i found that this attribute can help me to create my own scrollable content.

So here I am sharing the source code for CSS Scrollbar content.

CSS CODE With Div

<div style="width: 98%; padding: 1%; border: 2px solid rgb(170, 0, 0); height: 400px; overflow: auto;">
        <p>
            This Subscriber Agreement and Terms of Use govern your use of RIP (Revitalize Inspire
            Perform) online magazine, distributed by The Aquiline Group, and unless other terms
            and conditions expressly govern, any other electronic services from RIP magazine
            and the Aquiline Group that may be made available from time to time (each, a "Service").</p>
        <p>
            If you agree to be bound by the terms of this Agreement, you should click on the
            "I AGREE" button at the end of this Agreement. If you do not agree to be bound by
            the terms of this Agreement, you should click "I DISAGREE." If you click "I DISAGREE,"
            you will not be able to proceed with the registration process for the respective
            Service and become a subscriber. To the extent you have access to, or are using,
            a Service without having completed our registration process or clicked on an "I
            AGREE" button, you are hereby notified that your continued use of a Service is subject
            to many of the terms and conditions of this Agreement as explained in Section 5
            below.</p>
       

        <p>
            <strong class="con_head">5. Limitations on Use. </strong>
        <br>
            a.Only one individual may access a Service at the same time using the same user
            name or password, unless we agree otherwise.</p>
        <p>
            b.The text, graphics, images, video, metadata, design, organization, compilation,
            look and feel, advertising and all other protectable intellectual property (the
            "Content") available through the Services are our property or the property of our
            advertisers and licensors and are protected by copyright and other intellectual
            property laws. Unless you have our written consent, you may not sell, publish, distribute,
            retransmit or otherwise provide access to the Content received through the Services
            to anyone, including, if applicable, your fellow students or employees, with the
            following exceptions:</p>
        <p>
            (i) You may occasionally distribute a copy of an article, or a portion of an article,
            from a Service in non-electronic form to a few individuals without charge, provided
            you include all copyright and other proprietary rights notices in the same form
            in which the notices appear in the Service, original source attribution, and the
            phrase "Used with permission from RIP magazine" or "Used with permission from the
            Aquiline Group" as appropriate. Please consult the RIP magazine web site if you
            need to distribute an article from a Service to a larger number of individuals,
            on a regular basis or in any other manner not expressly permitted by this Agreement.</p>
        <p>
            (ii)While you may download, store and create an archive of articles from the Service
            for your personal use, you may not otherwise provide access to such an archive to
            more than a few individuals on an occasional basis. The foregoing does not apply
            to any sharing functionality we provide through the Service that expressly allows
            you to share articles or links to articles with others. In addition, you may not
            use such an archive to develop or operate an automated trading system or for data
            or text mining.</p>
        <p>
            c.You agree not to rearrange or modify the Content. You agree not to create abstracts
            from, scrape or display our content for use on another web site or service (other
            than headlines from our RSS Feed with active links back to the full article on the
            Service). You agree not to post any content from the Services (other than headlines
            from our RSS Feed with active links back to the full article on the Service) to
            weblogs, newsgroups, mail lists or electronic bulletin boards, without our written
            consent.</p>
        <p>
            d.You agree not to use the Services for any unlawful purpose. We reserve the right
            to terminate or restrict your access to a Service if, in our opinion, your use of
            the Service may violate any laws, regulations or rulings, infringe upon another
            person's rights or violate the terms of this Agreement. Also, we may refuse to grant
            you a user name that impersonates someone else, is protected by trademark or other
            proprietary right law, or is vulgar or otherwise offensive.</p>
       

        <p>
            iii. Grant of Rights and Representations by You. If you upload, post or submit any
            User Content on a Service, you represent to us that you have all the necessary legal
            rights to upload, post or submit such User Content and it will not violate any law
            or the rights of any person. You agree that upon uploading, posting or submitting
            information on the Services, you grant the Aquiline Group, and our respective affiliates
            and successors a non-exclusive, transferable, worldwide, fully paid-up, royalty-free,
            perpetual, irrevocable right and license to use, distribute, publicly perform, display,
            reproduce, and create derivative works from your User Content in any and all media,
            in any manner, in whole or part, without any duty to compensate you. You also grant
            us the right to authorize the use of User Content, or any portion thereof, by users
            and other users in accordance with the terms and conditions of this Agreement, including
            the rights to feature your User Content specifically on the Services and to allow
            other users or users to request access to your User Content, such as for example
            through an RSS Feed.</p>
        <p>
            iv. We may also remove any User Content for any reason and without notice to you.
            This includes all materials related to your use of the Services or membership, including
            email accounts, postings, profiles or other personalized information you have created
            while on the Services.</p>
        <p>
            v. Copyright/IP Policy. It is our policy to respond to notices of alleged infringement
            that comply with the Digital Millennium Copyright Act. For more information about
            our policy, please see our Privacy Policy.</p>
        <p>
            <strong class="con_head">7. Third Party Web Sites, Services and Software. </strong><br>
            We may link to, or promote web sites or services from other companies or offer you
            the ability to download software from other companies. You agree that we are not
            responsible for, and do not control, those web sites, services and software.</p>
        <p>
            <strong class="con_head">8. DISCLAIMERS OF WARRANTIES AND LIMITATIONS ON LIABILITY.
            </strong><br>YOU AGREE THAT YOUR ACCESS TO, AND USE OF, THE SERVICES AND THE CONTENT
            AVAILABLE THROUGH THE SERVICES IS ON AN "AS-IS", "AS AVAILABLE" BASIS AND WE SPECIFICALLY
            DISCLAIM ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, WITHOUT
            LIMITATION, ANY REPRESENTATIONS OR WARRANTIES OF MERCHANTABILITY OR FITNESS FOR
            A PARTICULAR PURPOSE. We do not give tax or investment advice or advocate the purchase
            or sale of any security or investment. You should always seek the assistance of
            a professional for tax and investment advice. THE AQUILINE GROUP AND ITS SUBSIDIARIES,
            AFFILIATES, SHAREHOLDERS, DIRECTORS, OFFICERS, EMPLOYEES AND LICENSORS WILL NOT
            BE LIABLE (JOINTLY OR SEVERALLY) TO YOU OR ANY OTHER PERSON AS A RESULT OF YOUR
            ACCESS OR USE OF THE SERVICES FOR INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL,
            PUNITIVE, OR EXEMPLARY DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST PROFITS, LOST
            SAVINGS AND LOST REVENUES (COLLECTIVELY, THE "EXCLUDED DAMAGES"), WHETHER OR NOT
            CHARACTERIZED IN NEGLIGENCE, TORT, CONTRACT, OR OTHER THEORY OF LIABILITY, EVEN
            IF ANY OF THE AQUILINE GROUP PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF OR
            COULD HAVE FORESEEN ANY OF THE EXCLUDED DAMAGES, AND IRRESPECTIVE OF ANY FAILURE
            OF AN ESSENTIAL PURPOSE OF A LIMITED REMEDY. IF ANY APPLICABLE AUTHORITY HOLDS ANY
            PORTION OF THIS SECTION TO BE UNENFORCEABLE, THEN THE AQUILINE GROUP PARTIES' LIABILITY
            WILL BE LIMITED TO THE FULLEST POSSIBLE EXTENT PERMITTED BY APPLICABLE LAW.</p>
        <p>
            <strong class="con_head">9. General.</strong><br>This Agreement contains the final
            and entire agreement between us regarding your use of the Services and supersedes
            all previous and contemporaneous oral or written agreements regarding your use of
            the Services. We may discontinue or change the Services, or their availability to
            you, at any time. This Agreement is personal to you, which means that you may not
            assign your rights or obligations under this Agreement to anyone. No third party
            is a beneficiary of this Agreement. You agree that this Agreement, as well as any
            and all claims arising from this Agreement will be governed by and construed in
            accordance with the laws of the District of Columbia, United States of America applicable
            to contracts made entirely within the District of Columbia and wholly performed
            in Washington, D.C., without regard to any conflict or choice of law principles.
            The sole jurisdiction and venue for any litigation arising out of this Agreement
            will be an appropriate federal or state court located in Washington, D.C. This Agreement
            will not be governed by the United Nations Convention on Contracts for the International
            Sale of Goods.</p>
    </div>


Just copy and paste above text into body tag of your HTML.

and you will find content like this.


Online link