Parallax and Mobile Menu

[techryan]

Hi All,

I was looking at the parallax documentation. Such an awesome addition. I’m playing around with it now. One question I did have pertaining to the whole idea was. How could you incorporate the top level menu into this? Would you just static the menu and have it flow with the page or is there a jump to section similar to old html where it was # to go to specific area?

Also, on http://mapsautopsy.com I’m having some issues with the menu disappearing on mobile. Not sure why it is all the sudden but any suggestions would be appreciated!

Edit: Is there any reason to separate the parallax into posts from documentation vs having it all on one page?

2nd Edit: I noticed that the images appear to be jumping in IE11. This is also happening on others as well http://testing.creativesurge.co.uk/xtreme/parallax-page/ — Is this intended?

Thanks in advance!

Best,

Ryan

[scrambler]

In your first question, if you mean you would like menu items to make the page scroll to a specific parallax area, I have not tried, but if it would work, it would be with html anchors on the various sections, and menu items as links to these anchors.

Regarding your mobile menu, it does not disappear, it is behind the rectangle you have at the top left.

You could move it to the right with the rule

.is-menu-mobile .wvrx-menu-button {float:right;}

“Is there any reason to separate the parallax into posts from documentation vs having it all on one page?”

Don’t understand that. Parallax are sections, and weaver decided to implement them with posts as an easy way to define these.

I dont see images jumping. Have you tested various browsers and machine, can you elaborate?

[thesurge]

I have created a simple one page site here http://pinkertonclassiccycles.co.uk using the ‘Easy smooth scroll links’ plugin and simple anchors, exactly as scrambler suggests. It’s pretty quick and easy to set up with parallax posts (I put the anchors in the Excerpt box) and custom links in the menu.

I have not seen any issues with images jumping myself, but must admit to not really doing much testing in IE11.

[scrambler]

Thank you for mentioning that plugin, combined with a menu fixed at the top, this creates an interesting menu / content interaction.

And I tested IE11 and had no jumping, so the issue may be related to the local machine being used

[techryan]

@scrambler 

1) I reviewed @thesurge recommendation below and will test it out. It looks great on his site

2) That seemed to work but I need to align right since the mobile is align left the z-index blocks text.

3) In my current scenario I just put all the content on one page. Separating the parralax sections accordingly. Example is as follows “[parallax img='http://www.mapsautopsy.com/wp-content/uploads/Maps_FI_1.jpg' height=400 class='wvrx-fullwidth']<center><h3>Board certified by the American Board of Pathologists, licensed in IL</h3></center>[/parallax]” – Just wondering if doing it in posts provides any benefits.

4) I uploaded a video to show and replicate for troubleshooting. It also has @thesurge site to show it’s happening there as well. I have asked the client as well and they stated the same.

https://vid.me/e/8d5u – I personally don’t make a habit of using IT but some people still live by it.

[scrambler]

2) Read the last item on this thread

http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1#Item_1

3) Use whatever is easier to you

4) Dont know what to say, I cant reproduce it

[Gillian]

I can see the slight jump when scrolling in IE11 as well – just another IE quirk I guess 🙂

[scrambler]

I am on windows 10, and no problem with edge, IE11, Chrome and FF there

[Gillian]

I just tested on a Windows 10 machine using Edge and scrolling is fine.  However, when using the Edge option to view in Internet Explorer 11, scrolling using the mouse wheel jumps just like before using Windows 8.1 with IE11.

[techryan]

I am testing on IE 11 on 8.1. I was using 10 but it does not work with my Robot Programming software so I had to go back to 8.1 🙁

[scrambler]

@gillian, strange as I tested W10 edge > View in IE 11 and had no problem, but I dont have a mouse so I scroll with the scroll bar, may be check if that makes a difference.

I also tested W7 + IE11 with a mouse or scroll bar and no issue there either.

[Gillian]

Okay, results using IE11 on Edge in W10 …

1) Using mouse scroll wheel – a noticeable jump

2) Using mouse, dragging slider on scroll bar – smooth, no jump

3) Using mouse, clicking above or below slider on scroll bar – jumps, but pretty subtle, not as noticeable as when using mouse scroll wheel

4) Using up and down arrow keys on keyboard to scroll – a noticeable jump

[techryan]

Not to NECRO this thread but was there ever a resolution the the parallax images jumping in IE. I have another website that I did that it is happening in IE still. Scrolling on website using scroll wheel (middle wheel) – can also be replicated by using up and down arrows on keyboard.

http://itsjustpaintbykatch.com/

Thanks in advance!

[scrambler]

Windows 7 /  IE11 on a strong PC, I have no jump whatsoever regardless of the mode (wheel, drag, click…)

IE11 from Edge on a Windows 10 old  laptop, I can get some jumping when clicking in the scroll bar.

Edge on the same laptop has no jumping issue.

This is obviously a bug in IE rendering of the CSS being used, so I dont see how anyone could provide a fix other than Microsoft, but it is obviously unlikely.

[scrambler]

I found this on a web search, confirming the issue is in IE. They have possible fixes worth trying

http://stackoverflow.com/questions/19377810/ie-10-11-make-fixed-backgrounds-jump-when-scrolling-with-mouse-wheel

I’ll try to give them a try when I have a moment

EDIT: So it is a Smooth scrolling bug in IE. If you disable Smooth scrolling in IE properties>advanced Tab, it goes away

Still there today  though http://stackoverflow.com/questions/27966735/why-background-image-is-moving-when-scroll-at-ie

They fixed it in Edge, and apparently dont plan to fix IE…

[techryan]

Thanks @scrambler, that is so stupid. Users should NOT have to change their browsing preferences ever..ugh..that did resolve the issue though. I will go over the link and see if that is something I can adjust on my end because as stated on there users will more than likely have it on by default. 🙁

I’m not an IE user but I know people still use it…so I try to cater to it as well when making sites!

[Author]

Posts