I have implemented an if/else statement to check the width of a div and adjust the iframe inside accordingly. The code itself runs without any issues, but I seem to be facing a problem with the if/else statement. You can view the site at
Code:
Javascript:
var sc = document.getElementById("scfullscreen");
var sccount = 0;
$(document).ready(function() {
$(sc).click(function() {
sccount= sccount+1;
if (sccount%2 === 0) {
animateFn('20%','80%');
$('#soundcloud').animate({
left: '20%',
width: '80%',
}, 1000);
} else {
animateFN('0%','20%');
}
});
});
function animateFn(l, w){
$('#soundcloud').animate({
left: l,
width: w,
}, 1000);
$('#scfullscreen').animate({
left: l,
width: w,
}, 1000);
$('#scexpand').addClass('rotated');
}
HTML:
<!doctype html>
<html>
<head>
<title>L3mmy Dubz</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
<a href="index.html">
<div id="homebtn" class="btn">Home</div>
</a>
<div id="musicbtn" class="btn">Music</div>
<iframe id="soundcloud" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/19690125&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<div class="btn" id="scfullscreen">
<img id="scexpand" height="100%" alt="fullscreen" src="images\plus.png" />
</div>
</body>
</html>
CSS:
* {
margin:0px;
border:0px;
padding:0px;
}
body {
background-color:#B22800;
height:100%;
width:100%;
}
#header {
position:fixed;
left:0px;
width:20%;
height:100%;
background-color: #7C1C00;
opacity:0.9;
}
.btn {
position:fixed;
line-height:200%;
text-overflow:clip;
display: block;
overflow: hidden;
white-space: nowrap;
height:7.5%;
width:20%;
color:white;
font-size:2em;
text-align:center;
}
.btn:hover {
background-color:#ff3a00;
}
#homebtn{
top:0%;
}
#musicbtn{
top:7.5%;
}
#header a {
text-decoration:none;
color:#fff;
}
#soundcloud {
width:20%;
height:77.5%;
position:fixed;
left:0px;
top:15%;
}
#scfullscreen {
bottom:0px;
display:block;
position:fixed;
overflow: hidden;
white-space: nowrap;
height:7.5%;
left:0px;
width:20%;
}
#scfullscreen:hover {
background-color:#ff3a00;
}
.rotated {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
}
@media screen and (max-width:768px) {
#header {
width:30%;
}
#soundcloud {
width:30%;
}
#scfullscreen {
width:30%;
left:0px;
}
}