You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@shindig.apache.org by "Parrott, Justin" <JP...@medplus.com> on 2008/09/25 17:18:39 UTC
igoogle intranet page
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 (postmaster@MedPlus.com). After replying, please erase it from your computer system.
Re: igoogle intranet page
Posted by Vjekoslav Nesek <vn...@nmote.com>.
Parrott, Justin wrote:
> Now are you going to build in an authentication layer to this 'gadget
> page' as well? Does shindig offer anything like this that you know of?
> Basically I am recreating (or trying to) igoogle for my company's use
> though internally.
>
I'm developing igoogle/netvibes/pageflakes localized clone.
Authentication will be
done with cookies and some custom servlet filters.
Shindig has a concept of security tokens that from what I've been able
to dig out,
encapsulate owner/viewer/(app | gadget | module | widget)/some other
stuff. How
this security token is setup is a mystery to me. Guess you're on your
own to
implement it as best as possible.
One question to initiated... How do you save gadget preferences? Samples use
igoogle directly (wierd). And does gadget preferences get written into
output
html+js during content rewriting?
Thanks,
Vjeko
RE: igoogle intranet page
Posted by "Parrott, Justin" <JP...@medplus.com>.
Now are you going to build in an authentication layer to this 'gadget
page' as well? Does shindig offer anything like this that you know of?
Basically I am recreating (or trying to) igoogle for my company's use
though internally.
-----Original Message-----
From: Vjekoslav Nesek [mailto:vnesek@nmote.com]
Sent: Friday, September 26, 2008 10:09 AM
To: shindig-dev@incubator.apache.org
Subject: Re: igoogle intranet page
Parrott, Justin wrote:
> Care to share some of that code so I could try it out?
>
Well... if you share back (and don't laugh at JS, I'm bit of a novice
with it).
Bellow is a jquery plugin, so include jquery-1.2.6 in a html before it.
Place gadgets in a <div id='container'> and add to the end of html:
$().ready(function() {
$('#container').portal();
};
Right now I'm trying to layout gadgets in a grid.... after that column
sizing,
reordering and handling gadget resizing.
Let me know how IE6+ behave.
BR,
Vjekoslav Nesek
// Gadget drag n drop....
(function($) {
var defaults = { grid: [20, 420, 820] };
function closest(v, values) {
var len = values.length;
var m = values[len - 1];
//console.log(m);
var d = Math.abs(v - m);
for (var i = len - 2; i >= 0; --i) {
var m2 = values[i];
var d2 = Math.abs(v - m2);
if (d2 < d) m = m2;
//console.log(d2, m2, m);
}
return m;
}
$.fn.height = function() {
var h = this.css('height');
h = h.substring(0, h.length - 2);
return Number(h);
};
$.fn.portal = function(options) {
options = $.extend({}, defaults, options);
var catcher;
if ($.browser.mozilla) {
// Add a div to prevent firefox iframes catching mouse
catcher = $('<div style="height: 800px; width: 100%; z-index:
40; background-color: #eee; position: absolute; opacity: .0; display:
none" />');
this.append(catcher);
} else {
catcher = $('<div/>');
}
// Dragged element
var target;
function layout() {
var y = 0;
$('.gadgets-gadget-chrome').each(function(i, e) {
e = $(e);
e.css('top', y + 'px');
h = e.height();
//console.log('Height', h, y);
y += h + 10;
});
};
function dragIt(event) {
if (!target) return;
target.css({
left: (event.pageX + target.dragOffset.left) + 'px',
top: (event.pageY + target.dragOffset.top) + 'px'
});
event.preventDefault();
};
function mouseUp(event) {
if (!target) return;
//catcher.css('z-index', '-100');
catcher.hide();
target.css('z-index', '0');
var left = target.offset().left;
var c = closest(left, options.grid);
target.animate({ left: c }, { duration: 'normal', step:
function() { }});
//console.log('Stop', left, c);
target = null;
event.preventDefault();
};
this.mousemove(dragIt);
catcher.mousemove(dragIt);
this.mouseup(mouseUp);
this.find('.gadgets-gadget-title').mousedown(function(event) {
layout();
target = $(this).parents('.gadgets-gadget-chrome');
//catcher.css('z-index', '10');
catcher.show();
target.css('z-index', '30');
var d = $(target).offset();
d.left -= event.pageX;
d.top -= event.pageY;
target.dragOffset = d;
event.preventDefault();
});
return this;
}
})(jQuery);
> -----Original Message-----
> From: Vjekoslav Nesek [mailto:vnesek@nmote.com]
> Sent: Thursday, September 25, 2008 11:34 AM
> To: shindig-dev@incubator.apache.org
> 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
> (postmaster@MedPlus.com). 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
(postmaster@MedPlus.com). 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 (postmaster@MedPlus.com). After replying, please erase it from your computer system.
Re: igoogle intranet page
Posted by Vjekoslav Nesek <vn...@nmote.com>.
Parrott, Justin wrote:
> Care to share some of that code so I could try it out?
>
Well... if you share back (and don't laugh at JS, I'm bit of a novice
with it).
Bellow is a jquery plugin, so include jquery-1.2.6 in a html before it.
Place gadgets in a <div id='container'> and add to the end of html:
$().ready(function() {
$('#container').portal();
};
Right now I'm trying to layout gadgets in a grid.... after that column
sizing,
reordering and handling gadget resizing.
Let me know how IE6+ behave.
BR,
Vjekoslav Nesek
// Gadget drag n drop....
(function($) {
var defaults = { grid: [20, 420, 820] };
function closest(v, values) {
var len = values.length;
var m = values[len - 1];
//console.log(m);
var d = Math.abs(v - m);
for (var i = len - 2; i >= 0; --i) {
var m2 = values[i];
var d2 = Math.abs(v - m2);
if (d2 < d) m = m2;
//console.log(d2, m2, m);
}
return m;
}
$.fn.height = function() {
var h = this.css('height');
h = h.substring(0, h.length - 2);
return Number(h);
};
$.fn.portal = function(options) {
options = $.extend({}, defaults, options);
var catcher;
if ($.browser.mozilla) {
// Add a div to prevent firefox iframes catching mouse
catcher = $('<div style="height: 800px; width: 100%; z-index:
40; background-color: #eee; position: absolute; opacity: .0; display:
none" />');
this.append(catcher);
} else {
catcher = $('<div/>');
}
// Dragged element
var target;
function layout() {
var y = 0;
$('.gadgets-gadget-chrome').each(function(i, e) {
e = $(e);
e.css('top', y + 'px');
h = e.height();
//console.log('Height', h, y);
y += h + 10;
});
};
function dragIt(event) {
if (!target) return;
target.css({
left: (event.pageX + target.dragOffset.left) + 'px',
top: (event.pageY + target.dragOffset.top) + 'px'
});
event.preventDefault();
};
function mouseUp(event) {
if (!target) return;
//catcher.css('z-index', '-100');
catcher.hide();
target.css('z-index', '0');
var left = target.offset().left;
var c = closest(left, options.grid);
target.animate({ left: c }, { duration: 'normal', step:
function() { }});
//console.log('Stop', left, c);
target = null;
event.preventDefault();
};
this.mousemove(dragIt);
catcher.mousemove(dragIt);
this.mouseup(mouseUp);
this.find('.gadgets-gadget-title').mousedown(function(event) {
layout();
target = $(this).parents('.gadgets-gadget-chrome');
//catcher.css('z-index', '10');
catcher.show();
target.css('z-index', '30');
var d = $(target).offset();
d.left -= event.pageX;
d.top -= event.pageY;
target.dragOffset = d;
event.preventDefault();
});
return this;
}
})(jQuery);
> -----Original Message-----
> From: Vjekoslav Nesek [mailto:vnesek@nmote.com]
> Sent: Thursday, September 25, 2008 11:34 AM
> To: shindig-dev@incubator.apache.org
> 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
> (postmaster@MedPlus.com). 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 (postmaster@MedPlus.com). After replying, please erase it from your computer system.
>
>
>
>
RE: igoogle intranet page
Posted by "Parrott, Justin" <JP...@medplus.com>.
Care to share some of that code so I could try it out?
-----Original Message-----
From: Vjekoslav Nesek [mailto:vnesek@nmote.com]
Sent: Thursday, September 25, 2008 11:34 AM
To: shindig-dev@incubator.apache.org
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
(postmaster@MedPlus.com). 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 (postmaster@MedPlus.com). After replying, please erase it from your computer system.
Re: igoogle intranet page
Posted by Vjekoslav Nesek <vn...@nmote.com>.
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 (postmaster@MedPlus.com). After replying, please erase it from your computer system.
>
>
>
>
>