Archived

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

opwolken

Parallax Full width Section problem, lower part picture showing on top

50 posts in this topic

Hello,

 

I love the parallax option for the full width section. But unfortunately it will not work properly on my websites. I made an example here. Images used as comparison: lake & elephant.

 

As you can see in the example, the lower part of the picture is showing up on top of the picture on default.

 

Is this a known problem? An example site suggested bij Pagelines DMS: http://www.johntindel.com/ has the same problem (with the wooden background).

 

On the other hand, the workspace themesite built does not have this problem: http://workspace.usingpagelines.com/

 

Is there a sollution to this problem? 


Share this post


Link to post
Share on other sites

Hey There,

 

The main thing with parallax is to make sure that your image's height is way, WAY larger than the size of the section you want the effect in, I recommend between 3x and 5x as big.  The effect you see on the workspace demo is actually the premium Depth Charge plugin integrated in.  

 

If you're looking for a more flexible way to integrate parallax, I recommend grabbing Depth Charge from the store.  It's an incredibly powerful section that will follow you into every design project you do.  

 

The other thing I'll say is that the parallax relies on the fixed navbar being the default height, if you adjust it at all that can throw off the calculations for the parallax effect.  

 

I realize that's not the most amazing answer but hopefully it at least points you in a workable direction.

 

James.


James Giroux, CEO
Groundwork

Share this post


Link to post
Share on other sites

Very helpful info James.

 

To the original poster, I'll add that another option is to use a seamless, tiling pattern. That won't exhibit the mentioned problem. I do think big photos are sexier though. Hency why I came here for a solution the problem;)


Share this post


Link to post
Share on other sites

I understand what you mean webmatros, I use it for my own site as well (a color equal to my header at the bottom of the picture). but this is of course a workaround. I hope we will see a solution to the problem in the future :)


Share this post


Link to post
Share on other sites
This isn't a known problem, as far as I am concerned what James wrote above is a perfect explanation, you will need to use an image that is going to be substantially larger in terms of height than the section that is going to house it. For example, if your section has content which causes that section to have a height of 1000px, you can't use an image that has a height of 1000px, as there is no extra space for the scrolling animation. So for something like that, you would probably want a height of about 1400px or over for a nice parallax effect.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

This isn't a known problem, as far as I am concerned what James wrote above is a perfect explanation, you will need to use an image that is going to be substantially larger in terms of height than the section that is going to house it. For example, if your section has content which causes that section to have a height of 1000px, you can't use an image that has a height of 1000px, as there is no extra space for the scrolling animation. So for something like that, you would probably want a height of about 1400px or over for a nice parallax effect.

Dannny

 

I have tried that and that is not working.  Could be me but I have tried large images.  I have used section areas that were set to have a height of 400 px tall and used a background image that had a height of 2800px and it still shows the bottom of the image at the top and then the beginning of the image.  No matter how large I make it, it still has the same issue.  I thought that maybe setting a height in the section area was causing the issue so I removed the height of a section area and then added the Splash Box section, which will only size based on the images for that section area.  The section area (with the Splash Box) has a height that is less than 450 and when I added the 2800px tall image, it still does the same thing.

 

If you have a site that you can allow access to that has this working, can I please see since I'm really anxious to see this work so I can use.  Have had about 3 clients sites (plus some I own) that I would love to use it in but just can't figure it out.  Wouldn't mind buying Depth Charge but since I know it's built into DMS, would love to use it! :)

 

James

1 person likes this

Share this post


Link to post
Share on other sites

I am not able to recreate the issue unfortunately. Check my test here - http://dms-test.flywheelsites.com/

Danny

What is your testsite's password?


Share this post


Link to post
Share on other sites

I think the problem could be solved, if the background image was vertically centered? Right now it's top-aligned.

 

What do you think?


Share this post


Link to post
Share on other sites

I'm having the same problem. Has anyone managed a fix? webmatros"]'s suggestion of setting the image to center seems promising. Have you had success, @[member="webmatros?


Share this post


Link to post
Share on other sites
What is the solution of the problem?
"Buy additional plugin" is not the solution.

Share this post


Link to post
Share on other sites

Can you all provide a link so we can see this issue, as I am not able to recreate the issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

I'm having the same problem. Has anyone managed a fix? webmatros"]'s suggestion of setting the image to center seems promising. Have you had success, @[member="webmatros?

 

Nope. A few weeks back I tried, but couldn't make it work. Had trouble finding the right CSS selector, etc.

 

A super tall image 4x the height of the width is not a solution. It's a problem. A bandwidth problem;)

 

Centering the image vertically and offsetting it a little, so make room for the parallax effect to have some leeway to scroll on, seems the way to go.

1 person likes this

Share this post


Link to post
Share on other sites

I have already reported this to our tracker.

 

 

A super tall image 4x the height of the width is not a solution. It's a problem. A bandwidth problem;)

 

hehe and yet you want to use a 16.2mb image on your site?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Is there a solution to this problem, yet?  I am seeing the same issue. 


Share this post


Link to post
Share on other sites

Hi there, Danny's listed this on the tracker for the devs to review, any update to the code will most likely be included in the next release.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Looking for the solution to this as well. Makes parallax useless with a anything other than a pattern. :(


Share this post


Link to post
Share on other sites

Unfortunately, we are usually not informed when a specific fix is applied.  It is just done and included in the next release or, if it cannot be done, it simply isn't.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Hi Rob,

The only issue I find on the tracker is this one: https://github.com/pagelines/DMS/issues/259.

I'm not sure it fully describes the issue(s) reported in this thread (e.g. the "
the lower part of the picture is showing up on top") or elsewhere, what do you think?


Share this post


Link to post
Share on other sites

+1 Same issue here


Share this post


Link to post
Share on other sites

Just so everyone knows of an alternative, we had attempted to use depth charge as well but it didn't make the images show how we wanted and was having some weird loading issues for us. We ended up using the basic Stellar JS parallax script. Info at http://markdalgleish.com/projects/stellar.js/

1 person likes this

Share this post


Link to post
Share on other sites

same problem... even if the height is 50 px and the photo is 700 px tall... the top 25 px is the bottom of the picture, and the bottom 25px is the top of the picture.  :( 

Share this post


Link to post
Share on other sites

Mark & Phil"] What are the exact image showing + loading issues you encountered with DepthCharge ? Did you contact @[member="etcio (developer)?


Share this post


Link to post
Share on other sites

Erwan I can't recall what they were, that was 3 projects ago (about a month and a half ago). When we encounter issues again we'll be sure to document them.


Share this post


Link to post
Share on other sites

I actually added -25px margin-top to LESS CSS and designated local class for page I was using parallax for and seems to be a quick fix :thumbsu:

1 person likes this

Share this post


Link to post
Share on other sites

  • Similar Content

    • jeomiland
      By jeomiland+
      Hi
      I found this topic
      which talks about a similar issue I am having, but a little different. Hope someone can help me out.
      Best way to see the problem is to view http://cassclayton.com/ on Safari (Mac) compared to Firefox or Chrome. You will see the banner just under the fixed menubar has a gap between the menubar and top of the banner. Looking at Inspector, I found:
      <div class="fixed-top-pusher" style="height: 62px;"></div>
      <script> jQuery('.fixed-top-pusher').height( jQuery('.pl-fixed-top').height() ) </script>
      and indeed it seems the jquery is not always working consistently. For instance, if you simply refresh the page in Safari, it will loose the gap and all looks fine, so is it a browser cache issue that is interacting with the jquery? I do have W3 Total Cache installed. There must be a way to tell the code to make sure jquery is up and running and available to do it's majic?
      And perhaps there is just a better way to do this banner? Originally I tried several DMS sections and used the banner image as background, etc... Kept running into problems with resizing and the left/right parts of the image were getting chopped off. It is important the whole image show, so currently I just use a NextBox section with this code:
      <img src="[pl_site_url]/wp-content/uploads/2015/12/CassClayton-blues-tribute-banner.jpg" width="100%" />
      and it looks the way it should. Is there a better way to place a banner graphic under a fixed navbar and make sure the whole banner graphic displays regardless of screensize?
       
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • Suneel
      By Suneel+
      I updated my theme to framework and now can't get rid of this bright blue bar that appears across the top of every page. It says, "A fixed bar that makes it easy to promote important content.", and then a button that says, "Get PageLines".
      I am a novice and need help.
      Thank you!
      Natalie