-
Posts
-
I wonder if something like you can see at http://simonbiffenphotography.co.uk/ is possible with ENFOLD as well. I´m talking about the effect when you scroll down the homepage.
– The lower content slides from bottom to top like a curtain over the big slider
– The logo and menu remain stickySee also this little screencast
http://www.screencast.com/t/Ia6DqZPd9Can it be achieved with ENFOLD and if yes, how?
Cheers
MichaelHey Michael,
There’s a Fixed option background on Color Sections that will replicate that effect.
Best regards,
JosueHi Josue,
of course I´m aware of that but there is no such option in combination with a slider, right?
Cheers
MichaelHi,
No option but possible with CSS:
.avia-fullscreen-slider .avia-slideshow>ul>li { background-attachment: fixed; } .avia-fullscreen-slider .avia-slideshow-inner { transform: none !important; }That will work with FullScreen Sliders.
Best regards,
JosueHey guys,
I tested it on my dev site at https://dev.der-prinz.com/enfold/ and I´m afraid that does not work in Firefox whilst it works in Chrome and Safari.
Any thoughts on that?
Cheers
MichaelI updated to version 3.8 right now which has the option to set the fullscreen-slider background to “fixed” (thanks for the addition) but that also does not work in Firefox.
The strange thing is it works in a color section element (alittle down that page with the colred tubes) but not in a fullscreen-slider (the first element with the b/w images)
Again see https://dev.der-prinz.com/enfold/
Hi,
Try updating to 3.8, there’s now an option to disable parallax scrolling on FS Sliders – http://screencast.com/t/wODmZwxvHr
Best regards,
JosueHey,
I already have updated to 3.8 (as mentioned above ;-)) and I see the option to set the background “fixed”. So I removed the custom css that you mentioned in your answer on August 12th and activated the fixed bg option for the slider. That works perfect in Safari and Chrome but NOT in Firefox.
There seems to be an issue with Firefox and fixed backgrounds.
Check https://dev.der-prinz.com/enfold/ in Chrome and Firefox and take a look at the strange thing I mentioned before:
“The strange thing is it works in a color section element (alittle down that page with the colred tubes) but not in a fullscreen-slider (the first element with the b/w images)”
Thanks
MichaelHey!
Try adding this code to General Styling > Quick CSS:
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=fixed] .avia-slideshow-inner{ transform: none !important; }Cheers!
JosueHey Josue,
unfortunately it didn´t work. I added login data to the private section if you like to have a look. To me that seems like a clear bug which only occurs in FF (maybe only FF on Mac?)
Hopefully you find a quick solution for that because that´s exactly the thing I need for a current customer project.
Have great start into the weekl
MichaelHi,
Check it now, here’s the code that did the trick:
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=fixed] .avia-slideshow-inner, .avia-fullscreen-slider .avia-slideshow[data-image_attachment=fixed] > ul > li{ transform: none !important; }Will report to Kriesi.
Best regards,
JosueHey,
that´s awesome. It works. Thanks a lot for your support. Hope Kriesi can fix it in the theme for good.
Cheers
Michaelby the way : for that page you use a fixed footer!
i would not set the z-index to 0 – that is a bit confusing.
isn’t it this way a bit looking better:#footer { background-color: rgba(87, 98, 112, 0.9); bottom: 58px; left: 0; position: fixed; width: 100%; z-index: 1; }how did you do that with the spacer ?
The footer ist still an “issue” check out this topic: https://kriesi.at/support/topic/fixed-curtain-footer/
And this here too. I can swear – yesterday it worked like a charm with the fix of Josue – today not ( the only thing – firefox had an Update tonight)
And this background-attachement : fixed is only a bug of firefox ( when there is transform)I don’t know what happens today!
btw: on that construct is it possible to have a slider without transform ?
Hey there,
in fact Guenni007 is right. After the recent Firefox update the solution desn´t work anymore. That is really weired. Any suggestions?
Cheers
Michaelis there any progress in this case?
There is another issue with this solution and with the fixed background of the fulls-screen slider anyway.
If you look at https://dev.der-prinz.com/enfold/ in a desktop browser and on a smartphone screen there is one huge issue on the smartphone screen: the image is not resized to fit it is displayed in full size which makes it unusable at all. see desktopn and iPhone screenshot attached.
Desktop: https://dl.dropboxusercontent.com/u/4814298/desktop.png
iPhone: https://dl.dropboxusercontent.com/u/4814298/iphone.jpgAny solution? Seems like this feature is a bit too buggy yet.
yes but i did not found a solution for both – footer curtain and slider :
here ist the solution for slider alone:.avia-section, .av-layout-grid-container, .main_color { z-index: 0 !important; } .avia-fullscreen-slider .avia-slideshow-inner { position: fixed; } .avia-fullscreen-slider .avia-slideshow[data-image_attachment=fixed] .avia-slideshow-inner, .avia-fullscreen-slider .avia-slideshow[data-image_attachment=fixed] > ul > li { transform: none !important; }the variation of code above was that the slideshow-inner has to be set on fixed.
but that is than the reason for disturbing the footer solution i gave. The fullscreen slider is 100vh so on footer position this is over the footer !see here on firefox the result for stand alone: http://webers-testseite.de/elegant/fullscreen-slider/
no one of the online simulators shows the result you mention it.
Only the real devices shows that – so it is very hard to find the solution.
Even Safari on my Mac with Developer tools does not show the real thing ( you can switch via Developer/User Agent to ipad/iphon )It looks like it is ignoring some height or width rules given f.e. in vw or vh units. Strange
Thanks Guenni but I´m not expecting a solution from you. And the footer thing is not related to the slider thing. Those are two different issues.
Whilst the footer is a custom requirement by me and I´m happy if someone can assis but I´m not expecting it, the slider thing is an already existing function/option of Enfold because the slider can be set to “fixed” and that works in all browsers except Firefox. Well at least it basically works but it shows an inaccurate behaviour on mobile devices as I already mentioned in my previous post.
So this is obviously buggy and I´m expecting the Kriesi team to find a fix for that.
yes you are right on that. But you have to be aware of that issue. If you only prove it via http://ipadpeek.com/ you might be mislead that everything is ok.
The real devices shows the bug – and it is very important to solve this – more and more of my customers only surf via ipad or iphone.
- You must be logged in to reply to this topic.