Using jQuery To Load Content Onto A Page Without An iFrame

8th February 2011 - 12 minutes read time

iFrames can be a convinent way of loading content from one domain onto another, but they do have their limitations. For example, it usually isn't possible to style the contents of the iFrame and you are therefore left at the mercy of a third party site. They also look pretty shonky if the third party site does down for whatever reason. Displaying large "page not found" statements on your page is quite unsightly.

There is a function in jQuery called load() that will use an AJAX request to load content from page onto another, and can even extract specific areas of the page and return only those parts. I thought I would run through some examples and then show how it is possible to display content from another domain on a page. Lets say we have a PHP file on the server that generates a random number, this would be the following very simple code.

<?php
echo rand();

This can be loaded into a div on a page of HTML using a single call in jQuery that utilises the load() function. This will just grab the text from the random_number.php file (the contents of which is in the above example) and put the result in the div with the id of test. Here is a page of HTML that does just that. Note that if you want to run this you'll need to put it on a server to enable the AJAX calls, otherwise it won't do anything.

<!DOCTYPE HTML>
<html> 
    <head> 
        <title>Loader</title> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function(){
                $('#test').load('/random_number.php', '', function(response, status, xhr) {
                    if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".content").html(msg + xhr.status + " " + xhr.statusText);
                    }
                });
            });
        </script> 
    </head>
    <body> 
        <div id="test"></div>
    </body>
</html>

Taking this a step further it is possible to get part of the text on a page by passing an extra bit of text to the load() function. The first parameter of the function is the location of the resource, but it is also possible to add a CSS identifier to the resource that will bring back only the block you were looking for. Take the following little HTML snippet, which would be loaded into a file called html_snippet.html on the server.

<div>Some <strong class="aclass">content</strong></div>

It is possible to grab the contents of just the "strong" element by adding a space and then the CSS selector you need to extract that bit of content, in this case it is ".aclass". This means we only need to change the jQuery example above a little bit to get this working.

$('#test').load('/html_snippet.html .aclass', '', function(response, status, xhr) {

The thing that separates iFrames from AJAX calls is that an iFrames can point anywhere, whereas an AJAX call MUST be on the same domain as the original file. This is a built in security feature of JavaScript and cannot be circumvented. This means we need to add a quick workaround to bypass this security mechanism. To take a realworld example I thought it might be a good idea to try and download some Google search results and print them onto the page. First we need to create the PHP code to download the Google search results, which is actually quite easy. Here we are searching for the term "wibble".

<?php
    $url = 'http://www.google.com/search?hl=en&q=';
    $output = file_get_contents($url . urlencode('wibble'));        
    echo $output;

Call this file something like searchgoogle.php and pop it on your server. We now need to update the jQuery so that we only display the search results and not all of the other stuff on the Google search results page that isn't needed. We do this by supplying the CSS selector "#res". Here is the updated line of code that you need to change. Once this is done the page automatically loads the test div with the search results for the term "wibble".

$('#test').load('/searchgoogle.php #res', '', function(response, status, xhr) {

Just loading the results onto the page when the DOM has loaded isn't quite the best way to do things in every situation, it is also nice to add a "Loading" graphic and a swishy effect when the content is changed to make things nice and pretty. This is all controlled via a link element at the top of the page. This requires a little bit more jQuery code to be added so I have printed it out in full again with the additional actions added. We are essentially adding a click event to the link element so that it will run the load() function. There are some other action and animation functions here that will cause the content to show and hide at different times, but the basic functionality is still there. Now, when a user clicks on the "Load" link they are presented with the search results for the term "wibble".

<!DOCTYPE HTML>
<html> 
<head> 
	<title>Loader</title> 
	<style type="text/css">
        div#container {
            width:500px;
            height:500px;
            overflow:auto;
        }
    </style> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
	<script type="text/javascript">
var externalpagepart = '#res';
var loadinggif = '/loading.gif';

$(document).ready(function(){  
    // set up the click event
	$('a.loader').live('click', function() {
		var toLoad = '/searchgoogle.php ' + externalpagepart;
		$('.content').slideUp('slow', loadContent);
		$('#load').remove();
		$('#waiting').append('<div id="load"><img src="' + loadinggif + '" alt="Loading" /></div>');
		$('#load').fadeIn('normal');
		function loadContent() {
			$('.content').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".content").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).slideDown('slow', hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
	});
});
    </script>
</head>
<body>
    <p><a class="loader" href="javascript: null(0);">Load</a></p>
    <div id="container">
        <p id="waiting"></p>
        <div class="content"></div>
    </div>  
</body>
</html>

Finally, I thought it might be a good idea to integrate a input box into the page so that the user can control the search term they want to send over to Google. The first task is to do is to allow the passing of a post variable called 'string' to the Google search URL. This is wrapped in a call to urlencode() to stop any errors occurring when users type in spaces and other things. We will come onto how to send this data in the next snippet.

<?php
$url = 'http://www.google.com/search?hl=en&q=';
$postVariable = 'string';

if (isset($_POST['string'])) {
    $output = file_get_contents($url . urlencode($_POST[$postVariable]));    
    $output = preg_replace('#<script.*</script>#ismU', '', $output);
    $output = preg_replace('#<style.*</style>#ismU', '', $output);    
    echo $output;
}

To pass post values through the AJAX call we need to use the second parameter in the load() function. This is a JSON encoded collection of variables that we might want to use. The property of the JSON object is the key in the $_POST array on the PHP side. To send the value "wibble" to the previous PHP code snippet we use the following:

$('.content').load(toLoad, {'string': 'wibble'}, function(response, status, xhr) {

We can now tie this all together and create a form that will allow users to search Google without actually leaving the current page. To use this just type a value into the input box and click on the link. This will trigget the action and run the load() method. This can probably be tied into a form properly, but this is enough to demonstrate how things would work.

<!DOCTYPE HTML>
<html> 
<head> 
	<title>Loader</title> 
	<style type="text/css">
        div#container {
            width:500px;
            height:500px;
            overflow:auto;
        }
    </style> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
	<script type="text/javascript">
var externalpagepart = '#res';
var loadinggif = '/loading.gif';

$(document).ready(function(){  
    // set up the click event
	$('a.loader').live('click', function() {
		var toLoad = '/searchgoogle.php ' + externalpagepart;
		$('.content').slideUp('slow', loadContent);
		$('#load').remove();
		$('#waiting').append('<div id="load"><img src="' + loadinggif + '" alt="Loading" /></div>');
		$('#load').fadeIn('normal');
		function loadContent() {
            var searchterm = $('#searchterm').val();
			$('.content').load(toLoad, {'string': searchterm}, function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".content").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).slideDown('slow', hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
	});
});
    </script>
</head>
<body>
    <input type="text" name="searchterm" id="searchterm" value="wibble" />
    <p><a class="loader" href="javascript: null(0);">Load</a></p>
    <div id="container">
        <p id="waiting"></p>
        <div class="content"></div>
    </div>  
</body>
</html>

One final thing that might be a good idea to do is strip out any style and script tags within the content of the page, this can be done through two calls to preg_replace(). This is probably a prudent thing to do anyway as you can end up with unwanted CSS and potentially dangerous JavaScript appearing on your site.

$url = 'http://www.google.com/search?hl=en&q=';
$postVariable = 'string';

if (isset($_POST['string'])) {
    $output = file_get_contents($url . urlencode($_POST[$postVariable]));    
    $output = preg_replace('#<script.*</script>#ismU', '', $output);
    $output = preg_replace('#<style.*</style>#ismU', '', $output);    
    echo $output;
}

This was al quite easy to set up and shows the power that a simple load() call can have, especially within a CMS application. Feel free to use these examples on your own sites but drop me a message to let me know as I would quite like to see other people's implementation of this method.

PHP

Comments

Hello. Thanks for the post, but I have a problem with the ajax feature with jquery.

It doesn't work in my website if it haven't the 'www.' before the name.

Example. www.mysite.com -> it works fine the ajax

mysite.com -> it doesn't work the ajax.

Does somebody know why??

Thanks!!

 

<a href="http://www.letter-example.com">Letter samples
</a>

Submitted by Miki on Mon, 02/14/2011 - 12:02

Permalink

Yes, the problem is because you are trying to violate the JavaScript same origin policy, meaning that you can't run JavaScript between one domain (or subdomain) and another. This table sums up things quite nicely.

Compared URLOutcomeReason
http://www.example.com/dir/page.htmlSuccessSame protocol and host
http://www.example.com/dir2/other.htmlSuccessSame protocol and host
http://www.example.com:81/dir/other.htmlFailureSame protocol and host but different port
https://www.example.com/dir/other.htmlFailureDifferent protocol
http://en.example.com/dir/other.htmlFailureDifferent host
http://example.com/dir/other.htmlFailureDifferent host (exact match required)
http://v2.www.example.com/dir/other.htmlFailureDifferent host (exact match required)
Philip Norton

Submitted by giHlZp8M8D on Mon, 02/14/2011 - 12:26

Permalink

Thank you for the explanation!

I have done some changes in my htaccess file, to redirect when the users don't put the 'www'

 

Thank you again.

Letter samples

Submitted by Miki on Mon, 02/14/2011 - 13:10

Permalink

Good article, I was hoping to use this to replace an iFrame. The page in question uses an iFrame to load a page from another website, however I only need the main content of the page loaded and not the top navigation bar. 

Will the jQuery load() function allow me to do this?

Thanks,

 

John

 

Submitted by AnonymousJohn on Wed, 02/23/2011 - 03:42

Permalink

Can I use this method to strip the navigation form a page I'm loading using?

Submitted by AnonymousJohn on Wed, 02/23/2011 - 04:09

Permalink

Thanks John! What your asking should be possible, as long as the content is contains within a selectable alea.

Philip Norton

Submitted by giHlZp8M8D on Wed, 02/23/2011 - 08:45

Permalink

Do you just have a demonstratin using  simple navigation links that display different content (paragraphs) on one page, no tabs, no php, just using Jquery (links only)?

Submitted by Anonymous on Tue, 09/13/2011 - 06:14

Permalink

Finally something that works. I think I've googled all the net these days and haven't found a script to load an external page in a div on the same page - yours does the trick.

Thank you very much!

Submitted by Portal Romanesc on Tue, 09/27/2011 - 12:21

Permalink

Hi thanks for this great article. Very very nice. One thing - I'm currently loading some aspx code into an IFRAME on a joomla (php) site - the site and webapp are on the same domain.

CMS: http://mydomain.com/index.php
IFRAME on front page: http://mydomain.com/webapp/default.aspx

Would the above approach handle this? Or should I walk away now? :)

Thanks in advance.

Submitted by John Lewis on Thu, 12/01/2011 - 10:52

Permalink

Theoretically, it should work as you state. An iframe will allow you to load content from virtually any resource. If your aspx code is generating HTML then it will get shown in your iframe.

The only point I would like to raise is that the main point of this article was to load content onto a page without an iframe ;). However, the code above should work in the same way. I think...

Philip Norton

Submitted by giHlZp8M8D on Thu, 12/01/2011 - 11:01

Permalink

Hi, This example what you explained is using AJAX in a Server. But I want to do the same functionality without using Server and Iframes.

Is it Possible? If yes, How ?

Submitted by Naveen Kumar on Thu, 12/08/2011 - 05:35

Permalink

Hi Naveen. This technique will work with any server side technology as it's a client side script that does all of the work really. You can replace this JavaScript calls with iframes, but the whole point of the article was to not use them.

Philip Norton

Submitted by giHlZp8M8D on Thu, 12/08/2011 - 09:11

Permalink

I am looking for a way to show taged content from a blog. The idea is to let the client update his blog. Then on the web page the viewer clicks on the link "surfboards for sale" and each post on the blog that is taged "surfboard" shows up. . . . . Or am I compleatly off track here?

Submitted by Jesse Willson on Fri, 12/23/2011 - 06:21

Permalink

Yes. I will work as long as you can call the correct URL and bring through the posts that way. I have no idea how blogger works though.

Philip Norton

Submitted by giHlZp8M8D on Fri, 12/23/2011 - 10:24

Permalink

I'm writing a crawler, and I need to load web pages into a temporary div element, using jQuery.load() method. However, using such patterns as 'url-of-the-page body' won't get the body section of the result. I think, jQuery only can embed permissable elements in parent elements. In other words, you can't load an entire HTML document, into a div element.

Submitted by Saeed Neamati on Sat, 01/14/2012 - 07:37

Permalink

Hi and thank you for the great information!

I was hoping to use this to replace an iFrame that I am using in a wordpress page also. The iframe is very slow and from all of my research I didn't think that you could do this. But I believe that it's what I need. I would love to able to add a few changes to the CSS of the ajaxed page also! 

Would someone please show me an example of how to load my external page into WP without having to use the iframe? I am not a JS developer like most of you but I do love my CSS. Any information would be greatly appreciated!

Thanks again,

Brent

Submitted by Brent on Thu, 01/19/2012 - 20:51

Permalink

Hi,

I am new to html and am trying to accomplish the following.

I have 12 html Pages (January through December) they are just well formed tables.

I want to load them into a div based on the user selection in a drop down. 

Can this be done?

As I said, I am new so please be gentle.

Gary 

Submitted by Gary Lee on Wed, 02/08/2012 - 07:25

Permalink
You'll want to do something like the following. This is in jQuery as well, although I haven't tested it!!
$('#selectElement').change(function () {
    var elementValue= $(this).val();
    $('#test').load('/' + elementValue + '.html', '', function(response, status, xhr) {
        if (status == 'error') {
            var msg = "Sorry but there was an error: ";
            $(".content").html(msg + xhr.status + " " + xhr.statusText);
        }
    });    
});
Philip Norton

Submitted by giHlZp8M8D on Wed, 02/08/2012 - 09:32

Permalink

Thank you very much for sharing. Definitely solved my problem.

Submitted by Alex John on Fri, 03/09/2012 - 02:25

Permalink

Hi,

Can I use it as login from?

if yes how?

Thanks

Submitted by Max on Fri, 03/09/2012 - 16:38

Permalink

Hi,

Thanks for this wonderful post.... congratulations....

I was trying to use this method, but i am missing the <script> code which contains the javascript from the url i am loading.

i googled and found out jquery filters that <script> code,

You are genious and must have some alternative to this , please let me know how to get that <script> code too...

Thanks in advance...

Submitted by vijay on Wed, 03/14/2012 - 14:01

Permalink

hi. i'm trying to load a file with jquery.

example: $('#list_products').load("products/list_products.php", { 'filtro': id, 'tipo' : 'search' });

in my personal computer  the products is loading correctly. in the server i see that is not passing the variables (filtro and tipo)

can you help me please.

personal computer : windows 7
server : linux 

Submitted by Anonymous on Sun, 03/25/2012 - 11:30

Permalink

Thanks for the comment Jake. All of the source code for this is right here on the page the zip file wouldn't contain anything else.

Looking at your example I would say that the JavaScript appears to be fine, it is the PHP script that appears not to produce any output. Try just echoing a string and seeing if that appears before trying to do more complex things with Google.

Remember that the Google example uses a POST request and therefore requires the second script which 'calls' the PHP file with the correct POST variables set.

Philip Norton

Submitted by giHlZp8M8D on Fri, 04/20/2012 - 09:15

Permalink

Also remember that the URL "/random_number.php" is an absolute URL and so points to a file on the root of the domain. If you are having trouble getting Try chaning the PHP file location to e.g. "random_number.php" (without the first slash) to make it a relative reference.

Philip Norton

Submitted by giHlZp8M8D on Fri, 04/20/2012 - 09:24

Permalink

Hi Philip,

  Its a nice article....Is ther any alternate for iframe to display iframe other website content as part of our page.

 

Thanks

 

Submitted by Selva on Mon, 04/30/2012 - 10:07

Permalink

hello thxx alot realy i'm like this effect thxx so much 

Submitted by فلام on Sat, 05/05/2012 - 18:37

Permalink
Hi, i love the idea! I'm looking at doing a similar thing, i was a wordpress page to show results from a realestate site and i was wondering how i would do all of this. I've tried a lot to figure out what to do but can't quite get a grasp on it. My coding knowledge is pretty basic. I would really appreciate it! Thanks.

Submitted by Guy on Tue, 05/08/2012 - 05:55

Permalink
Hi Phil, the script works an absolute treat and solves my problem with using iframes. I have one minor problem, the returned results should display a UK pound symbol '£' next to a price, but show a question mark '?'. I've added a doctype and charset iso-8859-1 to my test page, but I still see the '?' in the returned results. My test page is located under the same domain as the site it's getting the results from. Any thoughts really appreciated. Thanks Anthony

Submitted by Anthony on Tue, 05/15/2012 - 10:09

Permalink
A question mark on any web content is usually an indication of improper encoding. I would try setting the charset to utf-8 to see if that solve the issue initially. I think you'll still need to encode the pound sign properly as "&pound;" and not as the unencoded "£" on the original page.
Philip Norton

Submitted by giHlZp8M8D on Tue, 05/15/2012 - 10:28

Permalink
Thanks for the quick response. I'd tried UTF8, but unfortunately it didn't work. I suspected that the original encoding of the pound sign, might be the cause of the problem, which you've confirmed for me. I'm not sure there's anything I can do about it, as the page is using third party software. But I really appreciate your help and code. Many thanks.

Submitted by Anthony on Wed, 05/16/2012 - 10:22

Permalink
The content is not retrieved and the div tag remains empty when jquery noconflict is enabled so as to allow other plugins to work. If I remove jquery no conflict , the other plugins work perfect and this script will not work.

Submitted by ifayce on Tue, 06/12/2012 - 12:51

Permalink
Very cool, thanks for sharing. For fun I built the Google search tool loader. One problem though, links in my results list don't work. My domain's URL is getting prepended to the URL for the links in the Google search results. I.e. - a link to Microsft should be: http://www.microsoft.com/... But in my results list it is: www.mysite.com/url?q=http://www.microsoft.com...

Submitted by Pat on Thu, 06/14/2012 - 19:33

Permalink
My code is below and but it is not workingCould you please help me

Submitted by MSK on Fri, 06/29/2012 - 19:31

Permalink
Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept.

Submitted by Morris Davis on Mon, 07/30/2012 - 12:53

Permalink

I have a span in a form frmTest: Form in C# as below:

New

When the page loads, the span shows the value as "New" ( Type : New) I want to reload this span every 2 secs to get its value from the server as it keeps changing(diff possible values are New, Modify, Delete). I have been trying the following but no luck. Can you please help me with this?

My code:

setInterval(function(){ $('#types').load('frmTest.cs #types'); },2000);

Submitted by jue on Wed, 08/15/2012 - 17:23

Permalink
Hi, What I'm trying to do is a load a booking system thru an external link into an article. I used the code but still nothing happens. What I want to know is quite simple: is it possible to load an URL into my page using the above code? I don't need all the fancy loading gifs and CSS extraction options, just plain and simple loading the booking system into my page. For example, I want to load http://www.example.com into my page, how would the code look like? Thanks in advance!

Submitted by Marcel on Sat, 09/08/2012 - 11:05

Permalink
When i use load() function to load a page with Microsoft UpdatePanel control in it. The page is loaded OK.
In the page have a text box and button.
The first time i press button, it work well, but i press the button again then error happen.
The error is:
Sys.WebForms.PageRequestManagerServerErrorException: The state information is invalid for this page and might be corrupted.

Submitted by Em on Mon, 10/08/2012 - 11:13

Permalink
Sounds like the form you are trying to submit has a token based cross site request forgery prevention system. So when you submit the form the token is expired and the second request is prevented. You'll need to reload the entire form in order to get a new token.
I think...
Philip Norton

Submitted by giHlZp8M8D on Mon, 10/08/2012 - 11:21

Permalink
Thanks for the awesome tutorial. I have one query though. I wrote a small wepage which had few javascript lines in it. I found out that the onload even is not triggered when the page is rendered via onLoad while the jQuery(document.ready) function is triggered. Is there any way to make sure that initial scripts (onload) are executed too?

Submitted by Manish on Fri, 10/12/2012 - 10:53

Permalink
I wouldn't expect an onload event to run when it is rendered onto the page after the rest if the DOM has loaded. I haven't tested anything but I think the best way to get things working is to explicitly call a function either from within the load() function or chain it afterwards in the same way that I have done above with slideDown().
Philip Norton

Submitted by giHlZp8M8D on Fri, 10/12/2012 - 11:01

Permalink

Hi, Thanks for the post !

Can you tell me how to use jQuery in the loaded content, please? Is it possible? Because for me it doesn't work yet. Is there a possibility to communicate in jQuery between container and content?

Phil

Submitted by Phil06 on Fri, 11/09/2012 - 00:05

Permalink
Hi, This is really nice.. thanks a lot.. I have one doubt. can u tell me how to access the elements of webpage loaded in the div tag...

Submitted by sanjeev on Wed, 02/13/2013 - 08:23

Permalink
Hello, I love your information and sharing your knowledge. i have a question that i hope you can help me with? i want to take the demo you provided up top of this page and change it to load a specific search results link from another domain and have the results only displayed in the body section of one of my domain site pages. i need their navigation and crap out. just the search results from their body pulled into my body of the page. i have pasted the exact search results link to the content i am struggling to do this with. Can you please help me with using the code example you wrote above!!! thanks, Carrie In this search link below.... when you go to this link... the part of the page i need is only the area in white background displayed. and is it possible once implemented on my domain that the code updates itself from the other domain on refresh, reload, or just when the user lands their again on my site?http://www.ticketmaster.com/search?tm_link=tm_homeA_header_search&vid=9…

Submitted by carrie on Fri, 06/14/2013 - 18:37

Permalink
I am working on a project where I need to load a very large tree menu onto the sidebar of a page.I am using php to do that and it takes 'thousand years' to load,but when I use jquery.load it does not load at all.If I break the menu apart.Jquery load a part to a point and fires a browser error. I want to know how I could load a larger menu structure of mine into a webpage.

Submitted by Andrew Sam on Fri, 08/22/2014 - 11:53

Permalink
Wow, that was an eye-opening tutorial Philip.. I found the links in my results went to my/url?q=http://www.. Is there an easy workaround?

Submitted by Gary on Wed, 11/19/2014 - 12:21

Permalink
Hi Phil, I've stored a video on another domain and want to load it on my website (actually using an iframe). I want to give this video a few jquery and css touches but it's impossible through that JS security feature to manipulate that iframe. Your method to bypass the security feature storing it on your server seems perfect. Is it possible to "echo" the video file (absolut path) from the other domain and to "store" it on my server, calling it with Ajax-Load? I'm stuck on "echo-ing" the video file... Maybe I'm trying to create bullshit, I guess... XD Cheers

Submitted by Anime Subways on Sun, 03/29/2015 - 03:18

Permalink
I don't think you can straight up 'echo' the video file as it will probably be a few megs in size and will result in a large delay in returning the video file before it is loaded. You might be able to get past this by returning the output as soon as possible (via the PHP ob_flush functions) but even that might be very slow. You'll also need to take the user interaction into account and perhaps use connection_aborted() to see if the user still wants the video. Otherwise you might end up streaming the whole video when there is no one about to watch it. A better solution might be to embed the video onto your site directly through a video player or something.
Philip Norton

Submitted by giHlZp8M8D on Mon, 03/30/2015 - 16:56

Permalink
Hello! Firstly very good article, i'm wondering if someone could help me with problem. I'm using wordpress and i want to show another page over my page. I did try with iframe, and it kind of works. Other site is showing fullwidth and hight but after that iframe there is still my content shown when you scroll to the bottom. Is there a way to tell wordpress to show only iframe when there is one on the page (no old content just iframe)? Or there is another better solution with maybe lightbox or something like that? Thanks!

Submitted by Josip on Wed, 03/02/2016 - 10:07

Permalink
These provided information was really so nice,thanks for giving that post and the more skills to develop after refer that post. Your articles really impressed for me,because of all information so nice.

Submitted by jessica on Wed, 01/04/2017 - 13:31

Permalink

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
8 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

Generating Colour Palettes From Images In PHP

4th August 2024

A common web design pattern is to incorporate an image into the design of the page. This creates a tighter integration with the image and the rest of the page.

The main issue in designing a page around the image is that the colours of the page must match the image. Otherwise this creates a dissonance between the image and the styles of the site.

Read more

Validating XML Files With XML Schema Definitions In PHP

21st July 2024

XML is a useful format for configuration, data storage, and transmitting data from one system to another. As a human readable format that can be easily read by machines it quickly gained favor in lots of different systems as a mechanism for data storage.

Read more

Approximating Pi Using A Circle And A Square

26th May 2024

Pi day was a few weeks ago, but I came across this simple approximation of pi recently and decided to put together an example in PHP since it seemed pretty simple.

This approximation of pi centers around a real world example, but we can simulate this using some code.

Read more

Drawing A Parabolic Curve With Straight Lines In PHP

12th May 2024

A parabolic curve is a type of curve where every point is an equal distance from a focal point. There a number of different way to generate this sort of curve using math, but one of the simplest is to use straight lines to create the illusion of the curve.

Read more

Recreating Spotify Wrapped In PHP

17th March 2024

I quite like the end of the year report from Spotify that they call "Wrapped". This is a little application in which they tell you what your favorite artist was and what sort of genres you listened to the most during the year.

Read more