eire web design home page contact eire-web design eire web design and development site map
stepping on in business
• Welcome to Eire Web Design Ireland

Archive for October, 2007

CSS Hack !important

Monday, October 15th, 2007

In CSS is very easy to overwrite a rule you have created earlier, then you wonder why making changes to the rule doesn’t  apply to the page layout. 
One thing to know is the !important rule available since CSS1.
Adding !important after a command like this:

.div { margin-left: 5px;color:#ff0000!important;margin-left: 3px;}

will make sure that all browsers  will have a margin-left of 5px regardless of what appears after it, except IE (Internet Explorer)  which ignores the !important command gives a margin-left of 3px.

This can be very useful when you need to set relative margin as the display will differ from browser to browser.

IE, however, will respect the !important declarations if they are not in the same rule as below:

.div_font {color: red;!important;}
.div_font { color: blue; }

So whatever you asign this rule to the font color will be red not blue as in the second command. 

The first example above was a very useful CSS Hack for IE, however since IE7 has been released, the !important rule doesn’t have much effect any longer, as IE7 renders the page much like Firefox.

CSS Centering fixed-width layouts

Monday, October 15th, 2007

Do you ever wonder how you can center a containing div?
The use of “tables” or “center” tag makes the job a lot easier, but it will fail validation.
Another way of doing this is using CSS stylesheet.

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

#div_container{margin-left: auto;margin-right: auto;width:800px;}

The only problem with the above solution is that “#div_container” will also have the text centered.
To overcome this problem you have to specify the “text-align” tag as below:

body{padding:0px; margin:0px; text-align:center;} #div_container{margin-left: auto;margin-right: auto;width:800px;text-align:left;}

W3C Visual formatting model explains: “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal.
This horizontally centers the element with respect to the edges of the containing block.”

Ajax load content from another file using POST or GET

Monday, October 15th, 2007

These is a simple Ajax example that will load content into the page from another file without browser refresh.
05-Oct-2007 – We have updated the javascript to allow the use of forms to be submited using POST.

Click here for Demo » OR DOWNLOAD THE AJAX SAMPLE

How does it work?

First we need to create the javascript file with the following code:

var ewd_domain = 'http://www.eire-webdesign.ie/'; //set domain
var ewd_loading_img = ewd_domain + 'images/loading.gif';//set image path
var ewd_loading_msg = 'Loading Data...';//set loading message
var xmlhttp_obj = false;       

//create the XMLHttpRequest
function ewd_xmlhttp(){
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
xmlhttp_obj = new XMLHttpRequest();
}else if (window.ActiveXObject){ // if IE
try{
xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}    

}else{
xmlhttp_obj = false;
}
return xmlhttp_obj;
}    

//get content via GET
function ewd_getcontent(url, containerid){
var xmlhttp_obj = ewd_xmlhttp();
document.getElementById(containerid).innerHTML = '' + ewd_loading_msg;
xmlhttp_obj.onreadystatechange=function(){
ewd_loadpage(xmlhttp_obj, '', containerid);
}
xmlhttp_obj.open('GET', url, true);
xmlhttp_obj.send(null);
}       

function ewd_loadpage(xmlhttp_obj, content, containerid){
if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
}
}       

//functions for posted values from forms vis POST
function ewd_getcontent_post(url, content, containerid){
var xinput = content;
var xmlhttp_obj = ewd_xmlhttp();
document.getElementById(containerid).innerHTML = '' + ewd_loading_msg;
xmlhttp_obj.open('POST', url, true);
xmlhttp_obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp_obj.onreadystatechange = function() {
ewd_loadpage(xmlhttp_obj, content, containerid);
}
xmlhttp_obj.send(content);
}   

//convert form data sent to POST CONTENT
function ewd_submit_form(page_to,form_name,containerid) {
var content = ewd_convertFormDataToPostContent(form_name);
ewd_getcontent_post(page_to, content, containerid);
}       

function ewd_convertFormDataToPostContent(form_y){
var f=document.getElementById(form_y);
var content_to_submit = '';
var form_element;
var last_element_name = '';
for (i = 0; i < f.elements.length; i++){
form_element = f.elements[i];
switch (form_element.type){
// text fields, hidden form elements
case 'text':
case 'hidden':
case 'password':
case 'textarea':
case 'select-one':
content_to_submit += form_element.name + '=' + escape(form_element.value) + '&';
break;
// radio buttons
case 'radio':
if (form_element.checked){
content_to_submit += form_element.name + '=' + escape(form_element.value) + '&';
}
break;
// checkboxes
case 'checkbox':
if (form_element.checked){
// Continuing multiple, same-name checkboxes
if (form_element.name == last_element_name){
// Strip of end ampersand if there is one
if (content_to_submit.lastIndexOf('&') == content_to_submit.length - 1){
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
}
// Append value as comma-delimited string
content_to_submit += ',' + escape(form_element.value);
}else{
content_to_submit += form_element.name + '=' + escape(form_element.value);
}
content_to_submit += '&';
last_element_name = form_element.name;
}
break;
}//end switch
} //end for
// remove trailing separator
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
return content_to_submit;
}

Now create the page that will hold the content to be displayed (“content_ajax.php”):

	First we create the link that "onclick" will populate the div or span id - "div_populate".
	Make sure you have the javascript source "ajax.js" included into this file.

	• Get Data 1 »
	  
	• Get Data 2 »
or you can use a form to submit data (using "onchange" on the form input or "onclick" on the submit button):
Now and example using a form to post the data Here is the place where the data from the "content_ajax.php" page will be displayed. © Eire-Web Design Ireland

This is the code for the file that will be called:

$datax = $_POST['test'];
$datax1 = $_POST['test1'];
$datax2 = $_POST['test2'];
if($datax != "" || $datax1 != "" ){
echo "data posted: " . ($datax != "" ? "first input = ".$datax : "").
($datax1 != "" ? "second input = ".$datax1 : "").
($datax2 != "" ? "checkbox input = ".$datax2 : "checkbox input = unchecked")."";
exit();
}       

$data = "1";
if(isset($_GET['data']) && $_GET['data'] != ""){
$data = $_GET['data'];
}
if($data =="1"){
?>
 Welcome to Web Design Dublin Ireland - Eire-WebDesign.ie   This is the second link
}elseif($data == "2"){ echo "This is the second data that has been sent using GET."; }elseif($data == "3"){ $datax = htmlspecialchars($_GET['test']); echo "data posted: " . $datax; } ?>

Ajax – can I use it or not?

Sunday, October 14th, 2007

Quote from Wikipedia:
 ”Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications.
  The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change.
  This is meant to increase the web page’s interactivity, speed, and usability. ”
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

A while back I was wondering how can I make use of this technology and still have the website accessible by visitors that doesn’t have JavaScript enabled browser and can not make use of the XMLHttpRequest and also have the search engine spidering the website without any problems.

The solution I came up with was to create an instance of the XMLHttpRequest and store a cookie on the user computer with the value received.
If the instance is successfully created we store a cookie “xml_state” with the value “yes” for 1 day (24 hours), if not then a cookie “xml_state” with the value “no” will be set instead.
Then using the request cookie method we can handle how we are writing the “a href” tags.
I have this done using PHP, by creating another function to handle the way the links will be written.

Let’s dig in step by step.

// first create the XMLHTTP function
// Create XMLHTTP - Note: AJAX feature requires IE5.5+, FF1+, and NS6.2+
function EWD_createXMLHttp() {
if (!(document.getElementsByTagName || document.all))
  return;
  var ewd_ret= null;
  try {
    ewd_ret = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      ewd_ret = new ActiveXObject('Microsoft.XMLHTTP');
   } catch (ee) {
  ewd_ret = null;
  }
}
if (!ewd_ret && typeof XMLHttpRequest != 'undefined')
  ewd_ret = new XMLHttpRequest();
  return ewd_ret;
}

second will create the function that will handle the cookie

function EWD_SetCookie(cookieName,cookieValue,nDays) {
  var today = new Date();
  var expire = new Date();
  if (nDays==null || nDays==0) nDays=1;
  //we set the cookie to one day just in case the visitors decides to make changes to the browser
  expire.setTime(today.getTime() + 3600000*24*nDays);
  document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}
//end of set cookie     

//check for XMLHTTP support
var xmlHttp = EWD_createXMLHttp();
if (xmlHttp){
  EWD_SetCookie("xml_state","yes",1);
}else{
  EWD_SetCookie("xml_state","no",1);
}
//end of check for XMLHTTP

this is the php function that will handle the cookie state and create the url

function link_url($url_link,$div_name){
  if(@$_COOKIE['xml_state'] == "yes") {
    //we can use ajax
    $url_link = '$url_link' onclick='ajax_function_that_will_make_the_request($url_link, $div_name); return false;'
    return $url_link; //return ajax type a href
  }else{
    return $url_link; //return normal a href
  }
}

then on the page you will be using the above function to handle how the a href tag are written to the page:

link_url($url_link,$div_name)
Links...

Chicklets...
  • http://www.eire-webdesign.ie/blog/feed/
    http://www.eire-webdesign.ie/blog/feed/
    Google Reader or Homepage
    Add to My Yahoo!
    Subscribe with Bloglines
    Subscribe in NewsGator Online
    add to msn
    Add to My AOL
    Add to Technorati Favorites!
    pageflakes
    windows live