Showing posts with label Demos. Show all posts
Showing posts with label Demos. Show all posts
Saturday, August 17, 2013
Loading website in a DIV using Ajax and PHP
Loading a website or content inside a DIV in ajax using php is common, everyone learns it when they are new to ajax. I'm also a beginner in Ajax. Let's start learning it from beginning, covering all the history of ajax as well as how to use ajax.History:
If you want you can read the history of ajax at wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)
To run ajax you'll need a server if you own a hosting then you can use that to run the application or you can download the XAMPP local server / host.
First we'll create two files, one will be the index.html and another one will be url.php (Refer below image to understand the directory structure.)
In the inder.html file we'll add our javascript inside the head tags and we'll call that using click event.
HTML & Javascript: index.html source code.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loader() {
var ajaxhttp;
try {
//For major browser like Chrome etc...not for IE
ajaxhttp = new XMLHttpRequest();
}catch(e1) {
try {
//For IE6 and above
ajaxhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2) {
try {
//For IE5
ajaxhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3) {
//If all returns an error then we'll return false!
return false;
}
}
}
ajaxhttp.onreadystatechange = function() {
if(ajaxhttp.readyState==4) { //it should be 4 or 200
document.getElementById("frame").innerHTML = ajaxhttp.responseText;
}
}
ajaxhttp.open("GET", "url.php", true);
ajaxhttp.send(null);
}
</script>
</head>
<body style="margin:0px;font-family:trebuchet Ms;">
<h2 onClick="loader()" style="background:#2C2C2C;text-align:center;color:white;padding:15px;margin:0px;">Click to load the website in a DIV!</h2>
<div id="frame"></div>
</body>
</html>
Now we'll make url.php file to send the data from the server.
PHP: url.php source code.
<?php $url = "http://www.thecodepress.info"; echo file_get_contents($url); ?>Basically the url.php file loads the content of the specified URL which is fetched from variable url.
and then we are printing the contents of the file. So when our index.html tries to get the responseText from the server, the server sends the contents of the file and that's the reason for the website to be displayed.
 |
| Before the page will load this will look like this and when we'll click the black header the page will load the website without refreshing the page. |
 |
| When the user will click the black header then the specified website will load. |
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:
Wednesday, August 14, 2013
Simple and awesome CSS3 button design.
Their are many websites which shares the code for creating new and awesome CSS3 buttons not only buttons their are also many other websites which shows some awesome styles for HTML/HTML5 element as well as inputs. In this post i'm sharing two button styles which is usually use for designing submit buttons.
When i was new to CSS3 what i used to do is to go on many CSS3 generators website and generate a button and try to understand the code what they have used. You can also try that after reading this post.
CSS: Style properties for button.
input[type=submit] {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
input[type=submit]:hover {
background-color:#dfdfdf;
}
input[type=submit]:active {
position:relative;
top:1px;
}
CSS: Style properties for button.
input[type=submit] {
font-family: Arial;
color: #ffffff;
font-size: 17px;
padding:10px 15px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 5px #696969;
-moz-box-shadow: 0px 1px 5px #696969;
box-shadow: 0px 1px 5px #696969;
text-shadow: 1px 1px 3px #666666;
border: solid #3972b0 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#4bb007), to(#59d104));
background: -moz-linear-gradient(top, #4bb007, #59d104);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
display:inline-block; /* IE is so silly */
}
input[type=submit]:hover {
background: #4bb007;
}
Monday, March 25, 2013
Find your Internet Protocol (IP) Address and Remote Port using your self made PHP Script
Internet Protocol (IP) address is a unique key / number of your personal or your office computer. Most of the people who want to know their PC's / Laptop's IP Address, they directly go to IPChicken.com or any other IP Finding service. What if you create your own PHP Application which finds your PC's / Laptop's IP Address ?. In this post i'll show you few lines of PHP script which will help you to find your IP address and also it will find Remote Port.
Friday, March 15, 2013
Move a HTML Div with CSS and Javascript, No JQuery!
On the web, when anyone searches about "how to move div or any other element" their are thousands of results, but only few of results are teaching it with Pure Javascript. In this tutorials i'll also teach you the same but i'll also add little bit of twist in it. Check the demo, i'm sure you will like it.
Sunday, January 20, 2013
Fixed Navigation Bar in CSS & HTML
If you want to make a navigation bar which will always be on the top of the page, in this tutorial you are going to learn how to do it. Here we will use basic HTML and CSS (Cascading Style Sheet) for it.
Saturday, December 29, 2012
Subscribe to:
Posts (Atom)
