Having trouble positioning div containing animation.

Report · Nov 01, 2018

Hey everyone,

I am trying to add a Layerslider animation to a landing page and can't get it positioned to the right of the page correctly OR drop below the form button/bar on mobile. I'm also seeing that there is an issue with the background container.

Thanks for any help with this. Below is the link.

White Paper

osgood_

This is a duplicate page with a form in place of the animation which works.

Webinar - Instantly price benchmark your capital purchases to identify savings

Report · Nov 01, 2018

Unfortunatley I dont know enough about the animation js you have chosen to use.

It looks as though the js is making the #slider div have a position of absolute. If you give it a background color of yellow you will see it stretches right across the screen instead of your 500px declaration.....so it jumps to the left which is why your animation overlaps the text to the left of it.

I guess you need to re-read the instructions, if it came with any.

You could try 'hacking' the position by pusing the animation more to the right by using a left margin:

#slider {

margin-left: 200px;

width: 700px!important;

}

and setting the class style on the images to

left:0;

But that is just hit and hope.

EDITED

You just need to move the image over to the left a bit more for desktop.

left:75%;

But its still a sticking plaster, not a great solution because it cracks up as soon as the browser window is narrowed.

Report · Nov 02, 2018

Thank you. Your right this is controlled by js. It's a LayerSlider plugin from envato. I found I was able to create a ticket so fingers crossed.

Report · Nov 02, 2018

kineticcreative123 wrote
Thank you. Your right this is controlled by js. It's a LayerSlider plugin from envato. I found I was able to create a ticket so fingers crossed.

Try the below solution if you cant find a work around. Its completley re-written and works in mobile too. (I dont know if its my connection today or your png images but they are downloading slowly. It might be my connection as Im experiencing some other slow issues.)

<!DOCTYPE html>

<head>

<title>White Papers</title>

$(document).ready(function () {

// SHOW/HIDE DOWNLOAD FORM

$('.download_form, .page_overlay').hide();

$('.download').css('cursor', 'pointer').click(function () {

$('.page_overlay').fadeToggle();

$('.download_form').slideToggle();

var status = $('.status').text();

if(status === "Download the white paper") {

$('.status').html('<i class="fa fa-times" aria-hidden="true"></i>');

}

else {

$('.status').html('Download the white paper');

}

});

</script>

// ANIMATE THE WHITE PAPERS

$(document).ready(function () {

$('.slide').each(function(index) {

var that = this;

setTimeout(function() {

$(that).addClass("animate_papers");

}, 500 * index);

});

</script>

<style>

body {

background-color: #0091b3;

font-family: 'Roboto Slab', serif;

margin: 0;

}

* {

box-sizing: border-box;

}

.page_overlay {

position: fixed;

z-index: 100;

top: 0;

height: 100vh;

width: 100vw;

background-color: rgba(255, 255, 255, 0.7);

}

.white_paper_wrapper {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

width: 80%;

margin: 100px auto;

}

.white_paper_text {

position: relative;

width: 57%;

padding: 0 0 100px 0;

}

@media screen and (max-width: 1200px) {

.white_paper_text {

width: 48%;

}

@media screen and (max-width: 1200px) {

.white_paper_text {

width: 100%;

order: 2;

}

.white_paper_text h1 {

font-weight: 300;

color: #fff;

}

.white_paper_text p {

color: #fff;

padding-right: 30px;

}

.slider {

position: relative;

width: 40%;

height: 500px;

overflow: hidden;

padding: 20px 50px 20px 20px;

min-height: 600px;

}

@media screen and (max-width: 1200px) {

.slider {

width: 50%;

}

@media screen and (max-width: 1200px) {

.slider {

width: 100%;

order: 1;

}

.slide {

position: absolute;

width: 100%;

transform: translateX(100%) translateY(100%);

;

}

.slide img {

max-width: 400px;

height: auto;

box-shadow: 5px 5px 18px #b3b3b3;

}

.animate_papers {

transform: translateX(0) translateY(10%) rotate(3deg);

transition: 1s ease all;

animation: slideme 1s ease-in;

}

.slide_1 {

margin-left: 45px!important;

margin-top: 45px;

}

.slide_1 img {

box-shadow: 5px 5px 18px #005366!important;

}

.slide_2 {

margin-left: 30px!important;

margin-top: 30px;

}

.slide_3 {

margin-left: 15px!important;

margin-top: 15px;

}

@keyframes slideme {

0% {

opacity: .5;

}

100% {

opacity: 1;

}

/* DOWNLOAD FORM */

.download {

position: absolute;

z-index: 110;

width: 100%;

bottom: 0;

padding: 20px;

background-color: #003b49;

}

.download h5 {

font-size: 22px;

font-weight: 400;

line-height: 30px;

text-align: center;

padding: 15px;

margin: 0;

color: #fff;

}

.download p {

font-size: 22px;

line-height: 30px;

text-align: center;

padding: 0;

margin: 0;

}

.download_form form {

padding: 25px 25px 0 25px;

}

.download_form input {

font-family: 'Roboto Slab', serif;

color: #fff;

font-size: 16px;

width: 100%;

padding: 15px;

margin: 0 0 15px 0;

background-color: #0091b3;

border: none;

}

.download_form .submit {

background-color: #ffc627;

color: #000;

}

.yellow-line {

border: 3px solid #ffc627;

width: 60px;

margin: 15px 0;

}

</style>

</head>

<body>

<h1>Instantly price benchmark your capital purchases to identify savings.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet sem ut magna

finibus pretium nec et erat. Morbi dignissim ligula nec pellentesque eleifend. Etiam sit amet

efficitur ex, vel ullamcorper neque. Nam quis maximus mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet sem ut magna

finibus pretium nec et erat. Morbi dignissim ligula nec pellentesque eleifend. Etiam sit amet

efficitur ex, vel ullamcorper neque. Nam quis maximus mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet sem ut magna

finibus pretium nec et erat. Morbi dignissim ligula nec pellentesque eleifend. Etiam sit amet

efficitur ex, vel ullamcorper neque. Nam quis maximus mauris.

</p>

<p class="status">Download the white paper</p>

<h5>Contact Information</h5>

<form>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Report · Nov 02, 2018

You are great!!! I can work with this and wait for their response for future uses of their plugin. The reason why the images weren't loading is there was a space before the extension:)

Your code is clean less all the gobblygook. One thing I need to look into is how to get the images to slide into view without them getting cut off where they enter from the right. The last version was full width. All in all this works and you ROCK again.

I changed the stacking order so the animation jumps to the bottom on mobile. YOU TAUGHT ME THAT!

Cheers!

Report · Nov 02, 2018

kineticcreative123 wrote
One thing I need to look into is how to get the images to slide into view without them getting cut off where they enter from the right.

You could just change the widths of the 2 columns slightly (see in bold below), that will probably help for screens of more than 1200px wide at which point the structure goes to one column as the more you narrow the screen the more the images start to get cut off.

.white_paper_text {

position: relative;

width: 52%;

padding: 0 0 100px 0;

}

.slider {

position: relative;

width: 45%;

height: 500px;

overflow: hidden;

padding: 20px 50px 20px 20px;

min-height: 600px;

}

You could make the width of the images smaller at certain breakpoints by adding the below to the css:

.slide img {

width: 330px;

}

@media screen and (max-width: 1300px) {

.slide img {

width: 280px;

}

If you use css to control the width of the images remove the inline width of 330.

I think its a case of trial and error to get the right balance.

Changing the stacking order of the animation for mobile is OK BUT you'll never see the 'animation' as it activates on page load - that why I thought its best to go first.

Report · Nov 09, 2018

Thanks again. Well I heard back from support and it's a js function that needs to be changed is the code below. Since I bought the plugin I am hoping to get use out of it and tried to fix the original again. It has some really cool out of the box examples you can tweak (if I can freaking figure out how to manage the js correctly). I'm trying what they are saying but must be doing something wrong. I did get the animation to drop below on mobile. I understand what you are saying though about not seeing it animate. If I can't get this working I have yours to fall back on.

My revised so far:

White Paper

This is their response on my ticket and the code they are saying to place the functions in.

If I understood you correctly, I believe the best approach to this would be to set the slider to fullwidth layout (disable fit to screen width option) and insert it to the parent element where you want it. This way it will always take up its parent element's width, so you can contain it.

Please open the documentation from the plugin's package and navigate to the /documentation.html#slider-options part. You will find the layout settings you need there and also where to change/add them.

$(document).ready(function() {

$('#slider').layerSlider({

sliderVersion: '6.2.2',

type: 'fullsize',

maxRatio: 1,

skin: 'v6',

sliderFadeInDuration: 450,

showCircleTimer: false,

skinsPath: '../../layerslider/skins/',

height: 900

});

</script>

The documentation is here and it tells you different js functions that can be used.

LayerSlider documentation

Report · Nov 01, 2018

You could ttry wrapping the animation with a parent container. Set your parent container to position: relative.

#slider_wrapper {

position: relative;

}

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 01, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
You could ttry wrapping the animation with a parent container. Set your parent container to position: relative.
#slider_wrapper {
position: relative;
}

I tried that approach but it didnt work. I think its one of those situations which is........... a little bit of this and a little bit of that........sprinkled all over, which generally ends up being quite confusing.

The slider div positioning appears to be being controled by the slider js file so whatever you do it is mainly overwritten. I can't see this working at any level on mobile if you can't somehow control the positioning of the div. I'm assuming the 'plugin' comes with a set of options.

Report · Nov 01, 2018

osgood_ wrote
The slider div positioning appears to be being controlled by the slider js file so whatever you do it is mainly overwritten. I can't see this working at any level on mobile...

Could they make this any less convenient? I shudder to say this but it might work in an iframe.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 01, 2018

Is the additional } in your CSS intentional, or could it be breaking your layout?

Hope this helps!
Make sure to press "✔ Correct Answer" on this post if this answers your question. Happy Creating!
Anissa • @anissat

Report · Nov 02, 2018

That is actually css from the example (second link) I cloned it from. The extra } doesn't affect anything.

Having trouble positioning div containing animation.

1 Correct answer