Lay Theme Forum

@melo_lenosier said in fullscreen slider on mobile weird footer margin space!:

https://www.giorgiamocilnik.com/about/

Sorry, not the About page, but this one:
https://www.giorgiamocilnik.com/writings/

@arminunruh

Sorry for late reply.
Here the Cover effect:
https://www.giorgiamocilnik.com/instantanee-instabili/

and here the fullscreen slider plugin:
https://www.giorgiamocilnik.com/about/

Figure it out this would be really helfull!
Thanks,
I send you pass and username via email!

@arminunruh

Same for me.

DEKSTOP:
It worked with fading effects at the beginning, but now it stopped. When fade effect is on, now there is no content in the slides.

MOBILE:
Fullscreenslider works on both slide and fade effect, but each slide is never 100vh! There is a weird margin at the bottom connected to some Footer CSS.

Here the website I am working on:
https://www.davidebernardis.com/

It would be awesome if you could solve this asap!
Thanks a lot Armin!
Melo

Hello again,

I just found out this bug on the mobile.
When fullscreen slider is activated, in the mobile version you have a weird white margin at the bottom of every slide. I checked with the inspector and it seems attributed some min-height: calc (100vh - 80px) to a not activated footer. Indeed I dont use any footer for this website.

Somebody has the same issue?

Thanks in advance,
Melo

Hello everybody,

I would like to know if there is a way of applying some simple CSS transition effect FadeIn and Out for some text or div every time you slide up or down a row when the Fullscreen slider is activated.

I was trying to adapt the JS proposed in this thread Change nav and logo text to white/black when scrolling, but unfortunately I didn't have any success. The code doesn't work when the Fullscreen slider is activated, but it does work when it is not.

Anybody that could help on this?
Thanks

Melo

If anybody needs it, here is the script I used.
It was tricky because there was an annoying phenomena between the hover and the scroll functions. Basically while scrolling the page, the browser (Chrome especially) doesn't send any other mouse coordinates, therefore the hovered video was constantly there till the scroll was stopped.

Here is a script that avoid this problem:

<script>
let hoveredElement;
let mouseX = 0, mouseY = 0;

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('mousemove', event => {
    mouseX = event.clientX;
    mouseY = event.clientY;

    hover(event.target);
  });

  document.addEventListener('scroll', () => {
    const hoverTarget = document.elementFromPoint(mouseX, mouseY);
    if (hoverTarget) {
      hover(hoverTarget);
    }
  });
});

function hover(targetElement) {
  // If the target and stored element are the same, return early
  // because setting it again is unnecessary.
  if (hoveredElement === targetElement) {
    return;
  }
// On first run, `hoveredElement` is undefined.
  if (hoveredElement) {
    if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.remove('hoverscrolled');
     console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));

}

  }

  hoveredElement = targetElement;
if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.add('hoverscrolled');
      console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));
}

}
</script>

HTML:

<div data-videoid="one_data"  >
</div>

<video id="one_data" class="vid_background" autoplay muted loop>
  <source src="https://somevideo.mp4" type="video/mp4">  Your browser does not support HTML5 video.
</video>

CSS:

video.vid_background{
     opacity: 0;
     left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }
 
video.vid_background.hoverscrolled  {
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%; 
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }

I am also very interested in this. Video-hover would be great.
Thank you!

I see... Could I please know anyway where this compiler file is?
Thank you

Hello everybody,

I already tried to search something about it in the forum, but with no luck.
I was wondering if it would be possible to access to the Custom CSS & HTML file via ftp and modify it freely on whatever editor code app. I think it would be much easier pressing cmd+S every time, as well as finding the right line, etc.
I already tried to find the file in the themes>lay folder in the ftp, but with no result.

Did anybody tried it? Is it possible?

Thanks in advance,
Melo

Hello there,
I report here a pretty big problem.
After creating and editing several pages and project I updated and saved the Gridder Defaults and now the Phone Layout it is not showed correctly: the contents go over the grid (which seem visualized as the desktop one). It's impossible to operate.

Here a screenshot:

Hope it's fixable!
Melo

Quote!
Same to me.

Hello Armin,
hope you are well :)

I am doing this website for a cinema web magazine (still in progress) and I wanted to introduce the search function you did. It works, but not properly. When I write something in the search box it gives me results that don't contain that specific word inside. For example when you write "Carlo" it shows you 2 results: one is the correct one about Carlo Sironi and then there is another one in which does not appear the word "Carlo" at all, but it displays it anyway...

Am I missing something?
Here you have the website.

Thanks,
Melo

Danke schön!

Nothing of that kind. Everything is set the same: 0 margin or padding.
It's a Carousel problem.
But thanks for checking! :)

Ok, please let me know!

Meanwhile I wanted to know if at the moment there are any alternative solutions.
For example, if I use the Carousel while enabling the Fullscreen Slider it work perfectly, it doesn't overflow vertically (here). The only problem is that, in order to make the Fullscreen slider working, I have to insert 2 Rows and in this way there are problems when swiping from left to right because one Row has the Carousel with all the images inside and the other Row has just one image inside another Carousel.
I wonder if there is a way to make the Fullscreen slider working with just one Row. That would solve the problem. Or maybe having 2 Rows but one should be set in display:none (but probably is not that easy).

Hope you understand what I meant.
Thanks again!

melo

It works, ok, but it's not properly fixed as when you active the Fullscreen slider with the direction set to Horizontal. Indeed now you can scroll up and down a little bit, but that should not happen. The hoverflow should be completely hidden. You know what I mean?

Here you can see it in a video.

Thanks

Hello everybody,

I did this single row page where inside there is only the fantastic LT Carousel in 100vh height. Everything works perfectly on Desktop, no extra top or bottom padding. No overflow. Cool! But when you switch to Mobile there this annoying scroll due to I dont know what.
You can see it here, please use the mobile to check it because from the desktop browser inspector seems fine.
I have already set Use Browser Height for Row Height and the Top and Bottom margin to zero.

By doing various tests I tried to enable the Fullscreen Slider and set its direction to Horizontal. For making it working I had to add another Row, but in this way the Carousel height was perfectly stuck, zero overflow! But this system was not working for me because I just need one Row for one Carousel.

So, is there a way to have the Carousel perfectly stuck at 100vh as it works in the Fullscreen Slider?

Hope you understand my point :)

Thank guys,
melo

Hey guys,
I almost finished this new website and I was setting the mobile-menu, trying to have a not fixed menu—hide when scrolling interaction. It works everywhere without problems except from all the projects where Covers are enabled. Is that normal? You can see here what I mean: it creates a padding-top in the div id="cover-region" of the same pixel amount of the navbar-height.

Projects are set with 0% Top and Bottom Frame.
I am not really sure what other things should I check.

Thanks in advance :)
Melo

Ok! I've found the problem.
It was in a JS for grabbing an element with mouseup and mousedown events. So I've inserted that JS directly on the related page as mentioned here.

Thanks in any case :)

In case here you have it.

Thanks Marius!