I do not often have a use for the select element in front end web design. In this case, however, I was creating a user interface for a back end product control panel. It needed to be very compact with a lot of options packed into a small place. I ran into a problem when I needed to group four select elements together. The select elements all needed to be set to multi. Everything was fine with the exception of Internet Explorer 7 (big surprise!). IE would “leak” the contents of the select element outside of the element spilling into the surrounding div whenever it was floated in a div. I have not yet discover the exact conditions under which this happens as I was in a time crunch.

I spent about 20 minuets searching the Internet for someone who had come across the same problem but found nothing. So I thought I had better post how I decided to deal with this. Before I go on, I would like to mention that I did find a very good post by Nicholas Rougeux, called “Check it. Don’t select it“  . It is worth a look as it may be a better alternative in your case.

Cutting through all the “chase”, it boiled down to a rather simple fix. The only thing I could do was to encase the select multi in a div that had overflow:hidden. Note that this is not the setting of overflow:hidden on the select element set with multi. The overflow:hidden setting is on the div that immediately surrounds the select element set to multi. In this way, the garbage data that ie was leaking out from the element would be hidden away from view.

So, for what it’s worth, I hope this little post will help someone out there who is suffering from the woes of Internet Explore. Oh, and if you have any answers or better solutions, by all means contact me. I’m happy to share and be enlightened.

Tags: CSS, User Iterface Design, Web Design by admin
No Comments »

How’s that for a long title? I just wanted to make sure that the desperate souls in need would be able to find what they are looking for. If you are a web developer, you must deal with Internet Explorer. If you’re developing on a Mac, that can be even more of a pain the the already agonizing ordeal. Here is a little something to make it easier, thanks to MAMP.

MAMP is a program that helps you run a server on your MAC. “But, I already can run a server on my MAC!”, you exclaim. True, but there are some really nice organizational features about MAMP (even the FREE version) that makes it worth checking into. That is another post. For now, I’m going to tell you a simple way to get IE as viewed from Parallels to “see” your local web site(s) you may be developing. This makes trouble shooting, especially where CSS is concerned, much faster and easier. Hey, I’m all for anything that makes dealing with IE easier.

For this post, I assume you have decided to install MAMP and have successfully done so (It’s easy, by the way) and you have also decided to use Parallels and have it installed.

Take a Look at your MAMP console. Do you see where it says “Preferences” ?

Press the preferences button on the MAMP console.

After clicking on the “preferences” button, you will then click on the “ports” button. It should look like this.

Notice the port number of MAMP

Notice what the port number is where it says “Apache Port”. You will use this in you URL in IE. The port number is almost always going to be 8888 unless you have changed it for some reason.

OK, now go to you MAC’s “System Preferences”. Not to insult your intelligence, but, in case your a newbie or just a bit flustered at the moment, you get there by clicking on the little apple in the far upper left corner of your screen. The resulting pane should look like this.

Notice your local IP address

Do you see the IP Adress in the middle of this pane?

After opening Internet Explorer in Parallels, type the following address.

address to type in Internet Explorer

Did you notice that it is a combination of your local IP and the MAMP port separated by a colon? If everything else is working as it should, then this will show you your local site from within the “Sites” folder just under your “Home” on your MAC.

In another post coming soon, I will tell you how to set up multiple sites with the free version of MAMP. Its easy and makes for a much smoother transition between projects.

I hope this post was helpful and easy to understand. Feel free to let me know your thoughts. I’m grateful for any friendly criticism or “how to” contributions.

Tags: Usability, Web Design by admin
No Comments »

If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.

Typically, you have an element such as an “input”, “a” or “select (options)” that has an attribute of “onClick”, “onMouseOver” or “onChange” with a value of some function that will execute upon the event represented by the attribute.

UPDATE: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:

button_element.onclick = function() {doSomething();};

Thanks! to this post. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing

To assign a new value to the attribute, you need to identify the element you want to change like this:

elem =  document.getElementById(”myElementId”)

Then simply assign the new value to the attribute like this:

elem.attributes["onclick"].value = “myUpdatedFunction(’My parameter’)” ;

Now, if someone clicks on the element, the new updated version of myUpdatedFunction() will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.

This method will also work for other attribute types such as onMouseOver, onChange an so on.

I hope this helps.

Tags: AJAX, User Iterface Design, javaScript Tips by admin
No Comments »

Recently I was working on scripting the back end of a commercial site in PHP5. In this case the back end user interface permits users to upload rather large image files so that the files can be processed for ‘Zoomify’( a fast way of showing a highly detailed “zoomable” image). After making sure the process was secure, I also needed to change a few settings in the php.ini file in order for the system to allow files sizes of over 2 megs (the standard PHP5 default).

It is generally not wise to make these changes in the php.ini file itself unless you have a very good reason. The preferred way would be to make the required change at execution time for the particular script you happen to be running only. This gives you better control over site operations and security. To do this you use the “ini_set()”  function.
To demonstrate how to do this, I will show you the code for the four changes I needed to make to my script to accommodate the large image uploads. First, I defined global variables that determine what the setting should be.

Defineing Globals in PHP

I do this so that later if I chose to edit the settings I can do so from my configuration file and not have to hunt through the script to make the changes. Also this allows me to duplicate the setting elsewhere if needed. The setting are as follows:

Also, If you are using a form to upload the file, do not forget to make the MAX_FILE_SIZE directive large enough to accommodate your file size. By the way, do not rely on MAX_FILE_SIZE as any sort of security measure.

Once I made these settings on my local testing server, all worked well. However, after the site was in the “live” pre production mode, the large file sizes would return an error. I knew it was not the file size issue because I had already compensated for that. What tipped me off to the problem was the fact that, every once in a while the file would upload with no error. That is when I realized it was not only a “memory limit” issue but also a timing issue. This did not show up at first because it takes much longer for a file to upload to a remote server than to the local server.

Settings we do not often deal with are easy to forget about and that was the case this time. Once I remembered to reset the “max_execution_time”  to the appropriate amount of seconds, the files uploaded just fine.

As mentioned above, the maximum execution time limit is set in the php.ini file. The line of code in the php.ini file is:

Set the max_execution time in the php.ini file.

With this little line of code in your PHP script, you are now afforded 180 seconds of time to run your program. You can adjust the seconds as you wish by simply changing the number.

I hope this helps!

Tags: PHP by admin
No Comments »

A really great feature of PHP it the ability to modify its behavior by altering its configuration file (php.ini).

By having the php.ini file, PHP has made it easier to change how it responds and beh

aves even after it has already been installed. What a pain it would be to have to re-compile every time you realize the need for a configuration change.

The php.ini file really helps make PHP more powerful and more secure as well. This is because you can configure PHP with secure settings until the setting need to change for some reason. Then you can also programmatically alter its behavior to accommodate a particular script file’s needs, on the fly, and returning the settings to normal when you’re done.

When PHP is booting, one of the first things it does is look at the php.ini file. It reads into memory the directives defined with in it. In most cases, when you compile PHP, it puts a copy of the php.ini file in /usr/local/lib/php. This may different depending upon your server.

If you are on a Unix machine, you may be able to type locate php.ini or find / -name php.ini -print and have it tell you the location of the php.ini file. If you have installed it on a Windows machine, use the “Find -> Files or Folders” option from the Start Menu.

Tags: PHP by admin
1 Comment »

One of the most common web security problems is SQL Injection. As the name implies, SQL injections works by introducing malicious SQL code where it doesn’t belong. Since it is SQL code you could probably guess that the attacker “injects” his poison via database queries. Web developers often pass some sort of variable to their database queries. Very common are variables that are influenced by user input. User input, to variable, then to query,- get it? So, there is a need for a way of eliminating the user’s ability to manipulate the variable in any way that could effect the query.

What Happens With SQL Injection

By passing an unexpected string of code into a user input, such a form, an attacker send damaging code that causes an otherwise good query to go haywire. For example: [Read more →]

Tags: AJAX, MySQL, PHP, Web Security by admin
No Comments »

Error reporting in PHP gives valuable insight during the development stages. This Insight can be a great aid to problem solving. There are others, however who are interested in why your web site has failed on occasion. The information thrown out by many PHP errors gives the kind of information about your web application that can make you vulnerable to crackers (malicious web site breakers). In fact apart from reading the code itself, error reporting is some of the most valuable intelligence an attacker can gather when looking for vulnerabilities in your web application.

So, what should be done once you launch your new web site? Well, as proud as you may be of your new creative geniuses, a wise web developer has the humility to recognize that bugs are still likely to surface from time to time. While you do not want any attackers to see error [Read more →]

Tags: PHP, Web Security by admin
No Comments »

Recently I had a little problem stump me while designing the back end of a commercial site. The back end user interface uploads rather large image files so that the files can be processed for ‘Zoomify’( a fast way of showing a highly detailed zoomable image). After making sure the process was secure, I also needed to change a few settings in the PHP ini file in order for the system to allow files sizes of over 2 megs. All was working great on the local testing server. [Read more →]

Tags: PHP, User Iterface Design by admin
No Comments »

In web design, it is important to guide the user’s eye. Without a sense of “flow” a feeling of frustration takes over creating a negative experience. The art of subtly, and sometimes not so subtly, guiding the viewer’s attention is referred to as Precedence.

Since web pages are, for the most part, about the users getting information, how the information is presented is of great importance. There are several ways to do this, namely, [Read more →]

Tags: Usability, User Iterface Design, Web Design by admin
No Comments »

If you have ever spent a long time working on a design, you have probably noticed that after a while you may feel there is something “not quite right” about what you are working on but you just can’t seem to put your thumb on it. In most cases, this is because you “intuitively” know that something is wrong. But the image of what you are working on is “burned” into your retina. The image that is before you has become more dominant than that of your mind’s creative eye. I have discovered a little trick from my days as a fine artist to solve this problem. [Read more →]

Tags: User Iterface Design, Web Design by admin
No Comments »