addressalign-toparrow-leftarrow-leftarrow-right-10x10arrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcredit-cardcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobe--smallglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1languagelaunch-new-window--smalllight-bulblightning-boltlinklocation-pinlockm-swarmSearchmailmediummessagesminusmobilemoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstar-shapestartickettrashtriangle-downtriangle-uptwitteruserwarningyahooyoutube

RE: [webdesign-429] How to fit a slider to the viewport height

From: Gal B.
Sent on: Wednesday, August 5, 2015, 7:41 PM

Thanks to all who replied.  I was away today and just got back to see all the answers.

 

Aaron, your styles show the image at the right size, but the slider handles still fit the width of the column, not the image.

 

I've written some code to fit the overall slider with to that of the image and it works on window resize, but not on load, probably because the slider is being loaded asynchronously.  Binding to the image load doesn't help.

 

Any idea how I can trigger the slider resize on page load?

 

Better yet, is there a way to do this without code, given that when the slider width is that of the image, everything works correctly?

 

Thanks again,

Gal

 

 

From: [address removed] [mailto:[address removed]] On Behalf Of Aaron McPherson
Sent: Tuesday, 4 August[masked]:19 PM
To: [address removed]
Subject: RE: [webdesign-429] How to fit a slider to the viewport height

 

Hey Gal,

 

Something like this would do the trick:

 

.cbp-l-inline img, .cbp-l-project-related-wrap img {

1.  [ ]  display: block;

2.  [ ]  width: auto;

3.  [ ]  height: calc(100vh - 150px);

4.  [ ]  /* height: auto; */

5.  [ ]  border: 0;

}

 

1vh = 1% of viewport height

From: [address removed]
To: [address removed]
Subject: RE: [webdesign-429] How to fit a slider to the viewport height
Date: Tue, 4 Aug[masked]:56:38 -0400

Hi Peter,

 

I don't see how this will help.  The slider in the pop-up is rather complex and uses inline images, not backgrounds.

 

I was trying to figure out a way to restrict the height of the wrapper so that the JavaScript that sets the height on .cbp-slider will never exceed the height of the main content area, but haven't been able to.

 

Regards,

Gal

 

 

From: [address removed] [mailto:[address removed]] On Behalf Of Peter Dowse
Sent: Tuesday, 4 August[masked]:43 PM
To: [address removed]
Subject: Re: [webdesign-429] How to fit a slider to the viewport height

 


Regards,
Peter

Peter Dowse

DIRECTOR

Marketeam Pty Ltd

PO Box 7166 Brendale LPO Qld 4500

Phone (07)[masked]

Fax (07)[masked]

Mobile[masked]

 

The information contained in this message and any attachments is intended for the exclusive use of the intended recipient. It may be privileged and confidential. If you are not the intended recipient any disclosure, reproduction, distribution, forwarding, dissemination or use of the communication is strictly prohibited. Whilst any attachments may have been checked for viruses, you should rely on your own virus checking programmed and procedures. To facilitate our communications we will store your name and email address along with any other contact details you have provided on our database. Please advise us of any changes or if you wish your name to be removed.

 

On Tue, Aug 4, 2015 at 5:37 PM, Gal Baras <[address removed]> wrote:

Hi guys,

 

Here's a juicy one for you.  I'm building a site with a slider in a pop-up container.  For best effect, the slides should appear as large as possible, which means they need to adjust to the page height on landscape displays.  Any idea how this can be done?

 

The page is http://dev.get-business-online.com/taniaolsen/tania-olsen-designs/collection-example-title-1/#cbp=/taniaolsen/label/dress-p1

 

Thank you,

Gal

 

email-signature

 

 





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Gal Baras from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]

 





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Peter Dowse from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Gal Baras from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Aaron McPherson from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]

Brisbane, Australia

Founded Nov 30, 2006

Organizers:

Ben Maden, Victoria Laurenzi and 1 more…
Contact

People in this
group are also in: