get url my dashboard widget

[keith28]

I'm trying to place a button on the back of my wiget that will link to my website.

Everything I tried in html does not work.
Can some one have a look for me?

</div>
</div>
<img id="doneButton" src="Images/done.png" onmouseup="savePrefs();" onmousedown='document.getElementById("doneButton").src = "Images/done_pressed.png";' onmouseout='document.getElementById("doneButton").src = "Images/done.png";'>
<img id="learnButton" src="Images/learn1.png" onmouseup="savePrefs();" onmousedown='getUrl("http://www.mywebsite.com").src = "Images/learn2.png";' onmouseout='document.getElementById("learnButton").src = "Images/learn1.png";></a></div>
<p></p>

[Taxxodium]

is getUrl a function of yours?

You probably want: widget.openURL('http://....');

[keith28]

i did not make a function for it.
Do I need to create a function for this?

[Taxxodium]

you have several options:

1. add a graphic and make it a link using HTML:

<a href="yourURLHere"><img src="yourImageHere" border=0 /></a>

2. use javascript:

<img src="yourImageHere" onclick="widget.openURL('yourURLHere')" />

Notice my use of quotes. This is very important! Also note that the widget object is only available for dashboard and is not a standard javascript object. It won't work in Safari for example.

[keith28]

here is my scripts.js file

// scripts.js

// Globals

var model = getModel(); // holds the image to display

function showVersion() {
document.getElementById('infospan').innerHTML = "version 0.1";
}


function getModel() { // get refresh-timer from prefs
var value = 'Default';

if(window.widget) {
var value = widget.preferenceForKey('model');
}

return value;
}


function showModel(model) {
if(! model)
model = 'Default';

document.getElementById('the_image').src = "./Images/" + model + ".png";
}


function adjustPrefs() {
var selector = document.forms[0].selector;

for(i = 0; i < selector.childNodes.length; i++) {
if(selector.options[i].value == model) {
selector.options[i].selected = true;
break;
}
}
}


function savePrefs() {
var selector = document.forms[0].selector;
var mymodel = selector.options[selector.selectedIndex].value;
mymodel = mymodel ? mymodel : 'Default';


if(window.widget) {
widget.setPreferenceForKey(mymodel, 'model');
}

showModel(mymodel);
hidePrefs();
}


function showPrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

adjustPrefs();
showVersion();

if(window.widget)
widget.prepareForTransition("ToBack");

front.style.display = "none";
back.style.display = "block";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}


function hidePrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

if(window.widget)
widget.prepareForTransition("ToFront");

front.style.display = "block";
back.style.display = "none";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}

function mouseEnter() {
var image = document.getElementById("showprefs");
image.style.display = "block";
}


function mouseExit() {
var image = document.getElementById("showprefs");
image.style.display = "none";
}


// by Apple
/*
var flipShown = false;
var animation = { duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null };

function mousemove (event)
{
if (!flipShown)
{
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('showprefs');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 1.0;
animate();
flipShown = true;
}
}

function mouseexit (event)
{
if (flipShown)
{
// fade in the info button
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 0.0;
animate();
flipShown = false;
}
}

function animate()
{
var T;
var ease;
var time = (new Date).getTime();


T = limit_3(time-animation.starttime, 0, animation.duration);

if (T >= animation.duration)
{
clearInterval (animation.timer);
animation.timer = null;
animation.now = animation.to;
}
else
{
ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
animation.now = computeNextFloat (animation.from, animation.to, ease);
}

animation.firstElement.style.opacity = animation.now;
}

function limit_3 (a, b, c)
{
return a < b ? b : (a > c ? c : a);
}

function computeNextFloat (from, to, ease)
{
return from + (to - from) * ease;
}

*/

[keith28]

my html file
does this appear correct?


</div>
<img id="doneButton" src="Images/done.png" onmouseup="savePrefs();" onmousedown='document.getElementById("doneButton").src = "Images/done_pressed.png";' onmouseout='document.getElementById("doneButton").src = "Images/done.png";'>
<img id="learnButton" src="Images/learn1.png" onmousedown='widget.openURL("http://....").src = "Images/learn2.png";' onmouseout='widget.openURL("http://....").src = "Images/learn1.png";'>
<p></p>

[keith28]

my html file loads
<script type="text/javascript" src="./scripts.js" charset="utf-8" />

[Taxxodium]

Obviously the http://.... reference will need to be replaced by the _real_ values. I just typed it like that because I'm lazy, but you shouldn't.

Don't blindly copy & paste!

[keith28]

yes I understand that part. that part was pretty obvious.

let me play around with this and see how far I get.
So, I should use this in the html?
<a href="yourURLHere"><img src="yourImageHere" border=0 /></a>

and I should use this in my scripts.js file?
<img src="yourImageHere" onclick="widget.openURL('yourURLHere')" />

or should it be all placed in my html.

I also have a ID to each button because .css file places it exactly where I need it on the widget.
#doneButton {
position: absolute;
top: 50px;
left: 420px;
}

#learnButton {
position: absolute;
top: 150px;
left: 420px;
}

[Taxxodium]

Use it in your HTML file! Don't forget to replace yourURLHere and yourImageHere by its correct values. Also, use ONE solution, not both.

So either use this:
<a href="yourURLHere"><img src="yourImageHere" border=0 /></a>

OR this:
<img src="yourImageHere" onclick=widget.openURL('yourURLHere')" />

[keith28]

this one does not work.
I will try the other one.

[keith28]

niether one of these options worked.
I tried both ways.

is there any others?

why is this such an issue to get a url to open?
this has been very frustrating.

[keith28]

maybe it has to be a function?

[Taxxodium]

Why do you add a .src after the function, like in widget.openURL("someURL").src = ...;

that doesn't make any sense at all! Just use widget.openURL("http://...") like that, with nothing following it.

I also recommend you start out with the Hello World tutorial at developer.apple.com
As for javascript a good place is: http://www.devguru.com/Technologies/ecmascript/quickref/javascript_index.html

[keith28]

I have already done that tutorial already.
It does not help me with my current project.

[keith28]

You think you can help me modify this source?
I just need to add the Learn button and the buy button.


Applecopy.css
body
{
margin: 0;
padding: 0;
font-family: Arial;
font-size: 10px;
color: #FFFFFF;
}

#front {
width: 555px;
height: 83px;
}

.flip {
position:absolute;
top: 125px;
left: 115px;
width:13px;
height:13px;
}
#flip {
opacity:0;
background: url(file:///System/Library/WidgetResources/ibutton/black_i.png) no-repeat top left;
z-index:8000;

}
#fliprollie {
display:none;
opacity:0.25;
background: url(file:///System/Library/WidgetResources/ibutton/black_rollie.png) no-repeat top left;
z-index:7999;
}

#back {
width: 555px;
height: 230px;
background: url(Images/back.png);
display: none;
}

#form {
position: absolute;
left: 100px;
top: 8px;
height: 30px
}

#doneButton {
position: absolute;
top: 50px;
left: 420px;
}

#learnButton {
position: absolute;
top: 150px;
left: 420px;
}

#buyButton {
position: absolute;
top: 180px;
left: 420px;
}

scripts.js
// scripts.js

// Globals

var model = getModel(); // holds the image to display

function showVersion() {
document.getElementById('infospan').innerHTML = "version 0.1";
}


function getModel() { // get refresh-timer from prefs
var value = 'Default';

if(window.widget) {
var value = widget.preferenceForKey('model');
}

return value;
}


function showModel(model) {
if(! model)
model = 'Default';

document.getElementById('the_image').src = "./Images/" + model + ".png";
}


function adjustPrefs() {
var selector = document.forms[0].selector;

for(i = 0; i < selector.childNodes.length; i++) {
if(selector.options[i].value == model) {
selector.options[i].selected = true;
break;
}
}
}


function savePrefs() {
var selector = document.forms[0].selector;
var mymodel = selector.options[selector.selectedIndex].value;
mymodel = mymodel ? mymodel : 'Default';


if(window.widget) {
widget.setPreferenceForKey(mymodel, 'model');
}

showModel(mymodel);
hidePrefs();
}


function showPrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

adjustPrefs();
showVersion();

if(window.widget)
widget.prepareForTransition("ToBack");

front.style.display = "none";
back.style.display = "block";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}


function hidePrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

if(window.widget)
widget.prepareForTransition("ToFront");

front.style.display = "block";
back.style.display = "none";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}

function mouseEnter() {
var image = document.getElementById("showprefs");
image.style.display = "block";
}


function mouseExit() {
var image = document.getElementById("showprefs");
image.style.display = "none";
}


// by Apple
/*
var flipShown = false;
var animation = { duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null };

function mousemove (event)
{
if (!flipShown)
{
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('showprefs');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 1.0;
animate();
flipShown = true;
}
}

function mouseexit (event)
{
if (flipShown)
{
// fade in the info button
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 0.0;
animate();
flipShown = false;
}
}

function animate()
{
var T;
var ease;
var time = (new Date).getTime();


T = limit_3(time-animation.starttime, 0, animation.duration);

if (T >= animation.duration)
{
clearInterval (animation.timer);
animation.timer = null;
animation.now = animation.to;
}
else
{
ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
animation.now = computeNextFloat (animation.from, animation.to, ease);
}

animation.firstElement.style.opacity = animation.now;
}

function limit_3 (a, b, c)
{
return a < b ? b : (a > c ? c : a);
}

function computeNextFloat (from, to, ease)
{
return from + (to - from) * ease;
}

*/

html file
<html>
<head>
<script type="text/javascript" src="./scripts.js" charset="utf-8" />
<script type="text/javascript" src="flip.js" charset="utf-8" />
<script type="text/javascript" src="Fader.js" charset="utf-8" />
<style type="text/css">
@import "Applecopy.css";
#flip { background-image: url("file:///System/Library/WidgetResources/ibutton/black_i.png"); visibility: visible; position: absolute; z-index: 8000; top: 62px; left: 474px; width: 13px; height: 13px }
#fliprollie { background-image: url("file:///System/Library/WidgetResources/ibutton/black_rollie.png"); visibility: visible; position: absolute; z-index: 7999; top: 62px; left: 474px; width: 13px; height: 13px }
#form { visibility: visible; position: absolute; top: 52px; left: 100px; width: 0; height: 53px }
</style>
</head>
<body onload="showModel(model);loaded()">
<div id="front" onmousemove="flipper.fadeIn();" onmouseout="flipper.fadeOut();">
<div align="center">
<img id="the_image" src="Images/Default.png" alt="model missing" />
<div class='flip' id='fliprollie'></div>
<div class='flip' id='flip' onclick='showBackside(event);' onmouseover='document.getElementById("fliprollie").style.display="block";' onmouseout='document.getElementById("fliprollie").style.display="none";'></div>
</div>
</div>
<div id="back">
<div id="form">
<div align="right">
<form name="pref_form" action="" method="get">
<div align="left">
<select id="selector" name="selector" width="65">
<option selected value="Purple">Bus Purple</option>
<option value="Black">Bus Black</option>
<option value="Blue">Bus Blue</option>
<option value="Coral">Bus Coral</option>
<option value="Gold">Bus Gold</option>
<option value="Green">Bus Green</option>
<option value="Lime">Bus Lime</option>
<option value="Orange">Bus Orange</option>
<option value="Pink">Bus Pink</option>
<option value="Red">Bus Red</option>
<option value="Silver">Bus Silver</option>
<option value="Yellow">Bus Yellow</option>
</select></div>
</form>
</div>
</div>
<img id="doneButton" src="Images/done.png" onmouseup="savePrefs();" onmousedown='document.getElementById("doneButton").src = "Images/done_pressed.png";' onmouseout='document.getElementById("doneButton").src = "Images/done.png";'>
<img src="Images/learn1.png" onclick=widget.openURL('http://www.mywebsite.com')" />
<p></p>
</body>
</html>

[keith28]

Can anyone help me with this?

[Taxxodium]

I'll try for the last time:

<img src="Images/learn1.png" onclick="widget.openURL('http://www.mywebsite.com')" />

That's the correct code, you were missing a " before widget.

Also, is www.mywebsite.com the URL of your website? I don't think so. Sigh!

[keith28]

have you tested this with above source?
where exactly should I place the code you gave me to work correctly?

[keith28]

mywebsite.com is just a filler. I know I have to place my real website name in it.
regardless of the url it should till launch the browser.

[keith28]

I tried it. It works great now. Thank you very much for your time. I really do appreciate it.

[Shiamak]

Keith,

Could you cut and paste your code here.

Thanks

[keith28]

Shiamak,
All the code is in the above replies.
If you can not see it, try using a different browser.

Some browsers don't show the code correctly.

Keith

[Taxxodium]

Could you cut and paste your code here.

To clarify, Keith is working on a Dashboard widget which uses Javascript. You are using C++ with Carbon, which is an entirely different world...

[Shiamak]

Alrite then how one would achive the same using carbon C++?