Dan Washusen
2005-Jul-22 19:14 UTC
[Rails-spinoffs] Unpredictable behavoir using Sortable javascript
Hey all, I''m attempting create a photo album that can be re-ordered using the great scipts from script.aculo.us <http://script.aculo.us>. It seems to work as expected when I pretty much copy and paste the puzzle example but when I try and be a bit trickier (changing the movable elements to be divs containing images) things get wierd. I''m able to "pick" the photos up but they don''t seem to be able to figure out where they are meant to go... The code that functions as expected:> <div id="photos" class="album"> > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > <img class="photo" src="images/IMG_1272.JPG" alt="IMG_1272.JPG" /> > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > </div> > > <script type="text/javascript" language="javascript"> > Sortable.create("photos", { tag: ''img'', overlap: ''horizontal'', constraint: > false }); > </script>The code that does strange stuff:> <div id="photos" class="album"> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_1272.jpg" alt="IMG_1272.jpg" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > </div> > <div class="frame" style="display:inline"> > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > </div> > </div> > > <script type="text/javascript" language="javascript"> > Sortable.create("photos", { tag: ''div'', overlap: ''horizontal'', constraint: > false, handle:''photo'' }); > </script>Any ideas? Cheers, Dan -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050722/bf289189/attachment.html
Dan Washusen
2005-Jul-22 19:45 UTC
[Rails-spinoffs] Re: Unpredictable behavoir using Sortable javascript
Hmm. I just added a border around the frame divs and the frame div is only a few pixels hieght. I guess I don''t really understand how block elements works when you use display:inline... On 7/23/05, Dan Washusen <dan.washusen@gmail.com> wrote:> > Hey all, > I''m attempting create a photo album that can be re-ordered using the great > scipts from script.aculo.us <http://script.aculo.us>. It seems to work as > expected when I pretty much copy and paste the puzzle example but when I try > and be a bit trickier (changing the movable elements to be divs containing > images) things get wierd. I''m able to "pick" the photos up but they don''t > seem to be able to figure out where they are meant to go... > > The code that functions as expected: > > > <div id="photos" class="album"> > > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > > <img class="photo" src="images/IMG_1272.JPG" alt="IMG_1272.JPG" /> > > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > > </div> > > > > <script type="text/javascript" language="javascript"> > > Sortable.create("photos", { tag: ''img'', overlap: ''horizontal'', > > constraint: false }); > > </script> > > > The code that does strange stuff: > > > <div id="photos" class="album"> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_1272.jpg" alt="IMG_1272.jpg" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > > </div> > > <div class="frame" style="display:inline"> > > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > > </div> > > </div> > > > > <script type="text/javascript" language="javascript"> > > Sortable.create("photos", { tag: ''div'', overlap: ''horizontal'', > > constraint: false, handle:''photo'' }); > > </script> > > > Any ideas? > > Cheers, > Dan > > > > >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050722/57573f9f/attachment-0001.html
Dan Washusen
2005-Jul-22 22:05 UTC
[Rails-spinoffs] Re: Unpredictable behavoir using Sortable javascript
All sorted. I needed to make the frame div have a style of "display: block; float: left;"... On 7/23/05, Dan Washusen <dan.washusen@gmail.com> wrote:> > Hmm. I just added a border around the frame divs and the frame div is only > a few pixels hieght. I guess I don''t really understand how block elements > works when you use display:inline... > > On 7/23/05, Dan Washusen <dan.washusen@gmail.com> wrote: > > > > Hey all, > > I''m attempting create a photo album that can be re-ordered using the > > great scipts from script.aculo.us <http://script.aculo.us>. It seems to > > work as expected when I pretty much copy and paste the puzzle example but > > when I try and be a bit trickier (changing the movable elements to be divs > > containing images) things get wierd. I''m able to "pick" the photos up but > > they don''t seem to be able to figure out where they are meant to go... > > > > The code that functions as expected: > > > > > <div id="photos" class="album"> > > > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > > > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > > > <img class="photo" src="images/IMG_1272.JPG" alt="IMG_1272.JPG" /> > > > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > > > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > > > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > > > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > > > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > > > </div> > > > > > > <script type="text/javascript" language="javascript"> > > > Sortable.create("photos", { tag: ''img'', overlap: ''horizontal'', > > > constraint: false }); > > > </script> > > > > > > The code that does strange stuff: > > > > > <div id="photos" class="album"> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0098.JPG" alt="IMG_0098.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0101.JPG" alt="IMG_0101.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_1272.jpg" alt="IMG_1272.jpg" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0079.JPG" alt="IMG_0079.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0097.JPG" alt="IMG_0097.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0100.JPG" alt="IMG_0100.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0087.JPG" alt="IMG_0087.JPG" /> > > > </div> > > > <div class="frame" style="display:inline"> > > > <img class="photo" src="images/IMG_0102.JPG" alt="IMG_0102.JPG" /> > > > </div> > > > </div> > > > > > > <script type="text/javascript" language="javascript"> > > > Sortable.create("photos", { tag: ''div'', overlap: ''horizontal'', > > > constraint: false, handle:''photo'' }); > > > </script> > > > > > > Any ideas? > > > > Cheers, > > Dan > > > > > > > > > > >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050722/086e0e27/attachment.html