Highlighted

Having trouble positioning div containing animation.

Contributor ,
Nov 01, 2018

Copy link to clipboard

Copied

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

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>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>White Papers</title>

<!-- FONT AWESOME LIBRARY -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- JQUERY LIBRARY -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(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>

<script>

// ANIMATE THE WHITE PAPERS

$(document).ready(function () {

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

var that = this;

setTimeout(function() {

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

}, 500 * index);

});

});

</script>

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

<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>

<div class="page_overlay"></div>

<!--end page overlay-->

<div class="white_paper_wrapper">

<div class="white_paper_text">

<img style=" margin-top: 15px;" class="mobilelogo" src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" height="45" width="200">

<div class="yellow-line"></div>

<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>

<div class="download">

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

<div class="download_form">

<h5>Contact Information</h5>

<form>

<p>

<input type="text" class="input name" name="user_first name" placeholder="First Name" >

</p>

<p>

<input type="text" class="input name" name="user_last name" placeholder="Last Name">

</p>

<p>

<input type="text" class="input name" name="user_work email" placeholder="Work Email">

</p>

<p>

<input type="text" class="input name" name="user_job title" placeholder="Job Title">

</p>

<p>

<input type="text" class="input name" name="user_company" placeholder="Company">

</p>

<p>

<input type="submit" class="submit"  value="Download the white paper">

</p>

</form>

</div>

<!--end download form-->

</div>

<!--end download-->

</div>

<!--end white_paper_text-->

<div class="slider">

<div class="slide slide_1">

<img width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_1-->

<div class="slide slide_2">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_2-->

<div class="slide slide_3">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_3-->

<div class="slide slide_4">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_4-->

</div>

<!--end slider-->

</div>

<!--end white_paper_wrapper-->

</body>

</html>

Views

871

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Having trouble positioning div containing animation.

Contributor ,
Nov 01, 2018

Copy link to clipboard

Copied

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

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>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>White Papers</title>

<!-- FONT AWESOME LIBRARY -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- JQUERY LIBRARY -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(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>

<script>

// ANIMATE THE WHITE PAPERS

$(document).ready(function () {

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

var that = this;

setTimeout(function() {

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

}, 500 * index);

});

});

</script>

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

<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>

<div class="page_overlay"></div>

<!--end page overlay-->

<div class="white_paper_wrapper">

<div class="white_paper_text">

<img style=" margin-top: 15px;" class="mobilelogo" src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" height="45" width="200">

<div class="yellow-line"></div>

<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>

<div class="download">

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

<div class="download_form">

<h5>Contact Information</h5>

<form>

<p>

<input type="text" class="input name" name="user_first name" placeholder="First Name" >

</p>

<p>

<input type="text" class="input name" name="user_last name" placeholder="Last Name">

</p>

<p>

<input type="text" class="input name" name="user_work email" placeholder="Work Email">

</p>

<p>

<input type="text" class="input name" name="user_job title" placeholder="Job Title">

</p>

<p>

<input type="text" class="input name" name="user_company" placeholder="Company">

</p>

<p>

<input type="submit" class="submit"  value="Download the white paper">

</p>

</form>

</div>

<!--end download form-->

</div>

<!--end download-->

</div>

<!--end white_paper_text-->

<div class="slider">

<div class="slide slide_1">

<img width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_1-->

<div class="slide slide_2">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_2-->

<div class="slide slide_3">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_3-->

<div class="slide slide_4">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_4-->

</div>

<!--end slider-->

</div>

<!--end white_paper_wrapper-->

</body>

</html>

Views

872

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 01, 2018 0
LEGEND ,
Nov 01, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 1
Contributor ,
Nov 02, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2018 0
LEGEND ,
Nov 02, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>White Papers</title>

<!-- FONT AWESOME LIBRARY -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- JQUERY LIBRARY -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(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>

<script>

// ANIMATE THE WHITE PAPERS

$(document).ready(function () {

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

var that = this;

setTimeout(function() {

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

}, 500 * index);

});

});

</script>

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

<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>

<div class="page_overlay"></div>

<!--end page overlay-->

<div class="white_paper_wrapper">

<div class="white_paper_text">

<img style=" margin-top: 15px;" class="mobilelogo" src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" height="45" width="200">

<div class="yellow-line"></div>

<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>

<div class="download">

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

<div class="download_form">

<h5>Contact Information</h5>

<form>

<p>

<input type="text" class="input name" name="user_first name" placeholder="First Name" >

</p>

<p>

<input type="text" class="input name" name="user_last name" placeholder="Last Name">

</p>

<p>

<input type="text" class="input name" name="user_work email" placeholder="Work Email">

</p>

<p>

<input type="text" class="input name" name="user_job title" placeholder="Job Title">

</p>

<p>

<input type="text" class="input name" name="user_company" placeholder="Company">

</p>

<p>

<input type="submit" class="submit"  value="Download the white paper">

</p>

</form>

</div>

<!--end download form-->

</div>

<!--end download-->

</div>

<!--end white_paper_text-->

<div class="slider">

<div class="slide slide_1">

<img width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_1-->

<div class="slide slide_2">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_2-->

<div class="slide slide_3">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_3-->

<div class="slide slide_4">

<img  width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

</div>

<!--end slide img_4-->

</div>

<!--end slider-->

</div>

<!--end white_paper_wrapper-->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2018 1
Contributor ,
Nov 02, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2018 0
LEGEND ,
Nov 02, 2018

Copy link to clipboard

Copied

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.

<img width="330" src="http://offers.premierinc.com/rs/381-NBB-525/images/18286_PR_OptimalCareDelivery_V7_Page_01.png">

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2018 0
Contributor ,
Nov 09, 2018

Copy link to clipboard

Copied

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.


<script type="text/javascript">

$(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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2018 0
Adobe Community Professional ,
Nov 01, 2018

Copy link to clipboard

Copied

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

#slider_wrapper {

     position: relative;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 1
LEGEND ,
Nov 01, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 1
Adobe Community Professional ,
Nov 01, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 0
Adobe Community Professional ,
Nov 01, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 1
Contributor ,
Nov 02, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2018 0