Kevin Posted September 27, 2006 Report Share Posted September 27, 2006 I'm using Trumba for the first time. Everything is very easy to use, but I am running into some publishing issues. The problem in question here is the Events section (the Upcoming events spud works perfectly). When I use Firefox: I click Events, but only the Events header shows up, and not the calendar. When I reload/refresh/F5 the page, the calendar then shows like I want it to. Is there a way around this refresh method? When I use IE: I load Events, and the calendar completely takes over the iFrame. My Events header goes away, and only the calendar is there. Now if I press Events again, another calendar opens below it, and so on and so forth. How can I make it consistent and working across both browsers? Quote Link to comment Share on other sites More sharing options...
Troy Posted September 28, 2006 Report Share Posted September 28, 2006 Kevin, This is a very interesting situation that I haven't encountered yet. Thanks for bringing it to my attention. What's happening here is that you've nested a Spud inside an IFRAME that you are re-using for navigation. I'm talking about MainiFrame. Normally this Spud would have not interfered with the operation of your IFRAME and your site would work as you would expect. However you added an Upcoming Spud to your home page which is causing the main calendar Spud inside events.html to take over your MainiFrame. This is actually intentional and is used to support our older but now deprecated method of putting Spuds in IFRAMEs. Here's how you can fix it. First you need to create a new file called eventsiframe.htm and place it in the same directory as events.htm. Here's the source for eventsiframe.htm: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> </head> <body> <script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=saaac_calendar"></script> </body> </html> Now you need to edit your original events.htm and replace the <script>...</script> tag that points to trumba with a new <iframe></iframe> tag that points to the eventsiframe.htm file that you just created. Here's the what the source of events.htm looks like now: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Events</title> </head> <body> <b><font face="Arial">Events (2006-2007 School Year)</font></b> <br> <hr> <table border="0" width="100%" id="table2" cellspacing="0" cellpadding="0"> <tr> <td> <iframe id="TrumbaIFrame" src="eventsiframe.html" frameborder="no" width="100%" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true"></iframe></td> </tr> </table> </html> What I'm doing with this fix is that I'm creating the Spud inside it's own IFRAME which in turn lives inside your MainiFrame. This avoids the conflict between the Upcoming and Calendar Spuds and gets your site working again. Quote Link to comment Share on other sites More sharing options...
Kevin Posted September 29, 2006 Author Report Share Posted September 29, 2006 Troy said: What I'm doing with this fix is that I'm creating the Spud inside it's own IFRAME which in turn lives inside your MainiFrame. This avoids the conflict between the Upcoming and Calendar Spuds and gets your site working again. Thank you very for your incredibly quick support! I tried your suggestions and made small modifications to the events.htm code. We are definitely getting there. My only issue, though pretty small, is that now the regular calendar gets cut off at the bottom of the events.htm frame. I assume this is a simple fix, but I couldn't quite figure it out. Quote Link to comment Share on other sites More sharing options...
Troy Posted September 29, 2006 Report Share Posted September 29, 2006 Yes, of course it's chopped, very typical of IFRAME height. You can paste the following code into your events.htm file to get it to auto-size to the calendar. <script type="text\javascript"> function resizeIFrame() { var name = window.name; var iframe = window.parent.getElementById(name); if (iframe == null) iframe = window.parent.frames[name]; if (iframe != null) { // adjust the iframe's height based on its contents if (iframe.contentDocument && iframe.contentDocument.body.offsetHeight) iframe.height = Math.min(iframe.contentDocument.body.offsetHeight, 10000); // netscape/firefox else if (iframe.Document && iframe.Document.body.scrollHeight) iframe.height = Math.min(iframe.Document.body.scrollHeight, 10000) + 2; // internet explorer } } window.onload = resizeIFrame; window.onresize = resizeIFrame; </script> Mind you I wrote this really fast and wasn't able to test the code. I'll try it out in the morning but you can go ahead and try it right now if you want. The idea is that whenever your iframe loads or resizes you redo the document height. This is a known and tricky issue with IFRAMEs. It's based on code inside our Spuds that does essentially the same thing. There could be an issue if the Spud grows too much but we'll deal with that when we get there. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.