When you need to show code you should try using a site like http://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 plugin http://plugins.jquery.com/project/cookie.
I've explained how it works in this code here http://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>
No comments:
Post a Comment