[Proto-Scripty] Re: Adding Scroll bars to list
Hi vanq69,
one simple method to do this is to force the global size of the ul
element of the list to a fixed dimension, but in that case, for small
list, the element still extend to its defined dimension.
Another (preferred way) could be to have a callback on the creation of
the list to test dimensions and apply preferred dimensions if it's too
big.
the callback could be set on the sortable creation.
The main problem with general question like the one you ask is that
you could have numerous way to do that, but depending to your code,
context or design, some restriction could appear.
As for your previous question, just post the global HTML page, and try
doing it, if you can'ty do what you want, then post the problem, it's
definitelly easier to modify exting code ... and if you're wrong in
doing something, it's easier for us to point the problem.
--
david
On 24 fév, 06:32, vanq69 wrote:
> I have a sortable draggable list with a droppable delete box, each
> entry in the list has a single text line.
>
> My question is this, how do I determine that when the list reaches a
> certain size that I want it to use scroll bars to avoid disrupting the
> rest of the page layout, whilst keeping the delete box in the same
> place if possible (ie at the bottom, i dont want it to be part of the
> scrolling)
>
> This is the current code I use to build the list:
>
> function startup()
> {
> Sortable.create("chunksList", {});
>
> Droppables.add("trash",
> {
> onDrop: function(element)
> {
> var deleteChunk = confirm("Are you sure you want to
> delete this
> Chunk?")
> if (deleteChunk)
> {
> Element.hide(element);
> process(element.id, "delChunk");
> }
> }
> });
>
> }
>
> Many thanks for taking the time to read.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
Thanks David, gives me a couple of options, Im not worried about the
list being
of a fixed dimension even when empty that is fine, its more it
extending too far
so I think having a go at option 1 is the best bet for me.
Will have a try and post with any issues.
Thanks
On Feb 24, 11:27 am, david wrote:
> Hi vanq69,
>
> one simple method to do this is to force the global size of the ul
> element of the list to a fixed dimension, but in that case, for small
> list, the element still extend to its defined dimension.
>
> Another (preferred way) could be to have a callback on the creation of
> the list to test dimensions and apply preferred dimensions if it's too
> big.
> the callback could be set on the sortable creation.
>
> The main problem with general question like the one you ask is that
> you could have numerous way to do that, but depending to your code,
> context or design, some restriction could appear.
> As for your previous question, just post the global HTML page, and try
> doing it, if you can'ty do what you want, then post the problem, it's
> definitelly easier to modify exting code ... and if you're wrong in
> doing something, it's easier for us to point the problem.
>
> --
> david
>
> On 24 fév, 06:32, vanq69 wrote:
>
> > I have a sortable draggable list with a droppable delete box, each
> > entry in the list has a single text line.
>
> > My question is this, how do I determine that when the list reaches a
> > certain size that I want it to use scroll bars to avoid disrupting the
> > rest of the page layout, whilst keeping the delete box in the same
> > place if possible (ie at the bottom, i dont want it to be part of the
> > scrolling)
>
> > This is the current code I use to build the list:
>
> > function startup()
> > {
> > Sortable.create("chunksList", {});
>
> > Droppables.add("trash",
> > {
> > onDrop: function(element)
> > {
> > var deleteChunk = confirm("Are you sure you want to
> > delete this
> > Chunk?")
> > if (deleteChunk)
> > {
> > Element.hide(element);
> > process(element.id, "delChunk");
> > }
> > }
> > });
>
> > }
>
> > Many thanks for taking the time to read.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
Have had a look into this and havent been able to find a suitable
method.
I am aiming for having a space for 12 rows with scrollbars to get to
the rest,
with the top div - "addPage" and the bottom div - "trash" being always
visible.
Here is the code im currently trying:
Chunk List
DRAG HERE TO ADD TO PAGE
BuildChunksList();
?>
DRAG HERE TO
DELETE
And here is the relevant parts of the CSS:
/* Sidebar2 CSS */
#sidebar2 {
float: centre;
padding: 20px 20px;
}
#addPage
{
border: 4px solid #ffd90f;
width: 190px;
padding: 10px;
}
ul.sortableList
{
list-style-type: none;
padding: 0px;
margin: 0px;
width: 220px;
}
ul.sortableList li
{
cursor: move;
padding: 2px 2px;
margin: 2px 0px;
border: 1px solid #ffd90f;
background-color: #eee;
}
#trash
{
border: 4px solid #ffd90f;
width: 190px;
padding: 10px;
}
Any thoughts or help would be great :)
Regards
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
Firstly in your CSS you have float:centre
There is no float:center as far as i know .. if there were it would be
"center" <--- american spelling
i also cannot see any Javascript in there to help you with
- Original Message -
From: "vanq69"
To: "Prototype & script.aculo.us"
Sent: Thursday, February 26, 2009 11:37 AM
Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> Have had a look into this and havent been able to find a suitable
> method.
>
> I am aiming for having a space for 12 rows with scrollbars to get to
> the rest,
> with the top div - "addPage" and the bottom div - "trash" being always
> visible.
>
> Here is the code im currently trying:
>
>
>
>
>
> Chunk List
>
> DRAG HERE TO ADD TO PAGE
>
>
> onmouseup="processChunk('chunksList', 'recreateList')">
> $myChunksList = new ChunksList();
> echo $myChunksList->BuildChunksList();
> ?>
>
>
>
> DRAG HERE TO DELETE
>
>
>
>
>
> And here is the relevant parts of the CSS:
>
> /* Sidebar2 CSS */
>
> #sidebar2 {
> float: centre;
> padding: 20px 20px;
> }
>
> #addPage
> {
> border: 4px solid #ffd90f;
> width: 190px;
> padding: 10px;
> }
>
> ul.sortableList
> {
> list-style-type: none;
> padding: 0px;
> margin: 0px;
> width: 220px;
> }
>
> ul.sortableList li
> {
> cursor: move;
> padding: 2px 2px;
> margin: 2px 0px;
> border: 1px solid #ffd90f;
> background-color: #eee;
> }
>
> #trash
> {
> border: 4px solid #ffd90f;
> width: 190px;
> padding: 10px;
> }
>
>
> Any thoughts or help would be great :)
>
> Regards
>
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
Thanks for the CSS tip, im certainly not an expert with it at this
stage so what I have is
simply a rough mock up to give me some structure whilst I am doing the
coding.
RE Javascript I have all the javascript working for the sortable list
and related ajax and
php elements, its simply the creating of scroll bars for the list im
unsure of how to do -
would this need to be in javascript??
///
/// ///
///Droppable 1///
/// Fixed ///
/// ///
///
///
/// ///
///Sortable ///
/// List ///
/// ///
///Scrollable ///
/// ///
/// ///
/// ///
/// ///
/// ///
///
///
/// ///
///Droppable 2///
/// Fixed ///
/// ///
///
This is the design format I have at the moment but without the middle
bit being scrollable - this is what
I am unsure of how to do.
Hope this clears things up, thanks for the help so far :)
On Feb 26, 1:18 pm, "Alex Mcauley"
wrote:
> Firstly in your CSS you have float:centre
>
> There is no float:center as far as i know .. if there were it would be
> "center" <--- american spelling
>
> i also cannot see any Javascript in there to help you with
>
> - Original Message -
> From: "vanq69"
> To: "Prototype & script.aculo.us"
> Sent: Thursday, February 26, 2009 11:37 AM
> Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> > Have had a look into this and havent been able to find a suitable
> > method.
>
> > I am aiming for having a space for 12 rows with scrollbars to get to
> > the rest,
> > with the top div - "addPage" and the bottom div - "trash" being always
> > visible.
>
> > Here is the code im currently trying:
>
> >
> >
> >
> >
> > Chunk List
> >
> > DRAG HERE TO ADD TO PAGE
> >
> >
> > > onmouseup="processChunk('chunksList', 'recreateList')">
> > > $myChunksList = new ChunksList();
> > echo $myChunksList->BuildChunksList();
> > ?>
> >
> >
> >
> > DRAG HERE TO DELETE
> >
> >
> >
> >
>
> > And here is the relevant parts of the CSS:
>
> > /* Sidebar2 CSS */
>
> > #sidebar2 {
> > float: centre;
> > padding: 20px 20px;
> > }
>
> > #addPage
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > ul.sortableList
> > {
> > list-style-type: none;
> > padding: 0px;
> > margin: 0px;
> > width: 220px;
> > }
>
> > ul.sortableList li
> > {
> > cursor: move;
> > padding: 2px 2px;
> > margin: 2px 0px;
> > border: 1px solid #ffd90f;
> > background-color: #eee;
> > }
>
> > #trash
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > Any thoughts or help would be great :)
>
> > Regards
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
Thanks for the CSS tip, im certainly not an expert with it at this
stage so what I have is
simply a rough mock up to give me some structure whilst I am doing
the
coding.
RE Javascript I have all the javascript working for the sortable list
and related ajax and
php elements, its simply the creating of scroll bars for the list im
unsure of how to do -
would this need to be in javascript??
///
/// ///
///Droppable 1///
/// Fixed ///
/// ///
///
///
/// ///
///Sortable ///
/// List ///
/// ///
///Scrollable ///
/// ///
/// ///
/// ///
/// ///
/// ///
///
///
/// ///
///Droppable 2///
/// Fixed ///
/// ///
///
This is the design format I have at the moment but without the middle
bit being scrollable - this is what
I am unsure of how to do.
Hope this clears things up, thanks for the help so far :)
On Feb 26, 1:18 pm, "Alex Mcauley"
wrote:
> Firstly in your CSS you have float:centre
>
> There is no float:center as far as i know .. if there were it would be
> "center" <--- american spelling
>
> i also cannot see any Javascript in there to help you with
>
> - Original Message -
> From: "vanq69"
> To: "Prototype & script.aculo.us"
> Sent: Thursday, February 26, 2009 11:37 AM
> Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> > Have had a look into this and havent been able to find a suitable
> > method.
>
> > I am aiming for having a space for 12 rows with scrollbars to get to
> > the rest,
> > with the top div - "addPage" and the bottom div - "trash" being always
> > visible.
>
> > Here is the code im currently trying:
>
> >
> >
> >
> >
> > Chunk List
> >
> > DRAG HERE TO ADD TO PAGE
> >
> >
> > > onmouseup="processChunk('chunksList', 'recreateList')">
> > > $myChunksList = new ChunksList();
> > echo $myChunksList->BuildChunksList();
> > ?>
> >
> >
> >
> > DRAG HERE TO DELETE
> >
> >
> >
> >
>
> > And here is the relevant parts of the CSS:
>
> > /* Sidebar2 CSS */
>
> > #sidebar2 {
> > float: centre;
> > padding: 20px 20px;
> > }
>
> > #addPage
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > ul.sortableList
> > {
> > list-style-type: none;
> > padding: 0px;
> > margin: 0px;
> > width: 220px;
> > }
>
> > ul.sortableList li
> > {
> > cursor: move;
> > padding: 2px 2px;
> > margin: 2px 0px;
> > border: 1px solid #ffd90f;
> > background-color: #eee;
> > }
>
> > #trash
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > Any thoughts or help would be great :)
>
> > Regards
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
I'm still not sure what you mean by scrollable
If you mean scroll bars in an element you can achieve it like this
Some Content that exceeds 100px by 100px will add automatic scrollbars to
the element
- Original Message -
From: "vanq69"
To: "Prototype & script.aculo.us"
Sent: Thursday, February 26, 2009 3:49 PM
Subject: [Proto-Scripty] Re: Adding Scroll bars to list
Thanks for the CSS tip, im certainly not an expert with it at this
stage so what I have is
simply a rough mock up to give me some structure whilst I am doing the
coding.
RE Javascript I have all the javascript working for the sortable list
and related ajax and
php elements, its simply the creating of scroll bars for the list im
unsure of how to do -
would this need to be in javascript??
///
/// ///
///Droppable 1///
/// Fixed ///
/// ///
///
///
/// ///
///Sortable ///
/// List ///
/// ///
///Scrollable ///
/// ///
/// ///
/// ///
/// ///
/// ///
///
///
/// ///
///Droppable 2///
/// Fixed ///
/// ///
///
This is the design format I have at the moment but without the middle
bit being scrollable - this is what
I am unsure of how to do.
Hope this clears things up, thanks for the help so far :)
On Feb 26, 1:18 pm, "Alex Mcauley"
wrote:
> Firstly in your CSS you have float:centre
>
> There is no float:center as far as i know .. if there were it would be
> "center" <--- american spelling
>
> i also cannot see any Javascript in there to help you with
>
> - Original Message -
> From: "vanq69"
> To: "Prototype & script.aculo.us"
>
> Sent: Thursday, February 26, 2009 11:37 AM
> Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> > Have had a look into this and havent been able to find a suitable
> > method.
>
> > I am aiming for having a space for 12 rows with scrollbars to get to
> > the rest,
> > with the top div - "addPage" and the bottom div - "trash" being always
> > visible.
>
> > Here is the code im currently trying:
>
> >
> >
> >
> >
> > Chunk List
> >
> > DRAG HERE TO ADD TO PAGE
> >
> >
> > > onmouseup="processChunk('chunksList', 'recreateList')">
> > > $myChunksList = new ChunksList();
> > echo $myChunksList->BuildChunksList();
> > ?>
> >
> >
> >
> > DRAG HERE TO DELETE
> >
> >
> >
> >
>
> > And here is the relevant parts of the CSS:
>
> > /* Sidebar2 CSS */
>
> > #sidebar2 {
> > float: centre;
> > padding: 20px 20px;
> > }
>
> > #addPage
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > ul.sortableList
> > {
> > list-style-type: none;
> > padding: 0px;
> > margin: 0px;
> > width: 220px;
> > }
>
> > ul.sortableList li
> > {
> > cursor: move;
> > padding: 2px 2px;
> > margin: 2px 0px;
> > border: 1px solid #ffd90f;
> > background-color: #eee;
> > }
>
> > #trash
> > {
> > border: 4px solid #ffd90f;
> > width: 190px;
> > padding: 10px;
> > }
>
> > Any thoughts or help would be great :)
>
> > Regards
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Adding Scroll bars to list
That was exactly what I meant, thank you very much! This works well
for the scrolling,
however it doesnt allow me to "see" the drop into the droppables now.
I can make them
if the mouse is over and it works but doesnt show the droppable over
the box anymore, im
guessing there is little I can do about this? If so then its not a
major issue and the scrolling
is much more useful but would be nice to be able to have both. (if i
move the div to include the
droppable box's then they simply scroll with them which isnt what I
need)
Thanks for your help so far :)
On Feb 26, 3:56 pm, "Alex Mcauley"
wrote:
> I'm still not sure what you mean by scrollable
>
> If you mean scroll bars in an element you can achieve it like this
>
>
> Some Content that exceeds 100px by 100px will add automatic scrollbars to
> the element
>
>
>
> - Original Message -
> From: "vanq69"
> To: "Prototype & script.aculo.us"
> Sent: Thursday, February 26, 2009 3:49 PM
> Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> Thanks for the CSS tip, im certainly not an expert with it at this
> stage so what I have is
> simply a rough mock up to give me some structure whilst I am doing the
> coding.
>
> RE Javascript I have all the javascript working for the sortable list
> and related ajax and
> php elements, its simply the creating of scroll bars for the list im
> unsure of how to do -
> would this need to be in javascript??
>
> ///
> /// ///
> /// Droppable 1 ///
> /// Fixed ///
> /// ///
> ///
>
> ///
> /// ///
> /// Sortable ///
> /// List ///
> /// ///
> /// Scrollable ///
> /// ///
> /// ///
> /// ///
> /// ///
> /// ///
> ///
>
> ///
> /// ///
> /// Droppable 2 ///
> /// Fixed ///
> /// ///
> ///
>
> This is the design format I have at the moment but without the middle
> bit being scrollable - this is what
> I am unsure of how to do.
>
> Hope this clears things up, thanks for the help so far :)
>
> On Feb 26, 1:18 pm, "Alex Mcauley"
> wrote:
> > Firstly in your CSS you have float:centre
>
> > There is no float:center as far as i know .. if there were it would be
> > "center" <--- american spelling
>
> > i also cannot see any Javascript in there to help you with
>
> > - Original Message -
> > From: "vanq69"
> > To: "Prototype & script.aculo.us"
> >
> > Sent: Thursday, February 26, 2009 11:37 AM
> > Subject: [Proto-Scripty] Re: Adding Scroll bars to list
>
> > > Have had a look into this and havent been able to find a suitable
> > > method.
>
> > > I am aiming for having a space for 12 rows with scrollbars to get to
> > > the rest,
> > > with the top div - "addPage" and the bottom div - "trash" being always
> > > visible.
>
> > > Here is the code im currently trying:
>
> > >
> > >
> > >
> > >
> > > Chunk List
> > >
> > > DRAG HERE TO ADD TO PAGE
> > >
> > >
> > > > > onmouseup="processChunk('chunksList', 'recreateList')">
> > > > > $myChunksList = new ChunksList();
> > > echo $myChunksList->BuildChunksList();
> > > ?>
> > >
> > >
> > >
> > > DRAG HERE TO DELETE
> > >
> > >
> > >
> > >
>
> > > And here is the r
[Proto-Scripty] Re: Adding Scroll bars to list
New code: Chunk List DRAG HERE TO ADD TO PAGE BuildChunksList(); ?> DRAG HERE TO DELETE --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
