DMS 2 Parallax effect on multiple full width canvas sections

[wesleymusgrove 0]

I'm working on a page that has several full-width canvas sections with the parallax effect. It seems that the parallax effect is happening on all 3 background images at the same time, even though I've only just begun scrolling down the page. I've viewed the CSS background-position-y for each of these background images as I scroll and they are all changing simultaneously. By the time I scroll down to the 2nd and 3rd image the parallax effect has already "finished" for these images because the background-position-y CSS property has already reached it's maximum value.  It seems to me that each parallax effect should only start when I've begun scrolling over each individual Canvas Area, instead of all 3 parallaxing simultaneously.

The layout goes like this:

Header 
--Masthead

Home Page Template 
--Canvas Area (Parallax background effect)
--Textbox
--Canvas Area (Parallax background effect) 
--Textbox 
--Canvas Area (Parallax background effect) 
--Textbox

Footer 
--3 columns

 

Is this a bug or are full width canvas section background images with the parallax effect supposed to finish their animation before I've even scrolled down to them?

 

Wordpress: 3.9.1

DMS: 2.1.4

[Danny 1,327]

Hi,

 

Can you provide a link to the site in question please, so we can take a closer look.

[wesleymusgrove 0]

Hey,

 

The site is lambandmeadow.com

 

Since posting this originally, I ran into a bigger problem.  I accidentally saved a typo in some Custom JS code on the front-end of DMS (I wasn't aware that jQuery's "$" alias was invalid in the Custom JS section)

 

So I went to the fallback to try and change, save, and recover editability on the front-end.  But the fallback section doesn't actually save my changes, despite the message stating "Saved!".  When I refresh after saving, the bad JS is still there and none of my changes have been saved.  I can't edit on the front-end and I can't fix on the back-end in the fallback, so what am I supposed to do now?

 

[attachment=2356:DMS-editor-error.jpg]

 

[attachment=2357:DMS-fallback.jpg]

 

As you can see here, in the success callback of the save ajax request, I'm getting an "Uncaught ReferenceError: plPrint is not defined".

 

[attachment=2358:DMS-fallback-error.jpg]

[Danny 1,327]

Can you contact our helpdesk and provide the following information please.

 

* A link to this topic so our staff have something to reference

* A link to the site in question

* Provide your admin username/password

* Make sure all plugins are disabled.

 

hello at pagelines dot com

[wesleymusgrove 0]

Danny I appreciate your help. Have you had a chance to look into this issue?

Thanks

[Danny 1,327]

I've logged into your site and the DMS editor is working as intended, as far as I can tell, have you resolved the issue ?

 

Also, all the large images you're using are MediaBoxes and therefore, don't have a parallax effect, you want to use the Canvas section instead. Have you resorted to the mediabox section due to your issue ?

[wesleymusgrove 0]

Firstly, I somewhat resolved the DMS fallback editor not saving changes.  I uninstalled DMS and reinstalled several times, but the DMS fallback settings were saved in the database and I had no way to clear them out.  

 

Is there a way to uninstall DMS and reinstall a fresh, clean instance of DMS without having to manually delete all the old DMS settings stored in the database?

 

I resorted to logging in to phpMyAdmin and querying the wp_options table to find where the erroneous javascript was being stored in an option_value.  I CAREFULLY deleted that data and saved the row.  Upon refreshing the pagelines backend, both LESS and JS sections were surprisingly cleared out and the DMS frontend became editable again.

 

I want to stress this:  Even though manually editing the DMS settings being stored in the database did successfully remove the erroneous JS from the fallback section, both LESS and JS fallback sections and the checkbox to enable DMS debugging STILL DO NOT SAVE SO THIS ISSUE IS NOT RESOLVED.  If my DMS frontend breaks again, I have zero trust in recovering editability via the fallback sections.  This really needs to be looked at by some developers.

 

 

 

Secondly, yes I resorted to using the "translate on scroll" method with MediaBoxes because I could see that the parallax was likely going to require some more intense programming changes to DMS itself and would not be a quick fix.

 

However I have reproduced the issue for you to look at here: http://lambandmeadow.com/about/

 

Notice that the background-position-y property on all three background images are changing simultaneously as you being scrolling from the top of the page.

 

 

 

Thirdly, I created a new template called "Parallax" to be used on this "about" page.  The homepage uses it's own template called "Homepage".  Both of these pages are set to use local scope to handle their layouts, so that changes to each template should only apply to the current page.  However as I added parallax background images to the full-width Canvas sections on the "about" page, the homepage's full-width Canvas sections were also affected with the same changes.  It's obvious on the homepage because now there's a background image with a MediaBox layered on top of it containing the same image.  I made certain that both of these pages are loading their own templates.  Why are they sharing these changes?

 

 

[Danny 1,327]

The Fallback system is there so that if a user adds any kind of script that causes the DMS visual editor to fail, they can go to the fallback and remove. The fact that you added something that caused the Fallback to fail too, is remarkable. Can you provide us with the code you added which appears to have caused this.

 

In regards to the Parallax issue, I have actually reported this as it does indeed appear that the parallax effect is only working on the very first Canvas section.

 

In regards to the template issue, are you sure you're adding these sections to the template area and not the Header Template Area ? As the Fixed, Header and Footer template area are global areas, meaning anything added to these areas are universal throughout your site.

[wesleymusgrove 0]

This was the code I added to the Custom JS section. (The error was I forgot to change the $ alias to jQuery)

<script>
  jQuery(document).ready(function (){
    $(".nav-main-scrollspy").scrollspy()
  });
</script>

I was trying to build a custom scrollspy section using Bootstrap's scrollspy.js because the ScrollSpy section included with DMS only works if the anchor tags are in the post content.  I need them spread out over multiple textbox sections.

 

 

Thanks for reporting the Parallax issue.  Please note that all three images are doing the parallax effect at the same time, you just can't see the 2nd and 3rd image parallaxing because they're off-screen.  I'd recommend waiting to attach each background image's parallax effect to when the image itself reaches viewport visibility, instead of just the global window.scroll event.

 

 

Also, I'm certain that the sections are placed within the Template area and not within the fixed Header or Footer.  Please see the attached image to verify or log in to my site again to verify yourself.  Again, on the homepage's "Homepage" template, the full-width canvas sections should NOT have a background image as that was only added to the "Parallax" template on the about page.

 

[attachment=2366:DMS-homepage-template.jpg]

[Danny 1,327]

The ScrollSpy sections attribute may work in all sections not just the WordPress post/page content. If you add:

 

<div class="scroll-header page-header" title="Setup">

<h4>Scroll Spy Setup <small>add some magical unicorn classes and watch for spies</small></h4>

</div>

 

To a MediaBox that is positioned above the content you wish to scroll too, this may work. A TextBox section should only be used for basic HTML and text.

 

Regarding the template problem, are you sure that the pages are using different templates ? If so, would it be possible for you to record the issue showing us exactly the problem please, I recommend either QuickCast or Jing.

[wesleymusgrove 0]

Danny, I've recorded the template problem here: http://screencast.com/t/QqM8RDwZRjvK (different templates sharing changes)

 

Also back to the ScrollSpy issue, based on your posts here http://forum.pagelines.com/topic/26447-scroll-spy-active-menu-button-display-issue/?p=158955 and here http://forum.pagelines.com/topic/26447-scroll-spy-active-menu-button-display-issue/?p=159066, it seems that you said the opposite --- that ScrollSpy will NOT work in all sections and is only designed to work in the post/page content.

 

I've recorded another video showing this issue as well: http://screencast.com/t/jDMqwfOiQ9y4

 

Many thanks.

[Danny 1,327]

I haven't said the complete opposite at all, I said it may work. Scroll Spy has been designed to navigation the content on a post or page. I haven't tried using the ScrollSpy markup in DMS, the issue I mentioned in those topics were related to the ContentBox in PageLines Framework. If it isn't working, then there isn't anything we can do, as you're trying to use the ScrollSpy for something it was never mean't to do.

 

If you want to have a navigation on a page you will want to use HTML and the ID tag. You can use this as a base - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations

 

In regards to the template issue, are you referring to the Canvas section having the same ID on both the parallax1 and parallax2 templates ? If that is so, then this has already been mentioned by another user, which I have reported to our tracker. I assume you want them to be different IDs when you create a new template based on another template, is that correct ?

[wesleymusgrove 0]

Regarding the template issue, that appears to be very correct. Creating a new template from another template should clone all sections within, not use the the exact same ones. Please keep me updated about the status of that.

Thanks for clearing up your comments on ScrollSpy. I wasn't aware that it works correctly across multiple PageLines ContentBoxes, but not multiple DMS TextBoxes.

I know HTML anchor tags can be used jump to other areas of a page. That's not what I'm after.

I'm wanting ScrollSpy to do its scroll animation to other sections and also be "aware" of what section it's scrolling to, represented by the active state. That seems to be the most basic functionality of ScrollSpy.

Is DMS usimg Bootstrap's scrollspy.js plugin for this?

As I've shown in the video, there seems to be something within the DMS ScrollSpy code that is preventing it from detecting and displaying correct active state. This seems like an easy fix if a dev could look at it.

[Danny 1,327]

Not sure what you mean by this statement "I know HTML anchor tags can be used jump to other areas of a page. That's not what I'm after." ? That is basically what ScrollSpy does with a smooth scrolling effect which is as far as I know, a customized version of the Bootstrap 2.x scrollspy script.

 

As I have said above, this has been mentioned numerous times by users reporting it is a bug. However, this isn't a bug, the ScrollSpy section has and is designed to be used within a page or post content via the WordPress editor. You can use it with a MediaBox (you should only use basic HTML <br/> <p>...</p> etc.. in a TextBox, it is mean't for text only, if you want to use HTML, please use a MediaBox) or ContentBox (PageLines Framework). However, this can/may cause issues with the active state when scrolling.

 

Also, for best practices you shouldn't really use IDs in your CSS, you really should only use classes. So regarding the issue with sections retaining their IDs when basing a new template from an existing one. You should for best practices use a custom class via the styling classes field, to make your sections unique instead of the ID itself.

[wesleymusgrove 0]

Regarding what you said here:

 

So regarding the issue with sections retaining their IDs when basing a new template from an existing one. You should for best practices use a custom class via the styling classes field, to make your sections unique instead of the ID itself.

 

Thanks for the tip, but I'm not concerned with accidentally styling a canvas area's ID via CSS.  As I showed in the video, using DMS' editor, changes to one canvas area in "template1" affected another canvas area in "template2".

 

 

I said this: 

I know HTML anchor tags can be used jump to other areas of a page. That's not what I'm after.

 

 

in response to the link you gave me to w3schools.  I understand that anchor tags can be used to jump/navigate to different areas of a page.  I also understand that this w3schools tutorial can be used, as you said, 

as a base

 

if I were to develop my own ScrollSpy section plugin.

 

Just looking at the overwhelming number of people who, like me, think this is a bug with ScrollSpy is astounding.  The candid response seems to be "ScrollSpy was never meant to work with sections", which may very well be true.  But due to the demand for such a feature and the expectation that it can work with sections, I think an explicit mention should be added to the documentation indicating that it DOES NOT work with sections and only works with the content post/page, instead of discovering that after purchasing DMS and scouring the forums for days.

 

So in the mean time I suppose the only option is to use the paid Scroll Header Pro plugin? As indicated here: http://forum.pagelines.com/topic/26447-scroll-spy-active-menu-button-display-issue/?p=159363

 

 

 

[Danny 1,327]

In your video, you saved the template, but never unlinked it. That is the cause of your issue.

 

1. I just added a Canvas area to the template area, added a background color of red and a masthead to that canvas area, adding the title Template 1.

2. I then saved this as a template calling it template 1. I then went to an entirely different page, loaded template 1 and unlink it.

2. I then changed the background color from red to green and changed the Masthead title from Template 1 to Template 2.

4. Then saved it as a new template calling it Template 2. When I go back to Template 1, the red background and Masthead title of Template 1 remain in tact. Therefore, I am unable to recreate your issue of Canvas configuration changes effecting other templates.

 

The only way changes can effect another template is if you have either added the Canvas area in or above the Header template area and/or you haven't unlinked the template.

 

I can update the documentation, but no where on there does it state that it will work with other sections, it only ways page. However, I will add the following to the documentation to clear this up.

 

This section allows you to set specific anchor points within your page content which are connected to the scroll spy navbar. Once set, simply clicking a menu item in the scroll spy navbar will trigger the peg to jump from one section of your page to another instantly.

 

When I linked you to W3Schools, I wasn't recommending you use it as a base to create your own section. I was pointing out that you can achieve a similar effect with simple HTML. However, you won't have the smooth scroll effect unless you implement it. You can even use the WordPress Menu system to use ids to navigation through your page.

[wesleymusgrove 0]

Okay here's what I did differently to reproduce it:

 

1. I added a Canvas area to the template area, added a background color of red and a masthead to that canvas area, adding the title Template 1.

2. I saved this as template1. I went to an entirely different page, loaded template1 and did not unlink it, but immediately created a new template called template2.

3. I then changed the background color from red to green and changed the Masthead title from Template 1 to Template 2.  I then saved template2.

4. Then saved it as a new template calling it Template 2. When I go back to Template 1, the green background and Masthead title of Template 2 were changed. 

 

So in this case it appears that unlinking template1 from page2 is required before creating and saving template2 on page2.

 

Any update on the parallax issue, where it was parallaxing multiple images off-screen simultaneously?

[Danny 1,327]

I am not following the steps you provided above, is the template issues with canvas now resolved. As the steps I provided above, work for me without any issue.

 

In regards to the parallax problem, I have reported it to our tracker so our developers are aware of the issue.

[jennajonesdesign+ 15]

wow. Long thread! I am having the same issue with multiple instances of a parallaxed background. Here is the effect I am going for. http://www.thomascarnival.com/ But same as others have mentioned, any time I add more than 1 instance on a page it doesn't work properly. I would be interested to know when this is resolved. Thanks!