For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 700px, or up and down if it's smaller than 700px.
The issue arises when clicking on the 'CODE' block. Sometimes, seemingly at random, the code block expands from occupying 50% of the window to 80%, then smoothly transitions to 100%. This strange behavior disappears when I remove the h1 elements from the HTML file.
I've tested this locally in Firefox, Safari, and Chrome, and the problem appears sporadically.
Interestingly, when I test this on jsfiddle using Firefox, Safari, and Chrome, the issue seems to vanish.
Can anyone identify what might be causing this? Why does this bug occur locally but not on jsfiddle?
Please take note that the JavaScript function responsible for animating the divs is _modifyDiv. Try removing and adding the h1 elements in the div block to see if there's a difference on your end. It's baffling why my div blocks behave erratically when hosted locally compared to through jsFiddle...
/*jshint esversion: 6 */
var Welcome = (function () {
var isSideBarActive = false;
//So I don't have to write document.getElementById everytime.
var id = function(element) {
return document.getElementById(element);
};
//add multiple types of events to an element
var addMultipleEvents = function(eventsArray, element, fn){
eventsArray.forEach(function(e){
id(element).addEventListener(e, fn, false);
});
}
//which mode should we navigate to? This function creates a sidebar from the element
var selectDiv = function(element){
var selectedDiv;
var notSelectedDiv;
switch(element){
case 'photography':
selectedDiv = 'photography';
notSelectedDiv = 'code';
break;
case 'code':
selectedDiv = 'code';
notSelectedDiv = 'photography';
break;
}
return _modifyDiv(selectedDiv, notSelectedDiv);
};
var _modifyDiv = function (expand, contract){
var $expand = $('#' + expand);
var $contract = $('#' + contract);
if (!window.matchMedia('(max-width: 700px)').matches) {//is screen larger than 700px wide?
$expand.animate({
width: '100vw',
},900);
$contract.animate({
width: '0vw',
display: 'none'
},900).delay(100).find('h1').css('display', 'none');
} else { //screen is less than 700px wide
$expand.animate({
height: '100vh',
},900);
$contract.animate({
height: '0vh',
display: 'none'
},900)
}
}
return {//public methods
selectDiv: selectDiv,
addMultipleEvents: addMultipleEvents
// modifyDiv: modifyDiv,
};
})();
$(document).ready(function(){
var myEvents = ['click', 'touchend'];
Welcome.addMultipleEvents(myEvents, 'code', function(){Welcome.selectDiv('code')});
Welcome.addMultipleEvents(myEvents, 'photography', function(){Welcome.selectDiv('photography')});
});@import "https://fonts.googleapis.com/css?family=Raleway:400,500";
#aligner {
list-style: none;
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%; }
#aligner .align-spacer {
width: 20px; }
#aligner .align-item {
text-transform: uppercase;
color: #fff;
background: linear-gradient(rgba(0, 163, 136, 0.45), rgba(0, 163, 136, 0.45)), url("http://placekitten.com/600/500");
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
height: 100vh; }
#aligner .align-item:nth-child(1) {
background: linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), url("http://placekitten.com/200/300");
width: 100; }
@media (max-width: 700px) {
#aligner {
flex-direction: column; }
#aligner .align-spacer {
width: 20px; }
#aligner .align-item {
height: 50vh; } }
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway' !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligner">
<div id = 'code' class = "align-item">
<h1>Code</h1>
</div>
<div id = 'photography' class = "align-item">
<h1>Photography</h1>
</div>
</div>