Develop Reference

Internet Explorer CSS transition issue

I have some elements which width changes to 0 with JS on scrolling and when transition width to 0 is beginning, elements firstly become very big, but then do as need. In Chrome all works perfectly.
Here is an example of this https://jsfiddle.net/dx914ut0/
What sholud I do?
UPD: Just need to add units.

Instead of just transition try using the code below. This will make sure it works on every browser.
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;

try function onscroll in your html:
<div onscroll="topFunction()" id="myBtn" title="Go to top"></div>
except if you want this to happen on click, then you should probably add actionListiner or something.

How to animate div on changing margin using js

div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.

Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Transition Causes Elements with Opacity to Disappear

I've found an odd bug whilst trying to create a toggleable sidebar. I have a set of social media icons with the following code to make them change opacity on hover:
.snIcons {
filter: opacity(.4);
-webkit-filter: opacity(.4);
-o-filter: opacity(.4);
-moz-filter: opacity(.4);
-ms-filter: opacity(.4);
transition: 0.3s filter linear;
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
}
.snIcons:hover {
filter: opacity(1);
-webkit-filter: opacity(1);
-o-filter: opacity(1);
-moz-filter: opacity(1);
-ms-filter: opacity(1);
transition: 0.3s filter linear;
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
}
In the HTML they are laid out like this:
<div class="sidebar-footer">
<img class="snIcons" src="Images/twitter.png"/>
<img class="snIcons" src="Images/facebook.png"/>
<img class="snIcons" src="Images/linkedin.png"/>
<img class="snIcons" src="Images/reddit.png"/>
<br>
<img class="snIcons" src="Images/instagram.png"/>
<img class="snIcons" src="Images/behance.png"/>
<img class="snIcons" src="Images/github.png"/>
<img class="snIcons" src="Images/deviantart.png"/>
<h3>Copyright Joeb Rogers
</div>
I'm using the following jQuery to hide certain elements of my sidebar on click:
$("#collapse").click(function() {
$(".sidebar-nav").toggleClass("hidden");
$(".sidebar-footer").toggleClass("hidden");
$("#sidebar-wrapper").toggleClass("collapsed");
$(".sidebar-head").toggleClass("collapsed");
});
They appear fine in the first place and everything works well and good. However, once I toggle the sidebar to disappear and then toggle it back to full size, only two of the icons appear. When I hover over where they were supposed to be, they reappear. It seems like somehow by toggling display: none and then back to normal it messes up with their initial opacity state and sets it to 0, but it says it's set to 0.4 still in the inspector.
The weird part is, when I removed the break in the html and tried it again, a different two icons were visible (two next to each other) whereas normally it's the two that are opposite each other vertically.
Anybody have any idea how to fix this other than to remove the opacity? Thanks!
EDIT: I've made the discovery that it has to do with toggling the size of the sidebar rather than the display type. When I toggle the sidebar, it goes from fullscreen to 80px and back again (mobile). I just changed it to 60px and upon toggling back none of the icons were visible. I believe that if the size of the container gets smaller than their position then their opacity messes up. No idea why, I tried changing the .hidden class to visibility: hidden rather than display: none but there was no change.
EDIT 2: Okay, so I've debugged the issue down to the transition effect I'm using for changing the sidebar's size. Because I'm changing the display on click, the elements are being created again before the container is large enough (transition takes 0.3 seconds). This for some reason means they are not being rendered. Anyone know any fixes that could help this?

I managed to fix it by using fadeToggle("slow") instead of toggleClass, could not tell you why this made such a difference.

Bootstrap Carousel Text Fade

Is it possible to prevent the caption of a bootstrap carousel from sliding with the background image, and instead, on 'slide' fade out, and on 'slid' the new caption fade in?

I prefer using the CSS-only solution:
.item.next .carousel-caption {
opacity: 0;
}
.carousel-caption {
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
It does rely on CSS3 transitions and does therefore not work in older browsers (for IE that means atleast version 10) but it's time to code for the future!

Use jQuery to attach functions to the 'slid' and 'slide' events...
$('#myCarousel').on('slide',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid',function(){
$('.carousel-caption').fadeIn(600);
})
Demo with animation: http://bootply.com/69740

For Bootstrap 3 it would be
$('#myCarousel').on('slide.bs.carousel',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid.bs.carousel',function(){
$('.carousel-caption').fadeIn(600);
})

This works... It still sort of slides with the carousel, but you do get the fadeOut and fadeIn affect.
$('#myCarousel').on('slide',function(){
$('#myCarousel .active .carousel-caption').fadeOut();
});
$('#myCarousel').on('slid',function(){
$('#myCarousel .active .carousel-caption').fadeIn();
});
Here is a fiddle demo.

Twitter Bootstrap 2.0.4 Modal - How to apply modal fade in effect to a newly created modal class style?

I am learning Web Design by myself and now I've started playing with twitter bootstrap's modal JavaScript plugin.
I've created a new modal class named modal-login, it's a login form inside a modal window. Things have been working good, but the fade effect/slide down does not work. The effect that bring down the modal box from top to center.
I don't have yet deep understanding of javascript and jQuery.
My question now is, can we edit the bootstrap-modal.js file, so that I may include my new modal class named modal-login and modal-register? so that it could take advantage of the modal fade in effect?

You shouldn't need to edit the bootstrap-modal.js file. You just need to add the fade class to your modals, and then add some CSS rules.
For example:
.modal-login.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal-login.fade.in {
top: 50%;
}
Even better would be if you still kept the plain modal class on your new one's, and just used your new classes to do overrides. That way you could inherit the CSS above, without having to duplicate it.