WebDesign Templates

Monday 13 October 2014

Reload DIV section in Webpage without refreshing whole page

In a website without refreshing the whole page we can reload the specified div section only. The php and JQuery code as follows..

To run this code you need XAMPP or WAMP server.

index.php:

<!DOCTYPE html>

<html>

<head>

<title>MySQL Example</title>

</script>

$(document).ready(

function() {

setInterval(function() {

$('#body1').load('index.php' + ' #body1');

}, 5000);

});

$(document).ready(

function() {

setInterval(function() {

$('#body2').load('index.php' + ' #body2');

}, 1000);

});

</script>

</head>

<body>

<?php

// put your code here

date_default_timezone_set('Asia/Calcutta');

echo "<div id='body1'>Now Lucky Draw Number is: " . rand(1, 1000) . "</div>";

</div>

</body>

</html>

Friday 23 August 2013

How Facebook Update page when Upload Images, videos

In your HTML page, How to Update contents without page refresh?

i.e JQuery, A powerful scripting language for us.

Now I'm going to give the sample demo.

Here You need:

jquery-1.9.1.js

Download it from JQuery Website By just type in Google as "JQuery download"

HTML Code: UpdateContents.html

<!DOCTYPE html>
<html>
<head>
<title>Sample Page!</title>
</head>

<body>
<div id="page">
<h1>Sample Update Contents in a Div Demo</h1>
</div>

<div id="sample" style="height: 200px; color: white; background-color: black;overflow: auto; font-weight: bold;">
</div>

<div>
<h1>Some othre content</h1>
</div>

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
setInterval('addnewline()',1000);
});

var number = 1;
function addnewline(){
$($.parseHTML( "<div>Image Number: " + number + "...</div>" )).prependTo( "div#sample" );
number++;
}
</script>
</body>
</html>

Thursday 8 August 2013

HTML, CSS Template for WebDesigners

To create a web page layout we need HTML, CSS. Here i will give you the common template code which is useful for every webpage. In this template we are not using any tables. Only div tags will be used to create a page template. Before writing the HTML code, Positioning is very important. By using CSS, we can give the div position style.

CSS Code:

File: styles.css

body{
margin: 0px;
padding: 0px;
display: block;
text-align: center;
}

.container{
width: 70em;
margin: auto;
}
.content{
text-align: left;
height: 500px;
}

.header{
height: 123px;
background-color: #f4f4f4;
}
.firstdiv{
height: 500px;
background-color: yellow;
width: 33%;
text-align: left;
}
.seconddiv{
height: 500px;
text-align: center;
background-color: orange;
width: 33%;
}
.thirddiv{
height: 500px;
background-color: pink;
width:33%;
text-align: right;
}
.left{
float:left;
}
.footer{
clear: both;
background-color: green;
height: 233px;
}

That's it This is CSS Code. Enough to create a sample layout. Let's make fun with HTML

File: index.html

<!DOCTYPE html>
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="header">
<h1 style="margin:0px;">Header content here</h1>
</div>
<div class="container">
<div class="content">
<div class="firstdiv left">
<h1>LeftDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="seconddiv left">
<h1>middleDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="thirddiv left">
<h1>RightDiv</h1>
<p>This is a sample page created by xxx.
</div>
</div>
</div>
<div class="footer">
<h1 style="margin:0px;">Footer Content Here</h1>
</div>
</body>
</html>

Output Page:

Want more layouts? keep watching my blog http://websitetemplatestutorial.blogspot.in/

Pages