►
Description
No, this is not a rerun. We bring you Part 2 of a screen shrinking event as George "Unembiggens" the Circulation Rules page. That's right! He'll show you how to make that unwieldy screen conform better to your screen. Why scroll side-to-side when you can harness the power of jQuery and CSS?
Contents:
0:00 - Title
0:38 - Intro
1:54 - Recap
3:48 - Collapsing Columns
11:41 - Pre-Collapsing Columns
16:34 - Firefox Window Resizer
17:29 - Auto Adjust to Screen Size
20:16 - Wrap Up
Referenced code:
https://hopperdietzel.org/koha_notes/circ_rules_21_05
https://wiki.koha-community.org/wiki/JQuery_Library#Circulation_rules_modifications_3.0
https://wiki.koha-community.org/wiki/JQuery_Library#Create_button_to_hide_left_side_navigation
https://wiki.koha-community.org/wiki/JQuery_Library#Highlight_row_on_hover
https://wiki.koha-community.org/wiki/JQuery_Library#Click_on_row_to_move_it_to_the_bottom_of_the_table
https://wiki.koha-community.org/wiki/JQuery_Library#Click_on_the_footer_to_sort_the_table
https://wiki.koha-community.org/wiki/JQuery_Library#Collapse_columns_when_the_header_is_clicked_-_REQUIRES_CSS
https://wiki.koha-community.org/wiki/JQuery_Library#Pre-collapse_specified_columns
https://wiki.koha-community.org/wiki/JQuery_Library#Automatically_adjust_the_page_for_a_super-wide_browser_size
Music: https://www.bensound.com / I'll Be There For You - The Rembrandts
A
A
This
week
we
bring
you
part,
two
of
our
massive
project
on
working
with
the
circulation
rules.
This
week
we
were
talking
about
our
unemployment,
the
circulation
rules.
We
are
part
of
kohai
us.
If
you
visit
cohaba-us.org
you'll
find
a
great
selection
of
resources.
Here
we
encourage
people
to
to
join
the
membership
so
that
you
can
take
part
in
shaping
what
happens
with
kohai
us
and
be
a
part
of
our
conferences.
A
We
have
a
conference
that
will
be
coming
up
this
year
in
lawrence
kansas
and
you
will
find
all
of
our
resources
on
the
learn
page,
including
our
video
playlists,
and,
as
I
mentioned
earlier,
we
are
going
to
be
doing
part
two
of
our
previous
episode
covering
circulation,
rules
and
george.
Why
don't
you
go
ahead
and
remind
everybody
what
we
talked
about
last
week
and
then,
let's
move
forward
with
part
two
yeah.
B
Before
we
started
recording,
I
was,
I
told
christopher
we
need
to.
We
need
a
voiceover
like
previously
on
star
trek,
the
next
generation
or
deep
space,
nine.
That
would
be
awesome
if
we
had
somebody
that
could
do
some
voice
acting
and
do
a
really
good
job
at
that.
So
what
we've
been
talking
about,
what
we
talked
about
last
week
and
what
I'm
going
to
continue
on
is
the
circulation
rules
table.
B
So
last
week
we
added
a
button
that
collapses.
This
information
over
on
the
left
hand
side
of
the
screen
and
we
added
a
highlighting
to
highlight
the
row
in
the
table
and
we
added
sorting
the
columns.
So
you
can
sorting
the
table,
which
is
not
very
impressive,
on
a
table
with
only
two
rows
in
it.
But
but
when
you
got
a
lot
of
circulation
rules
that
becomes
really
useful
and,
like
I
said
last
week,
I've
got
some
libraries
that
have
close
to
100
circulation
rules.
B
So
this
is
important
to
me,
the
the
other
thing
that
what
we're
gonna
work
on
this
week
is
making
this
table,
which,
if
you
watched
last
week's
video
in
full,
I
have
three
screens
on
my
computer,
and
this
covers
at
least
a
portion
of
all
three
screens.
If
you
widen
the
table,
if
you
widen
the
browser
out
to.
B
It
it's
a
huge
amount
of
data,
and
so
it
needs
a
huge
amount
of
space
to
work,
and
so
so,
if
you
haven't
seen
the
the
previous
parts
on
how
to
add
the
button
and
to
make
the
rows
sort
and
highlight
the
rows,
that's
that's
look
at
last
week,
the
video
from
two
weeks
ago.
This
part
I'm
going
to
start
off
with
adding
some
css.
B
So
what
I
figured,
though,
is
if
I
created
a
class
rather
than
applying
all
the
rules,
all
the
css
style
through
jquery,
if
I
just
created
a
class
and
then
added
and
subtracted
that
class,
when
I
clicked
on
the
header
row,
that
would
be
the
fastest
way
and
the
cleanest
way
to
write
the
code
for
this.
So
the
first
thing
I'm
going
to
do
is
I'm
going
to
add
that
css.
B
B
It's
going
to
create
these,
this
css
style
for
it,
and
so
what
it's
going
to
do
is
it's
going
to
say.
The
width
of
the
of
that
table
cell
is
going
to
be
15,
pixels,
so
tiny,
not
very
big
at
all,
and
then
it's
going
to
take
all
of
the
text
from
that
cell
and
it's
going
to
move
it
9999
pixels
to
the
left,
which,
if
you're
in
a
browser-
and
you
have
things
that
are
a
negative
value.
B
Their
position
on
the
screen
is
a
negative
value.
If
the
text
indent
is
9999
pixels
to
the
left
of
the
screen,
then
you're
not
you're,
not
going
to
see
them.
It's
it's
the
most
effective
way
I
could
find
for
hiding
those
things
and
making
them
re,
remaking
them
visible
quickly,
because
I'm
just
pushing
them
off
the
side
of
the
screen
where
you
can't
see
them.
B
Yes,
yet
it
affects
the
the
table
footer
as
well.
Okay-
and
I
think
it's
because
the
I
I
don't
remember
what
the
html
code
is,
but
I
think
that
the
top
row,
even
though
it's
called
the
header,
that
the
cells
are
designated
as
th
and
the
bottom
row,
I
believe,
they're
also
designated
as
th
okay
eve,
whether
they're
in
the
header
of
the
footer
they're,
still
the
class
on
those
or
the
the
html
attribute
for
those
is
still
th.
So
so
it
does
make
them
collapse
too.
B
B
This
is
one
of
those
places
where
an
html
the
table
cells
are
indexed
starting
at
zero,
okay,
and
so,
in
order
to
make
it
easier
for
me
to
remember
which
one
is
which
I'm
adding
I'm
finding
the
index
of
the
cell
and
I'm
adding
one
to
it.
So
they
start
with
one
instead
of
starting
at
zero,
because
that
just
makes
it
easier
for
me
to
keep
track
of
them.
B
B
This
is
done
every
time,
the
page
loads
you
have
to
re.
There
isn't
a
way
that
I
found
an
easy
way
to
make
it
so
that
you
can
always
so
you
can
just
say
hide
this
one
and
never
and
don't
reload
it
when
I
reload
the
page,
but
if
you
show
full
width-
and
you
know-
maybe
if
this
decreased
loan
period
is
one
you
never
use
you
can
you
know
a
lot
of
times.
I
will
find
myself
if
I'm
on
my
laptop,
I
will,
and
I
just
want
to
deal
with
loan
periods.
B
I
can
hide
a
bunch
of
other
things
to
make
it
so
that
I've
got
less
scrolling
to
do
or
or
no
scrolling
to
do
right
so
because
this
has
to
be
applied
every
time.
The
page
loads
there's
something
else
we
can
do,
though,
and
that
is
I've
got
a
whole
bunch.
What
I
did
is
I
wrote
out
the
code
for
pre-hiding
columns
that
I
never
use.
B
So
if
you
wanted
to
hide
the
patron
category
by
default,
all
you
would
have
to
do
is
take
these
two
comments
out
from
in
front
of
the
dollar
sign
and
that
would
by
default
hide
that
first
column,
the
ones
that
I
and
so
I've
got
one
of
these
for
each
column
in
that
entire
table.
The
ones
that
I
currently
hide
by
default
are
the
days
mode.
We
don't
use
that
I
I've
never
had
a
library.
That's
asked
me
to
change
the
the
we.
B
B
B
All
of
these,
I
think,
are
the
ones
dealing
with,
or
cap
replacement
finds
the
cap
replacement
fee
at
the
cost
of
the
item.
I've
got
all
the
ones
related
to
suspension
or
pre-hidden.
All
of
the
automatic
renewal
stuff
is
pre-hidden
and
the
article
requests
and
the
rental
discount
are
hidden
by
default
because
we
never
use
those.
So
this
means
when
I,
when
I
open
this
up
on
my
laptop,
I
don't
have
so
many
things
to
hide.
B
And
so,
if
I,
if
I
get
rid
of
that
column
on
the
left,
I've
really
only
got
like
one
and
maybe
one
and
a
half
screens
worth
of
data
left.
So
I've
really
shrunk
that
down
from
something
that
takes
more
than
two
screens
to
to
look
at
and
shrunk
it
down
to
something,
that's
less
than
that's.
That's
only
like
about
one
and
a
half
screens.
I.
A
See
so
many
so
many
so
much
potential
for
this,
because
you
know
I
I'm
I
must
I
love
presets
and
it's
like
I
could
see.
Okay,
maybe
I
could
add
a
button
up
at
the
top
if
I
click
a
button
it.
If
I
wanted
to
expand
everything
without
having
to
go
through
individual
ones,
I
could
click
a
button
up
at
the
top
and
I
could
just
change
all
those.
A
B
And
I've
got
one
last
thing
to
show
you
one
other
thing
that
I
do
since
I
do
have
you
know
I
spend
over
50
percent
of
my
time
working
here
in
my
office
at
the
knuckles
headquarters,
and
I
do
have
three
monitors.
Currently,
I
I'm
I'm
hoping
somebody
discards,
a
fourth
one,
so
I
can
just
have
you
know
a
wall
of
I
can
have
monitors
everywhere.
I
do
have
some
code
since
I
do
work
here
most
of
the
time
what
I've
got
is.
I
know
when
I'm
working
on
these
screens.
B
B
This
is
one
that
I
use
for
editing,
circulation
rules,
and
so
I
can
just
click
on
that
and
it
automatically
blows
open
this
window
into
covering
these
two
screens
that
I've
got
on
my
left,
the
the
left
one
in
the
middle
one
and
it
just
plugs
that
that
screen
size
in
and
it
sets
the
browser
there,
and
so
what
I've
got
this
last
little
piece
of
jquery.
I've
got
here.
B
What
it
does
is
if
the
browser
window
is
larger
than
2500
pixels,
it's
just
going
to
automatically
eliminate
that
left-hand
column
and
make
every
em
big
in
every
part
of
the
column.
So
let
me
add
that,
and
so
right
now
I'm
in
this,
let
me
go
back
to
circulation
and
find
rules.
So
if
I
loaded
I'm
on
a
normal
size,
screen
get
loads
like
this,
and
this
is
the
way
I
usually
see
it
on
my
laptop
with
some
columns
collapsed
and
I
can
click
on
this
to
get
the
show
full
width.
B
B
B
B
It's
by
a
company
called
my
browser
add-on.
So
if
you
go
to
my
browser
add-ons
website,
it's
a
really
handy
thing.
I
use
it
a
lot
for
not
just
for
this,
but
for
when
I'm
taking
screenshots
for
training
purposes,
I
can
it
not
only
will
it
tell
the
browser
how
wide
to
be,
but
it'll
also
set
a
position
for
it
on
the
screen,
so
I
can
tell
it
that
I'm
I
can
use.
B
B
A
A
All
right,
well,
george,
thank
you
very
much
for
sharing
that
wonderful
code.
I'm
sure
that
there
are
many
coha
administrators
that
are
thankful
for
that
that
piece,
and
that
makes
it
a
lot
easier
to
work
with
the
rules
and
yeah.
I
I
appreciate
it
so
much.
I
use
that
code
myself
when
you
introduced
it
over
at
the
pueblo
conference
and
yeah.
I.
B
A
Well,
thanks
again
for
everyone
watching
our
videos,
we
love
doing
our
videos
and
if
you
love
our
videos,
we
encourage
you
not
just
to
visit
our
videos
on
our
website
but
to
go
to
our
youtube
channel
and
to
make
sure
that
you
subscribe
like
and
comment
on
our
videos.
We
enjoy
commenting
on
videos
and
if
you
have
questions
about
something
that
we
didn't
answer
on
a
particular
topic,
we
will
certainly
try
to
respond
to
your
question
and
give
you
an
answer.