Jump to content


Photo
- - - - -

Scroll Spy active menu button display issue

scroll spy

Best Answer bestrag , 28 May 2013 - 12:01 PM

Hi Danny. I understand that. But this means that at the end the payed Plugin Scroll Header is useless...

 

Hello everyone,

 

As mentioned many times before, Scroll Spy works well with the content (as explained here http://support.pagelines.me/docs/sections/scroll-spy/). But, with sections in content area and page template, it messes up active state of menu items. That is not an issue (per se), because Scroll Spy was not meant to work with sections in the first place.

 

Scroll Header Pro is a section that enables users to insert ScrollSpy-ready stylized Headers between sections. It has .scroll-header class and title=”” parameter implemented and enabled by default. (which is the same configuration scroll spy uses)

 

SHP cannot fix ScrollSpy to work properly with sections. It provides less fix for default ScrollSpy template: removes active styles and fixes hover and active->hover.

 

Here is the code http://paste.pagelines.com/08d

and CSS variant http://paste.pagelines.com/5o3

 

ScrollSpy uses color variables in its less file http://demo.pagelines.me/cheat-sheet/, so SHP less fix works with them too.

 

if you want to change the style of Scroll Spy, fell free to use code above as starting point.

Other way is to set higher specificity to your custom less/css, for example:  section#scrollspy or #page section#scrollspy .

Hope this helps.

Go to the full post


  • Please log in to reply
33 replies to this topic

#21 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 May 2013 - 03:56 PM

I will alert the developers.  Thanks for letting us know about this.



#22 cpath

cpath

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 22 May 2013 - 04:52 PM

sure, if you guys figure out a solution, can you share it here?  thanks



#23 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 May 2013 - 04:53 PM

Yes, we will.



#24 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 May 2013 - 08:54 AM

Hi, i have the same problem too...i am using scroll header with the scrollspy section and the "active" state appears always on the wrong place. I think there's is a bug in the Html code cause of the "active" state in the list of the spynav tag....How it is possible to resolve the problem?

At the moment i have the impression that i purchased a not-working section....

 

Please Login or Register to see this Hidden Content



#25 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 May 2013 - 09:36 AM

@

Please Login or Register to see this Hidden Content

- There is no bug, as I mentioned in my previous post, the page you linked is also using sections, the markup for scrollspy is inside a ContentBox which has been cloned several times.

ScrollSpy does not work with sections properly, as the active state fails. However, ScrollSpy works perfectly inside the page content like I mentioned on my previous post, there is no bug. It simply wont work correctly with sections when the markup has been added to a ContentBox section.

 

If you wish to have this functionality, you're more than free to contact one of our Pros, like Rob suggested -

Please Login or Register to see this Hidden Content

 

@

Please Login or Register to see this Hidden Content

- You have no content for the ScrollSpy to target from what I can see, please read our documentation which has information on how to correctly use ScrollSpy.

 

Please Login or Register to see this Hidden Content



#26 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 May 2013 - 10:22 AM

Hi Danny! Thx for your response. But at this point i do not understand how make work the scroll header section...i was playing around with the css but as you said, it won't work...

what to do? I try now to put some content in the Scrollspy section and let's seewhat happens...



#27 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 May 2013 - 10:38 AM

The ScrollSpy section has no option for adding content, the content should be on your page/post.

 

The Scroll Spy section can not be configured using settings or options, as it has none. Instead the section is configured using HTML markup, which is added to the page by the user. Scroll Spy utilises one class .scroll-header and one attribute title="".

 

When you add these to your page/post content in your HTML, the class and attribute will generate a navigation item in the scrollspy nav.

 

I recommend you read through the documentation, which has clear instructions on how to use ScrollSpy.

 

Please Login or Register to see this Hidden Content



#28 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 May 2013 - 11:04 AM

Hi Danny. I understand that. But this means that at the end the payed Plugin Scroll Header is useless...



#29 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 May 2013 - 11:29 AM

You're referring to a completely different product, ScrollSpy isn't Scroll Header. If you have an issue with Scroll Header, I recommend you create a new topic in our store products forum, as Scroll Header is a third party section.

 

Please Login or Register to see this Hidden Content

When creating the topic, in the prefix dropdown menu, select the Scroll Header product, this will notify the developer.



#30 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 23 May 2013 - 04:50 PM

The autor of Scroll Header Pro refers to Scroll Spy and he mention that has to work with it...

Please Login or Register to see this Hidden Content

.

I will open a new topic about this.

 

By the way is there a possiblity to style the scroll spy navigation with css? i tried so many hours now to change the hover color, the active color etc...

 

thx

corina



#31 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 23 May 2013 - 11:52 PM

Hi Corina

 

The scrollspy can be tweaked with css. To change the hover, you'll need  to look at the css inside the li like in the example below.

 

.spynav .nav > li > a:hover



#32 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 27 May 2013 - 05:16 PM

Hi James. This is all ok. And i tried that. The problem is not the hover state...it's the active state.

I contacted the developer. Let's see what will happen...



#33 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 May 2013 - 05:23 PM

Please let us know how you get on 



#34 bestrag

bestrag

    Super Member

  • Members

  • 243 posts
  • Country: Country Flag

Posted 28 May 2013 - 12:01 PM   Best Answer

Hi Danny. I understand that. But this means that at the end the payed Plugin Scroll Header is useless...

 

Hello everyone,

 

As mentioned many times before, Scroll Spy works well with the content (as explained here

Please Login or Register to see this Hidden Content

). But, with sections in content area and page template, it messes up active state of menu items. That is not an issue (per se), because Scroll Spy was not meant to work with sections in the first place.

 

Scroll Header Pro is a section that enables users to insert ScrollSpy-ready stylized Headers between sections. It has .scroll-header class and title=”” parameter implemented and enabled by default. (which is the same configuration scroll spy uses)

 

SHP cannot fix ScrollSpy to work properly with sections. It provides less fix for default ScrollSpy template: removes active styles and fixes hover and active->hover.

 

Here is the code

Please Login or Register to see this Hidden Content

and CSS variant

Please Login or Register to see this Hidden Content

 

ScrollSpy uses color variables in its less file

Please Login or Register to see this Hidden Content

, so SHP less fix works with them too.

 

if you want to change the style of Scroll Spy, fell free to use code above as starting point.

Other way is to set higher specificity to your custom less/css, for example:  section#scrollspy or #page section#scrollspy .

Hope this helps.







Also tagged with one or more of these keywords: scroll spy