Develop Reference

GSAP slider not working in IE11 and safari

I integrated this slider into my website after I find that it is not working on IE11 and safari :
Here is a link to the slider's code :
https://codepen.io/gvrban/pen/qjbpaa
IT works fine in Chrome and in IE11 I have tried changing the style but the problem persist. I think it is related to the flexbox.
HTML part (only one slide ):
<div class="slider">
<div class="slider-wrapper flex">
<div class="slide flex">
<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
<div class="slide-content">
<div class="slide-date">30.10.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
<div class="arrows">
</div>
</div>
CSS part:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}
.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw; margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}
div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}
.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
JS part:
( function($) {
$(document).ready(function() {
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('next') ) {
( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
} else if ( $(this).hasClass('prev') ) {
( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
}
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
//CONTENT ANIMATIONS
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
Many thanks.

Good morning,
you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
The solution :
remove flex class from your slide html code and change the display to block to get the same calculation cross browsers and you should add another div inside it to keep your flex style.
change your HTML slide code to :
<div class="slide">
<div class="slide-container">
<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
<div class="overlay"></div>
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="slide-date">30.07.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
</div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
</div>
and add these css styles :
.slide {
display:block;
}
.slide-container{
display: flex;
}
.slide-content-inner{
width:35vw;
padding: 5%;
}
And change these (remove the padding and change width) :
.slide-content {
width: 50vw; //changed to 50vw
color: #fff;
/*padding:3vw 18vw 3vw 9vw;*/ //removed
}
You get the solution with extra styling :)

How to change the content of a div by another div according to a click

I would like to know how to change the content of a div when I click on the menu
Currently it looks like this :
There is my css and html code :
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
#div_profil {
display: block;
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script type="text/javascript" src="javascript/script.js"></script>
</body>
</html>
I would like that when I click on one of the tabs of the menu, the div displayed be replaced by another div.
I tried to use some javascript code but this doesn't work.
What should I use to achieve what I want?
Thanks for your reply, have a good day.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css"/>
<style>
body{
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global{
}
/* CADRE 1 */
#cadre1{
float: left;
width: 250px;
}
#cadre1 span{
color : #33A7FF;
}
/* CADRE 2 */
#cadre2{
color : #2370AB;
}
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:block;
position:relative;
background-color: #2370AB;
}
#menu li ul li{
background-color: white;
text-align:center;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:15em;
}
#menu a{
display:block;
padding:8px 32px;
color:#fff;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
/* CADRE 3 */
#div_profil{
display: block;
height: 625px;
background-color : white;
overflow: auto;
}
#div_experience{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_projet{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_contact{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
/* FOOTER */
#footer{
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
</style>
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar"/>
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" onclick="div2('div_experience')">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil" >
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script>
function div2(name)
{
document.getElementById("div_profil").style.display="none";
document.getElementById("div_experience").style.display="none";
document.getElementById("div_projet").style.display="none";
document.getElementById("div_contact").style.display="none";
document.getElementById(name).style.display="block";
}
</script>
</body>
</html>

Here a quick answer I made up... jsfiddle
HTML
<a id='1' onclick='myFunction("1");'>Click me 1</a><br/>
<a id='2' onclick='myFunction("2");'>Click me 2</a><br/>
<a id='3' onclick='myFunction("3");'>Click me 3</a><br/>
<a id='4' onclick='myFunction("4");'>Click me 4</a><br/>
<div id='addText'>
</div>
Javascript
<script>
function myFunction(id){
x = document.getElementById("addText");
if(id == 1){
x.innerHTML = 'Hello'
x.style.color = "red";
} else if(id == 2){
x.innerHTML = 'Hi'
x.style.color = "red";
} else if(id ==3){
x.innerHTML = 'Option 3'
x.style.color = "red";
}else{
x.innerHTML = 'Goodbye'
x.style.color = "red";
}
}
</script>
I left all the styling for you, if you dont plan on having many options this solution will work fine.

You almost there, now you need to add some flag related to any container div with any link that should point to corresponding div, so eg:
// if you have you markup html with multiple links try this
<ul>
<li>My Profile</li>
<li>My Experience</li>
</ul>
<div>
<div class="content active" id="div_profile">Show you profile here</div>
<div class="content" id="div_experience">Show your experience here</div>
</div>
So then you need to add some JS code to do the trick, this code will do the trick
var links = document.getElementById('menu').getElementsByTagName('a');
var lastShownDiv = getActiveDiv();
for(var i = 0; i < links.length; i++) {
var currentLink = links[i];
currentLink.addEventListener('click', function(event){
var link = this;
var targetDiv = link.getAttribute('data-url');
if (lastShownDiv) {
removeClassName(lastShownDiv, 'active');
}
lastShownDiv = document.getElementById(targetDiv);
addClassName(lastShownDiv, 'active');
}, false);
}
function addClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
classlists.push(classname);
element.className = classlists.join(' ');
}
function removeClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
var indexOfClassName = classlists.indexOf(classname);
if (indexOfClassName > -1) {
classlists.splice(indexOfClassName, 1);
}
element.className = classlists.join(' ');
}
function getActiveDiv() {
var actives = document.getElementsByClassName('active');
for(var i = 0; i < actives.length; i++) {
return actives[i];
}
}
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
.content {
display: none;
}
.content.active {
display: block;
}
#div_profil {
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" data-url="div_experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5 content active" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5 content" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5 content" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5 content" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12 content" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
</body>
</html>
The code above, is your code with some updates, I hope this help you to solve your problem.

You could avoid to use Javascript and try a pure css approach using the :target pseudoclass
As you can see, all the content is already inside the document and the main functionality is preserved even if you don't rely on Javascript and /or CSS (without them the page would still work, thanks to the navigation links with a fragment identifier as their href attributes.
Codepen demo
Markup
<nav role="complementary">
<ul role="tablist">
<li role="tab" aria-controls="cnt1" id="tab1" aria-selected="true">
Content 1</li>
<li role="tab" aria-controls="cnt2" id="tab2" aria-selected="false">
Content 2</li>
<li role="tab" aria-controls="cnt3" id="tab3" aria-selected="false">
Content 3</li>
<li role="tab" aria-controls="cnt4" id="tab4" aria-selected="false">
Content 4</li>
</ul>
</nav>
<main>
<section id="cnt1" aria-hidden="false" role="tabpanel" aria-labelledby="tab1">
<h2>Content 1</h2>
<p>This is a lorem ipsum</p>
</section>
<section id="cnt2" aria-hidden="true" role="tabpanel" aria-labelledby="tab2">
<h2>Content 2</h2>
<p>I am the content of link #2</p>
</section>
<section id="cnt3" aria-hidden="true" role="tabpanel" aria-labelledby="tab3">
<h2>Content 3</h2>
<p>Here's another content</p>
</section>
<section id="cnt4" aria-hidden="true" role="tabpanel" aria-labelledby="tab4">
<h2>Content 4</h2>
<p>And that's all folks!</p>
</section>
</main>
CSS (relevant)
body { display: flex; }
main {
flex: 1;
align-self: stretch;
position: relative; }
ul { list-style: none; }
nav { align-self: flex-start; }
[role="tabpanel"] {
position: absolute;
transition: .25s opacity;
background: #fff;
padding: 0 20px;
left: 0; right: 0; top: 0; bottom: 0;
opacity: 0; }
[role="tabpanel"]:first-of-type { opacity: .99; }
[role="tabpanel"]:target { opacity: 1; }
With a simple CSS transition you can switch the content appearance.
Note that I've inserted some role and aria-* attributes: in fact this kind of navigation is really close to a tab/tabpanels widget.
Even if javascript is not used here, it could help a lot anyway to increase the accessibility of the content: e.g. you could attach a transitionend event, detect the visible section (just look at its opacity value) and change some aria-* attributes so to make the life easier for people who use assistive technology.
Javascript
(only for accessibility purpose)
var _gcs = window.getComputedStyle;
var _sections = document.querySelectorAll('[role="tabpanel"]');
var _tabs = document.querySelectorAll('[role="tab"]');
var _setARIAAttributes = () => {
var currentHash;
/* set aria-hidden on panels */
[..._sections].forEach( ( s ) => {
var hidden = +( _gcs( s ).getPropertyValue( 'opacity' ) ) < 1;
s.setAttribute( 'aria-hidden', hidden);
if (!hidden) currentHash = s.id;
});
/* set aria-controls on tabs */
[..._tabs].forEach( ( t ) => {
var selected = t.getAttribute( 'aria-controls' ) === currentHash;
t.setAttribute( 'aria-selected', selected );
});
}
if (!!location.hash) { _setARIAAttributes() }
window.addEventListener('transitionend', () => { _setARIAAttributes(); });

Hover on divs changes background smoothly

I made a quick hub for two websites I created and I wanted to have two divs centered side by side, so that when you put your mouse over each div, it changes the body background image. I have made it so that when you hover over it, it changes the background but, its not smooth.
I really want to learn java script and I feel like this a good experience for me, thanks for any help
I'm using jQuery and Bootstrap.
Is there a way to just use css? if there isn't a way then its fine.
HTML:
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/*
body {
background-image: url(../images/kabobi.jpg);
}
*/
/*
body .fre-moveleft:hover {
background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
JS:
$("#med").hover(function() {
$('body').css("background", "url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
});
$("#fre").hover(function() {
$('body').css("background", "url(https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
});
JSFiddle

Here's a way you can fade between the two by toggling a class and setting a data attribute in jQuery, the rest controlled in CSS.
var $body = $('body');
function setBg(str) {
var bg = $body.attr('data-bg');
$body.addClass('out');
var t = setTimeout(function() {
$body.attr('data-bg', str).removeClass('out');
},250);
}
function hideBg() {
$body.addClass('out');
}
$("#med img").hover(function() {
setBg('med');
},function() {
hideBg();
});
$("#fre img").hover(function() {
setBg('fre');
},function() {
hideBg();
});
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/* new stuff */
body::before,
body::after {
transition: opacity .25s;
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.out::after,
.out::before {
opacity: 0;
}
[data-bg="med"]::before {
background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}
[data-bg="fre"]::after {
background-image: url("https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>

Sure, you can add a transition to the body like this:
body {
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
https://jsfiddle.net/zdwksre7/
This css will transition between the background in the body
Also, you can start experimenting adding classes with javascript with timeouts, so you can add more custom effects. Like fade, opacity, animate, etc. (Like, on hover, add the class 'fade' to the body (this class can have opacity: 0, and add to the body instead of a background-image, a opacity transition, wait 250ms, and then remove the class fade and change the background. This will make a smooth opacity transition between backgrounds)
You can see an example here
https://jsfiddle.net/866wwr0f/

Uneven Responsive Image/Text Grid with Overlay

I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.

Image disappears when given position:absolute

I have a list of images in a div that is relatively positioned. In order to stack the images on top of each other I'm trying to absolutely position them.
However once I apply position: absolute to the image, it disappears. I'm using jcarouselite for the carousel so I'm not sure if something in the jcarousel script could be causing this.
#sliderContainer {
position: relative;
}
#sliderBtnPrev {
position: absolute;
top: 250px;
z-index: 9999;
}
#sliderBtnPrev img {
margin: 0px 30px;
cursor: pointer;
}
#sliderBtnNext {
position: absolute;
top: 250px;
right: 50px;
z-index: 9999;
}
#sliderBtnNext img {
cursor: pointer;
}
.slideImg {
width: 100%;
height: auto;
vertical-align: middle;
position: absolute;
}
.slideTxt {
float: left;
margin: -278px 0px 0px 150px;
background: rgba(20, 0, 17, .5);
width: 380px;
border: 1px solid #000000;
z-index: 100;
color: #ffffff;
font-size: 26px;
}
<div id="sliderContainer">
<div id="sliderBtnPrev">
<img src='http://www.placehold.it/200' alt="Previous">
</div>
<!-- end of sliderBtnPrev -->
<div id="sliderBtnNext">
<img src='http://www.placehold.it/200' alt="Next">
</div>
<ul>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">For every service rendered, for every man hour utilized, we make it count for you through quality training delivery service.
</p>
</li>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">Lorem ipsum id aptent suscipit curae donec nunc dolor,consectetur congue dolor viverra euismod.
</p>
</li>
<li>
<img src="http://www.placehold.it/200" alt="Slide" class="slideImg">
<p class="slideTxt">Lorem ipsum id aptent suscipit curae donec nunc dolor,consectetur congue dolor viverra euismod.
</p>
</li>
</ul>
</div>
<!-- end of sliderContainer -->
Jcarouselite code
// JavaScript Document
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});
return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";
var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());
o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});
ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});
var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));
c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});
if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});
if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;
else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
what i have in my functions.js
// JavaScript Document
$(window).load(function(){
//Activate the Slider
$("#sliderContainer").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible:1,
circular:true,
scroll:1
});
});

You've defined your first image as both position: relative and position: absolute. Could that be causing the error?
Your code:
#sliderContainer {
position: relative;
}
#sliderBtnPrev {
position: absolute;
<div id="sliderContainer">
<div id="sliderBtnPrev">
<img src='http://www.placehold.it/200' alt="Previous">
</div>