Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37645 > unrolled thread

resizable grid

Back to article view | Back to comp.lang.javascript

Contents

  resizable grid Andrew Poulos <ap_prog@hotmail.com> - 2019-10-31 20:34 +1100
    Re: resizable grid Julio Di Egidio <julio@diegidio.name> - 2019-10-31 05:55 -0700
      Re: resizable grid Andrew Poulos <ap_prog@hotmail.com> - 2019-11-01 07:54 +1100
        Re: resizable grid Arno Welzel <usenet@arnowelzel.de> - 2019-11-01 10:53 +0100
          Re: resizable grid Andrew Poulos <ap_prog@hotmail.com> - 2019-11-02 14:46 +1100
            Re: resizable grid Julio Di Egidio <julio@diegidio.name> - 2019-11-02 07:07 -0700
            Re: resizable grid Arno Welzel <usenet@arnowelzel.de> - 2019-11-05 10:45 +0100
              Re: resizable grid Julio Di Egidio <julio@diegidio.name> - 2019-11-05 04:43 -0800
                Re: resizable grid Arno Welzel <usenet@arnowelzel.de> - 2019-11-05 15:23 +0100
                Re: resizable grid Arno Welzel <usenet@arnowelzel.de> - 2019-11-05 15:35 +0100

#37645 — resizable grid

I have a 3 column CSS grid: 1 wide column, 1 very thin column (I call it 
a "spacer"), and another wide column. A user should be able to "grab" 
the spacer and slide it left or right, automatically resizing the wide 
columns.

The movement left or right needs to be limited to 150px to the left and 
50px to the right.

I'm stuck. Anyone any ideas on how I can approach this?

I could do an onmousedown on the spacer and then track how much the 
cursor moves horizontally and update the CSS on the grid accordingly but 
I don't know if I should go that way or not.

Andrew Poulos

[toc] | [next] | [standalone]

#37646

On Thursday, 31 October 2019 10:34:22 UTC+1, Andrew Poulos  wrote:

> A user should be able to "grab" the spacer and slide it left or right,
> automatically resizing the wide columns.

> I'm stuck. Anyone any ideas on how I can approach this?

You don't know how to google stuff up?

There is plenty of solutions/code/tutorials available, from a simple:
<https://www.brainbell.com/javascript/making-resizable-table-js.html>
to a most comprehensive <https://daybrush.com/moveable/>, which are
just a couple that I have opened.

And that I was able to find out in under 2 minutes, less than it's taken
to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>

HTH,

Julio

[toc] | [prev] | [next] | [standalone]

#37651

On 31/10/2019 11:55 pm, Julio Di Egidio wrote:
> On Thursday, 31 October 2019 10:34:22 UTC+1, Andrew Poulos  wrote:
> 
>> A user should be able to "grab" the spacer and slide it left or right,
>> automatically resizing the wide columns.
> 
>> I'm stuck. Anyone any ideas on how I can approach this?
> 
> You don't know how to google stuff up?
> 
> There is plenty of solutions/code/tutorials available, from a simple:
> <https://www.brainbell.com/javascript/making-resizable-table-js.html>

Thanks, this is what I can work with.

> to a most comprehensive <https://daybrush.com/moveable/>, which are
> just a couple that I have opened.
> 
> And that I was able to find out in under 2 minutes, less than it's taken
> to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>

Seriously, I spent half an hour yesterday searching and all I could find 
was some old posts on stackflow.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37657

On 31.10.19 21:54, Andrew Poulos wrote:

> On 31/10/2019 11:55 pm, Julio Di Egidio wrote:
>> On Thursday, 31 October 2019 10:34:22 UTC+1, Andrew Poulos  wrote:
>>
>>> A user should be able to "grab" the spacer and slide it left or right,
>>> automatically resizing the wide columns.
>>
>>> I'm stuck. Anyone any ideas on how I can approach this?
>>
>> You don't know how to google stuff up?
>>
>> There is plenty of solutions/code/tutorials available, from a simple:
>> <https://www.brainbell.com/javascript/making-resizable-table-js.html>
> 
> Thanks, this is what I can work with.
> 
>> to a most comprehensive <https://daybrush.com/moveable/>, which are
>> just a couple that I have opened.
>>
>> And that I was able to find out in under 2 minutes, less than it's taken
>> to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>
> 
> Seriously, I spent half an hour yesterday searching and all I could find 
> was some old posts on stackflow.

<https://www.google.com/search?q=javascript+movable+divider>

And this also leads to:

<https://split.js.org/>



-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37672

On 1/11/2019 8:53 pm, Arno Welzel wrote:

>>> to a most comprehensive <https://daybrush.com/moveable/>, which are
>>> just a couple that I have opened.
>>>
>>> And that I was able to find out in under 2 minutes, less than it's taken
>>> to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>
>>
>> Seriously, I spent half an hour yesterday searching and all I could find
>> was some old posts on stackflow.
> 
> <https://www.google.com/search?q=javascript+movable+divider>
> 
> And this also leads to:
> 
> <https://split.js.org/>

I searched on "resizable CSS grid" which, in retrospect, the wrong query 
to use.

By using the link that Julio provided I was able to write less than 30 
lines of code that does precisely what I need. Interestingly I also 
needed to add a "divider" item to the grid (so there's something obvious 
to drag) in the same way that split.js needs to.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37676

On Saturday, 2 November 2019 04:46:36 UTC+1, Andrew Poulos  wrote:
> On 1/11/2019 8:53 pm, Arno Welzel wrote:
> 
> >>> to a most comprehensive <https://daybrush.com/moveable/>, which are
> >>> just a couple that I have opened.
> >>>
> >>> And that I was able to find out in under 2 minutes, less than it's taken
> >>> to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>
> >>
> >> Seriously, I spent half an hour yesterday searching and all I could find
> >> was some old posts on stackflow.
> > 
> > <https://www.google.com/search?q=javascript+movable+divider>
> > 
> > And this also leads to:
> > 
> > <https://split.js.org/>
> 
> I searched on "resizable CSS grid" which, in retrospect, the wrong query 
> to use.
> 
> By using the link that Julio provided I was able to write less than 30 
> lines of code that does precisely what I need. Interestingly I also 
> needed to add a "divider" item to the grid (so there's something obvious 
> to drag) in the same way that split.js needs to.

Wrong relative to what?  Finding stuff on the internet is a matter of using
the keywords that work, it is not about correctness: and of course there is
quite a learning curve there, too...

Julio

[toc] | [prev] | [next] | [standalone]

#37691

On 02.11.19 04:46, Andrew Poulos wrote:

> On 1/11/2019 8:53 pm, Arno Welzel wrote:
> 
>>>> to a most comprehensive <https://daybrush.com/moveable/>, which are
>>>> just a couple that I have opened.
>>>>
>>>> And that I was able to find out in under 2 minutes, less than it's taken
>>>> to write this reply... <https://duckduckgo.com/?q=resizable+drag+javascript>
>>>
>>> Seriously, I spent half an hour yesterday searching and all I could find
>>> was some old posts on stackflow.
>>
>> <https://www.google.com/search?q=javascript+movable+divider>
>>
>> And this also leads to:
>>
>> <https://split.js.org/>
> 
> I searched on "resizable CSS grid" which, in retrospect, the wrong query 
> to use.

Because a "resizable grid" means that the whole grid can be made bigger
or smaller by changing its size - but what you described was in fact a
movable divider between two columns which changes the space distribution
*inside* the grid but does not change the total size of the grid.



-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37696

On Tuesday, 5 November 2019 10:45:56 UTC+1, Arno Welzel  wrote:
> On 02.11.19 04:46, Andrew Poulos wrote:

> > I searched on "resizable CSS grid" which, in retrospect, the wrong query 
> > to use.
> 
> Because a "resizable grid" means that the whole grid can be made bigger
> or smaller by changing its size - but what you described was in fact a
> movable divider between two columns which changes the space distribution
> *inside* the grid but does not change the total size of the grid.

Move a slider to resize a column, you utter idiot.  And, of course(?!),
resizable + grid + javascript is not a phrase, it's just 3 words.

That and the fact that you just won't engage: the mark of yet another
retarded cunt and seller of magic potions.

ESAD.

*Plonk*

Julio

[toc] | [prev] | [next] | [standalone]

#37697

On 05.11.19 13:43, Julio Di Egidio wrote:


[...]> That and the fact that you just won't engage: the mark of yet another
> retarded cunt and seller of magic potions.
> 
> ESAD.
> 
> *Plonk*

Thank you for not reading me any longer. You're attempts to insult me
started getting boring.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37698

On 05.11.19 13:43, Julio Di Egidio wrote:
> On Tuesday, 5 November 2019 10:45:56 UTC+1, Arno Welzel  wrote:
>> On 02.11.19 04:46, Andrew Poulos wrote:
> 
>>> I searched on "resizable CSS grid" which, in retrospect, the wrong query 
>>> to use.
>>
>> Because a "resizable grid" means that the whole grid can be made bigger
>> or smaller by changing its size - but what you described was in fact a
>> movable divider between two columns which changes the space distribution
>> *inside* the grid but does not change the total size of the grid.
> 
> Move a slider to resize a column, you utter idiot.  And, of course(?!),
> resizable + grid + javascript is not a phrase, it's just 3 words.

JFTR:

<https://split.js.org/>

"Move a slider to resize a column, you utter idiot."

Yeah - do this on the page above and watch the total size of the grid
with the three columns...



-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web