Thanks so much for this - i'll compare the script that you just submitted to the one i submitted to see where i went wrong.
Thanks again Craig On Oct 2, 4:21 pm, Nalum <mallon.l...@gmail.com> wrote: > I've updated the javascript here.http://pastebin.com/m4caef476 > > If you need any help in understanding whats happening here let me know > and I'll try to explain it, I'm not the best at explaining things > though. > > Nalum > > On Oct 2, 4:06 pm, craigeves <craige...@googlemail.com> wrote: > > > Hi Nalum > > > I have tried and amended the code as you suggested - but still no > > luck? > > > Thanks for the tip (pastebin). Here is my full code now. Please would > > you take a quick look and let me know where im going wrong? > > >http://pastebin.com/m4dab8bb2 > > > Thanks for your help in this - it's really appreciated! > > > Craig > > > On Oct 2, 3:40 pm, Nalum <mallon.l...@gmail.com> wrote: > > > > Hello Craig, > > > When you need to show code you should try using a site > > > likehttp://pastebin.com > > > as it'll make it easier to read and your post wont be so long. > > > > You'll need to be able to work with cookies, I would suggest this > > > jquery pluginhttp://plugins.jquery.com/project/cookie. > > > > I've explained how it works in this code > > > herehttp://pastebin.com/m2c0e0bde. > > > > Hope this helps you out. > > > > Nalum > > > > On Oct 2, 3:15 pm, craigeves <craige...@googlemail.com> wrote: > > > > > Here it is - thanks for your help again.... > > > > > <!doctype html> > > > > <html lang="en"> > > > > <head> > > > > <title>jQuery UI Sortable - Portlets</title> > > > > <script type="text/javascript" src="jquery-1.3.2.js"></script> > > > > <script type="text/javascript" src="ui.core.js"></script> > > > > <script type="text/javascript" src="ui.sortable.js"></script> > > > > <style type="text/css"> > > > > .column { > > > > width: 300px; > > > > float: left; > > > > background-color: #eeeeee; > > > > margin-right: 25px; > > > > padding-top: 10px; > > > > padding-right: 10px; > > > > padding-bottom: 0px; > > > > padding-left: 10px; > > > > height: 700px;} > > > > > .portlet { > > > > background-color: #FFF; > > > > margin-top: 0; > > > > margin-right: 0; > > > > margin-bottom: 10; > > > > margin-left: 0;} > > > > > .portlet-header { > > > > margin: 0px; > > > > font-family: Arial, Helvetica, sans-serif; > > > > font-size: 18px; > > > > background-color: #333; > > > > padding: 10px; > > > > color: #FFF;} > > > > > .portlet-header .ui-icon { float: right; } > > > > .portlet-content { > > > > padding: 10px; > > > > font-family: Arial, Helvetica, sans-serif; > > > > font-size: 12px; > > > > line-height: 18px; > > > > color: #333; > > > > margin-bottom: 10px;} > > > > > .ui-sortable-placeholder { border: 1px dotted black; visibility: > > > > visible} > > > > .ui-sortable-placeholder * { visibility: hidden; } > > > > </style> > > > > <script type="text/javascript"> > > > > > $(function() { > > > > $(".column").sortable({ > > > > handle: > > > > '.portlet-header', > > > > connectWith: '.column' > > > > }); > > > > > $(".column").disableSelection(); > > > > }); > > > > </script> > > > > </head> > > > > <body> > > > > <div class="demo"> > > > > > <div class="column"> > > > > > <div class="portlet"> > > > > <div class="portlet-header > > > > ui-state-disabled">Feeds</div> > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing > > > > elit.</div> > > > > </div> > > > > > <div class="portlet"> > > > > <div class="portlet-header">News</div> > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing > > > > elit.</div> > > > > </div> > > > > > </div> > > > > > <div class="column"> > > > > > <div class="portlet"> > > > > <div class="portlet-header">Shopping</div> > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing > > > > elit.</div> > > > > </div> > > > > <p>sddfds</p> > > > > </div> > > > > > <div class="column"> > > > > > <div class="portlet"> > > > > <div class="portlet-header">Links</div> > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing > > > > elit.</div> > > > > </div> > > > > > <div class="portlet"> > > > > <div class="portlet-header">Images</div> > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing > > > > elit.</div> > > > > </div> > > > > > </div> > > > > > </div> > > > > </body> > > > > </html> > > > > > On Oct 2, 3:09 pm, Nalum <mallon.l...@gmail.com> wrote: > > > > > > Is the code in the original post all the code you have? > > > > > > On Oct 2, 3:03 pm, craigeves <craige...@googlemail.com> wrote: > > > > > > > Thanks for this - but I don't understand where it would fit into my > > > > > > script? I'm only just starting in jQuery... > > > > > > > Also, will this save the position of the portlet no matter which > > > > > > column it's in? It's just that it looks like it's related to a > > > > > > closed > > > > > > and expanded portlet state. > > > > > > > Thanks for your time. > > > > > > > Craig > > > > > > > On Oct 2, 2:58 pm, Nalum <mallon.l...@gmail.com> wrote: > > > > > > > > Hello Craig, > > > > > > > I've done this before by building up a string e.g. box- > > > > > > > id1,collapsed;box-id5,not-collapsed;box-id3,collapsed|box- > > > > > > > id4,collapsed;box-id2,not-collapsed;box-id6,collapsed; > > > > > > > > In the javascript do something like > > > > > > > thishttp://pastebin.com/m90a2af6 > > > > > > > > Hope this helps, > > > > > > > Nalum > > > > > > > > On Oct 2, 2:35 pm, craigeves <craige...@googlemail.com> wrote: > > > > > > > > > anyone? > > > > > > > > > On Oct 2, 12:08 am, craigeves <craige...@googlemail.com> wrote: > > > > > > > > > > Please can someone help? > > > > > > > > > > I am using the jQuery UI (sortable) Portlets code - but I > > > > > > > > > want to use > > > > > > > > > the jQuery cookies plugin to remember the order of the > > > > > > > > > portlets. I > > > > > > > > > don't know where to start - and searching the net for an > > > > > > > > > answer only > > > > > > > > > brings up sortable ul and li. > > > > > > > > > > Please help. > > > > > > > > > > Code: > > > > > > > > > <script type="text/javascript"> > > > > > > > > > $(function() { > > > > > > > > > $(".column").sortable({ > > > > > > > > > connectWith: '.column' > > > > > > > > > }); > > > > > > > > > > $(".column").disableSelection(); > > > > > > > > > }); > > > > > > > > > </script> > > > > > > > > > > HTML: > > > > > > > > > <div class="column"> > > > > > > > > > <div class="portlet"> > > > > > > > > > <div class="portlet-header > > > > > > > > > ui-state-disabled">Feeds</div> > > > > > > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer > > > > > > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > > > > > > adipiscing > > > > > > > > > elit.</div> > > > > > > > > > </div> > > > > > > > > > <div class="portlet"> > > > > > > > > > <div class="portlet-header">News</div> > > > > > > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer > > > > > > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > > > > > > adipiscing > > > > > > > > > elit.</div> > > > > > > > > > </div> > > > > > > > > > </div> > > > > > > > > > <div class="column"> > > > > > > > > > <div class="portlet"> > > > > > > > > > <div class="portlet-header">Shopping</div> > > > > > > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer > > > > > > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > > > > > > adipiscing > > > > > > > > > elit.</div> > > > > > > > > > </div> > > > > > > > > > </div> > > > > > > > > > <div class="column"> > > > > > > > > > <div class="portlet"> > > > > > > > > > <div class="portlet-header">Links</div> > > > > > > > > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer adipiscing elit. Lorem ipsum dolor sit amet, > > > > > > > > > consectetuer > > > > > > > > > adipiscing elit. Lorem ipsum dolor sit amet, consectetuer > > > > > > > > > adipiscing > > > > > > > > > elit.</div> > > > > > > > > > </div> > > > > > > > > > <div class="portlet"> > > > > > > > > > <div class="portlet-header">Images</div> > > > > > > > > > <div > > ... > > read more »
