hello!! problem with web sidebar gadget

Hello, im new to ur forum. I'm working on a very simple gadget, but i have problem with the flyout and with showing a web site in it.

Can anyone tell me how i show a wesite within the flyout box. Thank you very much.

Answer this question

hello!! problem with web sidebar gadget

stallion_alpa
emepvsd wrote:
Jonathan Abbott wrote:
See the answer in this thread.
thank you so much, Jonathan

Jonathan, when trying to do this, flyout does not appear at all
Well, i really had a problem with the "flyout" stuff, is isn't appearing at all :(
Travis Ingram
Sorry, I should have pointed out that the <a> should be changed as well. Plus there's a </br> in there. Not to mention the setFlyout function missing.

Here's working code. Just make sure your flyout.html is as follows:

<html>
<body style="width:500px; height:500px">
<div id="frame"></div>
</body>
</html>

gadget.html:
<html>
<head>

<script type="text/javascript">
var url;

function setupgadget()
{
machname.innerHTML = System.Environment.machineName;
}
function toggleFlyout()
{
System.Gadget.Flyout.Show = true;
}
function setFlyout(urltmp)
{
url = urltmp;
System.Gadget.Flyout.show = true;
}
function flyoutShowing()
{
System.Gadget.Flyout.document.parentWindow.frame.innerHTML = "<iframe width='500' height='500' frameborder='0' src='"+url+"'></iframe>";
}

System.Gadget.Flyout.onShow = flyoutShowing;
System.Gadget.settingsUI="settings.html";
System.Gadget.Flyout.file = "flyout.html"

</script>

<title>trailer</title>
<style>
body
{
width: 130px;
height: 65px;
}
span
{
font-family:tahoma;
font-size:12pt;
}
#gadgetContent
{
width: 130px;
top: 24px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
#background
{
width: 130px;
height: 65px;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
</style>

</head>
<body onload="setupgadget();">
<g:background src="vera.png" opacity="30" />
<span id="machName"></span>
<span style="font-family: Tahoma; font-size: 10pt;">
trailer"
</span>
<br><div onclick="setFlyout('http://www.microsoft.com');">Show</div>
</body>
</html>
fiddlesticks
No text shown either.... Cannot undetsand why.

When i remove the <g: ... > command line, the text is shown. But,when I click on the "Show" text label, something appears, but its to small and "covered" by the gadget. Maybe we have to change the flyout left value
MWatts
here:

<html>

<script type="text/javascript">
function setupgadget()
{
machname.innerHTML = System.Environment.machineName;
}
function toggleFlyout()
{
    System.Gadget.Flyout.Show = true;
}

System.Gadget.settingsUI="settings.html";
System.Gadget.Flyout.file = "myflyout.html"

</script>

<head>
    <title>trailer</title>
    <style>
        body
        {
            width: 130px;
            height: 65px;
        }
    span
    {
        font-family:tahoma;
        font-size:12pt;
    }
        #gadgetContent
        {
            width: 130px;
            top: 24px;
            text-align: center;
            font-family: Tahoma;
            font-size: 10pt;
            position: absolute;
        }
        #background
        {
            width: 130px;
            height: 65px;
            position: absolute;
            z-index: -1;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body onload="setupgadget();">
<g:background src="vera.png" opacity="30">
    <span id="machName"></span>
    <span
        style="font-family: Tahoma; font-size: 10pt;">
        trailer"
    </span>
    <a href="" onclick=setFlyout('http://www.microsoft.com');"></br>Show</a>
<g:/background>
</body>
</html>
WebService4Ever
See the answer in this thread.
Matt24
Post the relevant code so I can take a look.
Srikanth Ramakrishnan
Jonathan Abbott wrote:
See the answer in this thread.
thank you so much, Jonathan

Tom Lake - MSFT

Jonathan Abbott wrote:
A few problems:

1. The <script> section needs to be within the <head> section.
2. Change the <g:background> and fix the typo on the onclick

<g:background src="vera.png" opacity="30" />
<span id="machName"></span>
<span style="font-family: Tahoma; font-size: 10pt;">
trailer"
</span>
<a href="" onclick="setFlyout('http://www.microsoft.com');"></br>Show</a>

I now have it like this:

<html>
<head>

<script type="text/javascript">
function setupgadget()
{
machname.innerHTML = System.Environment.machineName;
}
function toggleFlyout()
{
System.Gadget.Flyout.Show = true;
}

System.Gadget.settingsUI="settings.html";
System.Gadget.Flyout.file = "myflyout.html"

</script>

<title>trailer</title>
<style>
body
{
width: 130px;
height: 65px;
}
span
{
font-family:tahoma;
font-size:12pt;
}
#gadgetContent
{
width: 130px;
top: 24px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
#background
{
width: 130px;
height: 65px;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
</style>

</head>
<body onload="setupgadget();">
<g:background src="vera.png" opacity="30" />
<span id="machName"></span>
<span style="font-family: Tahoma; font-size: 10pt;">
trailer"
</span>
<a href="" onclick="setFlyout('http://www.microsoft.com');"></br>Show</a>
<g:/background>
</body>
</html>

But there's a problem. No "Trailer" or "show" text is shown on the gadget so that i can click on the "Show" text to see the flyout.

R.Tutus
A few problems:

1. The <script> section needs to be within the <head> section.
2. Change the <g:background> and fix the typo on the onclick

<g:background src="vera.png" opacity="30" />
<span id="machName"></span>
<span style="font-family: Tahoma; font-size: 10pt;">
trailer"
</span>
<a href="" onclick="setFlyout('http://www.microsoft.com');">Show</a>

Romel Evans

emepvsd wrote:
No text shown either.... Cannot undetsand why.

When i remove the <g: ... > command line, the text is shown. But,when I click on the "Show" text label, something appears, but its to small and "covered" by the gadget. Maybe we have to change the flyout left value

i now found why. the "height" of the gadget must be at least 120:

<html>
<head>

<script type="text/javascript">
var url;

function setupgadget()
{
machname.innerHTML = System.Environment.machineName;
}
function toggleFlyout()
{
System.Gadget.Flyout.Show = true;
}
function setFlyout(urltmp)
{
url = urltmp;
System.Gadget.Flyout.show = true;
}
function flyoutShowing()
<html>
<head>

<script type="text/javascript">
var url;

function setupgadget()
{
machname.innerHTML = System.Environment.machineName;
}
function toggleFlyout()
{
System.Gadget.Flyout.Show = true;
}
function setFlyout(urltmp)
{
url = urltmp;
System.Gadget.Flyout.show = true;
}
function flyoutShowing()
{
System.Gadget.Flyout.document.parentWindow.frame.innerHTML = "<iframe width='500' height='500' frameborder='0' src='"+url+"'></iframe>";
}

System.Gadget.Flyout.onShow = flyoutShowing;
System.Gadget.settingsUI="settings.html";
System.Gadget.Flyout.file = "flyout.html"

</script>

<title>trailer</title>
<style>
body
{
width: 130px;
height: 120px;
}
span
{
font-family:tahoma;
font-size:12pt;
}
#gadgetContent
{
width: 130px;
top: 24px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
#background
{
width: 130px;
height: 65px;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
</style>

</head>
<body onload="setupgadget();">
<g:background src="vera.png" opacity="30" />
<span id="machName"></span>
<span style="font-family: Tahoma; font-size: 10pt;">
trailer"
</span>
<br><div onclick="setFlyout('http://www.microsoft.com');">Show</div>
</body>
</html>

But still no clickable text.

Mike Batton
thanks a lot. I'll edit it and i'll then post my impressions ;)
hello!! problem with web sidebar gadget

Answer this question

hello!! problem with web sidebar gadget

Hot Topic

Audio and Video

hello!! problem with web sidebar gadget

hello!! problem with web sidebar gadget

stallion_alpa

Travis Ingram

fiddlesticks

MWatts

WebService4Ever

Matt24

Srikanth Ramakrishnan

Tom Lake - MSFT

R.Tutus

Romel Evans

Mike Batton