hi guys! i would like to ask for some help regarding the compatibility
of script.aculo.us with IE6. I am trying a sample drag and drop
(included in the zip file when you download the said library) but it
is nor working properly. My client needs the web page in IE6 so I am
forced to use the said browser.
Below is the code of the said drag and drop:
<html>
<head>
<title>Drag & Drop</title>
<style type="text/css">
td
{
width: 10em;
text-align: center;
}
table.mytable
{
list-style-type: none;
padding: 4px 4px 0 4px;
margin: 0px;
font-size: 13px;
font-family: Arial, sans-serif;
}
table.mytable tr
{
margin-bottom: 4px;
padding: 2px 2px;
border: 1px solid #c00;
background-color: #eee;
}
div.draggable
{
cursor:move;
padding:2px;
background-color: #BBCCDD;
}
div.dropsite
{
padding:2px;
background-color: #DDBB99;
}
div.hoverclass123
{
border:1px solid red;
}
</style>
<script src="prototype.js"
type="text/javascript"></script>
<script src="scriptaculous.js"
type="text/javascript"></script>
<script type="text/javascript" language="javascript"
charset="utf-8">
// <![CDATA[
Position.includeScrollOffsets = false;
window.onload = function()
{
var t1 = $("t1");
var trs = t1.getElementsByTagName("tr");
add_divs(t1, ''td'', ''draggable'');
for (var i = 0; i < trs.length; i++)
{
var divs = document.getElementsByClassName("draggable", trs[i]);
var drag_text = divs[2].innerHTML;
for (var j = 0; j < divs.length; ++j)
{
new Draggable(divs[j], {ghosting:true, revert:true});
//new Draggable(divs[j], {revert:true});
}
}
var t2 = document.getElementById("t2");
add_divs(t2, ''td'', ''dropsite'');
var divs = document.getElementsByClassName("dropsite", t2);
for (var j = 0; j < divs.length; ++j)
{
Droppables.add(divs[j], {accept:''draggable'',
onDrop:function(element, dropon, event){ debug("dropped " +
element.innerHTML + " on " + dropon.innerHTML + "\n")}});
}
};
function debug(text)
{
document.getElementById(''debug'').innerHTML
= "<pre>" + text + "</pre>";
}
function add_divs(table, tag, classname)
{
var items = table.getElementsByTagName(tag);
for (var i = 0; i < items.length; i++)
items[i].innerHTML "<div class=''" + classname +
"''>" + items[i].innerHTML + "</div>";
}
// ]]>
</script>
</head>
<body>
<p>Drag from this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t1" class="sortable mytable">
<tr><td>one</td><td>1</td><td>uno</td></tr>
<tr><td>two</td><td>2</td><td>dos</td></tr>
<tr><td>three</td><td>3</td><td>tres</td></tr>
<tr><td>four</td><td>4</td><td>quatro</td></tr>
<tr><td>five</td><td>5</td><td>cinco</td></tr>
<tr><td>six</td><td>6</td><td>seis</td></tr>
<tr><td>seven</td><td>7</td><td>siete</td></tr>
<tr><td>eight</td><td>8</td><td>ocho</td></tr>
<tr><td>nine</td><td>9</td><td>nueve</td></tr>
<tr><td>ten</td><td>10</td><td>diez</td></tr>
</table>
</DIV>
</DIV>
<p>
<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t2" class="sortable mytable">
<tr><td>eleven</td><td>11</td><td>once</td></tr>
<tr><td>twelve</td><td>12</td><td>doce</td></tr>
<tr><td>thirteen</td><td>13</td><td>trece</td></tr>
<tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
<tr><td>fifteen</td><td>15</td><td>quince</td></tr>
<tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
<tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
<tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
<tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
<tr><td>twenty</td><td>20</td><td>veinte</td></tr>
</table>
</DIV>
</DIV>
<p>
<div id="debug"></div>
</p>
</body>
</html>ml>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
script.aculo.us 1.8, drag drop, IE6/7 and ghosting:true has a bug. see http://dev.rubyonrails.org/ticket/10207 On Nov 29, 2007 11:04 AM, Paw <paw1523-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote:> > hi guys! i would like to ask for some help regarding the compatibility > of script.aculo.us with IE6. I am trying a sample drag and drop > (included in the zip file when you download the said library) but it > is nor working properly. My client needs the web page in IE6 so I am > forced to use the said browser. > > Below is the code of the said drag and drop: > > <html> > <head> > <title>Drag & Drop</title> > > <style type="text/css"> > td > { > width: 10em; > text-align: center; > } > > table.mytable > { > list-style-type: none; > padding: 4px 4px 0 4px; > margin: 0px; > font-size: 13px; > font-family: Arial, sans-serif; > } > > table.mytable tr > { > margin-bottom: 4px; > padding: 2px 2px; > border: 1px solid #c00; > background-color: #eee; > } > > div.draggable > { > cursor:move; > padding:2px; > background-color: #BBCCDD; > } > > div.dropsite > { > padding:2px; > background-color: #DDBB99; > } > > div.hoverclass123 > { > border:1px solid red; > } > </style> > > <script src="prototype.js" type="text/javascript"></script> > <script src="scriptaculous.js" type="text/javascript"></script> > <script type="text/javascript" language="javascript" charset="utf-8"> > // <![CDATA[ > Position.includeScrollOffsets = false; > > window.onload = function() > { > var t1 = $("t1"); > var trs = t1.getElementsByTagName("tr"); > add_divs(t1, ''td'', ''draggable''); > for (var i = 0; i < trs.length; i++) > { > var divs = document.getElementsByClassName("draggable", trs[i]); > var drag_text = divs[2].innerHTML; > for (var j = 0; j < divs.length; ++j) > { > new Draggable(divs[j], {ghosting:true, revert:true}); > //new Draggable(divs[j], {revert:true}); > } > } > > var t2 = document.getElementById("t2"); > add_divs(t2, ''td'', ''dropsite''); > var divs = document.getElementsByClassName("dropsite", t2); > for (var j = 0; j < divs.length; ++j) > { > Droppables.add(divs[j], {accept:''draggable'', > onDrop:function(element, dropon, event){ debug("dropped " + > element.innerHTML + " on " + dropon.innerHTML + "\n")}}); > } > }; > > function debug(text) > { > document.getElementById(''debug'').innerHTML > = "<pre>" + text + "</pre>"; > } > > function add_divs(table, tag, classname) > { > var items = table.getElementsByTagName(tag); > for (var i = 0; i < items.length; i++) > items[i].innerHTML > "<div class=''" + classname + "''>" + items[i].innerHTML + "</div>"; > } > > > // ]]> > </script> > </head> > <body> > > <p>Drag from this table:</p> > <DIV STYLE="padding-left: 50pt;"> > <DIV STYLE="overflow: auto; width: 250; height: 100; > border: 1px gray solid; > padding:0px; margin: 0px;"> > <table id="t1" class="sortable mytable"> > <tr><td>one</td><td>1</td><td>uno</td></tr> > <tr><td>two</td><td>2</td><td>dos</td></tr> > <tr><td>three</td><td>3</td><td>tres</td></tr> > <tr><td>four</td><td>4</td><td>quatro</td></tr> > <tr><td>five</td><td>5</td><td>cinco</td></tr> > <tr><td>six</td><td>6</td><td>seis</td></tr> > <tr><td>seven</td><td>7</td><td>siete</td></tr> > <tr><td>eight</td><td>8</td><td>ocho</td></tr> > <tr><td>nine</td><td>9</td><td>nueve</td></tr> > <tr><td>ten</td><td>10</td><td>diez</td></tr> > </table> > </DIV> > </DIV> > <p> > <p>Drop on this table:</p> > <DIV STYLE="padding-left: 50pt;"> > <DIV STYLE="overflow: auto; width: 250; height: 100; > border: 1px gray solid; > padding:0px; margin: 0px;"> > <table id="t2" class="sortable mytable"> > <tr><td>eleven</td><td>11</td><td>once</td></tr> > <tr><td>twelve</td><td>12</td><td>doce</td></tr> > <tr><td>thirteen</td><td>13</td><td>trece</td></tr> > <tr><td>fourteen</td><td>14</td><td>catorce</td></tr> > <tr><td>fifteen</td><td>15</td><td>quince</td></tr> > <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr> > <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr> > <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr> > <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr> > <tr><td>twenty</td><td>20</td><td>veinte</td></tr> > </table> > </DIV> > </DIV> > <p> > <div id="debug"></div> > </p> > </body> > </html> ml> > > >-- Surendra Singhi http://ssinghi.kreeti.com, http://www.kreeti.com --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks, that fix works nice! Here is the direct link to the resolved problem in trac. On 30 Nov. 2007, 19:00, Surendra <singhi.suren...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> script.aculo.us 1.8, drag drop, IE6/7 and ghosting:true has a bug. > > seehttp://dev.rubyonrails.org/ticket/10207 > > On Nov 29, 2007 11:04 AM, Paw <paw1...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > hi guys! i would like to ask for some help regarding the compatibility > > of script.aculo.us with IE6. I am trying a sample drag and drop > > (included in the zip file when you download the said library) but it > > is nor working properly. My client needs the web page in IE6 so I am > > forced to use the said browser. > > > Below is the code of the said drag and drop: > > > <html> > > <head> > > <title>Drag & Drop</title> > > > <style type="text/css"> > > td > > { > > width: 10em; > > text-align: center; > > } > > > table.mytable > > { > > list-style-type: none; > > padding: 4px 4px 0 4px; > > margin: 0px; > > font-size: 13px; > > font-family: Arial, sans-serif; > > } > > > table.mytable tr > > { > > margin-bottom: 4px; > > padding: 2px 2px; > > border: 1px solid #c00; > > background-color: #eee; > > } > > > div.draggable > > { > > cursor:move; > > padding:2px; > > background-color: #BBCCDD; > > } > > > div.dropsite > > { > > padding:2px; > > background-color: #DDBB99; > > } > > > div.hoverclass123 > > { > > border:1px solid red; > > } > > </style> > > > <script src="prototype.js" type="text/javascript"></script> > > <script src="scriptaculous.js" type="text/javascript"></script> > > <script type="text/javascript" language="javascript" charset="utf-8"> > > // <![CDATA[ > > Position.includeScrollOffsets = false; > > > window.onload = function() > > { > > var t1 = $("t1"); > > var trs = t1.getElementsByTagName("tr"); > > add_divs(t1, ''td'', ''draggable''); > > for (var i = 0; i < trs.length; i++) > > { > > var divs = document.getElementsByClassName("draggable", trs[i]); > > var drag_text = divs[2].innerHTML; > > for (var j = 0; j < divs.length; ++j) > > { > > new Draggable(divs[j], {ghosting:true,revert:true}); > > //new Draggable(divs[j], {revert:true}); > > } > > } > > > var t2 = document.getElementById("t2"); > > add_divs(t2, ''td'', ''dropsite''); > > var divs = document.getElementsByClassName("dropsite", t2); > > for (var j = 0; j < divs.length; ++j) > > { > > Droppables.add(divs[j], {accept:''draggable'', > > onDrop:function(element, dropon, event){ debug("dropped " + > > element.innerHTML + " on " + dropon.innerHTML + "\n")}}); > > } > > }; > > > function debug(text) > > { > > document.getElementById(''debug'').innerHTML > > = "<pre>" + text + "</pre>"; > > } > > > function add_divs(table, tag, classname) > > { > > var items = table.getElementsByTagName(tag); > > for (var i = 0; i < items.length; i++) > > items[i].innerHTML > > "<div class=''" + classname + "''>" + items[i].innerHTML + "</div>"; > > } > > > // ]]> > > </script> > > </head> > > <body> > > > <p>Drag from this table:</p> > > <DIV STYLE="padding-left: 50pt;"> > > <DIV STYLE="overflow: auto; width: 250; height: 100; > > border: 1px gray solid; > > padding:0px; margin: 0px;"> > > <table id="t1" class="sortable mytable"> > > <tr><td>one</td><td>1</td><td>uno</td></tr> > > <tr><td>two</td><td>2</td><td>dos</td></tr> > > <tr><td>three</td><td>3</td><td>tres</td></tr> > > <tr><td>four</td><td>4</td><td>quatro</td></tr> > > <tr><td>five</td><td>5</td><td>cinco</td></tr> > > <tr><td>six</td><td>6</td><td>seis</td></tr> > > <tr><td>seven</td><td>7</td><td>siete</td></tr> > > <tr><td>eight</td><td>8</td><td>ocho</td></tr> > > <tr><td>nine</td><td>9</td><td>nueve</td></tr> > > <tr><td>ten</td><td>10</td><td>diez</td></tr> > > </table> > > </DIV> > > </DIV> > > <p> > > <p>Drop on this table:</p> > > <DIV STYLE="padding-left: 50pt;"> > > <DIV STYLE="overflow: auto; width: 250; height: 100; > > border: 1px gray solid; > > padding:0px; margin: 0px;"> > > <table id="t2" class="sortable mytable"> > > <tr><td>eleven</td><td>11</td><td>once</td></tr> > > <tr><td>twelve</td><td>12</td><td>doce</td></tr> > > <tr><td>thirteen</td><td>13</td><td>trece</td></tr> > > <tr><td>fourteen</td><td>14</td><td>catorce</td></tr> > > <tr><td>fifteen</td><td>15</td><td>quince</td></tr> > > <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr> > > <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr> > > <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr> > > <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr> > > <tr><td>twenty</td><td>20</td><td>veinte</td></tr> > > </table> > > </DIV> > > </DIV> > > <p> > > <div id="debug"></div> > > </p> > > </body> > > </html> ml> > > -- > Surendra Singhihttp://ssinghi.kreeti.com,http://www.kreeti.com--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks, that fix works nice! Here is the direct link to the resolved problem in trac: http://dev.rubyonrails.org/attachment/ticket/10207/dragdrop_originallyabsolute.diff On 30 Nov. 2007, 19:00, Surendra <singhi.suren...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> script.aculo.us 1.8, drag drop, IE6/7 and ghosting:true has a bug. > > seehttp://dev.rubyonrails.org/ticket/10207 > > On Nov 29, 2007 11:04 AM, Paw <paw1...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > hi guys! i would like to ask for some help regarding the compatibility > > of script.aculo.us with IE6. I am trying a sample drag and drop > > (included in the zip file when you download the said library) but it > > is nor working properly. My client needs the web page in IE6 so I am > > forced to use the said browser. > > > Below is the code of the said drag and drop: > > > <html> > > <head> > > <title>Drag & Drop</title> > > > <style type="text/css"> > > td > > { > > width: 10em; > > text-align: center; > > } > > > table.mytable > > { > > list-style-type: none; > > padding: 4px 4px 0 4px; > > margin: 0px; > > font-size: 13px; > > font-family: Arial, sans-serif; > > } > > > table.mytable tr > > { > > margin-bottom: 4px; > > padding: 2px 2px; > > border: 1px solid #c00; > > background-color: #eee; > > } > > > div.draggable > > { > > cursor:move; > > padding:2px; > > background-color: #BBCCDD; > > } > > > div.dropsite > > { > > padding:2px; > > background-color: #DDBB99; > > } > > > div.hoverclass123 > > { > > border:1px solid red; > > } > > </style> > > > <script src="prototype.js" type="text/javascript"></script> > > <script src="scriptaculous.js" type="text/javascript"></script> > > <script type="text/javascript" language="javascript" charset="utf-8"> > > // <![CDATA[ > > Position.includeScrollOffsets = false; > > > window.onload = function() > > { > > var t1 = $("t1"); > > var trs = t1.getElementsByTagName("tr"); > > add_divs(t1, ''td'', ''draggable''); > > for (var i = 0; i < trs.length; i++) > > { > > var divs = document.getElementsByClassName("draggable", trs[i]); > > var drag_text = divs[2].innerHTML; > > for (var j = 0; j < divs.length; ++j) > > { > > new Draggable(divs[j], {ghosting:true, revert:true}); > > //new Draggable(divs[j], {revert:true}); > > } > > } > > > var t2 = document.getElementById("t2"); > > add_divs(t2, ''td'', ''dropsite''); > > var divs = document.getElementsByClassName("dropsite", t2); > > for (var j = 0; j < divs.length; ++j) > > { > > Droppables.add(divs[j], {accept:''draggable'', > > onDrop:function(element, dropon, event){ debug("dropped " + > > element.innerHTML + " on " + dropon.innerHTML + "\n")}}); > > } > > }; > > > function debug(text) > > { > > document.getElementById(''debug'').innerHTML > > = "<pre>" + text + "</pre>"; > > } > > > function add_divs(table, tag, classname) > > { > > var items = table.getElementsByTagName(tag); > > for (var i = 0; i < items.length; i++) > > items[i].innerHTML > > "<div class=''" + classname + "''>" + items[i].innerHTML + "</div>"; > > } > > > // ]]> > > </script> > > </head> > > <body> > > > <p>Drag from this table:</p> > > <DIV STYLE="padding-left: 50pt;"> > > <DIV STYLE="overflow: auto; width: 250; height: 100; > > border: 1px gray solid; > > padding:0px; margin: 0px;"> > > <table id="t1" class="sortable mytable"> > > <tr><td>one</td><td>1</td><td>uno</td></tr> > > <tr><td>two</td><td>2</td><td>dos</td></tr> > > <tr><td>three</td><td>3</td><td>tres</td></tr> > > <tr><td>four</td><td>4</td><td>quatro</td></tr> > > <tr><td>five</td><td>5</td><td>cinco</td></tr> > > <tr><td>six</td><td>6</td><td>seis</td></tr> > > <tr><td>seven</td><td>7</td><td>siete</td></tr> > > <tr><td>eight</td><td>8</td><td>ocho</td></tr> > > <tr><td>nine</td><td>9</td><td>nueve</td></tr> > > <tr><td>ten</td><td>10</td><td>diez</td></tr> > > </table> > > </DIV> > > </DIV> > > <p> > > <p>Drop on this table:</p> > > <DIV STYLE="padding-left: 50pt;"> > > <DIV STYLE="overflow: auto; width: 250; height: 100; > > border: 1px gray solid; > > padding:0px; margin: 0px;"> > > <table id="t2" class="sortable mytable"> > > <tr><td>eleven</td><td>11</td><td>once</td></tr> > > <tr><td>twelve</td><td>12</td><td>doce</td></tr> > > <tr><td>thirteen</td><td>13</td><td>trece</td></tr> > > <tr><td>fourteen</td><td>14</td><td>catorce</td></tr> > > <tr><td>fifteen</td><td>15</td><td>quince</td></tr> > > <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr> > > <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr> > > <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr> > > <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr> > > <tr><td>twenty</td><td>20</td><td>veinte</td></tr> > > </table> > > </DIV> > > </DIV> > > <p> > > <div id="debug"></div> > > </p> > > </body> > > </html> ml> > > -- > Surendra Singhihttp://ssinghi.kreeti.com,http://www.kreeti.com--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---