Archive for the “HTML” Category

Today afternoon on any seach on google.com the user was unable to click any of the results since google said it has interstitials. I mean strange, very strange…. all of them?

For those of you that don’t know what an interstitial is, it’s an intermediate page shown before the desired page, usually used to advertise something.

Here is the proof that it was either a hack either a very poor programming:
– A search for word “google“:
badgoogle

– If i am clicking the link for Google.com, I’ve got: “Warning – visiting this site may harm your computer!“:
badgoogle2

Now after more than half an hour Google is working well again… hopefully this will not happen again in the future…

Andrei

Tags: , ,

Comments No Comments »

Did you ever want to check a website as it was 1 year ago for example? I do want, because lots of websites that I initially developed were redesigned during the years and it was nice to find my work in the archive.
How it’s working? It’s a search engine that takes a snapshot of every website on a regular basis, normally every month.
Where? At: http://web.archive.org

Lots of people are asking me about MPMCostumes.com. They decided to remake the website with their initial partners, even that with my platform they sold more than 20K USD in a few months. Unfortunately on http://web.archive.org the images and flash animations do not appear, but you still can check it as it was 2 years ago.

Tags: , ,

Comments No Comments »

Web 2.0 is everywhere, lot of people pretend that they are developing web 2.0 applications, but not all of them succeed. I will not make a review here, but just want to unveil some tools that will help building web 2.0 web sites.

1. The fundamental of web 2.0 is Ajax, which is no more than reloading just parts of the page via JavaScript without reloading the whole page. In order to use Ajax on-the-fly you need to use Prototype JavaScript Framework. Prototype also Read the rest of this entry »

Comments 1 Comment »

HTML emails….. hmm, not such a good idea.
I am not such a big fan of HTML emails, because I am assaulted by tens of such emails daily, most of them spam ones. And using Microsoft Outlook as email client, it ask me to download (or not) pictures from the server. This could be a bad idea sometimes, because harmful code could be be hidden in image files today (especially GIF files).

I was hired to make a newsletter module for one website and first I started to search how to make this.
The steps are below.

1. Create the HTML page for newsletter.
2. Take care to have the CSS and JS embedded in the HTML file and not outside the file.
3. Replace the relative location of image files with absolute location. E.g:
if you have:
[code lang=”xml”]
Coming Soon
[/code]
you must replace with:
[code lang=”xml”]
Coming Soon
[/code]
Read the rest of this entry »

Comments No Comments »

Typical formatting of all HTML 4.0 FORM tag has a strange behavior when it contains a table cell inside. A strange vertical space appears after the FORM, even there is no <BR> or something else there.
Here is the a typical behavior:

Email:

and the code is:

<table style="text-align: left; background-color: #336699; width: 300px;" border="1" cellpadding="2" cellspacing="0">
    <tr>
      <td>
      <form name="example1">
        <table style="text-align: left; background-color: #ffffff; width: 100%;" border="1" cellpadding="2" cellspacing="0">
            <tr>
              <td><small><span style="font-family: Tahoma;">Email:</span></small></td>
              <td><input name="text1" value="just a test"/></td>
            </tr>
            <tr>
              <td rowspan="1" colspan="2"><input name="Submit" value="Submit" type="submit"/></td>
            </tr>
        </table>
      </form>
      </td>
    </tr>
</table>

Read the rest of this entry »

Comments No Comments »

Nowadays everybody talks about Ajax. To be truly honest, I thought that is something extremely difficult, but it is not.
It is no more than a programming technique (Asynchronous JavaScript and XML) in order to load external info in DIVs, without reloading the whole page (Gmail users probably knows best what I’m talking).

The reason why it was not widely used was that the XMLHttpRequest object is not supported by all browsers. Internet Explorer has his own object called XMLHTTP (as an ActiveX object).
Since all new browsers have this facility, this technology (I think that calling this “Language” is not fair) exploded.

First of all we need to define some javascripts to create the object and handle the request. For this particular example, I used another javascript function to make the request.

<script language="javascript"  type="text/javascript">

        //cross-browser object creation function
        function createRequestObject() {
                var ret;
                //read the user’s browser
                var browser = navigator.appName;
               
                //Internet Explorer has his own object
                if(browser == "Microsoft Internet Explorer"){
                        ret = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else{
                        ret = new XMLHttpRequest();
                }
                return ret;
        }
       
        //create a request object
        var http = createRequestObject();
       
        //you will call this function
        function sendRequest(action) {
                //here’s the catch – call an external page
                http.open(‘get’, ‘req.php?action=’+action);
                //wait until the request is completed
                http.onreadystatechange = handleResponse;
                //finalize the request
                http.send(null);
        }
       
        //function that handle response state changes
        function handleResponse() {
                //fires only the object change to state 4
                if(http.readyState == 4){
                        //get the text from the external procedure
                        var response = http.responseText;
                        var update = new Array();
       
                        //parse the text
                        if(response.indexOf(‘|’ != -1)) {
                                //response should be ‘divID|value"
                                update = response.split(‘|’);
                                //update the element with the divID with the value
                                document.getElementById(update[0]).innerHTML = update[1];
                        }
                }
        }

</script>

After this we need to call sendRequest function from HTML, just like this:

<a href="javascript:sendRequest(‘currentDateTime’)">update time</a>

As you see, this example get the date from an external script (req.php), and return a string with the id of the DIV that will be updated and the value of the DIV, separated by a pipe:
Below is the entire code from req.php. It’s easy, don’t it?

<?
  //test the action from request
  switch($_REQUEST[‘action’]) {
        case ‘currentDateTime’:
                //return the divID and the value separated by a pipe
                echo "currentDateTime|".date("d/m/Y h:i:s");
        break;
  }
?>

In the original page we need a DIV to be filled with external info

<div id="currentDateTime">
</div>

The whole code from HTML file is:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax demystified</title>
<style type="text/css">
A {
  color: #336699;
  text-decoration: none;
  font-weight: bold;
}

A:hover {
  color: #FF0000;
  font-weight: bold;
}

BODY {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
}

.mark {
  color: #FF0000;
  font-weight: bold;
}
</style>
<script language="javascript"  type="text/javascript">

        //cross-browser object creation function
        function createRequestObject() {
                var ret;
                //read the user’s browser
                var browser = navigator.appName;
               
                //Internet Explorer has his own object
                if(browser == "Microsoft Internet Explorer"){
                        ret = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else{
                        ret = new XMLHttpRequest();
                }
                return ret;
        }
       
        //create a request object
        var http = createRequestObject();
       
        //you will call this function
        function sendRequest(action) {
                //here’s the catch – call an external page
                http.open(‘get’, ‘req.php?action=’+action);
                //wait until the request is completed
                http.onreadystatechange = handleResponse;
                //finalize the request
                http.send(null);
        }
       
        //function that handle response state changes
        function handleResponse() {
                //fires only the object change to state 4
                if(http.readyState == 4){
                        //get the text from the external procedure
                        var response = http.responseText;
                        var update = new Array();
       
                        //parse the text
                        if(response.indexOf(‘|’ != -1)) {
                                //response should be ‘divID|value"
                                update = response.split(‘|’);
                                //update the element with the divID with the value
                                document.getElementById(update[0]).innerHTML = update[1];
                        }
                }
        }

</script>
</head>

<body onload="javascript:sendRequest(‘currentDateTime’)">
        This page shows how Ajax is working. Is is nothing fabulous here.
       

 Click here for
         <a href="javascript:sendRequest(‘currentDateTime’)">update time</a>
          <div id="currentDateTime" class="mark">
          </div>
       
Nothing else but the date and time is updated.
       

        &copy;2006 <a href="mailto:andrei@webxpert.ro">Andrei DANEASA</a>
</body>
</html>

If you want to see this example working and test it, click here.

*This is not intended to be a complete tutorial of Ajax, but it covers the main functionalities. The rest is only programmer’s imagination.

Andrei
http://www.webxpert.ro

Comments No Comments »

*You could probably also want to read the second version of this article here

Did you ever want a fancy textbox like this one ?

Rounded-border textbox

I’m sorry, but HTML and CSS does not support this kind of appearance. You should use a trick in order to look like this by creating a background with a rounded textbox drawn. Then you should create a html textbox input with no border, smaller than the drawn textbox.
The CSS style for this textbox is the following:

.textbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        margin: 0px;
        padding: 2px;
        border: 0px none;
        width: 150px;
}


Andrei
http://www.webxpert.ro

Read also
%RELATEDPOSTS%

Tags:

Comments No Comments »