DiasVFX

Hi

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

I've something like this:


Re: Sidebar Gadget Development Open a webpage in a Flyout?

Jonathan Abbott

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>




Re: Sidebar Gadget Development Open a webpage in a Flyout?

DiasVFX

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





Re: Sidebar Gadget Development Open a webpage in a Flyout?

DiasVFX

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.





Re: Sidebar Gadget Development Open a webpage in a Flyout?

DiasVFX

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!






Re: Sidebar Gadget Development Open a webpage in a Flyout?

DiasVFX

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.




Re: Sidebar Gadget Development Open a webpage in a Flyout?

cabotine

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.







Re: Sidebar Gadget Development Open a webpage in a Flyout?

Jonathan Abbott

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>





Re: Sidebar Gadget Development Open a webpage in a Flyout?

cabotine

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.





Re: Sidebar Gadget Development Open a webpage in a Flyout?

Jonathan Abbott

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>




Re: Sidebar Gadget Development Open a webpage in a Flyout?

cabotine

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.





Re: Sidebar Gadget Development Open a webpage in a Flyout?

Jonathan Abbott

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.




Re: Sidebar Gadget Development Open a webpage in a Flyout?

cabotine

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.






Re: Sidebar Gadget Development Open a webpage in a Flyout?

Jonathan Abbott

Download it from the link I provided, it's fixed in the packaged Gadget file.




Re: Sidebar Gadget Development Open a webpage in a Flyout?

cabotine

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.