Care to share some of that code so I could try it out? -----Original Message----- From: Vjekoslav Nesek [mailto:[EMAIL PROTECTED] Sent: Thursday, September 25, 2008 11:34 AM To: [email protected] Subject: Re: igoogle intranet page
Hi, I'm felling the same pain as you at a same time. It's related to 7-years old bug in a firefox where if you pull out an iframe out of DOM (which all JS drag&drop libraries do) it resets it's src attribute, hence reload. I've tried scriptacolus, YUI and jquery.ui without any lucl. Right now I'm coding my own dd layou manager that: * renders all gadgets in a single <div> container with relative layout * gadget chrome is absolutely positioned * does not pull out from a DOM when repositioning Another problem with firefox is that it will not deliver mouse events when you drag over iframes, making for a bad ui experience. This can be solved by putting a <div> over all other gadgets and dragging gadget over this div. That way iframes don't swallow mousemove events. Right now it's kind of working and I can drag gadgets around without any reloads. BR, Vjekoslav Nesek Parrott, Justin wrote: > Hello, > > > > I'm trying to use some javascript api's from the scriptaculous libraries > and shindig to build a mimic of the igoogle page but for an intranet > dashboard for my company. I will be using custom gadgets eventually but > right now I'm just playing around with the main screen. I will paste > the code below and I have a few questions regarding it. I would seem > that in firefox every time I drag the gadgets to a different section the > whole page reloads again which is slowing things down, plus everything > just seems very clunky. I'm assuming this is my code as I'm not the > most experienced coder as of yet. I would like some opinions on my code > and if anyone can lend some advice on possibly a better way to do this. > I'm using the php version of shindig. > > > > Code: > > > > <!DOCTYPE html> > > <html> > > <head> > > <title>Sample: Simple Container</title> > > <!-- default container look and feel --> > > <link rel="stylesheet" href="gadgets.css"> > > <script type="text/javascript" > src="../../js/rpc.js?c=1&debug=1"></script> > > <script type="text/javascript" src="cookies.js"></script> > > <script type="text/javascript" src="util.js"></script> > > <script type="text/javascript" src="gadgets.js"></script> > > <script type="text/javascript" > src="cookiebaseduserprefstore.js"></script> > > <script type="text/javascript" > src="scriptaculous/prototype.js"></script> > > <script type="text/javascript" > src="scriptaculous/scriptaculous.js"></script> > > <script type="text/javascript"> > > var specUrl0 = 'http://www.google.com/ig/modules/horoscope.xml'; > > var specUrl1 = 'http://www.labpixies.com/campaigns/todo/todo.xml'; > > var specUrl2 = 'http://blog.outer-court.com/homepage/miniweb.xml'; > > > > // This container lays out and renders gadgets itself. > > > > function renderGadgets() { > > var gadget0 = gadgets.container.createGadget({specUrl: specUrl0}); > > var gadget1 = gadgets.container.createGadget({specUrl: specUrl1}); > > var gadget2 = gadgets.container.createGadget({specUrl: specUrl2}); > > > > gadgets.container.addGadget(gadget0); > > gadgets.container.addGadget(gadget1); > > gadgets.container.addGadget(gadget2); > > > > gadgets.container.layoutManager.setGadgetChromeIds( > > ['gadget-chrome-x', 'gadget-chrome-y', 'gadget-chrome-z']); > > > > gadgets.container.renderGadget(gadget0); > > gadgets.container.renderGadget(gadget1); > > gadgets.container.renderGadget(gadget2); > > > > }; > > </script> > > <style type="text/css"> > > body, div { > > font-family: Arial, Helvetica; > > font-size: 11px; > > } > > > > .section1 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 5px; > > top: 5px; > > width: 320px; > > height: 185px; > > } > > .section2 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 340px; > > top: 5px; > > width: 320px; > > height: 185px; > > } > > .section3 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 675px; > > top: 5px; > > width: 320px; > > height: 185px; > > } > > .section4 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 1010px; > > top: 5px; > > width: 320px; > > height: 185px; > > } > > .section5 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 5px; > > top: 210px; > > width: 320px; > > height: 185px; > > } > > .section6 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 340px; > > top: 210px; > > width: 320px; > > height: 185px; > > } > > .section7 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 675px; > > top: 210px; > > width: 320px; > > height: 185px; > > } > > .section8 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 1010px; > > top: 210px; > > width: 320px; > > height: 185px; > > } > > .section9 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 5px; > > top: 415px; > > width: 320px; > > height: 185px; > > } > > .section10 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 340px; > > top: 415px; > > width: 320px; > > height: 185px; > > } > > .section11 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 675px; > > top: 415px; > > width: 320px; > > height: 185px; > > } > > .section12 { > > border: 1px solid #CCCCCC; > > margin: 30px 5px; > > padding: 0px 0px 10px 0px; > > background-color: #EFEFEF; > > position: absolute; > > left: 1010px; > > top: 415px; > > width: 320px; > > height: 185px; > > } > > > > </style> > > </head> > > <body onLoad="renderGadgets()"> > > <div id="group1" class="section1"> > > <div id="gadget-chrome-x" class="gadgets-gadget-chrome"></div> > > </div> > > <div id="group2" class="section2"> > > <div id="gadget-chrome-y" class="gadgets-gadget-chrome"></div> > > </div> > > <div id="group3" class="section3"> > > <div id="gadget-chrome-z" class="gadgets-gadget-chrome"></div> > > </div> > > <div id="group4" class="section4"> > > </div> > > <div id="group5" class="section5"> > > </div> > > <div id="group6" class="section6"> > > </div> > > <div id="group7" class="section7"> > > </div> > > <div id="group8" class="section8"> > > </div> > > <div id="group9" class="section9"> > > </div> > > <div id="group10" class="section10"> > > </div> > > <div id="group11" class="section11"> > > </div> > > <div id="group12" class="section12"> > > </div> > > <script type="text/javascript"> > > // <![CDATA[ > > sections = [ 'group1', 'group2', 'group3', 'group4', 'group5', > 'group6', 'group7', 'group8', 'group9', 'group10', 'group11', 'group12' > ]; > > Sortable.create( 'group1', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group2', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group3', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group4', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group5', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group6', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group7', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group8', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group9', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group10', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group11', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > Sortable.create( 'group12', { tag:'div', dropOnEmpty: true, > containment: sections, constraint: false, only:'gadgets-gadget-chrome' } > ); > > // ]]> > > </script> > > </body> > > </html> > > > > Justin Parrott > > Enterprise Management Engineer > > Medplus Inc. > > > > > > > > > > > > > > Confidentiality Notice: The information contained in this electronic transmission is confidential and may be legally privileged. It is intended only for the addressee(s) named above. If you are not an intended recipient, be aware that any disclosure, copying, distribution or use of the information contained in this transmission is prohibited and may be unlawful. If you have received this transmission in error, please notify us by telephone (513) 229-5500 or by email ([EMAIL PROTECTED]). After replying, please erase it from your computer system. > > > > > Confidentiality Notice: The information contained in this electronic transmission is confidential and may be legally privileged. It is intended only for the addressee(s) named above. If you are not an intended recipient, be aware that any disclosure, copying, distribution or use of the information contained in this transmission is prohibited and may be unlawful. If you have received this transmission in error, please notify us by telephone (513) 229-5500 or by email ([EMAIL PROTECTED]). After replying, please erase it from your computer system.
