Inspiring

Answered

Having trouble positioning div containing animation.

Forum|Forum|7 years ago
November 1, 2018
2 replies
1946 views

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

This topic has been closed for replies.

Correct answer osgood_

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>

Nancy OShea

Community Expert

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

osgood_

Brainiac

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.

Nancy OShea

Community Expert

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

osgood_

Brainiac

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.

kineticcreative123Author

Inspiring

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.

osgood_Correct answer