0

QUICK QUESTIONS.

I'm using Rails to develop a single page webapp with a sidebar for scrolling. I'd like for my sidebar to change active states depending on the page section.

I'm used to using the "current_page?" method to set navigation links active, but am unaware if there is a method like this for page sections. I know jQuery can get this working, but I'd like to use as little lines of code as possible.

Is there another method out there like "current_page", but for sections on a page?

Is there maybe a way to still use "current_page?", and apply that to page sections?

Am I forced to use jQuery?

Have never used Rails for a single page webapp, so am feeling lost on how I could use the controller here. I know I probably should've used a framework like Angular, but I did not originally plan on developing this to be a single page webapp.

Any help or advice would be GREATLY appreciated!

MrJesus
  • 11
  • 5
  • In Rails you can get the request url, the controller and action. But since this is a SPA and not a classical web application then its pretty meaningless since Rails just serves JSON in response to ajax requests. In a (good) SPA you keep track of the "current page" or state by updating the URL - this also makes the application linkable. `history.pushState` lets you update the current url without reloading the page.https://developer.mozilla.org/en-US/docs/Web/API/History_API – max Oct 24 '17 at 21:00
  • https://tomdale.net/2012/05/ember-routing/ – max Oct 24 '17 at 21:02
  • @max Yeah.. I know, I should've used a framework other than rails.. But I've gone too far at this point lol. Should've planned out the design better before jumping into a Rails build :/ Thank you for the useful links. Will have to put those practices to use. I'm developing my portfolio, so it's important I follow good practices! This is the last thing on my list. Might just redevelop the whole thing using Angular once I'm done. Thanks again – MrJesus Oct 24 '17 at 21:24

1 Answers1

0

If you want elements to on the page to update as the user interacts with the page you will have to use Javascript.

If you're using Bootstrap take a look at their Scrollspy component https://getbootstrap.com/docs/4.0/components/scrollspy/

If you want something more lightweight and minimal, take a look at this related question Change Active Menu Item on Page Scroll?

patkoperwas
  • 1,341
  • 10
  • 14
  • Ah, okay. Thanks for clarifying that JS will definitely have to be used. I just felt the need to verify if that was the case or not. Welp, am already using bootstrap utility classes.. Look like I'll be using scrollspy! Thanks – MrJesus Oct 24 '17 at 21:16