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 Development

Multiple "Front" settings

Author Message
purvisa



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

Posted: Fri Nov 04, 2005 - 2:01 am    Post subject: Multiple "Front" settings Reply with quote

I am probably missing something pretty simple, but I can't make this work:

I want to place radio buttons on the back of a widget that will allow the user to select which "front" to display (yes, using a different id) when the user clicks the "Done" button.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
jonlink



Joined: 27 May 2005
Posts: 172

Posted: Fri Nov 04, 2005 - 8:40 am    Post subject: Reply with quote

it's pretty easy once you know. here is a sample of what i do:

1) i use a pulldown list to choose the skin from, choosing a new one calls a function in my js file
Code:
<select id="pref" onchange='saveSkin(this.value)'>
<option value="black">Default</option>
<option value="grey">Grey</option>
</select>


2)the function first saves the choice to a plist and then changes the skin by changing the background of the front div.
Code:
function saveSkin(thePref){   
document.getElementById('front').style.background = 'url(img/'+thePref+'.png) no-repeat';
   widget.setPreferenceForKey(thePref,'front');
}


3) then as part of my onload function i get the saved skin and switch it that.
Code:
var frontPref = widget.preferenceForKey('front');
document.getElementById('front').style.background = 'url(img/'+frontPref+'.png) no-repeat';

View user's profile Send private message Send e-mail Widgets
purvisa



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

Posted: Fri Nov 04, 2005 - 6:07 pm    Post subject: Reply with quote

I really have to spend more time wording my threads. It's not that I want to skin the widget (my widget is BridgeKeeper); I want to provide multiple interfaces for multiple forms of scoring.

Bridge players on Yahoo! Games will use rubber scoring, which I want to add to my widget. Currently, however, it just supports duplicate scoring (designed for comparing different players' performances using identical hands). Duplicate can be handled in very little space (my current long axis, with shadow, is under 200px), but rubber is a little (not a lot) greedier in this regard, so I have three options: short change the rubber scoring look, waste space with the duplicate layout, or find a way to use two different front ends in different DIVs.

Essentially, I have <div id="Front"> and <div id="Back"> right now. I want to create <div id="Rubber"> in such a way that the selection made with radio buttons on the back will flip the appropriate front ("Front" or "Rubber") around, complete with background image (easy enough) and layout (easy enough). The problem is teaching it how to recognize the multiple front sides so that it flips properly.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
gurth



Joined: 21 Jul 2005
Posts: 47
Location: Netherlands

Posted: Sat Nov 05, 2005 - 5:17 am    Post subject: Reply with quote

One way to do it, I suppose, is to store the id of the div you want to display as the front in a global variable. Clicking the radio buttons sets the variable to the id of the div you want as the front side, and in the function that flips the widget over, you also refer to the variable instead of to the id directly.
View user's profile Send private message Send e-mail Widgets
jonlink



Joined: 27 May 2005
Posts: 172

Posted: Sat Nov 05, 2005 - 9:10 am    Post subject: Reply with quote

okay, that is a little different, but it's similar.

i'm not sure what your needs are so i can't say exactly the best way to do it... like gurth said, and as you hinted at, you'll have another div. so you have a div named "rubber" with all it's elements & etc. i assume that you'd pick the games on the back? if so you can use the pulldown list to pick a games (just like the code above). start with a default front div variable like:
Code:
frontDiv = 'front';


have a script that changes the variable fired from the pulldown menu. something like:
Code:
function saveFronDiv(thePref){   
 frontDiv = thePref;
 widget.setPreferenceForKey(thePref,'frontDiv');
}


then use that variable in your hideprefs function-- (you'll also need to resize the window). it should be something like this:

Code:
function hidePrefs(){
 widget.prepareForTransition('ToFront');
 window.resizeTo(500,300);
 document.getElementById(frontDiv).style.display   = 'block';
 document.getElementById('back').style.display   = 'none';
 setTimeout('widget.performTransition();', 0);
}


then you'll need to write an onload script to get the frontDiv-- this would be a cross between what i wrote in this post & what i wrote in my first one.

good luck
View user's profile Send private message Send e-mail Widgets
draobhsad



Joined: 19 Aug 2011
Posts: 4

Posted: Fri Aug 19, 2011 - 10:55 am    Post subject: Reply with quote

Hi, this thread seems related to I'll post here.

I want to make a visual aid kind of widget, like a translucent ruler.

On the front of the widget I want only the close button, info button, one image (the ruler) and a drop down menu to toggle the image of the available rulers.

I'm at the stage where my widget works for one image, now I want to be able to toggle it. It doesn't need to be a (saved) preference but one of the images should be displayed by default so that the user sees something the first time.

Basically I want the image selected from the menu to be visible and the others to be hidden.

How do I do this ? (ideally with an Apple style button)


I'm using Dashcode and I don't know javascript well
View user's profile Send private message Send e-mail Widgets
purvisa



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

Posted: Sat Aug 20, 2011 - 5:34 am    Post subject: Reply with quote

I am years past the last widget I wrote, but I might suggest using image swapping with GetElementByID() in Javascript. The element in question would be the image, and you would simply rewrite which one is assigned to that ID.

You can find old-school mouseover animations that use a similar concept, swapping one image for another or, if transparency is not needed, simply altering the z-values of layered images.

Hope this helps.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
draobhsad



Joined: 19 Aug 2011
Posts: 4

Posted: Mon Aug 22, 2011 - 8:52 am    Post subject: Reply with quote

I succeeded using the method given at http://www.javascriptkit.com/script/cut173.shtml that modified to use GetElementByID().

However the widget seems broken, when I execute it there's an error and after I deploy it there's no button to toggle the back side.
I added the HTML in the front part and the JS at the bottom of main.js - anything special I should do ?
View user's profile Send private message Send e-mail 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