| 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 |
 |
|
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. |
|
| |
|
| |
jonlink
Joined: 27 May 2005
Posts: 172
|
| Posted: Fri Nov 04, 2005 - 8:40 am Post subject: |
|
|
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';
|
|
|
| |
|
| |
purvisa
Joined: 21 Jul 2005
Posts: 182
Location: Kirkland, WA
|
| Posted: Fri Nov 04, 2005 - 6:07 pm Post subject: |
|
|
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. |
|
| |
|
| |
gurth
Joined: 21 Jul 2005
Posts: 47
Location: Netherlands
|
| Posted: Sat Nov 05, 2005 - 5:17 am Post subject: |
|
|
| 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. |
|
| |
|
| |
jonlink
Joined: 27 May 2005
Posts: 172
|
| Posted: Sat Nov 05, 2005 - 9:10 am Post subject: |
|
|
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 |
|
| |
|
| |
draobhsad
Joined: 19 Aug 2011
Posts: 4
|
| Posted: Fri Aug 19, 2011 - 10:55 am Post subject: |
|
|
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 |
|
| |
|
| |
purvisa
Joined: 21 Jul 2005
Posts: 182
Location: Kirkland, WA
|
| Posted: Sat Aug 20, 2011 - 5:34 am Post subject: |
|
|
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. |
|
| |
|
| |
draobhsad
Joined: 19 Aug 2011
Posts: 4
|
| Posted: Mon Aug 22, 2011 - 8:52 am Post subject: |
|
|
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 ? |
|
| |
|
| |
