Jump to content

Archived

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

opwolken

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

Recommended Posts

opwolken    3
opwolken

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
James Giroux+    2
James Giroux

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
webmatros    1
webmatros

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
opwolken    3
opwolken

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
Danny    1,327
Danny
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
atcdomainsolutions+    63
atcdomainsolutions

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

  • Like 1

Share this post


Link to post
Share on other sites
webmatros    1
webmatros

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
bhowton    0
bhowton

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
layasamadhi    3
layasamadhi
What is the solution of the problem?
"Buy additional plugin" is not the solution.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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
webmatros    1
webmatros

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.

  • Like 1

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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
sethoof    3
sethoof

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

Share this post


Link to post
Share on other sites
James B    436
James B

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
Mark & Phil    7
Mark & Phil

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
Rob    547
Rob

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
Erwan    37
Erwan

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
Mark & Phil    7
Mark & Phil

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/

  • Like 1

Share this post


Link to post
Share on other sites
seventhsite    1
seventhsite

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
Erwan    37
Erwan

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
Mark & Phil    7
Mark & Phil

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
agent654l    2
agent654l

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:

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
    • 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
×