Tag Archives: HTML

How make your background image full size of the screen and cross mobile,table and desktop in Foundation

Recently a task is using the existing foundation basic page to rewrite it to a new design. It is my first time working in Foundation Framework, previous I always using bootstrap.

And from doing this get understand how foundation works. Wow, take a day to achieve it.

And for make the background image full size of the screen and cross the mobile,table and desktop that took me few hours to fix it.

I just like to put my piece of code over there, hope that could help my fans.

.main-background{    
	background:#f38f04 url('/images/bg-img.png') no-repeat center center fixed; 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
	width: 100% !important;
	z-index: 0;
}

the fixed and width:100% !important that is very important to make it happens.

Advertisements

How You Can Draw Regular Polygons with the HTML5 Canvas API

How it is look likes goes to here:

http://www.sandywebdesigner.com/canvas/canvas.html

  • a circle is 2 * Pi
  • don’t know how to explain sine and cosine, but if you understand below is help you under stand my JavaScript code.
  • x = r * cosine(a)
    y = r * sine(a)

And here is the JavaScript code for you Polygons

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) {
if (sides < 3) return;
var a = (Math.PI * 2)/sides;
a = anticlockwise?-a:a;
ctx.save();
ctx.translate(x,y);
ctx.rotate(startAngle);
ctx.moveTo(radius,0);
for (var i = 1; i < sides; i++) {
ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
}
ctx.closePath();
ctx.restore();
}

When I need a pentagon,here is the code for get it.

function doFirst(){
var x = document.getElementById(“canvas”);

context= x.getContext(‘2d’);

context.beginPath();
polygon(context, 120,120,100,5);
context.stroke();
}
window.addEventListener(“load”,doFirst,false);

And You could use below code generate different shapes.

function doFirst(){
var x = document.getElementById(“canvas”);

context= x.getContext(‘2d’);

context.beginPath();
polygon(context,125,125,100,5,-Math.PI/2);
context.fillStyle=”rgba(227,11,93,0.75)”;
context.fill();
context.stroke();

// Draw a circle to encompass this polygon
context.beginPath();
context.arc(125, 125, 100, 0, Math.PI * 2);
context.stroke();

context.beginPath();
polygon(context,350,125,100,6,-Math.PI/2);
context.fillStyle=”rgba(51,128,255,0.75)”;
context.fill();
context.stroke();

context.beginPath();
polygon(context,125,350,100,7,-Math.PI/2);
context.fillStyle=”rgba(11,227,93,0.75)”;
context.fill();
context.stroke();

context.beginPath();
polygon(context,350,350,100,8,0,false);
polygon(context,350,350,60,8,0,true);
context.fillStyle=”rgba(227,11,93,0.75)”;
context.shadowColor = ‘rgba(0,0,0,0.75)’;
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowBlur = 10;
context.fill();
}
window.addEventListener(“load”,doFirst,false);

Then here is your css code for add video to your html5 page–continue

Here I put the css style for mark up your video appearance. not very beautiful, but it works, you could change this to what you like.

Css3 style below: (next post is the javascript file, you need add to make the video works.)

body{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#skin{
width:700px;
margin:10px auto;
padding:5px;
background:red;
border:4px solid black;
border-radius: 10px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
width:70px;
height:22px;
}
#defaultBar{
position: relative;
float:left;
width:600px;
height: 16px;
padding:4px;
border:2px solid black;
background-color:yellow;
}
#progressBar{
position: absolute;
width:0px;
height:16px;
background:blue;
}

Create a video in your HTML5 page–continue

Here I am going to continue my post. HTML5 page added video is much easy now.

put below source code in your html body ,next post is the css style.

<section id = “skin”>
<video id=”myMovie” width=”640″ height=”360″>
<source src=”videos/movie.mp4″ type=’video/mp4′ >
</video>

<nav>
<div id=”buttons”>
<button type=”button” id=”playButton”>Play</button>
</div>
<div id=”defaultBar”>
<div id=”progressBar”>
</div>
</div>
<div style=”clear: both;”>

</div>

</nav>

</section>

How to let your visual studio 2010 support HTML5?

Mircosoft won’t let code people use notepadd++ to write codes.Html5 is very popular,how can vs2010 won’t support html5? here I will teacher you how to let you vs2010 support html5.

all you need is vs2010 and a browser.

what do we need a browser? hehe,if you want you vs2010 support html5. first thing first is that you need update vs2010 to sp1.

How do we up microsoft Visual Studio 2010 to microsoft Visual Studio 2010 sp1?
There are two ways:
1.Go straight to microsoft website, download center download Microsoft Visual Studio 2010 Service Pack 1

2.open windows update, the system will automatically find vs2010 update file, size around 600MB

Once you finished update, then open you vs2010 goto tool->option->HTML->Validation

Image

validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct.

this post and the follow post for help people for javascript assessment not for the real world

Q1. validate form in contact.html. If the form has been validated, show an aler box that displays the data entered and asks the user if that data entered is correct. If yes, thanks the visitoer and submit the form. If no,prevent the form from submitting and display detailed error messages for the incorrect fields.

the contact.html page just like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Beatmap Product Enquiry Form</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”js/share.js”></script>
<script language=”javascript” src=”js/all.js”></script>
<script type=”text/javascript” src=”js/autochange.js”></script>
<link href=”styles/style.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
.title {
margin-bottom:10px;
}
#rightside {font-size:10px;
}
br{line-height:3;
}
#header br{line-height:1;
}
fieldset{width:350px; margin:0 50px; padding:20px;
}
legend {font:900 1.2em helvetica, verdana, sans-serif;color:#fff;
}
#picture1{background-image:url(images/product/rihanna.jpg);
}
#picture2{background-image:url(images/product/staticx.jpg);
}
</style>
</head>
<body>
<div id=”central”>
<div id=”header”>
<div id=”login”>
</div>
</div>
<ul id=”navlist”>
<li><a id=”n1″ href=”index.htm”>Home</a></li>
<li><a id=”n2″ href=”products.htm”>Products</a></li>
<li><a id=”n3″ href=”reviews.htm”>Reviews</a></li>
<li><span id=”current”><a id=”n4″ href=”contact.htm”>Enquiries</a></span></li>
</ul>
<div id=”content” style=”background-image:none;”>
<div id=”leftside”>
<h3>Featured Artist</h3>
<div id=”picture1″></div>
<h3>Featured Artist</h3>
<div id=”picture2″></div>
</div>
<div id=”rightside”>
<form id=”project” action=”#” onsubmit = “return validateForm()”>
<fieldset>
<legend>Contact Details</legend>
<label for=”txtname”>Your Name:</label> <input type=”text” name=”txtname” id=”txtname”/><br/>
<label for=”txtemail”>Email:</label> <input type=”text” name=”txtemail” id=”txtemail”/><br/>
<label for=”txtartist”>Artist:</label> <input type=”text” name=”txtartist” id=”txtartist”/><br/>
<label for=”txtalbum”>Song / Album:</label> <input type=”text” name=”txtalbum” id=”txtalbum”/><br/>
<label for=”txtcomments”>Comments:</label> <textarea name=”txtcomments” id=”txtcomments” cols=”30″ rows=”20″></textarea><br/>
<input type=”submit” id=”btnSubmit” name=”btnsubmit” value=”Send Enquiry”/>
</fieldset>
</form>

</div>
<div id=”footer”> <p>&copy; Beatmap 2013</p></div>
</div>
</div>
<script language=”javascript” src=”js/init.js”></script>

</body>
</html>

use php process a web form feedback….

use php process a web form feedback, and insert the information into your databases, and use php create a page to view the feedback.

here is the code.here is the html page collect the information;

<h2>Chinese Zodiac FeedBack</h2>
<form id=”form1″ method=”post” action=”process_zodiac_feedback.php”>
<p>
<label for=”fname”>Your Name:</label>
<input type=”text” name=”fname” id=”fname”>
</p>

<p>
<label for=”feedback”>Your FeedBack</label>
<textarea name=”feedback” id=”feedback” cols=”45″ rows=”5″></textarea>
</p>
<p><label>Are you agree to public your feecback?</label>
<input name=”agree” value=”Yes” type=”checkbox”></input></p>
<p>
<input type=”submit” name=”submit” id=”submit” value=”Submit”>

</p>
</form>

What is XML? What is XSL? What is the relationship between XML AND XSL?

What is XML?

  • XML stands for EXtensible Markup Language
  • XML is a markup language much like HTML
  • XML was designed to carry data, not to display data
  • XML tags are not predefined. You must define your own tags
  • XML is designed to be self-descriptive
  • XML is a W3C Recommendation

What is XSL?

XSLT is the recommended style sheet language of XML.

XSLT (eXtensible Stylesheet Language Transformations) is far more sophisticated than CSS.

XSLT can be used to transform XML into HTML, before it is displayed by a browser.

What is the relationship between XML AND XSL?

XSL gives your XML some style