Total Pageviews

Thursday, April 23, 2015

HTML5 Canavas Draw Home Tutorial

 HTML5 CANVAS EXAMPLE DOWNLOAD, HTML 5 Canvas Tutorial, HTML5 Canvas Basic, HTML 5 Canvas Assignment To Draw Home, HTML5 Canvas Tutorial to Draw Home, HTML Canvas tutorial to draw house, 

 












 HTML5 EXAMPLE TO DRAW HOUSE  SAVE FOLLOWING CODE USING HOUSE.HTML

 <!DOCTYPE html>
<html lang="en">
<html>
<head>
<style>
#myCanvas{
           background-color:pink;
       border:2px solid black;
       width:850px;
           height:800px;
         }
</style>
</head>
<body>
<canvas id="myCanvas">
 browser not support
</canvas>
<script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(50,70);
  ctx.lineTo(50,115);

  ctx.moveTo(60,70);
  ctx.lineTo(60,115);

  ctx.moveTo(70,80);
  ctx.lineTo(70,105);

  ctx.moveTo(85,80);
  ctx.lineTo(85,105);

  ctx.moveTo(87,90);
  ctx.lineTo(87,95);

  ctx.moveTo(83,90);
  ctx.lineTo(83,95);

  ctx.moveTo(100,80);
  ctx.lineTo(100,105);

  ctx.moveTo(70,80);
  ctx.lineTo(100,80);

  ctx.moveTo(70,83);
  ctx.lineTo(100,83);

  ctx.moveTo(70,102);
  ctx.lineTo(100,102);

  ctx.moveTo(70,105);
  ctx.lineTo(100,105);

  ctx.moveTo(110,70);
  ctx.lineTo(110,115);

  ctx.moveTo(120,70);
  ctx.lineTo(120,115);

  ctx.moveTo(125,75);
  ctx.lineTo(125,115);

  ctx.moveTo(165,75);
  ctx.lineTo(165,115);

  ctx.moveTo(125,75);
  ctx.lineTo(165,75);

  ctx.moveTo(144,75);
  ctx.lineTo(144,115);

  ctx.moveTo(147,75);
  ctx.lineTo(147,115);

  ctx.moveTo(125,85);
  ctx.lineTo(165,85);

  ctx.moveTo(125,100);
  ctx.lineTo(165,100);

  ctx.moveTo(190,80);
  ctx.lineTo(190,105);

  ctx.moveTo(210,80);
  ctx.lineTo(210,105);

  ctx.moveTo(208,90);
  ctx.lineTo(208,95);

  ctx.moveTo(212,90);
  ctx.lineTo(212,95);

  ctx.moveTo(230,80);
  ctx.lineTo(230,105);

  ctx.moveTo(190,80);
  ctx.lineTo(230,80);

  ctx.moveTo(190,83);
  ctx.lineTo(230,83);

  ctx.moveTo(190,105);
  ctx.lineTo(230,105);

  ctx.moveTo(190,102);
  ctx.lineTo(230,102);

  ctx.moveTo(170,70);
  ctx.lineTo(170,115);

  ctx.moveTo(180,70);
  ctx.lineTo(180,115);

  ctx.moveTo(240,70);
  ctx.lineTo(240,115);

  ctx.moveTo(250,70);
  ctx.lineTo(250,115);

  ctx.moveTo(30,70);
  ctx.lineTo(270,70);

  ctx.moveTo(30,115);
  ctx.lineTo(270,115);

  ctx.moveTo(30,130);
  ctx.lineTo(270,130);

  ctx.moveTo(30,50);
  ctx.lineTo(270,50);

  ctx.moveTo(30,50);
  ctx.lineTo(30,70);

  ctx.moveTo(40,50);
  ctx.lineTo(40,70);

  ctx.moveTo(50,50);
  ctx.lineTo(50,70);

  ctx.moveTo(60,50);
  ctx.lineTo(60,70);

  ctx.moveTo(70,50);
  ctx.lineTo(70,70);

  ctx.moveTo(75,30);
  ctx.lineTo(75,70);

  ctx.moveTo(80,50);
  ctx.lineTo(80,70);

  ctx.moveTo(85,40);
  ctx.lineTo(85,70);

  ctx.moveTo(90,50);
  ctx.lineTo(90,70);

  ctx.moveTo(100,50);
  ctx.lineTo(100,70);

  ctx.moveTo(105,40);
  ctx.lineTo(105,70);

  ctx.moveTo(85,40);
  ctx.lineTo(105,40);

  ctx.moveTo(110,50);
  ctx.lineTo(110,70);

  ctx.moveTo(120,50);
  ctx.lineTo(120,70);

  ctx.moveTo(125,30);
  ctx.lineTo(125,70);

  ctx.moveTo(30,115);
  ctx.lineTo(30,130);

  ctx.moveTo(270,115);
  ctx.lineTo(270,130);

  ctx.moveTo(30,50);
  ctx.lineTo(75,45);

  ctx.moveTo(204,45);
  ctx.lineTo(240,45);

  ctx.moveTo(240,45);
  ctx.lineTo(270,50);

  ctx.moveTo(69,35);
  ctx.lineTo(98,15);

  ctx.moveTo(70,35);
  ctx.lineTo(99,15);

  ctx.moveTo(98,15);
  ctx.lineTo(130,35);

  ctx.moveTo(99,15);
  ctx.lineTo(132,35);

  ctx.moveTo(98,15);
  ctx.lineTo(180,15);

  ctx.moveTo(180,15);
  ctx.lineTo(210,35);

  ctx.moveTo(123,33);
  ctx.lineTo(207,33);

  ctx.moveTo(130,50);
  ctx.lineTo(130,70);

  ctx.moveTo(140,50);
  ctx.lineTo(140,70);

  ctx.moveTo(150,50);
  ctx.lineTo(150,70);

  ctx.moveTo(160,50);
  ctx.lineTo(160,70);

  ctx.moveTo(170,50);
  ctx.lineTo(170,70);

  ctx.moveTo(180,50);
  ctx.lineTo(180,70);

  ctx.moveTo(190,50);
  ctx.lineTo(190,70);

  ctx.moveTo(203,30);
  ctx.lineTo(203,70);

  ctx.moveTo(200,50);
  ctx.lineTo(200,70);

  ctx.moveTo(210,50);
  ctx.lineTo(210,70);

  ctx.moveTo(220,50);
  ctx.lineTo(220,70);

  ctx.moveTo(230,50);
  ctx.lineTo(230,70);

  ctx.moveTo(240,50);
  ctx.lineTo(240,70);

  ctx.moveTo(250,50);
  ctx.lineTo(250,70);

  ctx.moveTo(260,50);
  ctx.lineTo(260,70);

  ctx.moveTo(270,50);
  ctx.lineTo(270,70);

  ctx.moveTo(30,700);
  ctx.lineTo(30,850);

  ctx.strokeStyle="black";

  ctx.shadowColor="black";
  ctx.shadowBlur="5";
  ctx.shadowOffSet="-5";
 
  ctx.stroke();
</script>
<br>
<b>Sayali Ashok Bhore<br>
MCA-II,<br>
IMS College,Ahmednagar</b>
</body>
</html>

Click TO Download Canvas Tutorial To Draw HOUSE










 
 HTML5 EXAMPLE  TO DRAW SWEET HOME SAVE FOLLOWING CODE USING
SWEET HOME.HTML

<!DOCTYPE html>
<html lang="en">
<html>
<head>
<style>
#myCanvas{
           background-color:pink;
       border:2px solid black;
       width:800px;
           height:600px;
         }
</style>
</head>
<body>
<canvas id="myCanvas">
 browser not support
</canvas>
<script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(70,30);
  ctx.lineTo(10,60);

  ctx.moveTo(70,30);
  ctx.lineTo(11,60);

  ctx.moveTo(70,30);
  ctx.lineTo(12,60);

  ctx.moveTo(70,30);
  ctx.lineTo(13,60);

  ctx.moveTo(70,30);
  ctx.lineTo(125,60);

  ctx.moveTo(70,30);
  ctx.lineTo(126,60);

  ctx.moveTo(70,30);
  ctx.lineTo(127,60);

  ctx.moveTo(70,30);
  ctx.lineTo(128,60);

  ctx.moveTo(70,30);
  ctx.lineTo(190,30);

  ctx.moveTo(190,30);
  ctx.lineTo(250,60);

  ctx.moveTo(125,60);
  ctx.lineTo(250,60);

  ctx.moveTo(116,55);
  ctx.lineTo(241,55);

  ctx.moveTo(118,57);
  ctx.lineTo(243,57);

  ctx.moveTo(30,50);
  ctx.lineTo(30,125);

  ctx.moveTo(110,51);
  ctx.lineTo(110,125);

  ctx.moveTo(30,125);
  ctx.lineTo(110,125);

  ctx.moveTo(230,60);
  ctx.lineTo(230,120);

  ctx.moveTo(110,125);
  ctx.lineTo(230,120);

  ctx.moveTo(50,75);
  ctx.lineTo(50,125);

  ctx.moveTo(90,75);
  ctx.lineTo(90,125);

  ctx.moveTo(50,75);
  ctx.lineTo(90,75);

  ctx.moveTo(150,75);
  ctx.lineTo(190,75);

  ctx.moveTo(150,75);
  ctx.lineTo(150,95);

  ctx.moveTo(190,75);
  ctx.lineTo(190,95);

  ctx.moveTo(150,95);
  ctx.lineTo(190,95);

  ctx.moveTo(160,75);
  ctx.lineTo(160,95);

  ctx.moveTo(170,75);
  ctx.lineTo(170,95);

  ctx.moveTo(180,75);
  ctx.lineTo(180,95);

  ctx.moveTo(50,125);
  ctx.lineTo(70,115);


  ctx.moveTo(50,75);
  ctx.lineTo(70,85);

  ctx.moveTo(70,115);
  ctx.lineTo(70,85);

  ctx.moveTo(62,100);
  ctx.lineTo(70,100);

  ctx.moveTo(63,100);
  ctx.lineTo(71,100);

  ctx.moveTo(66,100);
  ctx.lineTo(66,103);

  ctx.moveTo(51,75);
  ctx.lineTo(51,125);


  ctx.strokeStyle="black";

  ctx.shadowColor="blue";
  ctx.shadowBlur="10";
  ctx.shadowOffSet="-20";

  ctx.font="15px Monotype Corsiva";
  ctx.strokeText("Sweet Home",34,60);

 
  ctx.stroke();
</script>
<br>
<b>Sayali Ashok Bhore<br>
MCA-II,<br>
IMS College,Ahmednagar</b>
</body>
</html>






Assinement By: 

Sayali Bhore MCA (IMSCDR, Ahmednagar)

HTML5CSS3 Session 2015


Click Here To Download Canvas Sweet Home Tutorial with soource code

 HTML5 CANVAS EXAMPLE DOWNLOAD, HTML 5 Canvas Tutorial, HTML5 Canvas Basic, HTML 5 Canvas Assignment To Draw Home, HTML5 Canvas Tutorial to Draw Home, HTML Canvas tutorial to draw house, 

Create HTML CSS javascript News Box , HTML CSS News Slider Download

Create HTML CSS javascript News Box , HTML CSS News Slider Download, HTML News Box For Your Website Free Download, java script news box For your Website, HTML CSS News Box Tutorial, HTML CSS News Box Example With Source code, HTML CSS Link Slider, HTML Slider Menu ,java script news box For your Website, HTML News box source Code example, News Slider 








Here Is Example Of News Box slider for Your Website you can use it wiht PHP, ASP, ASP.NET, JSP,HTML

1.HTML Code  Save this code as index.HTML

<!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 itemprop="name"></TITLE>
<meta name="description" itemprop="description" content=""/>
<META NAME="Keywords" CONTENT=""/>
 <meta name="" content="" />
 <link rel="canonical" href="http://html5css3sourcecode.blogspot.in/"/>

<link rel="stylesheet" href="css.css" type="text/css">

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}


function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}


function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}


function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}


function MM_openBrWindow(theURL,winName,features) { //v2.0

  window.open(theURL,winName,features);

}

//-->

</script>
<!-- For Image Slider -->
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<!-- // Image Slider -->
<!-- For scroller -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sagscroller.css" />
<script src="sagscroller.js"></script>
<script>

//SAG scroller demo #1:

var sagscroller1=new sagscroller({
    id:'mysagscroller',
    mode: 'auto' //<--no comma following last option
})
</script>
<!-- // For scroller --><!-- News start here -->
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $(".verticalBanner").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible:3,
        auto:5000,
        speed:900
       
    });
   
});
</script>
<!-- News end here -->

<!-- eZeeLINK Reservation Scripts/CSS starts here -->
    <script type="text/javascript" src="ezeeReservation/jquery.min.js"></script>
    <script type="text/javascript" src="ezeeReservation/jquery.datePicker.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="ezeeReservation/datePicker.css">
    <!-- eZeeLINK Reservation SCRIPT/CSS code ends here -->   
</head>







<body>
 <table width="990" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="267" rowspan="2" align="left" valign="top"><table width="267" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="15" align="left" valign="top">&nbsp;</td>
                <td width="238" height="305" align="left" valign="top" background="cat-bg.png"><h1 class="hdr">News Box</h1>
                  <div id="mysagscroller" class="sagscroller">
                    <ul>
                      <li class="txt"><a href="http://ahmednagarcity.in/">HTML 4</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">CSS Letest News</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Canvas </a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Refrigerator</li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Website Hosting</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Domain Registration</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Free Website Designing</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Learn Css2</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">CSS3 Topics</a></li>
                      <li class="txt"><a href="http://ahmednagarcity.in/">Basic HTML/a></li>
                    </ul>
                  </div></td>
                <td align="left" valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td align="left" valign="top">&nbsp;</td>
                <td align="left" valign="top">&nbsp;</td>
                <td align="left" valign="top">&nbsp;</td>
              </tr>
            </table>
</div>

</body>
</html>

2. Save This File as  slider.css

/*.folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
}*/





/*--Main Container--*/
/*.main_view {
    float: left;
    position: relative;
}*/
/*--Window/Masking Styles--*/
.banner {
    height:65px;   
    width: 411px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel_banner {
    position: absolute;
    top: 0; left: 0;
}
.image_reel_banner img {float: left;}

/*--Paging Styles--*/
.paging_banner {
    position: absolute;
    right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    background: url(paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging_banner a {
    text-decoration: none;
    color: #fff;
}
.paging_banner a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging_banner a:hover {font-weight: bold;}






.photo {
    height:252px;    width:695px;   
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
    position: absolute;
    right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    background: url(paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}


3.Save This File as Css.css


A.navsection {    PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; PADDING-BOTTOM: 4px; MARGIN-LEFT: 0px; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; FONT-FAMILY: Verdana; TEXT-DECORATION: none}
A.navsection:hover {    BORDER-RIGHT: #c8cfdc 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #c8cfdc 0px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; PADDING-BOTTOM: 3px; BORDER-LEFT: #c8cfdc 0px solid; COLOR: #414a5b; PADDING-TOP: 5px; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ff6600; TEXT-DECORATION: none}

BODY {    SCROLLBAR-FACE-COLOR: #ff0000; FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #000000; FONT-FAMILY: Verdana, Tahoma, Arial; SCROLLBAR-DARKSHADOW-COLOR: #000000; BACKGROUND-COLOR: #000000}
A.list {    FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #FBC900; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}
A.list:hover {
    FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #ffffff; BORDER-BOTTOM: 1px dotted; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

A.listup {    FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FBC900; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}
A.listup:hover { FONT-WEIGHT: none; FONT-SIZE: 10pt; COLOR: #ffffff; BORDER-BOTTOM: 1px dotted; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

body {    margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #D70000; text-align: justify;padding: 0;margin: 0.1em;}
h2 { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt; font-weight: bold; color: #D70000; text-align: justify; padding: 0; margin: 0.1em;}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #3860C0; text-align: justify;padding: 0;margin: 0.1em;}

body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #ffffff;background-image: url(images/bk.jpg);
text-align: justify; line-height: 20px;}
td {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #000000;text-align: justify;line-height: 15px;}
th {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #000000;text-align: justify;line-height: 15px;}





1.
a.one:active{color: #FBC900;}
a.one:link{color: #ffffff; text-decoration: none;}
a.one:visited{color: #ffffff; text-decoration: none;}
a.one:hover{color: #FBC900;}

2.
a.two:active{color: #F78D22; text-decoration: underline;}
a.two:link{color: #ffffff; text-decoration: none;}
a.two:visited{color: #ffffff; text-decoration: none;}
a.two:hover{color: #F78D22; text-decoration: underline;}

3.
a.three:active{color: #F78D22; text-decoration: none; font-weight: bold;}
a.three:link{color: #000000; text-decoration: underline;}
a.three:visited{color: #000000; text-decoration: underline;}
a.three:hover{color: #F78D22; text-decoration: none; font-weight: bold;}

4.
a.four:active{color: #ffff00; text-decoration: underline;}
a.four:link{color: #C0B8B9; text-decoration: none;}
a.four:visited{color: #C0B8B9; text-decoration:none;}
a.four:hover{color: #ffff00; text-decoration: underline;}

.cellbk{background-image:url(images/new-123.gif); background-position:left; background-repeat:no-repeat; height:244px; width:710px;}
.cellbkleft{background-image:url(images/bk-cell-left.gif); background-position:left; background-repeat:no-repeat; height:400px; width:349px;}
.header { background:url(images/hdr-bg.jpg) no-repeat left top; height:122px;}
.logo { width:510px; height:122px; display:block; cursor:pointer;}

.links { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;}
.links a { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:none;}
.links a:hover { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline;}

.lnk1 {width:20px; height:19px; display:block; cursor:pointer;}
.lnk2 {width:17px; height:19px; display:block; cursor:pointer;}
.lnk3 {width:14px; height:19px; display:block; cursor:pointer;}

.wapper{ background:url(images/bk.jpg) left top repeat-x; width:100%; overflow:hidden;}
.mainContant{ width:1000px; margin:0 auto;}

.intro { height:314px;}
.menu { width:694px; height:36px; margin:2px 0px 0px;}
.menu ul { margin:0px 0px 0px 10px; padding:0px;}
.menu ul li { float:left; list-style:none; background:url(images/li-bg.jpg) no-repeat right top;}
.menu ul li a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; float:left; list-style:none; padding:12px 32px; text-decoration:none;}
.menu ul li a:hover { background:url(images/menu-over-bg.jpg) repeat-x;}





h1.hdr { background:url(images/bull.png) no-repeat 1px 9px; line-height:40px; padding-left:30px; margin-left:10px; color:#FFFFFF;}
p.txt {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000;  margin-left:10px; line-height:14px;}


div#mysagscroller{width: 230px;  /*width of scroller*/ height:250px;}
div#mysagscroller ul li{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; line-height:22px;  /*bottom spacing between each LI*/}
div#mysagscroller ul li:first-letter{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; }
.intro-panel

.verticalSliderImgs {clear:both; margin:0; padding:0; display:block;}
.verticalSliderImgs ul {list-style:none; padding:0;margin:0;}
.verticalSliderImgs ul li {clear:both; display:block; padding:0; margin-bottom:12px;}
.verticalSliderImgs ul li img {clear:both; width:280px; height:100px; padding:3px; margin:0; text-align:center; border:1px solid #ddd;}
.verticalSliderImgs ul li img:hover { border:1px solid #CE0000;}

 

4.Save Following code as sagscroller.css

/*default CSS for SAG scroller*/

.sagscroller{
width: 230px;  /*default width of scroller*/
height:250px;
overflow:hidden;
position:relative;

}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0px 0px 0px 10px;
padding:0;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:90%;
}

.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #eee;
font-size:12px;
clear: both;
}

5. Download sagscroller.js from JQuery Download or save following code

/*Sag Content Scroller (Aug 7th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Updated Aug 28th, 10 to v1.3

var sagscroller_constants={
    navpanel: {height:'16px', downarrow:'', opacity:0.6, title:'', },
    loadingimg: {src:'ajaxloading.gif', dimensions:[100,15]}
}

function sagscroller(options){

    this.setting={mode:'manual', inittype:'stunted', pause:3000, animatespeed:500, ajaxsource:null, rssdata:null, refreshsecs:0, navpanel:{show:true, cancelauto:false}} //default settings
    jQuery.extend(this.setting, options) //merge default settings with options
    options=null
    this.curmsg=0
    this.addloadingpanel(jQuery, 'preload')
    if (this.setting.rssdata) //if rss contents
        google.load("feeds", "1") //init google ajax api
    var slider=this
    jQuery(function($){ //on document.ready
        slider.$slider=$('#'+slider.setting.id)
        if (slider.setting.ajaxsource||slider.setting.rssdata)
            slider.$slider.empty()
        slider.addloadingpanel(jQuery, 'show')
        if (slider.setting.ajaxsource) //if ajax data
            slider.getajaxul(slider.setting.ajaxsource)
        else if (slider.setting.rssdata){ //if rss data
            slider.fetchfeeds()
        }
        else{ //if inline content
            if (slider.setting.inittype=="onload") //load scroller when page has completely loaded?
                $(window).load(function(){slider.init($)})
            else //load scroller immediately and get dimensions progressively instead
                slider.init($)
        }
    })
}

sagscroller.prototype={

    getajaxul:function(path){
        var $=jQuery, slider=this
        this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to getajaxul()
        this.$loadingpanel.show()
        $.ajax({
            url: path, //path to external content
            async: true,
            error:function(ajaxrequest){
                slider.$slider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
                slider.reloadul(content)
                if (slider.setting.refreshsecs>0) //refetch contents every x sec?
                    setTimeout(function(){slider.getajaxul(path)}, slider.setting.refreshsecs*1000)
            }
        })
    },

    addloadingpanel:function($, mode){
        var loadingimgref=sagscroller_constants.loadingimg
        if (mode=="preload"){
            var loadingimg=new Image(loadingimgref.dimensions[0], loadingimgref.dimensions[1])
            loadingimg.src=loadingimgref.src
            this.$loadingimg=$(loadingimg).css({position:'absolute', zIndex:1003})
        }
        else{
            var sliderdimensions=[this.$slider.width(), this.$slider.height()]
            var $loadingpanel=$('<div />').css({position:'absolute', left:0, top:0,  opacity:0.5, width:sliderdimensions[0], height:sliderdimensions[1], zIndex:1002}).appendTo(this.$slider)
            this.$loadingimg.css({left:sliderdimensions[0]/2-loadingimgref.dimensions[0]/2, top:sliderdimensions[1]/2-loadingimgref.dimensions[1]/2}).appendTo(this.$slider)
            this.$loadingpanel=$loadingpanel.add(this.$loadingimg)
        }
    },

    addnavpanel:function(){
        var slider=this, setting=this.setting
        var $navpanel=$('<div class="sliderdesc"><div class="sliderdescbg"></div><div class="sliderdescfg"><div class="sliderdesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:sagscroller_constants.navpanel.background, opacity:sagscroller_constants.navpanel.opacity}).end() //"sliderdescbg" div
            .eq(1).css({color:'white'}).end() //"sliderdescfg" div
            .eq(2).css({textAlign:'center', cursor:'pointer', paddingTop:'2px', display:'none'}).html('<img src="'+sagscroller_constants.navpanel.downarrow+'"/>').end().end()
            .appendTo(this.$slider)
        var $descpanel=$navpanel.find('div.sliderdesctext').attr('title', sagscroller_constants.navpanel.title).click(function(){ //action when nav bar is clicked on
            slider.stopscroll()
            slider.scrollmsg(setting.mode=="auto" && !setting.navpanel.cancelauto? true : false)
        })
        $navpanel.css({top:this.$slider.height()-parseInt(sagscroller_constants.navpanel.height), height:sagscroller_constants.navpanel.height}).find('div').css({height:'100%'})
    },

    resetuls:function(){ //function to swap between primary and secondary ul
        var $tempul=this.$mainul
        this.$mainul=this.$secul.css({zIndex:1000})
        this.$secul=$tempul.css({zIndex:999})
        this.$secul.css('top', this.ulheight)
    },

    reloadul:function(newhtml){ //function to empty out SAG scroller UL contents then reload with new contents
        this.$slider.find('ul').remove()
        this.ulheight=null
        this.curmsg=0;
        this.$slider.append(newhtml)
        this.init($)       
    },

    setgetoffset:function($li){
        var recaldimensions=(this.setting.ajaxsource || this.setting.rssdata) && this.setting.inittype=="onload" //bool to see if script should always refetch dimensions
        if (this.curmsg==this.$lis.length)
            return (!this.ulheight || recaldimensions)? this.ulheight=this.$mainul.height() : this.ulheight
        else{
            if (!$li.data('toppos') || recaldimensions)
                $li.data('toppos', $li.position().top)
            return $li.data('toppos')
        }
    },

    scrollmsg:function(repeat){
        var slider=this, setting=this.setting
        var ulheight=this.ulheight || this.$mainul.height()
        var endpoint=-this.setgetoffset(this.$lis.eq(this.curmsg))
        this.$mainul.animate({top: endpoint}, setting.animatespeed, function(){
            slider.curmsg=(slider.curmsg<slider.$lis.length+1)? slider.curmsg+1 : 0
            if (slider.curmsg==slider.$lis.length+1){ //if at end of UL
                slider.resetuls() //swap between main and sec UL
                slider.curmsg=1
            }
            if (repeat)
                slider.scrolltimer=setTimeout(function(){slider.scrollmsg(repeat)}, setting.pause)
        })
        var secendpoint=endpoint+ulheight
        this.$secul.animate({top: secendpoint}, setting.animatespeed)
    },

    stopscroll:function(){
        if (this.$mainul){
            this.$mainul.add(this.$secul).stop(true, false)
            clearTimeout(this.scrolltimer)
        }
    },

    init:function($){
        var setting=this.setting
        this.$loadingpanel.hide()
        this.$mainul=this.$slider.find('ul:eq(0)').css({zIndex:1000})
        this.$lis=this.$mainul.find('li')
        if (setting.navpanel.show)
            this.addnavpanel()
        this.$secul=this.$mainul.clone().css({top:this.$mainul.height(), zIndex:999}).appendTo(this.$slider) //create sec UL and add it to the end of main UL
        this.scrollmsg(setting.mode=="auto")
    },

    ///////////////////////RSS related methods below///////////////////


    fetchfeeds:function(){
        var slider=this, rssdata=this.setting.rssdata
        this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to fetchfeeds()
        this.$loadingpanel.show()
        this.entries=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
        this.feedsfetched=0
        for (var i=0; i<rssdata.feeds.length; i++){ //loop through the specified RSS feeds' URLs
            var feedpointer=new google.feeds.Feed(rssdata.feeds[i][1]) //create new instance of Google Ajax Feed API
            feedpointer.setNumEntries(rssdata.entries) //set number of items to display
            feedpointer.load(function(label){
                return function(r){
                    slider.storefeeds(r, label)
                }
            }(rssdata.feeds[i][0])) //call Feed.load() to retrieve and output RSS feed.
        }   
    },

    storefeeds:function(result, label){
        var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
        if (thisfeed==""){ //if error has occured fetching feed
            alert("Google Feed API Error: "+result.error.message)
        }
        for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
            result.feed.entries[i].label=label //extend it with a "label" property
        }
        this.entries=this.entries.concat(thisfeed) //add entry to array holding all feed entries
        this.feedsfetched+=1
        if (this.feedsfetched==this.setting.rssdata.feeds.length){ //if all feeds fetched
            if (this.setting.rssdata.groupbylabel){ //sort by label name?
                this.entries.sort(function(a,b){
                    var fielda=a.label.toLowerCase(), fieldb=b.label.toLowerCase()
                    return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
                })
            }
            else{ //just sort by date
                this.entries.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
            }
            this.formatfeeds()
        }
    },

    formatfeeds:function(){
        function formatdate(datestr, showoptions){
            var itemdate=new Date(datestr)
            var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : ""
            return "<span class='datefield'>"+parseddate+"</span>"
        }
        var sagcontent='<ul>'
        var slider=this, rssdata=this.setting.rssdata, entries=this.entries
        for (var i=0; i<entries.length; i++){
            sagcontent+='<li><a href="'+entries[i].link+'" target="'+rssdata.linktarget+'">'+entries[i].title+'</a>'
                +'<div class="rsscontent">'
                +(/description/.test(rssdata.displayoptions)? entries[i].content : entries[i].contentSnippet)
                +'</div>'
                +'<div class="rsslabel">'
                +(/label/.test(rssdata.displayoptions)? "<b>Source("+(i+1)+"):</b> "+entries[i].label+" " : "")
                +(/date/.test(rssdata.displayoptions)? formatdate(entries[i].publishedDate, rssdata.displayoptions): "")
                +'</div>'
                +'</li>\n\n'
        }
    sagcontent+='</ul>'
    this.reloadul(sagcontent)
    if (slider.setting.refreshsecs>0) //refetch contents every x sec?
        setTimeout(function(){slider.fetchfeeds()}, slider.setting.refreshsecs*1000)
    }
}

Download HTML CSS JavaScript News Box Example With Source Code click here  








Create HTML CSS javascript News Box , HTML CSS News Slider Download, HTML News Box For Your Website Free Download, java script news box For your Website, HTML CSS News Box Tutorial, HTML CSS News Box Example With Source code, HTML CSS Link Slider, HTML Slider Menu ,java script news box For your Website, HTML News box source Code example, News Slider  

Create PHP News Box , PHP CSS News Slider Download, PHP News Box For Your Website Free Download,  PHP CSS News Box Tutorial, PHP CSS News Box Example With Source code, PHP CSS Link Slider, PHP Slider Menu ,java script news box For your Website, PHP News box source Code example, News Slider 

 Create ASP.net News Box , ASP.net News Slider Download, ASP.net News Box For Your Website Free Download,  ASP.net  News Box Tutorial, ASP.netCSS News Box Example With Source code, ASP.net Link Slider, ASP.netSlider Menu ,java script news box For your Website, ASP.net News box source Code example, News Slider

Download Complete tutorial  click here  

HTML5 Smiley Face Using Canvas

HTML5 example to create Smiley Face Using Canvas,HTML5 Canvas tutorial, Smiley Face Using Canvas, HTML5 example Smiley Face Using Canvas with source code, step by step tutorial  to create Smiley Face,

html5 example source code to draw smiley Face using canvas

html5 example source code to draw smiley Face using canvas Download









  

HTML Smiley Face Using Canvas Complete Source Code is Follow









<! DOCTYPE html>
<html lang ="en">
<head>
<style>
#myCanvas { background-color:#DEB887;
                       border:3px solid black;
         width:900px;
         height:600px;
                     }
</style>
</head>
<body>
    <canvas id="myCanvas">
        browser not support
   </canvas>
     <script>

          var c=document.getElementById("myCanvas");


          var ctx =c.getContext("2d");

ctx.fillStyle='#C71585';
ctx.font='Arial 50px';
ctx.fillText('keep smiling . . .',200,100);
ctx.strokeText('keep smiling . . .',300,400);

//For Yellow Circles

     
     ctx.beginPath();
            ctx.arc(40,33,15,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(55,25,15,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(70,20,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(85,20,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(100,25,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(115,35,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(125,50,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(130,65,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(130,80,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(125,95,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(120,110,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(110,120,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(100,130,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(85,135,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(70,135,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(55,130,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(40,125,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(30,115,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(25,100,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(20,85,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
            ctx.arc(20,70,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(25,50,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();





//For Inner Circle

        ctx.beginPath();
            ctx.arc(75,75,50,0,2*Math.PI);
            ctx.fillStyle="blue";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

//For Second Inner Circle

       ctx.beginPath();
            ctx.arc(75,75,35,0,2*Math.PI);
            ctx.fillStyle="orange";
            ctx.fill();
            ctx.stroke();
        ctx.closePath();

// For First Eye

      ctx.beginPath();
        ctx.arc(60,65,5,0,2*Math.PI);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();

// For First White Part

     ctx.beginPath();
        ctx.arc(60,65,2,0,2*Math.PI);
        ctx.fillStyle="white";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();

//For Second Eye

     ctx.beginPath();  
        ctx.arc(90,65,5,0,2*Math.PI);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
     ctx.closePath();

//For Second White Part

     ctx.beginPath();
        ctx.arc(90,65,2,0,2*Math.PI);
        ctx.fillStyle="white";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();


     ctx.beginPath();
        ctx.arcTo(75,110,105,70,20);
        ctx.fillStyle="red";
        ctx.fill();
        ctx.stroke();
     ctx.closePath();
        

 // For Lips
           
         ctx.strokestyle="red";
         ctx.fillStyle="red";
        

         ctx.ShadowColor="white";
         ctx.ShadowBlur="30";
          ctx.fill();
         ctx.stroke();


        </script>
Shaikh Ribana MCA II FS
         </body>
           </html>






   
        browser not support
  

    

        
          



Download Example With source code

Assinement By Shaikh Ribana MCA II FS ( Imscdr, Ahmednagar)
HTML5 Css3 Session 2015

HTML5 example to create Smiley Face Using Canvas,HTML5 Canvas tutorial, Smiley Face Using Canvas, HTML5 example Smiley Face Using Canvas with source code, step by step tutorial  to create Smiley Face,

html5 example source code to draw smiley Face using canvas

html5 example source code to draw smiley Face using canvas Download

Download Canvas Example

 

 

Popular Posts

Follow by Email