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 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>
