LISTSERV mailing list manager LISTSERV 16.5

Help for CODE4LIB Archives


CODE4LIB Archives

CODE4LIB Archives


CODE4LIB@LISTS.CLIR.ORG


View:

Message:

[

First

|

Previous

|

Next

|

Last

]

By Topic:

[

First

|

Previous

|

Next

|

Last

]

By Author:

[

First

|

Previous

|

Next

|

Last

]

Font:

Monospaced Font

LISTSERV Archives

LISTSERV Archives

CODE4LIB Home

CODE4LIB Home

CODE4LIB  November 2014

CODE4LIB November 2014

Subject:

Re: Sticky left nav in Libguides v2

From:

Brad Coffield <[log in to unmask]>

Reply-To:

Code for Libraries <[log in to unmask]>

Date:

Wed, 19 Nov 2014 11:33:22 -0500

Content-Type:

text/plain

Parts/Attachments:

Parts/Attachments

text/plain (175 lines)

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 <[log in to unmask]> 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 <[log in to unmask]>
> 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 <
> > [log in to unmask]
> > > 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 <[log in to unmask]> 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 <
> > > > [log in to unmask]>
> > > > 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
> > > > > [log in to unmask]
> > > > >
> > > >
> > >
> > >
> > >
> > > --
> > > Brad Coffield, MLIS
> > > Assistant Information and Web Services Librarian
> > > Saint Francis University
> > > 814-472-3315
> > > [log in to unmask]
> > >
> >
>



--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
[log in to unmask]

Top of Message | Previous Page | Permalink

Advanced Options


Options

Log In

Log In

Get Password

Get Password


Search Archives

Search Archives


Subscribe or Unsubscribe

Subscribe or Unsubscribe


Archives

March 2024
February 2024
January 2024
December 2023
November 2023
October 2023
September 2023
August 2023
July 2023
June 2023
May 2023
April 2023
March 2023
February 2023
January 2023
December 2022
November 2022
October 2022
September 2022
August 2022
July 2022
June 2022
May 2022
April 2022
March 2022
February 2022
January 2022
December 2021
November 2021
October 2021
September 2021
August 2021
July 2021
June 2021
May 2021
April 2021
March 2021
February 2021
January 2021
December 2020
November 2020
October 2020
September 2020
August 2020
July 2020
June 2020
May 2020
April 2020
March 2020
February 2020
January 2020
December 2019
November 2019
October 2019
September 2019
August 2019
July 2019
June 2019
May 2019
April 2019
March 2019
February 2019
January 2019
December 2018
November 2018
October 2018
September 2018
August 2018
July 2018
June 2018
May 2018
April 2018
March 2018
February 2018
January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
June 2017
May 2017
April 2017
March 2017
February 2017
January 2017
December 2016
November 2016
October 2016
September 2016
August 2016
July 2016
June 2016
May 2016
April 2016
March 2016
February 2016
January 2016
December 2015
November 2015
October 2015
September 2015
August 2015
July 2015
June 2015
May 2015
April 2015
March 2015
February 2015
January 2015
December 2014
November 2014
October 2014
September 2014
August 2014
July 2014
June 2014
May 2014
April 2014
March 2014
February 2014
January 2014
December 2013
November 2013
October 2013
September 2013
August 2013
July 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
August 2012
July 2012
June 2012
May 2012
April 2012
March 2012
February 2012
January 2012
December 2011
November 2011
October 2011
September 2011
August 2011
July 2011
June 2011
May 2011
April 2011
March 2011
February 2011
January 2011
December 2010
November 2010
October 2010
September 2010
August 2010
July 2010
June 2010
May 2010
April 2010
March 2010
February 2010
January 2010
December 2009
November 2009
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009
April 2009
March 2009
February 2009
January 2009
December 2008
November 2008
October 2008
September 2008
August 2008
July 2008
June 2008
May 2008
April 2008
March 2008
February 2008
January 2008
December 2007
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007
May 2007
April 2007
March 2007
February 2007
January 2007
December 2006
November 2006
October 2006
September 2006
August 2006
July 2006
June 2006
May 2006
April 2006
March 2006
February 2006
January 2006
December 2005
November 2005
October 2005
September 2005
August 2005
July 2005
June 2005
May 2005
April 2005
March 2005
February 2005
January 2005
December 2004
November 2004
October 2004
September 2004
August 2004
July 2004
June 2004
May 2004
April 2004
March 2004
February 2004
January 2004
December 2003
November 2003

ATOM RSS1 RSS2



LISTS.CLIR.ORG

CataList Email List Search Powered by the LISTSERV Email List Manager