‹ Home
Exported

Little Flower - Coral Gables, FL

Gary Smith, Web Department Director at DiocesanVeronica Alvarado, Project Manager at DiocesanRyan Ross, Developer at DiocesanMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanDanae Chudy, Web Designer at DiocesanCody Armock, Web Content Specialist at DiocesanAlan Snodgrass, DiocesanJorge A. Santibáñez, Director of Religious Ed at Little Flower - Coral Gables, FL StaffLuis Cuza (Concert Site Only), Associate Director of Music and Pastoral Resource Officer at Little Flower - Coral Gables, FL StaffArthur Richardson, Web Project Manager at DiocesanMarcus Borger, Developer at Diocesan_SupportRyan Hoch, Web at Diocesan +3 others
From the list: Church

✔ Page - Anchor Scrolling offset - Because of the sticky header there needs to be a scrolling offset.

Cody A. added this on
Completed by Ryan R.
Assigned to
Ryan Ross, Developer at Diocesan Ryan R.
Notes
https://cotlf.diocesanweb.org/sacraments/weddings/#preparation-guide
I was impressed how I figured out the "Double anchors" for the page, but it would work better with a scroll offset. I know Sam Pohlman, Web Developer at Diocesan Sam has done it for a couple sites and so has KB. but the code basically is this but the 50 px is changed to whatever the masthead height is, which in this case is 114px. May be better answers here, but this seems to work.
#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

Comments & Events

Ryan Ross, Developer at Diocesan Ryan Ross, Developer
Good suggestion.  The CSS will work ( I applied 100px to your wedding anchor example).  The only thing I don't like about this is we would need this CSS adjustment for every existing and future tab that's created.  Sure, I could use a class instead and that would be reasonable, I'd just have to add that offset class to all templates so tabs get said class.

I had penciled in the offset when I tackle the smooth scrolling on anchors to-do.  Doing it with jquery/javascript will make it future proof.
Notified 2 people
Cody Armock, Web Content Specialist at Diocesan
Cody Armock completed this to-do.
Cody Armock, Web Content Specialist at Diocesan
Cody Armock re-opened this to-do.
Ryan Ross, Developer at Diocesan Ryan Ross, Developer
This is an extension of the original smooth scrolling request.

jQuery UI Tabs isn't playing friendly when attempting to combine smooth scroll and offset.  Continuing to work this problem out.
Notified 2 people
Cody Armock, Web Content Specialist at Diocesan Cody Armock, Web Content Specialist
Ryan Ross, Developer at Diocesan Ryan   Okay. Yeah, I noticed today that the scrolling was weird with the tabs and things.
Notified 2 people
Ryan Ross, Developer at Diocesan Ryan Ross, Developer
Cody Armock, Web Content Specialist at Diocesan Cody  Yeah, the content is turned into tabs after the page loads, but at the same time if there's a hash in the URL it wants to scroll to it, and it may not be there yet.  Kind of a wonky timing issue getting everything to line up.
Notified 2 people
Cody Armock, Web Content Specialist at Diocesan Cody Armock, Web Content Specialist
Oh yeah, that is true. Sounds like a Run DMC song, because "It's Tricky, It's Tricky to clock the roll, to clock the roll on scroll. It's Tricky."
Notified 2 people
Ryan Ross, Developer at Diocesan Ryan Ross, Developer
Clear your browser cache, and give this the ole testski...

LSS short, there were several different things happening all at once, so I kinda had to peel it apart to get it sorted out.  On page load, on tab load, on focus, etc.

ShiftNav was actually the biggest issue, as it and UberMenu have a scroll offset.  I think it was applying some scrollto rules as part of the plugin.  I went down a path where I wound up deactiving ShiftNav and reactivating it, and magically my last bug with the tabs/anchors/scroll/offset vanished.
Notified 2 people
Cody Armock, Web Content Specialist at Diocesan Cody Armock, Web Content Specialist
Works pretty good. It doesn't seem to be perfect, seems to include the top button of the previous ones, but it is a lot better than before. Thanks Ryan.
Ryan Ross, Developer at Diocesan 💯
Notified 2 people
Ryan Ross, Developer at Diocesan Ryan Ross, Developer
Yes, for simplicity in troubleshooting, I'm targeting the "tabs" container, which is always going to be the top of the buttons, regardless of how many, if they wrap, and which one you're linking to.

So the scroll amount will be the same [currently] if you clicked the second one, or the 5th one. 

With more effort, yes would could fine tune it to get more precise.  I was just happy to get something that actually worked, and figured that was probably good enough.
Notified 2 people
Cody Armock, Web Content Specialist at Diocesan Cody Armock, Web Content Specialist
Works for Me
Notified 2 people
Ryan Ross, Developer at Diocesan
Ryan Ross completed this to-do.