FreewayTalk

agallagher

29 Dec 2018, 3:14 pm

Target ShowHide Layer Action

Hi Is there a way to use Target Show/Hide Layer and Sequence timer action in a responsive site. I’ve almost got there using background images but as soon as I set the height to be flexible the images disappear. I want the images to respond smoothly like http://www.tipiwales.co.uk Hero Image but go through a sequence of images.

I’ve used these actions loads of times but not as responsive. e.g. http://www.maroonedhaircutters.co.uk

Just want to know if I’m trying to do the impossible, any alternative methods appreciated.

Cheers

Anthony

http://anthonygallagher.co.uk/cups/barrestaurantmen.html

Thanks Anthony

waltd

29 Dec 2018, 4:51 pm

I just answered this approximate question last week. Here’s the recipe:

A background image cannot influence the height or width of an object it is applied to, so you’ll have to use a different trick to make your image appear to flex like you want. One of the best tricks for this is to work out the percentage difference between the width and the height (the aspect ratio) and then apply that to the padding-bottom of the box, leaving the height at 0 or unspecified. Let’s say your image had a 4:3 ratio, like an old TV. To get that in a flexible image, you would use the following CSS:

.tv {
   width: 100%;
   height: 0;
   padding-bottom: 75%;
   background-image: url(test-pattern.jpg);
   background-size: cover;
   background-position: center center;
}

If you resize the screen, you’ll see that it flexes to show the appropriate height for any given width (depending on the surrounding elements and viewport).

http://scripty.walterdavisstudio.com/tv.html

Walter

On Dec 29, 2018, at 10:14 AM, agallagher <[email protected]> wrote:

Hi Is there a way to use Target Show/Hide Layer and Sequence timer action in a responsive site. I’ve almost got there using background images but as soon as I set the height to be flexible the images disappear. I want the images to respond smoothly like http://www.tipiwales.co.uk Hero Image but go through a sequence of images.

I’ve used these actions loads of times but not as responsive. e.g. http://www.maroonedhaircutters.co.uk

Just want to know if I’m trying to do the impossible, any alternative methods appreciated.

Cheers

Anthony

http://anthonygallagher.co.uk/cups/barrestaurantmen.html

Freeway user since 1997

http://www.walterdavisstudio.com