We Keep Coding

why are the other classes not toggling?

I have tried to implement a class toggle solution proposed in a prior question that I had asked and it was a great solution but when I tried to implement it on other classes the other ones are not working and I cant figure out why.
I have double checked any spelling mistake and tried to do a smaller scale code and found that it works just fine.
var click = 0
var bbtn = 0
var top2 = document.getElementById("top2");
var swoop3 = document.getElementById("swoop3");
var swoop4 = document.getElementById("swoop4");
var title2 = document.getElementById("title2");
var backbtn = document.getElementById("backbtn");
top2.onclick = function() {
top2.classList.toggle("on");
title2.classList.toggle("on");
swoop3.classList.toggle("on");
swoop4.classList.toggle("on");
}
.top2{
background-color:orange;
position:fixed;
top:25%;
left:0;
height:25%;
width:100%;
border-top-left-radius:45px;
border-bottom-left-radius:50px;
border-bottom-style:outset;
border-width:5px;
transition: height .5s, top .5s,border-bottom-left-radius.5s,border-top-left-radius.5s;
}
.top2.on{
top:0;
height:100%;
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.title2{
color:white;
font-size:40px;
position:fixed;
top:34%;
left:25%;
animation-name:title2;
animation-duration:1s;
animation-delay:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
opacity:0;
transition:top .5s;
}
.title2.on{
top:5%;
}
#keyframes title2{
100%{
opacity:1;
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop3{
background-color:orange;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
transition:top .5s, height .5s;
}
.swoop3.on{
top:100%;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop4{
background-color:white;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
border-top-right-radius:50px;
border-top-style:inset;
border-width:5px;
transition:top .5s;
}
.swoop4.on{
top:0;
}
I want everything to toggle when clicked but only top2 toggles and nothing else

There's not much to say about your problem as you didn't provide an example of your HTML view. But there are two thing you have to check on your code.
If your HTML elements don't have the id you're specifying in your javascript like top2 or swoop3 I recomend you add them first in all your elements the way you want like this:
<div id="top2"></div>
Once you have that, you should also change your css styles to point to the elements by their id. Meaning that instead of writing .top2 you should write it as #top2. You can read more information about css selectors here. As a result, your css should look like this:
.top2 {
background-color:orange;
// ... other styles
}
.top2.on {
// ... more styles
}

How to stop the fade in / fade out on mobile device

I have created a simple fade in and fade out. I am also trying to stop the animation process on mobile device.I am able to access below code on computer but i want to stop fadeIn and fadeOut on mobile device.
Please help me
HTML
<div id="wrap">
<img class="bgfade" src="img/background1.png">
<img class="bgfade" src="img/background2.jpg">
<img class="bgfade" src="img/background3.jpg">
</div>
css
#wrap{
position:fixed;;
z-index:-1;
top:0;
left:0;
background-color:black;
}
#wrap img.bgfade{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1;
background-position: center;
}
img {
transition: all .10s linear;
-webkit-transition: all .10s linear;
-moz-transition: all .10s linear;
-o-transition: all .10s linear;
}
#wrap img {
-webkit-filter: brightness(30%);
filter: brightness(40%);
}
js
$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
$("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000);
$("#wrap img").first().fadeIn(2000);
setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Here's dirty solution but you'll get idea of what you need to do.
CodePen link
What I done is just placed some !important rules based on media query breakpoint. You try to animate your images with class, and clear out those ugly code I put there, NOTE: it's just to help you with logic.

The jQuery stop() method is used to stop animations or effects before it is finished.

Strange behavior of link fading

I am creating a "scroll to top" link for my personal webpage but I have ran into some strange behavior that I cannot seem to correct.
I want the link to fade in when the user scroll to a certain amount of pixels and then fade out again if the user scrolls up above this point. Pretty standard behavior.
The markup is pretty simple:
The CSS:
#scroll-top {
position: fixed;
right:30px;
bottom:30px;
width: 30px;
height:30px;
color: #38555e;
z-index: 99;
border-radius: 50%;
border:2px solid #38555e;
text-align: center;
background:#fff;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
display:none;
}
#scroll-top:hover {
background:#38555e;
color:#fff;
border-color:#fff;
}
and the Jquery code:
$(window).scroll(function () {
if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
if ($(this).scrollTop() > 100) {
$('#scroll-top').fadeIn(2000);
} else {
$('#scroll-top').fadeOut(2000);
}
}
});
DEMO: http://jsfiddle.net/chc91n5f/4/
My problem is that when the link is faded in, it waits about 2 seconds and then fades in fast instead of starting the fading immediately and fading slowly. Also when the link fades out it waits and then fades out fast.
What am I missing here?

The fadeIn and fadeOut functions in jQuery are shorthands for animating the opacity.
jQuery animates properties as putting them inline and changing it untill it reaches a specific point. In your case it's changing the opacity to lets say 0.35677 and the browser animates this change.
In order to have a more sleek animation use CSS class (visible for instance) to modify the opacity.
body {
height:2000px;
background:red;
}
#scroll-top {
position: fixed;
right:30px;
bottom:30px;
width: 30px;
height:30px;
color: #38555e;
z-index: 99;
border-radius: 50%;
border:2px solid #38555e;
text-align: center;
background:#fff;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
opacity: 0;
}
#scroll-top:hover {
background:#38555e;
color:#fff;
border-color:#fff;
}
#scroll-top.visible {
opacity: 1;
}
And use the following code to change it:
if ($(this).scrollTop() > 100) {
$('#scroll-top').addClass('visible');
} else {
$('#scroll-top').removeClass('visible');
}

I believe the problem is in your scroll function..
In the most simple explanation.
When you scroll (1 tick with your scrollwheel) the code looks if you are past 100px. In most basic browsers and OS's the scrolling distance is 122px (correct me if i'm wrong). Problem is.. if you scroll 3 clicks with your mousewheel. you are 3 times past 100px and the animation of the fadeIn wil queue 3 times. At a certain point jQuery has enough of it and says you know what.. if you want the same long animation for a few times. i will skip a few times to spead my workload.
So much for the simple explanation.
You can disable this with a clearQueue (http://api.jquery.com/clearqueue/) and it will disable the flashing animation. edited like this
$(window).scroll(function () {
if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
if ($(this).scrollTop() > 100) {
$('#scroll-top').animate({opacity: 1},1000).clearQueue();
console.log("test");
} else {
$('#scroll-top').animate({opacity: 0},1000);
}
}
});
Demo: http://jsfiddle.net/2uox7ep7/5/

Its because it keeps on fading in/out as you scroll even when it is already fading and thus the delay. You can use a variable like visible to keep track of the visibility
http://jsfiddle.net/chc91n5f/7/

CSS3 translateX confusion

The problem is, that translateX is not changing it's position right before animating. In the example problematic slide is #slide2, i'm changing it's position before animating and it still animate from the wrong side.
How to fix that behavior? Using css left property instead is fixing this, but i want to use translateX.
Thanks.
html:
<div id="slide1"></div>
<div id="slide2"></div>
css:
div {
position:absolute;
left:0px;
top:0px;
background:red;
width:100%;
height:300px;
-webkit-transition: all 0.4s linear;
}
#slide2 {
background:blue;
-webkit-transform: translateX(100%);
}
javascript:
$('#slide2')
.css('-webkit-transition','none')
.css('-webkit-transform','translateX(-100%)');
$('#slide1').css('-webkit-transform','translateX(100%)');
$('#slide2')
.css('-webkit-transition','all 0.4s linear')
.css('-webkit-transform','translateX(0%)');
jsfiddle playground:
http://jsfiddle.net/D5d9e/

Updated - Try this:
$('#slide2')
.css('-webkit-transition','none')
.css('-webkit-transform','translateX(-100%)')
.css('-webkit-transform'); // wtf happens here
Fiddle: http://jsfiddle.net/D5d9e/6/
This works... for some reason.

how to change div background-color with fadeIn/Out?

How to change div background-color with fadeIn/Out,I only want to fade background color,not background image,Please give me some useful code or solution

Although only supported by modern browsers you might also consider using CSS transitions to achieve the same effect
HTML
<div class='foobar'></div>
CSS
.foobar {
/* transition properties */
transition: background-color 2s;
-moz-transition: background-color 2s;
-webkit-transition: background-color 2s;
-o-transition: background-color 2s;
/* basic styling & initial background-color */
background-color:maroon;
width:100px;
height:100px;
}
/* Change background color on mouse over */
.foobar:hover {
background-color:blue;
}
Working example here, http://jsfiddle.net/eRW57/14/

<script>
$(document).ready(function(){
$("p").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>
try it.. that should work fine

You can't fade just the background (color or otherwise) of an element using jQuery's fadeIn/fadeOut.
What you can do is place an additional layer (DIV, etc) with your background color and fade in/out on that.
Instead of something like this:
<div id="my-background"></div>
Use this structure:
<div id="container">
<div id="my-background"></div>
</div>
CSS
#container
{
position:relative;
width:200px;
height:100px;
background-image:url(my-background-image.jpg);
}
#my-background
{
height:100%;
width:100%;
background-color:blue;
position:absolute;
z-index:99;
}
Then use jQuery's fadeIn/fadeOut methods
JS
jQuery("#my-background").fadeOut();

with this you can fadeout all div's with id #my-background
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});