R
E
S
O
U
R
C
E
S
       Home      Products & Services      Contact Us      Links


WebHatchers will design & develop your site for you.
_______________________

Website Menu Heaven: menus, buttons, etc.
_______________________

Send us your questions.
_______________________

site search by freefind
_______________________

HOME
SEO, Google, Privacy
   and Anonymity
Browser Insanity
JavaScript
Popups and Tooltips
Free Website Search
HTML Form Creator
Animation
Buttons and Menus
Counters
Captchas
Image Uploading
CSS and HTML
PHP
AJAX
XPATH
Website Poll
IM and Texting
Databases—MySQL
   or Not MySQL
Personal Status Boards
Content Management
   Systems
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs




Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement



Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

PHP Based Test of Getting Website Info and Thumbnails Dynamically Using Separate Links Per URL and Ajax

To learn the most from these 6 test pages, first test each of the test scripts below, and then read the Info on each of these tests.



For more on getting website info dynamically see INFO on test1.php: getting website info dynamically.

This test shows the viability of the use of not just pop-up thumbnails, but also the various PHP functions to get info dynamically from websites, on the fly. It also shows that the script catfight has been stopped AND the page reloads are gone—finally! As we promised, we've got your back! There's no more flicker, reloading, or anything else bothersome. It's smooth as a baby's behind. And all because Ajax came to the rescue.

What is Ajax? AJAX means Asynchronous JavaScript and XML, but it isn't a programming language. It is a new way to use existing languages. When one uses Ajax, he is exchanging data with a server and updating parts of a web page, but without reloading the whole page! For a great example of Ajax in action, see http://www.w3schools.com/Ajax/ajax_aspphp.asp. Happily, one need not learn XML or even XHTML to use Ajax, although there's a whole ton one can do if one does learn those. But those are not of interest to us currently so let's stay with the problem at hand. Incidentally, Ajax can be on regular HTML pages—you need not go to XML or XHTML.

Re-run test4.php: getting website info and thumbnails dynamically using separate links per URL and re-read INFO on test4.php: getting website info and thumbnails dynamically using separate links per URL so you see what we did to get the website info into the boxes as well as pop-up thumbnails. When you run test6.php: getting website info and thumbnails dynamically using separate links per URL and Ajax you see the huge difference avoiding page reloads and script catfights makes on performance. But you need to focus on what exactly we did differently in test6 that didn't happen in test4.

Here's the deal: to use a PHP script on the same page as the rest of the code, we're stuck with either POSTs and page reloads or GETs and page reloads. Neither will work if we want smoothness. We need an external PHP script and Ajax to avoid the reloads. Notice that the test4 page reloads itself, sending the URL info to the PHP GETs on its own page. The test6 script sends us not to the PHP script via page reload but to the Ajax routine, getmeta(), which is JavaScript so it can do DHTML with no reload. The getmeta() script vanishes the info DIV (by using innerHTML for replacing the contents with a space and running the metano() routine prior to running the getmeta() script) if the URL is "0" but if it's valid, it sends an xmlhttp request to see if the server is ready, and when it is, it sneaks into the PHP routine with the URL and runs the script, getting an xmlhttp response. It uses innerHTML to stick this response to the xmlhtml request into the info DIV.

In summary, then: To update boxes using page reloads and on-page PHP is okay only if the reloads will be infrequent and the changes minor. Otherwise, use Ajax and have your PHP script be an external file and you can change page data with no unsightly page reloads. The reason we think of it as "exchanging data with a server" is that we send a bit of data from the browser, like a URL, to the script on the server and the script returns a data response to our browser for us to use to update our page using innerHTML. It's a simple enough concept, made possible only because it's what Ajax was designed to do, using xmlhtml commands.

We avoided script catfights by keeping the links for thumbnails separate from the links for info boxes. We avoided reload flickers by using Ajax instead of page reloads. It all works. Note that the final HTML code below is the displaying of the links themselves. This test page worked to prove that getting website info and thumbnails dynamically—on the fly—is viable. If this was a regular website directory, it would of course be using MySQL databases and other elements of the CMS configuration protocol, not a few sample links. And you may prefer to store images and create pop-up thumbnails without relying on a service.

<html>
<head>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.d {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:#ddd; border:1px solid #000; font: 11px Verdana;}
.e {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:transparent; border:none; font: 11px Verdana;}
.f {position:absolute; left:330px; width:350px; top:70px; padding:10px; background-color:#eee; border:1px solid black; font: 13px Verdana;}
.b {font:bold 13px Verdana;}
.g {position:absolute; left:228px; width:101px; top:70px; padding:10px; background-color:#bbb; border:1px solid black; font: 13px Verdana;}
.t {position:absolute; left:228px; width:451px; top:44px; padding:3px; background-color:#bbb; border:1px solid black; font:bold 15px Verdana;text-align:left}
</style>
<style type="text/css" media="screen">@import "websnapr.css";</style>
<script type="text/javascript" src="websnapr.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--

function metano(){e=document.getElementById('k');e.style.display='none';}

function metayes(){e=document.getElementById('k');e.style.display='block';}

var f = "0";
var q = 0;
var yy = 0;
var x = 0;
var y = 0;
var ys = "0";
var url = "0";
var yss = "0";

var urls=new Array("http://www.theliquidateher.com/","http://www.css-resources.com/","http://www.mcsii.biz/", "http://www.aglasshalffull.org/","http://www.bicycleclothing.com/", "http://fireprotection.name/","http://www.criegergoodwin.com/",
"http://4homedesign.wordpress.com/", "http://www.aglasshalffull.org/webhatchers/webhatchers.html",
"http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm");<BR>

mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}

function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=getCoords;}

function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
if (y<115&&y>85){yy=y;q=0;}else{q=parseInt((y-80)/32);yy=y-q*32;}
if (y>(80+32*urls.length)){return;}
if (x<670&&x>340&&yy>85&&yy<100&&f=="0"){f="1";yss=y-20;url=urls[q];e=document.getElementById("k");e.style.top=yss+"px";metayes();getmeta(url,f);}
if ((x>670||x<340||yy<85||yy>100)&&f=="1"){f="0";yss=y-20;url="0";e=document.getElementById("k");e.style.top=yss+"px";metano();getmeta(url,f);}
}

function getmeta(url,f){
if (url=="0"){ if (document.getElementById("k")){document.getElementById("k").innerHTML=" ";return;}}
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("k").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","meta.php?url="+url+"&f="+f,true);
xmlhttp.send();
}

// -->
</script>
</head>
<body onLoad="startmouse(),metano()">

<div id='k' class='d' style='top:70px'></div>

<div class='t'>Thumbnail &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; Info</div>

<div class='g'><a HREF="http://www.theliquidateher.com/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.css-resources.com/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.mcsii.biz/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.aglasshalffull.org/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.bicycleclothing.com/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://fireprotection.name/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.criegergoodwin.com/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://4homedesign.wordpress.com/" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://www.aglasshalffull.org/webhatchers/webhatchers.html" target="_blank" class="websnapr">Thumbnail</a>
<br><br><a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" target="_blank" class="websnapr">Thumbnail</a></div>

<div class='f'>

<a HREF="http://www.theliquidateher.com/" target="_blank">http://www.theliquidateher.com</a>

<BR><BR><a HREF="http://www.css-resources.com/" target="_blank">http://www.css-resources.com</a>

<BR><BR><a HREF="http://www.mcsii.biz/" target="_blank">http://www.mcsii.biz</a>

<BR><BR><a HREF="http://www.aglasshalffull.org/" target="_blank">http://www.aglasshalffull.org</a>

<BR><BR><a HREF="http://www.bicycleclothing.com/" target="_blank">http://www.bicycleclothing.com</a>

<BR><BR><a HREF="http://fireprotection.name/" target="_blank">http://fireprotection.name</a>

<BR><BR><a HREF="http://www.criegergoodwin.com/" target="_blank">http://www.criegergoodwin.com</a>

<BR><BR><a HREF="http://4homedesign.wordpress.com/" target="_blank">http://4homedesign.wordpress.com</a>

<BR><BR><a HREF="http://www.aglasshalffull.org/webhatchers/webhatchers.html" target="_blank">http://www.aglasshalffull.org/webhatchers/webhatchers.html</a>

<BR><BR><a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" target="_blank">http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm</a>

</div>
<!--
link-preview v1.4 by frequency-decoder.com is used in this page

Released under a creative commons Attribution-ShareAlike 2.5 license (http://creativecommons.org/licenses/by-sa/2.5/)

Please credit frequency-decoder in any derivative work - like this page is.

You are free:

* to copy, distribute, display, and perform the work
* to make derivative works
* to make commercial use of the work

Under the following conditions:

by Attribution.
--------------
You must attribute the work in the manner specified by the author or licensor.

sa
--
Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.

* For any reuse or distribution, you must make clear to others the license terms of this work.
* Any of these conditions can be waived if you get permission from the copyright holder.

References:

Wesnapr: http://www.websnapr.com
Dustan Diaz: http://www.dustindiaz.com/sweet-titles-finalized
Arc90: http://lab.arc90.com/2006/07/link_thumbnail.php
-->

</body>
</html>