Re: [CODE4LIB] Sticky left nav in Libguides v2
Brian and Eric: thanks so much for your help. Brian, I will definitely try
your suggestion with affix.
Here is a page that uses something other than affix to get it sticky. Notes
are on the page. It works almost exactly as intended. I'd much rather get
it working leveraging bootstrap so I'm gonna move onto that next.
http://francis.beta.libguides.com/sticky-left-nav-nonaffix
If/when I get it 100% working (and with affix) I will share with the group.
(That is, if I haven't had to clamor for help between now and then lol)
On Tue, Nov 18, 2014 at 3:45 PM, Brian Zelip bze...@gmail.com wrote:
Brad, Eric is on the right track above. The problem is absolute positioning
(of which fixed positioning is a subset) removes the element from document
flow and sets it in proportion to the viewport width.
You'll have to add a fixed width to your unordered list, but more specific
than 25%. Try adding the rules below to your internal styles (the `/*
bootstrap overrides */` section of the html). (Be sure to keep the order
provided here.)
The next version of Bootstrap will change hard px values for rems!
@media (min-width: 992px) {
.affix {
width: 220px;
}
}
@media (min-width: 1200px) {
.affix {
width: 270px;
}
}
Cheers,
Brian Zelip
---
MS Student, Graduate School of Library Information Science
Graduate Assistant, Scholarly Commons
University of Illinois at Urbana-Champaign
zelip.me
On Tue, Nov 18, 2014 at 2:03 PM, Eric Phetteplace phett...@gmail.com
wrote:
When the ul goes to position: fixed it loses the width of its parent
(which has a col-md-3 class) which is why it's smaller. If you can get
the affix class to act like col-md-3 that'd help some, so:
.affix { width: 25%; }
is a start on large screens, but won't solve the way the ul ends up
behind your main content on smaller screens.
Best,
Eric
On Tue, Nov 18, 2014 at 11:35 AM, Brad Coffield
bcoffield.libr...@gmail.com
wrote:
Brian,
Awesome, thanks a lot.
Of course in all my back and forth I didn't have it setup like I had.
I'd
gone back to scratch to try again. So, I just added the data-spy option
to
the UL in the template that is the nav. The problems that are happening
with it on this page aren't exactly as described in my previous email
but
still, there be problems :) The offset doesn't work at all. Not sure
what
css to include to make it work right. And it gets skinny on scroll now,
not
wider.
http://francis.beta.libguides.com/c.php?g=9436
Thank you!!!
On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip bze...@gmail.com wrote:
Brad, publish a dummy draft page with the left-nav template and the
problem
you're encountering so I can take a look.
brian
On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield
bcoffield.libr...@gmail.com
wrote:
Has anyone endeavored to get this to work? If not, is there anyone
willing
to help me getting it to work, lol?
What I'm talking about:
1. Use left-nav template in Libguides v2
2. Once you scroll down in the content area get the left-nav to
stay
with
you, always visible.
You can see a really slick example of it on the bootstrap docs page
(which
also uses scrollspy to note where in the document you are...but
lets
slow
down haha): http://getbootstrap.com/javascript/
3. Bootstrap has affix.js built-in and its therefore possible to do
it
without any outside code.
3a. You can see info about affix.js at the bottom of the bootstrap
docs
link I just provided.
4. I've gotten it to work BUT with a lot of problems.
For one, it will stay stuck in the middle of the screen instead of
sticking
to the top of the screen once you've started scrolling.
For two, it breaks the responsivity: on small screens instead of
normal
functioning it kinda hides behind the content column
For three, once it starts scrolling its width changes.
For four, it will cover the footer when you get down there.
To have the left-nav sticky on long content pages would be GREAT.
Thanks a lot.
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
[CODE4LIB] Sticky left nav in Libguides v2
Has anyone endeavored to get this to work? If not, is there anyone willing to help me getting it to work, lol? What I'm talking about: 1. Use left-nav template in Libguides v2 2. Once you scroll down in the content area get the left-nav to stay with you, always visible. You can see a really slick example of it on the bootstrap docs page (which also uses scrollspy to note where in the document you are...but lets slow down haha): http://getbootstrap.com/javascript/ 3. Bootstrap has affix.js built-in and its therefore possible to do it without any outside code. 3a. You can see info about affix.js at the bottom of the bootstrap docs link I just provided. 4. I've gotten it to work BUT with a lot of problems. For one, it will stay stuck in the middle of the screen instead of sticking to the top of the screen once you've started scrolling. For two, it breaks the responsivity: on small screens instead of normal functioning it kinda hides behind the content column For three, once it starts scrolling its width changes. For four, it will cover the footer when you get down there. To have the left-nav sticky on long content pages would be GREAT. Thanks a lot. -- Brad Coffield, MLIS Assistant Information and Web Services Librarian Saint Francis University 814-472-3315 bcoffi...@francis.edu
Re: [CODE4LIB] Sticky left nav in Libguides v2
Brad, publish a dummy draft page with the left-nav template and the problem you're encountering so I can take a look. brian On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield bcoffield.libr...@gmail.com wrote: Has anyone endeavored to get this to work? If not, is there anyone willing to help me getting it to work, lol? What I'm talking about: 1. Use left-nav template in Libguides v2 2. Once you scroll down in the content area get the left-nav to stay with you, always visible. You can see a really slick example of it on the bootstrap docs page (which also uses scrollspy to note where in the document you are...but lets slow down haha): http://getbootstrap.com/javascript/ 3. Bootstrap has affix.js built-in and its therefore possible to do it without any outside code. 3a. You can see info about affix.js at the bottom of the bootstrap docs link I just provided. 4. I've gotten it to work BUT with a lot of problems. For one, it will stay stuck in the middle of the screen instead of sticking to the top of the screen once you've started scrolling. For two, it breaks the responsivity: on small screens instead of normal functioning it kinda hides behind the content column For three, once it starts scrolling its width changes. For four, it will cover the footer when you get down there. To have the left-nav sticky on long content pages would be GREAT. Thanks a lot. -- Brad Coffield, MLIS Assistant Information and Web Services Librarian Saint Francis University 814-472-3315 bcoffi...@francis.edu
Re: [CODE4LIB] Sticky left nav in Libguides v2
Brian, Awesome, thanks a lot. Of course in all my back and forth I didn't have it setup like I had. I'd gone back to scratch to try again. So, I just added the data-spy option to the UL in the template that is the nav. The problems that are happening with it on this page aren't exactly as described in my previous email but still, there be problems :) The offset doesn't work at all. Not sure what css to include to make it work right. And it gets skinny on scroll now, not wider. http://francis.beta.libguides.com/c.php?g=9436 Thank you!!! On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip bze...@gmail.com wrote: Brad, publish a dummy draft page with the left-nav template and the problem you're encountering so I can take a look. brian On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield bcoffield.libr...@gmail.com wrote: Has anyone endeavored to get this to work? If not, is there anyone willing to help me getting it to work, lol? What I'm talking about: 1. Use left-nav template in Libguides v2 2. Once you scroll down in the content area get the left-nav to stay with you, always visible. You can see a really slick example of it on the bootstrap docs page (which also uses scrollspy to note where in the document you are...but lets slow down haha): http://getbootstrap.com/javascript/ 3. Bootstrap has affix.js built-in and its therefore possible to do it without any outside code. 3a. You can see info about affix.js at the bottom of the bootstrap docs link I just provided. 4. I've gotten it to work BUT with a lot of problems. For one, it will stay stuck in the middle of the screen instead of sticking to the top of the screen once you've started scrolling. For two, it breaks the responsivity: on small screens instead of normal functioning it kinda hides behind the content column For three, once it starts scrolling its width changes. For four, it will cover the footer when you get down there. To have the left-nav sticky on long content pages would be GREAT. Thanks a lot. -- Brad Coffield, MLIS Assistant Information and Web Services Librarian Saint Francis University 814-472-3315 bcoffi...@francis.edu -- Brad Coffield, MLIS Assistant Information and Web Services Librarian Saint Francis University 814-472-3315 bcoffi...@francis.edu
Re: [CODE4LIB] Sticky left nav in Libguides v2
When the ul goes to position: fixed it loses the width of its parent
(which has a col-md-3 class) which is why it's smaller. If you can get
the affix class to act like col-md-3 that'd help some, so:
.affix { width: 25%; }
is a start on large screens, but won't solve the way the ul ends up
behind your main content on smaller screens.
Best,
Eric
On Tue, Nov 18, 2014 at 11:35 AM, Brad Coffield bcoffield.libr...@gmail.com
wrote:
Brian,
Awesome, thanks a lot.
Of course in all my back and forth I didn't have it setup like I had. I'd
gone back to scratch to try again. So, I just added the data-spy option to
the UL in the template that is the nav. The problems that are happening
with it on this page aren't exactly as described in my previous email but
still, there be problems :) The offset doesn't work at all. Not sure what
css to include to make it work right. And it gets skinny on scroll now, not
wider.
http://francis.beta.libguides.com/c.php?g=9436
Thank you!!!
On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip bze...@gmail.com wrote:
Brad, publish a dummy draft page with the left-nav template and the
problem
you're encountering so I can take a look.
brian
On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield
bcoffield.libr...@gmail.com
wrote:
Has anyone endeavored to get this to work? If not, is there anyone
willing
to help me getting it to work, lol?
What I'm talking about:
1. Use left-nav template in Libguides v2
2. Once you scroll down in the content area get the left-nav to stay
with
you, always visible.
You can see a really slick example of it on the bootstrap docs page
(which
also uses scrollspy to note where in the document you are...but lets
slow
down haha): http://getbootstrap.com/javascript/
3. Bootstrap has affix.js built-in and its therefore possible to do it
without any outside code.
3a. You can see info about affix.js at the bottom of the bootstrap docs
link I just provided.
4. I've gotten it to work BUT with a lot of problems.
For one, it will stay stuck in the middle of the screen instead of
sticking
to the top of the screen once you've started scrolling.
For two, it breaks the responsivity: on small screens instead of normal
functioning it kinda hides behind the content column
For three, once it starts scrolling its width changes.
For four, it will cover the footer when you get down there.
To have the left-nav sticky on long content pages would be GREAT.
Thanks a lot.
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
Re: [CODE4LIB] Sticky left nav in Libguides v2
Brad, Eric is on the right track above. The problem is absolute positioning
(of which fixed positioning is a subset) removes the element from document
flow and sets it in proportion to the viewport width.
You'll have to add a fixed width to your unordered list, but more specific
than 25%. Try adding the rules below to your internal styles (the `/*
bootstrap overrides */` section of the html). (Be sure to keep the order
provided here.)
The next version of Bootstrap will change hard px values for rems!
@media (min-width: 992px) {
.affix {
width: 220px;
}
}
@media (min-width: 1200px) {
.affix {
width: 270px;
}
}
Cheers,
Brian Zelip
---
MS Student, Graduate School of Library Information Science
Graduate Assistant, Scholarly Commons
University of Illinois at Urbana-Champaign
zelip.me
On Tue, Nov 18, 2014 at 2:03 PM, Eric Phetteplace phett...@gmail.com
wrote:
When the ul goes to position: fixed it loses the width of its parent
(which has a col-md-3 class) which is why it's smaller. If you can get
the affix class to act like col-md-3 that'd help some, so:
.affix { width: 25%; }
is a start on large screens, but won't solve the way the ul ends up
behind your main content on smaller screens.
Best,
Eric
On Tue, Nov 18, 2014 at 11:35 AM, Brad Coffield
bcoffield.libr...@gmail.com
wrote:
Brian,
Awesome, thanks a lot.
Of course in all my back and forth I didn't have it setup like I had. I'd
gone back to scratch to try again. So, I just added the data-spy option
to
the UL in the template that is the nav. The problems that are happening
with it on this page aren't exactly as described in my previous email but
still, there be problems :) The offset doesn't work at all. Not sure what
css to include to make it work right. And it gets skinny on scroll now,
not
wider.
http://francis.beta.libguides.com/c.php?g=9436
Thank you!!!
On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip bze...@gmail.com wrote:
Brad, publish a dummy draft page with the left-nav template and the
problem
you're encountering so I can take a look.
brian
On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield
bcoffield.libr...@gmail.com
wrote:
Has anyone endeavored to get this to work? If not, is there anyone
willing
to help me getting it to work, lol?
What I'm talking about:
1. Use left-nav template in Libguides v2
2. Once you scroll down in the content area get the left-nav to stay
with
you, always visible.
You can see a really slick example of it on the bootstrap docs page
(which
also uses scrollspy to note where in the document you are...but lets
slow
down haha): http://getbootstrap.com/javascript/
3. Bootstrap has affix.js built-in and its therefore possible to do
it
without any outside code.
3a. You can see info about affix.js at the bottom of the bootstrap
docs
link I just provided.
4. I've gotten it to work BUT with a lot of problems.
For one, it will stay stuck in the middle of the screen instead of
sticking
to the top of the screen once you've started scrolling.
For two, it breaks the responsivity: on small screens instead of
normal
functioning it kinda hides behind the content column
For three, once it starts scrolling its width changes.
For four, it will cover the footer when you get down there.
To have the left-nav sticky on long content pages would be GREAT.
Thanks a lot.
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
bcoffi...@francis.edu
