Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

Spynav flickers

Recommended Posts

janpeeters

Hi,

 

When I scroll on a website I'm building www.lovo.nu the scoll-spy/spynav buttons 'over onszelf' and 'kosten' flicker. I've checked the code I've used and there seems to be no difference with spynav entrees that don't flicker. 

Has anyone seen this before? Is it a Bootstrap bug? Or am I overlooking something.

BTW I've also tested this without my custom CSS but that didn't change anything.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Rob

Jan, there appears to be some heavy customization of the menu with regards to active, hover and focus.  As you slide, those states appear to be changing.  It could be that the same class applied to the other menu items isn't applied to those elements the same way.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob,

 

Yeah I at first also thought it might me the customisation, but even when I delete all my custom CSS that applies to spynav it still flickers. Any other ideas?

 

Thanks, Jan

Share this post


Link to post
Share on other sites
janpeeters

Rob

 

I've experimented with this problem on a temporary page (http://www.lovo.nu/testpagina/). 

 

A few things I have noticed.

As you can see when scrolling the page, my CSS customisation works up till Header 4 (spynav locks and pills get the colour of the header where you're at). 

 

What's the case:

The first three headers are in the same section as the spynav, 4 and 5 are in separate sections. On my main page (http://www.lovo.nu), my spynav is in a separate section and every other coloured part is a section too. Has to do with background colour customisation.

 

Clearly the spynav nows that there are other anchors on the page otherwise it wouldn't show the names but it almost looks like the spynav states don't respond well to the position of scroll-spies in other sections on the same page.

Maybe this is normal but I should expect not. 

 

This is of course not yet the solution to the flickering, but maybe it leads us to that.

 

Hope this gives some more info.

 

Jan

Share this post


Link to post
Share on other sites
Danny

The SpyNav wasn't ever mean't to be used in the fashion you're using it. It's meant to target content and not individual sections. I can speak to our developers and see if there is a solution, but if memory serves me correctly, it wasn't possible.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Danny,

 

That would be great if you could speak to the devs about it. I'd assumed wrongly that it could jump to anywhere on a page. This might also explain the flickering and the not updating of the active state.

 

Can you think of a way how to achieve what I want in another way without the spynav. I thought of another menu section but would probably get stuck with the styling. 

 

Thanks again for your help.

 

Jan

Share this post


Link to post
Share on other sites
Danny

You can achieve something similar with basic HTML, it won't do the smooth scroll, instead it will simply jump to that area.

For example.

 

<p id="my-note">This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>
 
<a href="#my-note">Go to the first section</a> 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

Thanks, I'll experiment with that. Because the smooth scrolling really is a valuable addition I hope you can still discuss this with the devs.

I've found some threads on the internet where also Bootstrap users have problems with it not scrolling to everything on the page and stuck selected nav-pills.

They provide solutions for this but PHP goes over my head I'm sorry to say.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
janpeeters

A little addition. I've made two videos with Jing to show the behaviour:

 

How it looks in the browser:

http://www.screencast.com/users/jpeeters/folders/Jing/media/010bf7b0-2b53-45d9-8abc-079b2a6f5a2e

 

How it looks in de Developer inspector:

http://www.screencast.com/users/jpeeters/folders/Jing/media/9a05fb1b-4dab-4fc4-9dfe-2d11e7e0abb7

 

For the most part the scrollspy works nicely. It jumps to a section when clicked and it highlights the pill that I hover. Only these two flickering pills that change alternating to an active state. But how and why it happens?

 

Best and thanks for any help.

 

Jan

Share this post


Link to post
Share on other sites
rmaxsg

Actually i have same issue before.  Is like the SpyNav Will jump to another li.    Hope this issue can be solve :)

Share this post


Link to post
Share on other sites
Rob

As Danny said...

 

The SpyNav wasn't ever meant to be used in the fashion you're using it. It's meant to target content and not individual sections. I can speak to our developers and see if there is a solution, but if memory serves me correctly, it wasn't possible.

 

We can't fix something we've developed for one stated purpose that's being implemented for something else that was unintended.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Rob,

 

I can only say that I wonder why this choice has been made.

Bootstrap's Spynav is (as far as I've been able to verify) designed to scroll to a position on a page and highlight in the spynav at which position it is. So it's weird for me that DMS offers designers the possibility to use sections to build pages with a spynav that scroll to the correct location but then doesn't support showing correctly where it is on that build page.

Sections are a design choice of DMS, for a visitor or designer, a page is a page.

 

Was this really discussed with the devs, because that's what Danny offered to do. And I can barely imagine that this was the answer. I really hope that the developers will consider reworking the Spynav to get it to work like it should have. 

I await your answer before I post a bug report/feature suggestion on Github.

 

Thanks, Jan

 

Note: Edited the post to be more precise. It's not that the spynav doesn't scroll to the right position it just doesn't display correctly where at which position it is on the page. 

Share this post


Link to post
Share on other sites
Gavin_

@Jan
I think you have to issues here:

1. a stuck pill

2. the flickering

I have had a problem with the wrong Pill being highlighted and my challenge was the amount of content - when i increased the amount of content for each section - the right pill was highlighted. however, when i look at your site i see that the "kosten" pill is always highlighted - is this what you see? 

I am not seeing the flickering problem you are having on the site you linked to.

ps I am not a PL Developer - i build sections for DMS

Share this post


Link to post
Share on other sites
janpeeters

Hi gavin_launchpad

 

I've also noticed that the flickering has gone. How and why this got resolved, I have not idea.

It might still occur to other users tend to remember that I read more reports on the forum.

 

The stuck pill still exists and that is indeed 'Kosten'. I've tried to put thrice as much info in it but that didn't solve the stuckness. Did you mean that you put much more info in all of your section areas than that I'm currently using?

 

Thanks for jumping in anyway!

 

Jan

Share this post


Link to post
Share on other sites
Gavin_

Hi @Jan, 

 

Yes, i added more content to each section - i forget what my target was but off the top of my head each section had to be at least 300px high. 

However, i don't think this is what is causing your stuck pill. When i look at the pills with chrome developer tools - on your 'kosten' pill is states "active" - all the time. I am wondering if you have inadvertently added some html to the 'kosten' tag? have you tried to scratch that section to see what the results are? 

Share this post


Link to post
Share on other sites
janpeeters

@gavin_launchpad 

 

Yes I noticed that too with Chrome dev tools. To be sure that nothing was wrong with my scroll-header tag (didn't see anything strange) I deleted the whole section-area. At that moment the "Aanbod" pill got stuck. huh? I recreated the Kosten section-area and it jumped back to that section. 

 

I found the following thread on stack-exchange, but I presume the Pagelines devs have correctly connected the right info to body tag.

http://stackoverflow.com/questions/11031955/bootstrap-scrollspy-highlights-last-navigation-link-button-after-loading

 

Jan

Share this post


Link to post
Share on other sites
Gavin_

@Jan - i am using Scrollspy in the same way you are - i only have four pills and i am not getting a stuck pill - my problem was the correct pill was not being highlighted. If i find time today i will add a fifth and sixth to see if i can recreate your stuck pill problem. 

As DMS provide great flexibility with the way pages are constructed I am sure more people will try our approach with scrollspy, so it is worth testing.

Have you tried to recreate the problem by using scrollspy in the original way it was intended? 
 

Share this post


Link to post
Share on other sites
janpeeters

Hi gavin_launchpad,

 

Yes I have tried that. See http://www.lovo.nu/testpagina/

If it has to scroll through content that's in the same section-area as the spynav all is fine.

This counts only for the first three pills in this page because 4 and 5 are structured like my main site.

This testpage has the following structure.

 

Header (with fixed-nav)

Section-area with background image and LOVO logo

Section-area with spynav and three scroll-headers titles (one per paragraph) (up till here all is good, scroll-wise)

Section-area with one scroll-header title

Section-area with one scroll-header title

 

On the testpage it scrolled properly through 1-2-3. But for section-areas 4-5 it doesn't work well. 

 

The lovo.nu page is build up like this...

 

Header (with fixed-nav)

Section-area with background image and LOVO logo

Section-are with spynav

And after that: each coloured area is one separate section-area with a scroll-header title in the first item in that section area.

 

Thanks for working with me on this. I'm positive we'll find out how this happens.

 

Jan

Share this post


Link to post
Share on other sites
Gavin_

Great Jan -

On here http://www.lovo.nu/testpagina/ can you please increase the amount of content that you have in each of the five examples - ideally we are looking for each one to be 300px highor even more - currently you have it at 240px.

Thanks.

Share this post


Link to post
Share on other sites
janpeeters

Hi @gavin_launchpad,

 

Done... I presume this should be enough content. Only first three pills that are in same section are following the scroll.

 

Jan

Share this post


Link to post
Share on other sites
Gavin_

Thanks Jan 

 

OK I can see you have the error there in the normal working method. This needs to be investigated further. 

And on a different point -  the sad news is i have managed to recreate the stuck pill on my site using scrollspy with sections - as i said i only had 4 pills as soon as i added the fifth i got the problem of the stuck pill. 
 

This is certainly something that could be looked at as being an addition / improvement to the scrollspy section for DMS.

Share this post


Link to post
Share on other sites
Danny

Hi Jan,

 

I need to test this further, but can you replace all the titles such as Header 1, Header 2, Header 3, Header 4 and Header 5 and use words that are different for example.

 

Replace Header 1 with HTML

Replace Header 2 with CSS

Replace Header 3 with PHP

Replace Header 4 with Javascript

Replace Header 5 with Ruby

 

and see if that works, I think it may be an issue with the titles being very similar.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Danny, it would have surprised me if this would have solved it, because text is text for a scroll-spy, it's not code. But have a look, all with animals now ;-)

gavin_launchpad, that's sad news, and good news. I'm sorry for you ;-) but it makes a better case for looking at the section-area compatibility of spynav. 

Thanks to you both!

 

Addition: I've changed the background color of the section-areas to have more easily distinguishable which parts are in different section-area's.

Share this post


Link to post
Share on other sites
janpeeters

I bought @bestrags Scroll-Nav (http://www.pagelines.com/shop/sections/scroll-nav-dms/) today and it solved the problems I mentioned in this thread. Still think it would be great if the regular spynav would behave like (I think ;-)) it should. So leave the bug report on Git. But for people having these issues too I can recommend Scroll-Nav. Only thing that is not yet fully super is how it works on smaller screens, but that might be fixed in an update. 

Share this post


Link to post
Share on other sites

×