WebStylePosition

a few year ago, i have discovered ( like a lot of people) the power of a new concept : AJAX, which use a particulary object of javascript library, the XMLHttp object.

With that you could easily get a asynchronous request with your server ( for your sql request by exemple).

But the concept is that you don’t need to load any page to get result, it’s really great!

here we will see an example and the entire code of a function which enables you to use Ajax when you want. So let’s go!

here the ajax function code:

function ajaxManager(){
var args = ajaxManager.arguments;
switch (args[0]){
case “load_page”:
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
el = document.getElementById(args[2]);
if (x.readyState == 4 && x.status == 200)
{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
el.innerHTML = x.responseText;
}else{
el.innerHTML = “<div><center><img src=’ajax-loader.gif’ /></center></div>”;
}
}
x.open(”GET”, args[1], true);
x.send(null);
}
break;
}
}
</script>

To use this function, it’s very easy:

example on a click
<a href=”#” onclick=”ajaxManager(’load_page’, ’script/myscript.php’, ‘containerWhereIdisplaythe result’)”>
print hello
</a>

here the result:

print hello


You see it works!

to get a better resut, you can use now other javascript function and css tricks to change the display of your result with opacity ( or filter for IE ), or visibility attribute for example!

if you need more tips to use ajaxManager, please contact me or leave a comment

here the source of ajaxManager.js and the image ( to load animation)

Share This

to create some shadows, thers are several alternatives, like images or filter (in IE), but there is another solution. It is very basic but works well.
here an example:

In fact it’s very simple:

here the XHTML code:
There are a lot of tag available to do that…

<dl class="container">
<dd class="shadow"></dd>
<dd class="contentBox"></dd>
</dl>

And here the css:

.container{
position:relative;
width:110px;
height:110px;
}

.shadow{
position:absolute;
top:4px;
left:4px;
background-color: #333333;
width:100px;
height:100px;
}

.contentBox{
position:absolute;
top:0px;
left:0px;
background-color: #ffffff;
border: 1px solid #333333;
width:100px;
height:100px;
}
it’s really basic but it works every time

Share This

    Hi everbody,

This is my real first experience about blogging, and i hope th will be great!

Let me introduce myself:

my surname is dji, i work in a high Tech Company named ENENSYS Technologies, where i am developper in ERP (openSource based) and webDesigner/webMaster.
I love my job! it is the best i have never got!

I have several experience in web language and i am almost a expert in PHP, FLEX, CSS and javascript/ajax.

By blogging i will try to give you lot of tips and examples about web development.

So here we go and enjoy!

Share This