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.
