if-statement: I have a counter based if/else statement but for some reason the else won't work

samedi 23 janvier 2016

I have a counter based if/else statement but for some reason the else won't work

I am having problems with this bit The if segment works but not the else which can be seen when you try to click the minimise button as it will expand but will not contract unfortunately.

$("#scfullscreen").click(function() {
sccount+=1;
if (!sccount%2 === 0) {
    animateFn('20%','80%');

} else {
    animateFN('0','20%');
    }
});

The problem is i dont know what is causing it not to work here is the rest of the javascript

    var sccount = 0;
    $(document).ready(function() {
    $("#scfullscreen").click(function() {
    sccount+=1;
    if (!sccount%2 === 0) {
        animateFn('20%','80%');

    } 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');
    }

Here is my 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="http://ift.tt/1nrGmxj"></iframe>
        <div class="btn" id="scfullscreen" class="scfullscreenclick">
            <img id="scexpand" height="100%" alt="fullscreen" src="images\plus.png" />
        </div>

    </body>

</html>

And here is my 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;
    }
}

Any help that can be given is greatly appreciated as i am new to javascript but i am yet to find a problem with it online.

p.s. my site can be found here if it is easier to check through that http://ift.tt/20l2RBX Thanks in advance, James

if-statement

samedi 23 janvier 2016

I have a counter based if/else statement but for some reason the else won't work

Aucun commentaire:

Enregistrer un commentaire