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

Customized pull-down menu

Author Message
mekentosj



Joined: 08 Feb 2005
Posts: 3
Location: Amsterdam, NL

Posted: Sun Mar 06, 2005 - 7:03 am    Post subject: Customized pull-down menu Reply with quote

Hi there, I am interested in how I can customize the standard html pull-down menu's, like Apple seems able to do for example in their translator and yellow pages widgets. Does anybody have a clue?

Tosj

www.mekentosj.com
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
jyee



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

Posted: Mon Mar 07, 2005 - 5:25 pm    Post subject: Reply with quote

From a quick glance, i *think* apple built a plugin for the Yellow Pages widget. Inside the Widget is the "YPComboBoxPlugin.plugin". This is probably because the Yellowpages box is a combination search/pulldown box/menu.

If you're only wanting a custom designed pulldown you could probably build one with CSS, layers and a bit of javascript fairly easily.
View user's profile Send private message Send e-mail Visit poster's website Widgets
mekentosj



Joined: 08 Feb 2005
Posts: 3
Location: Amsterdam, NL

Posted: Tue Mar 08, 2005 - 8:14 am    Post subject: Reply with quote

OK thanks, but can you give me some links were to find them? I get fed up searching Google...
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
jyee



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

Posted: Tue Mar 08, 2005 - 5:28 pm    Post subject: Reply with quote

I'm not sure what you're trying to find.

If you're refering to the plugin, it's located inside apple's widget... but it's a custom widget so it probably wouldnt work for you. You'd need developer tools to code your own in obj-c or java, etc.

If you're refering to the css/javascript, you probably wont find any prewritten code for a pulldown menu, but the concept is simple:
html:
<a href="#" onClick="showMenu();"><img src="myimg" /></a>
<div id="menu" style="display: none;">This is my menu layer</div>

javascript:
function showMenu() { menu.style.display="block"; }

clicking the image runs a javascript function which toggles a hidden "menu" layer
View user's profile Send private message Send e-mail Visit poster's website Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Wed Mar 09, 2005 - 6:04 pm    Post subject: Reply with quote

I don't know how Apple has done it, but it looks like an ordinary <select> with just a different image. As in - make the <select> have opacity: 0 and then put an image behind it. Just add event handlers to the <select> to make the image look depressed and update the text showing etc. Should be easy.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
blurry
Quality Control


Joined: 03 Feb 2005
Posts: 33
Location: UK

Posted: Tue Mar 15, 2005 - 11:26 am    Post subject: Reply with quote

Jyee hit the nail on the head with his example. It's pretty easy to do a simple, small dropdown menu using CSS and JavaScript.

However, you'd hit difficulties when you tried adding lots of items to the drop menu. To make the menu managable, you'd need to set the height of the DIV section using CSS to add a scrollbar, but then it'd look weird because it'd be a standard system scrollbar.

The other way to do it would be to implement your own scrollbar and do all the drawing manually using JavaScript and CSS. It's not too tricky - I've done it for an RSS reader and it works like a charm (on Tiger, at least!). There's tons of examples on the net - just google for it.

George.
_________________
If your only tool is a hammer, everything looks like a nail
View user's profile Send private message Send e-mail Widgets
iremembercliford



Joined: 27 Mar 2005
Posts: 32

Posted: Thu Mar 31, 2005 - 1:07 am    Post subject: Reply with quote

...or you could use Cocoa objects which would be much easier.(if you know cocoa)
View user's profile Send private message Send e-mail Widgets
bonAveo



Joined: 26 Apr 2005
Posts: 28
Location: Lillehammer, Norway

Posted: Sat Apr 30, 2005 - 7:21 pm    Post subject: Reply with quote

Chris wrote:
I don't know how Apple has done it, but it looks like an ordinary <select> with just a different image. As in - make the <select> have opacity: 0 and then put an image behind it. Just add event handlers to the <select> to make the image look depressed and update the text showing etc. Should be easy.


Can you give me an exampel code?
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
purvisa



Joined: 21 Jul 2005
Posts: 182
Location: Kirkland, WA

Posted: Wed Oct 26, 2005 - 6:32 am    Post subject: Reply with quote

I just went through this using the Apple documentation. It's pretty simple, but there is an error in Apple's Dashboard Tutorial. If you readline 3 of the Javascript code for the custom menu (top of page 35 on the .pdf version), you will see that it includes ".value" at the end. That is not going to be a problem if your values (the part passed to your Javascript code) are exactly the same as your text (the part that is displayed in the menu), but mine are not always the same. Instead, use ".text" where Apple suggests using ".value" in that one instance.

Also, if you want everything to line up, make sure you use the same font and size for your transparent menu as for your displayed text. It helps, too, to specify the width of the menu manually so you can guarantee that it fits your button image. An easy way to test this is to alter the opacity of the menu briefly so you can see how it lines up.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger 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