Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Design

custom form fields - like the Apple ones...

Author Message
lensco



Joined: 30 Mar 2005
Posts: 14
Location: Belgium

Posted: Wed Mar 30, 2005 - 12:56 pm    Post subject: custom form fields - like the Apple ones... Reply with quote

When gazing at the screenshots of the official Apple widgets, I wonder how they make form fields that don't look like form fields. Is it possible in widgets to use some kind of (css) form styles - for input fields, dropdowns, textareas... ? I know css form styles don't work in Safari. I have a couple of widgets here which have these very basic white boxes, not the best UI imo. Most probably Apple is using some complicated code or plugin thing that is way too difficult for me... Smile Or not?
View user's profile Send private message Send e-mail Visit poster's website Widgets
jyee



Joined: 27 Jan 2005
Posts: 12
Location: Denver, CO USA

Posted: Wed Mar 30, 2005 - 3:47 pm    Post subject: Reply with quote

Some of the apple form fields are custom widgets... particularly the combo drop down/text box fields. (there's an older forum post on this which covers some css/javascripting to make combo fields)
View user's profile Send private message Send e-mail Visit poster's website Widgets
lensco



Joined: 30 Mar 2005
Posts: 14
Location: Belgium

Posted: Fri Apr 01, 2005 - 5:21 pm    Post subject: Reply with quote

When investigating other widgets (the stopwatch in the showcase), I discovered a method that allows you to style fields that are used to display results. Instead of using an input field like a textbox or textarea like this:

document.yourForm.yourField.value = result;

You can use any element you want, for example a <div id="yourField"> and use this code:

document.getElementById("yourField").firstChild.data = result;

This will output your result to that div. Note that there has to be some data - and not just spaces - in the element prior to calling the function!

Thus you can use all possible css styles on this element. Maybe you already knew this, but I'm still a javascript newbie and I quite like this... Smile
This method does not work with input fields that actually need input, it only works for output.
View user's profile Send private message Send e-mail Visit poster's website Widgets
lensco



Joined: 30 Mar 2005
Posts: 14
Location: Belgium

Posted: Thu Apr 21, 2005 - 7:27 am    Post subject: Reply with quote

Further examination: Mello
Form styles work to a certain degree in Safari 1.3 but not all of it.

- Borders don't work for example, check this for example. Or do they work in Dashboard?
- Next, you can set the background of a textarea to transparent, but not of an input field - or can you in Dashboard?
- scrollbars="false" on a textarea does not seem to have any effect in Safari - so, has it in Dashboard?

So, anybody with Tiger installed and 5 minutes of spare time, could you test this and report back? Thanks!
View user's profile Send private message Send e-mail Visit poster's website Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group