CoderLab’s Blog

Okay, the forum is live. Feel free to join and ask your questions or contribute helping others.

Best!

J

I’m planning to add a forum to my site. This will be done on a trial basis and will continue only if the forum is being utilized.

Like any other web development forum, its purpose will be to try to help people who can’t find an answer to a question they may have. If I know such answer, I will gladly post it on the forum.

Also, if you have a question on any of the articles that I have written on this blog, please feel free to use the forum to ask your question.

The forum will require you to register. Sorry, I know that you might only have one question and you would rather not to register but, to avoid spam, registration is required.

If you would like to collaborate and enjoy helping others, you’re more than welcome to register and start helpin’! .

Hopefully, the forum will be a place where we all can learn from one another.

Cheers!

———

Si gusta, usted puede leer la versión en español de este artículo.

In my original post, Using the innerText Property in Firefox, I wrote my example using document.all to determine when to use innerText or textContent.

Because the main purpose of that post was to explain to the reader that Firefox does not support the innerText property but the textContent property, I failed to consider other browsers… yes, shame on me! (thanks Paul for bringing this to my attention).

You see, there are browsers that although don’t support document.all, they DO support the innerText property: Safari and Konqueror.

So, it is more efficient to check if the innerText property is supported by the user agent (thanks, Matthias). The way I do it is like this:

var hasInnerText =
(document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
var elem = document.getElementById('id');
var elem2 = document.getElementById ('id2');

if(!hasInnerText){
    elem.textContent = value;
    elem2.textContent = value;
} else{
    elem.innerText = value;
    elem2.innerText = value;
}

Why am I using document.getElementsByTagName("body")[0]? Well, because, as you know, document.getElementsByTagName returns an array of elements with that tag name, and since there’s only ONE body tag, I’m calling the first and only index of that array at once. This is so, as you can see in the example above, if you have more than one element that you need to assign a value to.

I have an example. If you wish, check the source out to see how it works.

Compatibility:

• Linux:
  • Konqueror 3.5.2
  • Firefox 1.5.0.1
• Mac X:
  • Safari 2.0.3
  • Camino 1.0
• Windows:
  • Firefox 1.5.0.2
  • Opera 8.54
  • Internet Explorer 6
  • Internet Explorer 7.0.5346.5 Beta 2

Remember, this is one way to do it. Cheers!

After reading Justin Koivisto’s great article: Normal Display of PNG Alpha Transparency with MSIE and reading his PHP code, I said to myself: “myself, there should be a much simpler (lazy, if you will ) way to accomplish this”. True, I could just copy, paste and use his code, modify the .htaccess file (or add the MIME type to the Apache server) but still…

Another approach is Bob Osola’s JavaScript script (this is pretty cool too) found in his article: The PNG problem in Windows Internet Explorer.

Personally, I wouldn’t use more than 2 or 3 images on a page, so I believe the use of CSS will do.

I have an example where you can see the results (please see the page source to see the code). The drawback of this approach (as it is written right now – using the background-image property) is that no image(s) will be displayed if the user has CSS disabled.

Again, if you will have lots of .png images and don’t want to have a bunch of CSS classes, you’re better off using Koivisto’s or Osola’s approach.

CSS Compatibility

• Firefox 1.5 (Win XP and Linux)
• Internet Explorer 6 (duh!)
• Opera 8.51
• Konqueror 3.5.0

I don’t have Safari but my guess is that it will work

Enjoy!

I haven’t been able to update this blog for quiet some time due to some projects I’ve been working on.

I do have a couple of articles I want to post. One of them is how to parse XML strings in Firefox and IE. This is something that took me some hours to figure out because even though there are some tutorials out there explaining how to do this, they didn’t really work for me – and probably I’m not the only one who had this ‘problem’. So, I hope someone will find it useful.

Additionally, I will be posting articles on PHP and MySQL as well… not just JavaScript and CSS stuff

Finally, I would like to share with you something that my C++ teacher used to tell us:

“Remember, in programming there is always more than one way to accomplish something; the more efficient, the better”.

Happy New Year!

Note: By mistake I deleted the original post (dated 08.08.05), so I’m posting it again

While I was working on a big project at work, I happened to use CSS a lot and gained a bit of experience and a better understanding on how to manipulate elements and all that stuff.

Well, by doing lots of ‘experiments’ I came up with a technique (which, by the way, I haven’t seen anywhere else) that would make a page have its header and footer to the top and bottom of the browser window as if it was made using tables. I have an example where you can see what I mean.

The layout, consists only of a header, contents and footer. This is just the ‘begining’ because I am still experimenting to expand this technique to use it with columns too.

Now going back to the topic, in my research to find a way to accomplish what I wanted, I always found examples where the container would hold the header, contents and footer… but this wouldn’t produce the results I wanted.

By the way, although I’m not a writer, I will do my best to explain this technique; please bear with me.

This technique consists of placing the header and the contents inside the container only. The footer will be placed outside the container; this will allow us to ‘push’ the footer all the way down and manipulate its position.

In the definition of the container id, we define a height of 100% for Internet Explorer and create a filter for Firefox and other CSS2 compliant browsers like so:

html>body #container {
   height: auto;
   min-height: 100%;
}

#contents{
   padding: 10px 10px 100px 10px;
}

#footer{
   position: relative;
   bottom: 0;
   background-color: #f90;
   margin: -100px auto 0 auto;
   height: 100px;
   width: 760px;
}

At some point, people ask themselves “How can I have two submit buttons with different actions in one form?” Well, the approach I’ve used to accomplish this task is to ‘emulate’ the submit buttons with regular button controls and changing the form action based on what button was clicked.

In the following example I have a text field and 3 different buttons that will send the string to be searched to Google, MSN or Yahoo depending on what button the user clicks.

The Code

So, the JavaScript looks like this:

<script type="text/javascript">
<!--
    function IsBlankField(field){
	var j = 0;
	var chr;

	for(j; j < field.length; j++){
	    chr = field.charAt(j);

	    if(chr != "" && chr != " " && chr != "\n" && chr != "\t"){
		return false;
	    }
	}

	return true;
    }

    function SendTo(id){
        //shortening form elements
        var myForm      = document.getElementById('myForm');
        var txtSearch   = document.getElementById('wrdSearch');
	var srchURL;    // this variable will hold the URL of the search engine to be used
        var srchVar;    // this variable will hold the value of the text field 'name' which will hold the string to be searched 

        if(IsBlankField(txtSearch.value)){
            //if the form doesn't validate, send this alert
            alert("there's nothing to search for!");
        } else{
            if(id == "google"){
		srchURL = "http://www.google.com/search";
		srchVar = "q";
            } else if(id == "msn"){
		srchURL = "http://search.msn.com/results.aspx";
		srchVar = "q";
            } else{
		srchURL = "http://search.yahoo.com/search";
		srchVar = "p";
            }

            //adding the attribute name and values to the form and text field elements
	    myForm.setAttribute("action", srchURL);
	    txtSearch.setAttribute("name", srchVar);
	    myForm.setAttribute("target", "_blank"); //this, of course, will open a new browser window
	    myForm.setAttribute("method", "get");

            myForm.submit();           

        }
    }
//-->
</script>

And the HTML part looks like this:

<form name="myForm" id="myForm">
    Search: <input type="text" id="wrdSearch"/>
    <input type="button" name="google" id="google" value="Google" onClick="SendTo(this.id)"/>
    <input type="button" name="msn" id="msn" value="MSN" onClick="SendTo(this.id)"/>
    <input type="button" name="yahoo" id="yahoo" value="Yahoo" onClick="SendTo(this.id)"/>
</form>

Explanation

In the JavaScript, the IsBlankField(field) function takes as its argument the text field value and will check if it is empty or has space, new line or tab characters. If it does, the function will return true and the form will not validate.

if(IsBlankField(txtSearch.value)){
    //if the form doesn't validate, send this alert
     alert("there's nothing to search for!");
}

The SendTo(id) function takes one argument (the button id) so that we know what button triggered the event. Then we will add the attributes, with the correct values, to the form and text field elements using the DOM setAttribute() method. As you can see in the code sample, this method takes two parameters: the attribute name and the attribute value.

function SendTo(id){
    ....
    ....
    ....

    myForm.setAttribute("action", srchURL);
    txtSearch.setAttribute("name", srchVar); //this will add the name attribute to the text field element
    myForm.setAttribute("target", "_blank");
    myForm.setAttribute("method", "get");

Then, we submit the form.

    myForm.submit();
    ....
    ....
}

In the HTML, notice that the form does not have its name, action and method attributes (nor the text field has its name attribute). As I explained before, they are being added with the DOM setAttribute() method.

<form name="myForm" id="myForm">
    Search: <input type="text" id="wrdSearch"/>
    ....
    ....
</form>

See the demo.

Compatibility

This will work on Firefox 1.0.7, IE 6, Opera 8.01 and Konqueror 3.4.2 (I haven’t tested this on Safari, but most likely it’ll work )

That’s it! Hope this can help to get you started if you ever need to have 2 or more ‘submit’ buttons on one form. And remember, this is one way to do it

J