How to make this plugin responsive

[batata004]

Hi,

I use this really nice plugin in many websites as a huge background for the entire page. However when the user resizes the window size (width/height of the browser window) the background does not adjust itself to cover the entire screen, it keeps exacty the same size/aspect ratio of when the page loaded.

Making this plugin work in a responsive way would be really nice and I am pretty sure lots of people dont still use this plugin cause it's not reponsive. Anyway you could kindly provide a fix to this? Something like a native listening to the onresize event and recalculate stuff?

[jaysalvat]

Hello.
I don't understand, the backgrounds adapted when the screen is resized to me. :)

[batata004]

Hi my friend! Thanks for your help but it looks like sometimes the background adapts itselft and sometimes dont mainly when the page loads with a smaller size than the one you will resize later. Check this example please -> https://www.sitesamil.com.br

Open the link above on your Chrome (latest) with a screen size about the size of the print below:

Then after that make your window bigger, just like the print below:

You will see that a white bar will appear at the bottom of the screen!

IF YOU DO the opposite, I mean, if you open the site with a big screen and then resize it to the small one and come back to the big one, this bug wont happen!

[jaysalvat]

Ok, I will have to reproduce to investigate.

Why don't you use Vegas as a background ?

[batata004]

thanks my friend, I hope you can solve the problem! I tried to reproduce it in my latest chrome and FF and the bug happens.

Regarding your last post, I dont like using vegas in the background cause some weird things usually happen with the content inside the element that holds the background. I think that because of vegas consuming too much CPU if you have a complex content in the div element that holds vegas it will makes all the inside animations not smooth.

So separating vegas to an element and content to another element makes both animations (from vegas and the content) work flawlessly

[ccmEnlil]

I just ran into this issue working with wordpress. I apply vegas to a div to have an image slider on page. On desktop, if you refresh page at a narrow width the image will render proportionately smaller and will responsively size up as you widen the browser window. Do this the other way around with browser wide first, and the image will render large as expected, but when narrowing the browser the "height" of the image does not change. The height of the containing div gets set to the initial rendered height of the image. A little jQuery solved the problem for me, forcing the containing div to a height of 0px. Now the slider displays responsively as one would expect. Hope this helps :)

<div class="vegas" style="padding-bottom: 67%; height: 0px">.......

jQuery(document).ready(function($){ $('.vegas').css({height:'0px'}); });

[jaysalvat]

Thanks a lot.
I will try to make a fix on that...

[methilanka]

Dear jaysalvat , can you please fix this issue. it is still there

[jaysalvat]

Hello :)
Really sorry, I have no time to investigate for the moment.
If you find a fix, make a PR, I will merge it. After all, it's open source :)

[ccmEnlil]

I happen to have been implementing vegas with a concrete5 v8 installation this morning and can confirm my jquery solution above, as written below for c5 rather than Wordpress, still works great . . .

<div class="vegas-<?php echo $c->getCollectionID(); ?>"> . . .

$(document).ready(function(){ $('.vegas-<?php echo $c->getCollectionID(); ?>').css({height:'0px'}); });

@jaysalvat @methilanka The out of box functionality we get is certainly appropriate for the full page backgrounds. I use this jquery tweak ONLY when I'm using vegas to create an IN-PAGE image slider or single animated image load effect. This then forces the image(s) to remain proportionate to loaded size regardless of device orientation or desktop browser resizes.

Maybe not a code issue, but rather an "add it to the documentation" situation ?!

[batata004]

@jaysalvat it would be really nice to have this issue fixed! Maybe you could attach some event to viewport change dimensions and reload vegas... This issue really makes responsive webdesign very ugly!

[jaysalvat]

Hello,
Please create a jsfiddle reproducing your issue. So I can work on it quickly and fix it
Thanks.

[rsmith4321]

I've noticed this but what is the big deal. How many people are sitting there resizing the browser window to check out the responsiveness? I guess someone could flip their ios device when viewing the page but I doubt it happens often. The size is set at whatever the initial browser width is when loading the page, that seems perfectly acceptable and still responsive.

[batata004]

@rsmith4321 it's big deal cause this bug also happens when you resize the DIV containing the vegas. You dont need to only change the viewport, maybe you have a div inside your page and you decide to increase it's size (without changing viewport dimensions). The bug happens.

[ccmEnlil]

Load up on mobile device, then change device orientation. Boom. Bug!

[batata004]

Load up on mobile device, then change device orientation. Boom. Bug!

WOW!!!!

[jaysalvat]

So ? Nobody to create a jsfiddle reproducing this bug?
https://jsfiddle.net/

[batata004]

Open your own demo page on a smartphone, rotate the screen and bug happens.

[jaysalvat]

Sorry guys, no bug on my iPhone and my iPad on http://vegas.jaysalvat.com.

One known Vegas issue is when you apply Vegas to a div (not body) the div alway keeps its original height after. I would love some real cases to test some fixes on them.

I can hardly find some time to work on this fix, so please help...

[batata004]

Thas exactly my usecase! I use vegas on a DIV check at https://www.sitesamil.com.br

You can open this website and resize the viewport on your browser, you will see the background image does not "readapt" the new dimensions.

[jaysalvat]

Open your own demo page on a smartphone, rotate the screen and bug happens.

@batata004 In you previous message you are talking about the Vegas page right?

[batata004]

@jaysalvat Yes! :) I was talking about Vegas BUT right after I sent you the link I decided to make my "own" vegas plugin (using your own code) and adapting it to my needs and I ended up fixing the bug. I really needed to have this bug fixed cause my customer is waiting so I got the hands dirty and "fixed the bug" on my own envirorment and removed lots of things from vegas code that was not gonna be used on my case.

I was waiting too long for this problem and yesterday my boss complained about it taking so long, so I moved ahead and adapted your code. You can see there is a slideshow at the background of the page but the slideshow is being applied to a DIV (not body). My solution was very simple: using background COVER and overlaying 2 divs above itself to make the transition. Worked like a charm and even supports viewport change sizes in real time :)

[methilanka]

@rsmith4321 it's big deal cause this bug also happens when you resize the DIV containing the vegas. You dont need to only change the viewport, maybe you have a div inside your page and you decide to increase it's size (without changing viewport dimensions). The bug happens.

what about an ipad rotate

[jbakeraac]

I'm also having this issue on iPad Pro in Portrait. I'm applying it to < body >, and even on a fresh load, not rotate, it doesn't cover correctly. Any ideas on a quick fix?