HRWebGuru: November 2013

Tuesday, 26 November 2013

How can I use Skype URIs in my webpages for Call and Chat ?

Mention it on your webpage.where you want to use call/chat service.

<a href="skype:hidayt.rahman?call">Call to the Webmaster</a>

<a href="skype:hidayt.rahman?chat">Chat to the Webmaster</a>

Sunday, 24 November 2013

Responsive CSS web design examples with code

Responsive style template is today is very popular. Responsive means when you open website in your any of device like ipad, mobile, PC, etc. it will set it’s design as per your device’s screen size. Responsive style also called liquid design. Many popular site are responsive today. Here I have written three line code for setting up different CSS for all different devices. You just require to make three CSS files and set this code in your HEAD of site code.

Links of CSS

Create files and use this code in your HEAD of html code. There is media screen width given and you can change its max and min width as per required.

<link rel='stylesheet' href="style.css/" /> 

<link rel='stylesheet' media='screen and (max-width: 480px)' href="style_mobile.css" /> 

<link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href="style_ipad.css" />  <!--ipad css*-->

Download Demo

Thursday, 21 November 2013

What is the difference between HTML tags DIV and SPAN?

div is a block element, span is inline.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

You asked for some concrete examples, so is one taken from my bowling website

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Hidayt Rahman</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://hrwebguru.blogspot/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Sunday, 17 November 2013

z-index example

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	img
	{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	}
	</style>
	</head>

	<body>
	<h1>This is a heading</h1>
	<img src="Images/k.jpg" width="100" height="140" />
	<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
	</body>
	</html>

Tuesday, 12 November 2013

CSS3 Animations

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in existing web pages.

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.

Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

Example:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.

You can change as many styles you want, as many times you want.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Example
Change the background color and position:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

By: Hidayt Rahman

Sunday, 10 November 2013

Convert String To Number

	<html>
	<body>

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

	var myString = "56.02 degrees centigrade";
	var myInt;
	var myFloat;

	document.write("\"" + myString + "\" is " + parseInt(myString) +
	" as an integer" + "<br>");

	myInt = parseInt(myString);
	document.write("\"" + myString + "\" when converted to an integer equals " +
	myInt + "<br>");

	myFloat = parseFloat(myString);
	document.write("\"" + myString +
	"\" when converted to a floating point number equals " + myFloat);

	</script>

	</body>
	</html>

META for Automatic Refreshing and Forwarding

You can use <META ...> to tell the web browser to automatically move to another web page, or refresh the current page, after a specified period of time.

To have the page automatically refresh itself every x seconds, use a tag like this:

this code

This tells the browser to refresh the page (HTTP-EQUIV="REFRESH"), and that it should do so every five seconds (CONTENT="5").

Suppose, however, that you want the page to refresh itself by going automatically to another page. This is common, for example, when someone has moved their home page to a new location, but want someone who goes to the old location to still find a pointer. You could put this <META ...> tag in the page at the old location:

this code	produces this
<META HTTP-EQUIV="Refresh" CONTENT="5; URL=autoforward_target.html">

In this case the <META ...> tag works is like the first refresh example, only with a little added information. The first part is the same: CONTENT="5; URL=autoforward_target.html" tells the browser that the page should be refreshed. CONTENT="5; URL=autoforward_target.html" gives two pieces of information: that the page should refresh after five seconds, and that the new URL should be autoforward_target.html .

In a situation like this, you should also provide a regular link to the new page.

You can also use <META ...> tags to ensure that the browser does not cache the HTML document. Caching is the process of saving the HTML document locally, on the computer's hard drive, for future use so the browser doesn't have to download the document again. To ensure that the browser does not cache a particular page use the following code:

this code

Web application

In computing, a web-based application is any application that uses a web browser as a client. The term may also mean a computer software application that is coded in a browser-supported programming language and reliant on a common web browser to render the application executable

HRWebGuru

Profession

Tuesday, 26 November 2013

How can I use Skype URIs in my webpages for Call and Chat ?

Sunday, 24 November 2013

Responsive CSS web design examples with code

Links of CSS

Thursday, 21 November 2013

What is the difference between HTML tags DIV and SPAN?

Sunday, 17 November 2013

z-index example

Tuesday, 12 November 2013

CSS3 Animations

CSS3 Animations

What are Animations in CSS3?

Example

Sunday, 10 November 2013

Convert String To Number

META for Automatic Refreshing and Forwarding

Web application

Blog Archive