Open a webpage in a Flyout?

Hi

I wonder if there any way to open a webpage in my Flyout !

I've something like this:

Answer this question

Open a webpage in a Flyout?

GiriKrishna
Yes. There's the code, in short, you wait until the flyout is open and then create an iframe within it.

gadget.html:

<html>
<head>
<script language="javascript">
System.Gadget.Flyout.onShow = flyoutShowing;
System.Gadget.Flyout.file = "flyout.html";
var url = "";

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>";
}
</script>
</head>
<body style="width:150px; height:150px; margin:0px;" onclick=setFlyout('http://www.microsoft.com')">
</body>
</html>

flyout.html:

<html>
<body style="width:500px; height:500px">
<div id="frame"></div>
</body>
</html>
jobo5432
Lol, Jonathan, you're everywhere.

Code you've provided works very well, thank you very much for your help.

Btw, if I click on some link on opened flyout, they will open a browser instead of using the same flyout. Can I force my gadget to open links in the same flyout

Anyway thanks again
wjousts
the leading zeros are not used so that the current date produced is: ch9611.gif
do you have a tip to fix it (ch960101.gif)
Thanks again for you work
C.
Nonu_k
Hi,
Can someone help me to create a comic gadget for Calvin and Hobbes

I dont know how to write the url code in javascript...
Here is the php code
$date = isset( $_REQUEST['date'] ) $_REQUEST['date'] : time(); 'Calvin & Hobbes': // The URL will be something like this: // http://images.ucomics.com/comics/ch/1993/ch931203.gif // change the year because Calvin & Hobbes is from the past $chyear = date( 'Y', $date )-11; $shortchyear = $chyear-1900; $url = "http://images.ucomics.com/comics/ch/".$chyear. "/ch".$shortchyear.date( 'md', $date ).".gif"; Because of the size of the comic, it needs to be in a flyout, because the strips on sundays are much larger then on work days, it needs to flexible. Cool would be to have an image on the sidebar, that can be clicked to open the flyout. Would be really nice if someone could help me. Regards and thx C.
Richard Berg MSFT
Nevermind, your previous code has already all stuff I needed, lol.

<script>
...
function setFlyout(urltmp)
{
url = "http://en.wikipedia.org/wiki/";
System.Gadget.Flyout.show = true;
}

...
</script>

<body>
....
onclick="setFlyout()"
....
</body>

Works well!
IMBack
Well spotted, it was actually " javascript : but it gets stripped by the browser. I've corrected it now.

I can publish it, but it needs some checking (does the image file exist), bounding (start/end image dates) and timer to update the image.

I've put it up as work in progress on AeroXperience, feel free to finish it off.
asdsoftware_dev
This is really my lucky day. Do you want to publish it, if you dont I could for you. I think alot of people would love to see it ( I know at least 5 by myself :-).
Thanky you very much.

People who want to copy the code got add an " before System.Gadget....
i found it out by myself :-)

<img id="imgSrc" onclick="System.Gadget.Flyout.show=true;" style="position:absolute; top:1px; left:1px; -ms-interpolation-mode:bicubic;"/>

Well thx again very much.
Regards and a happy new year
C.
Stardust25
Download it from the link I provided, it's fixed in the packaged Gadget file.
shekhar saran
Hi, here I'm again.

I'm trying to replace this:

<body style="width:150px; height:150px; margin:0px;" onclick=setFlyout('http://www.microsoft.com')">

with a function because I want more flexibility, So in the same file I have:

<script>
...
function myUrl()

{
var url = "http://www.google.com/";
}
...
</script>

<body>
....
onclick="setFlyout('myUrl()')"
....
</body>

Flyout works but no page is loading (he tell me that he can find nothing), I suppose that there are some problem with

onclick="setFlyout('myUrl()')"

stuff.
Anil Dhiman
Do you mean the board link

I get this upgrade message since yesterday, so I couldnt register yet, or did I missed something
Regards and thank you
C.

AeroXperience is currently unavailable due to a critical security issue. We are currently upgrading, repairing, and optimizing for your AeroXperience experience. Work is being done as fast as possible and we will be back as quick as we can.

We expect to be back as soon as late Monday, but no guarantees.
rheaney
This isn't an HTML help forum! But as my son wont get off Lego Star Wars, I'll code it for you. LOL.

<html>
<head>
<script language="javascript" type="text/javascript">
function init() {
var sTime = new Date();
var sFullYear = String(sTime.getFullYear() - 11);
var sMonth = String(sTime.getMonth());
var sDay = String(sTime.getDate());
var sYear = sFullYear.substring(2);

imgSrc.src = "http://images.ucomics.com/comics/ch/"+sFullYear+"/ch"+sYear+sMonth+sDay+".gif";
}
</script>
</head>

<body onload="init()">
<img id="imgSrc" />
</body>
</html>
dr.acv
Thank you very much, its works (beside i have to change this var sMonth = String(sTime.getMonth()+1); because he told me we have november 31rd.)

Can you just help me once again with the gadget.html.
If i want to have an image to click on for the flyout, how looks the gadget.html then
And thanks to your son aswell :-)
C.
John_Mac
Hi, here I'm again. :)

I'm curious if there any way to apply a css style (external file) to the content of Flyout (a webpage) Would be very nice.
lbugnion
I noticed the month was out as well! Thought it was just me - guess it's a bug in JScript!

Tell you what, I'll write the whole thing for you. It even scales the Gadget and the Flyout to fit the image :). It's your lucky day. The only thing it doesn't do is actually check the image exists.

Calvin & Hobbes Gadget:

gadget.html
<html>
<head>
<script language="javascript" type="text/javascript">
System.Gadget.Flyout.file = "Flyout.html";
var maxWidth, maxHeight;
var imageWidth, imageHeight;

function init() {
var sTime = new Date();
var sFullYear = String(sTime.getFullYear() - 11);
var sMonth = String(sTime.getMonth() + 1);
var sDay = String(sTime.getDate());
var sYear = sFullYear.substring(2);

imgSrc.src = "http://images.ucomics.com/comics/ch/"+sFullYear+"/ch"+sYear+sMonth+sDay+".gif";
getImage(228, 128);
}

function getImage(w, h) {
maxWidth = w;
maxHeight = h;

setBodySize();
}

function setBodySize() {
var bodyWidth, bodyHeight
var img = new Image();
img.src = imgSrc.src;

if (img.width+img.height > 0)
{
imageWidth = img.width;
imageHeight = img.height;
if (maxWidth+maxHeight > 0)
{
if (imageWidth>imageHeight) {
bodyWidth = maxWidth;
bodyHeight = maxWidth/imageWidth*imageHeight;
if (bodyHeight>maxHeight) {
bodyWidth = maxHeight/bodyHeight*bodyWidth;
bodyHeight = maxHeight;
}
} else {
bodyHeight = maxHeight;
bodyWidth = maxHeight/imageHeight*imageWidth;
if (bodyWidth>maxWidth) {
bodyHeight = maxWidth/bodyWidth*bodyHeight;
bodyWidth = maxWidth;
}
}
imgSrc.style.width = bodyWidth - 12;
imgSrc.style.height = bodyHeight - 12;
gBackground.width = bodyWidth;
gBackground.height = bodyHeight;
} else {
bodyWidth = imageWidth;
bodyHeight = imageHeight;
}

document.body.style.width = bodyWidth;
document.body.style.height = bodyHeight;
} else
window.setTimeout(setBodySize, 500);
img = null;
}
</script>
</head>

<body onload="init()" style="margin:0px">
<g:background id="gBackground" style="width:100%; height:100%;" />
<img id="imgSrc" onclick="System.Gadget.Flyout.show=true;" style="position:absolute; top:1px; left:1px; -ms-interpolation-mode:bicubic;"/>
</body>
</html>

flyout.html
<html>
<head>
<script language="javascript" type="text/javascript">
function init() {
imgSrc.src = System.Gadget.document.parentWindow.imgSrc.src;

document.body.style.width = System.Gadget.document.parentWindow.imageWidth;
document.body.style.height = System.Gadget.document.parentWindow.imageHeight;
}
</script>
</head>
<body onload="init()" style="margin:0px;">
<img id="imgSrc" />
</body>
</html>
Open a webpage in a Flyout?

Answer this question