• Awning Works 1
  • Socaz 2
  • Socaz 1
  • Randy Montana 3
  • Randy Montana 2
  • Randy Montana 1
  • Rodgers & Hammerstein 3
  • Rodgers & Hammerstein 2
  • Rodgers and Hammerstein 1
  • Love Fine Art
  • Jan
  • 06
  • 2012

HTML5: How to Make a datalist for a Form Field Input Element

Posted by admin In How To, HTML5, Usability, User Iterface Design, Web Design | No Comments »

Isn’t it nice when web developers make it easy for end users to fill out a form? One way to make for a pleasant user experience is to offer suggestions on a form’s input field. HTML5 now has a cool feature that makes this easier for the developers too!

The HTML5 datalist element provides an “autocomplete” feature on form elements. With it, you can provide a list of predefined options to the user as they input data.

Now, when a user is entering some text into a text field, a list can drop down with pre-filled values for them to choose from.

How to Make a datalist for a Form Field Input Element
The datalist tag was introduced in HTML 5.

Use the ID of the datalist tag to associate it with the appropriate input.
For example, if the datalist tag has an id=”myDataList”, then the list attribute of the input element will look like this: list=”myDataList”.

You can fill the datalist element by nesting option tags inside the datalist tag. Here is an example of the code for the HTML5 datalist element:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<p>
<label>
  Enter your favorite Star Trek character:<br />
<input type="text" name="favCharacter" list="myDataList">
<datalist id="myDataList">
 <option value="Captain Kirk">
 <option value="Spock">
 <option value="Bones">
 <option value="Scotty">
 <option value="Sulu">
 <option value="Chekov">
 <option value="Uhura">
 <option value="Jean-Luc Picard">
 <option value="Data">
 <option value="Geordi La Forge">
 <option value="Worf">
</datalist>
</label>
</p>


OK, so now you know. Go be nice to your users with the HTML5 tag!

Read More

  • Apr
  • 10
  • 2010

Drupal Comments In A Block

Posted by admin In Drupal 6 & Drupal 7, PHP, User Iterface Design, Web Security | No Comments »
Drupal Comments In A Block

Why would you need to put Drupal comments into a block?  Well, recently I was working with another developer that decided to use Quick Tabs to create a menu that would show the current content type’s comments. Quick Tabs uses blocks, so there is one reason I can think of.

Ok, so getting the content type’s comments into a block is pretty easy once you know how.

This method will require you to use PHP code from within the block you will create to show the comments. So the first thing is to make sure that this is possible by going to site building and then modules and turning on the PHP Filter under the category of Core Optional (if it is not already on that is).

NOTE: Check at admin/settings/filters to be sure that only trusted roles can use the PHP filter, otherwise your web site could be vulnerable to attack. By default, only the administrator can use this filter.

Create a new block and select a region for it. Put the following code on the body textarea:

comments in block php code for drupal

Do not forget to select the PHP filter from the list of the input filters. After entering the rest of the settings for your block click save.

Now your new block should be ready to assign to whatever region you want. If the page you load has comments related to it. They should now appear via the block.

The arg() funtion may seem a bit cryptic if you’re new to Drupal. Here is a quick explanation from George Notaras in his post: Drupal Tip: List a node’s taxonomy terms inside a Block which I found helpful in compiling this information.

“Now to some technical details about arg(0) and arg(1), which probably seem a bit cryptic to a user that is not experienced with Drupal (like me). Assume we have the following URL to a node: www.example.org/node/23, which means that the path to the page is /node/23. Well, arg(0) is the node part and arg(1) is the second part; 23 that is. Read about the arg() function.”

I hope this was helpful.

Read More

  • Sep
  • 29
  • 2009

Where's the ^%@$*$ 'end of line' Shortcut Key in BBEdit on Mac OS ?

Posted by admin In bbEdit Tips, Usability, User Iterface Design | No Comments »

The HOME and END keys move to the top and bottom of the document instead of start or end of the current line as expected. The HOME and END keys lay dormant on the keyboard, because the need to move to the top or bottom of a document is, like -ALMOST NEVER !!!
Now, the shortcut key to the start or end of the current line in Mac OS is the CMD+RIGHT/LEFT ARROW shortcuts.

Too bad, these are not as easy to remember, oh well.

So anyway, if you’re going MAD like me trying to figure out a quick “end of line” key now you know. Hope this helps ! : )

Read More

  • Sep
  • 17
  • 2009

Form Input Not Working; A Misplaced "float" Declaration in CSS Can Be to Blame for Broken Form Input

Posted by admin In CSS, Uncategorized, User Iterface Design | No Comments »

Just a note in case your pulling your hair out. If you have a form that for all intents and purposes SHOULD be working but does not allow user input in a text field then perhaps this cold be your problem.

Try taking a look at the CSS on the element following the form. In my last encounter with this problem, it was a <p> that followed a form within a div.

The <p> had  a CSS declaration of float:left and was inside a div that was floated to the right.

The followinghad 2 declarations:

p {
float:left;
clear:left;
}

To my surprise, this is what broke the form inputs -weird.

I fixed the <p>’s CSS to declare clear:left; and the form straightened back up.

So if you’re having trouble with form inputs and you have narrowed it down to CSS, I hope this helps.

Please feel free to make any comments or even give an explanation.

Read More

  • May
  • 20
  • 2009

Hack for IE7 with 'Leak' in Select Multi

Posted by admin In CSS, User Iterface Design, Web Design | No Comments »
Hack for IE7 with 'Leak' in Select Multi
Select element set to multi leaks in ie.

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.

No more leak from the select element!
No more leak from the select element!

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.

Read More

  • May
  • 15
  • 2009

Dynamically Change the onClick, onChange (or other) Value of an Element

Posted by admin In AJAX, javaScript Tips, User Iterface Design | 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.

Read More

  • May
  • 06
  • 2009

PHP Execution Time Limit Setting

Posted by admin In PHP, User Iterface Design | 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

  • May
  • 02
  • 2009

Learn To Guide Web User’s with Precedence

Posted by admin In Usability, User Iterface Design, Web Design | 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

  • May
  • 02
  • 2009

Adjust Your Design with a Fresh Look in the Mirror

Posted by admin In User Iterface Design, Web Design | 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

  • May
  • 01
  • 2009

What is Web 2.0 ?

Posted by admin In Usability, User Iterface Design, Web Design | No Comments »

Web 2.0 is a blend of new technologies that provide a much more rich and robust user experience. There are 3 main Components to Web 2.0 as described by Andy Gutmans, Co-Founder of ZEND.

RIA (Rich Internet Application) Andy Gutmans says RIA is “…how we bring the experience from the desktop into the browser.” What this means is this. You may have noticed

Read More

Page 1 of 212»

Flickr Stream