We Keep Coding

CSS styles applying differently when minified for stepper wizard

I have two plunkers of material design wizard selector.One is having minified version of css and the other expanded.
Both are acting differently upon stepper clicks.
I wonder the minified file is not taking the transition effects of .step-wizard .progressbar class.
Please suggest what could be the reason for this change even though the code is similar.One minified and the other expanded.
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
Minified CSS plunker:
Minified css-stepper wizard
Expanded CSS plunker
Expanded css-stepper wizard

the stepper clicks work fine on both versions, only difference I see the border under .progressbar are different.
expanded has:
border: 1px solid e5e6e6;
minified has:
border:1px solid;

I found your typo.
Your color code is wrong.
Your color code is
.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6; // have a look here. color code has no #
}
You need to change like this
.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid #e5e6e6; // you need to change color code
}

Fixed it by removing border: 1px solid e5e6e6; from .step-wizard .progressbar-stepper class
Link here

overflow:hidden, what am i doing wrong here

I have explicitly positioned divs, inside a parent div tag. The thing is, when I resize my browser window, i am able to scroll to the specified div position which I don't want to. I tried using overflow and it kinda does nothing other than hiding the div completely. I am clearly missing something here. How do I hide the image when I resize my browser window ? How can I solve this ?
.Topics__imageContainer {
position: absolute;
-webkit-transition: opacity .5s,-webkit-transform .5s;
transition: opacity .5s,-webkit-transform .5s;
transition: transform .5s,opacity .5s;
transition: transform .5s,opacity .5s,-webkit-transform .5s;
}
.Topics__image {
border-radius: 50%;
border: 3px solid #fff;
background-color: #fff;
box-sizing: content-box;
overflow-x:hidden;
display:inline-block;
}
.icon_wrapper_inner{
overflow-x: hidden;
position: relative;
}
<div class="icon_wrapper_inner">
<div class="Topics__imageContainer" style="opacity: 1; left: 1380px; top:268px;">
<div class="Topics__image Topics__image--far" style="width:50px;height:50px;background:url('http://4hdwallpapers.com/wp-content/uploads/2013/05/Emo-Star-Dekstop-Background-728x546.jpg');background-size:100%">
</div>
</div>
</div>

Try reversing the hidden logic in the CSS.
overflow: hidden;
overflow-y: auto;

I fixed it by adding overflow:hidden inside html in bootstrap.css. Now the overflow is hidden as i resize my browser preventing it from scrolling.
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow-x:hidden;
}

Color to grayscale on hover not working in IE11

I'm using Gray for a few elements on the site. However, I can't get it to work in IE11. For example, in the fiddle below, I use JS to add the grayscale and grayscale-fade classes so that the image fades from color to grayscale on hover. How would I get this to work in IE11? The author says that the plugin needs to be initialized for IE11 (i.e. $('article.project img').gray();), but if I add that line, all of the images turn gray by default from the start. I just want this to work in IE11. Can someone show me how?
Fiddle: http://jsfiddle.net/61jcam54/
HTML
<div id="content">
<article class="project">
<img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
<div class="overlay" style="margin-left: -1px; width: 367px;">
<h3>Project Title</h3>
<a class="post-link expand" href="http://google.com">+</a>
</div>
</article>
</div>
CSS
article.project {
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
article.project img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
article.project .overlay {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.hover .overlay, .active .overlay, .hover-sticky .overlay {
opacity: 1;
}
article.project .overlay h3 {
color: #FFF;
font-size: 17px;
font-size: 1.7rem;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
line-height: 1.3;
margin-top: 3.3em;
padding: 0 1em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
article.project .overlay .expand {
border: 5px solid #FFF;
bottom: 0;
color: #FFF;
display: block;
font-size: 30px;
height: 60px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 2;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
/* GRAYSCALE */
.grayscale, .grayscale-sticky {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
-webkit-filter: grayscale(100%);
}
.grayscale.grayscale-fade {
-webkit-transition: -webkit-filter .2s;
}
.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced {
filter: none;
-webkit-filter: none;
}
.grayscale.grayscale-replaced > svg {
opacity: 1;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
opacity: 0;
}
JS
$('#content').on('mouseenter', 'article.project', function(){
$(this).addClass('hover grayscale grayscale-fade');
$(this).find('.post-link').hide();
}).on('mouseleave', 'article.project', function(){
$(this).removeClass('hover grayscale grayscale-fade');
$(this).find('.post-link').show();
});

TL;DR
Here is an updated example that works in IE11 and all other supported browsers.
Exaplaination
There were a few issues...
According to the plugin that you are using, when the browser doesn't support CSS3 filters (like in IE10/11) the following applies:
...the plugin uses Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.
Since the img element needs to be replaced with an SVG element in IE11, the plugin script (with Modernizr shiv) is required in order for it to work. In the jsFiddle example you provided, the script jquery.gray.min.js actually wasn't even being executed in IE11 since it was blocked due to mismatched mime types (this warning was in the console).
To work around this, I just copy/pasted the script into the example. In addition, it's worth noting that the Modernizr docs state that the script must execute before the <body> loads. This seems to be relevant in IE when using a HTML5 Shiv:
The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.
Now that the script is actually being executed in IE11, the plugin needs to be initialized and the img element needs to be replaced with an SVG. According to the plugin, the img elements will automatically be replaced if the element has the class .grayscale. Alternatively, it also looks like you can use the custom .gray() method, too. Since your example wasn't actually giving the class .grayscale to the img element, it wouldn't have being initialized in IE11.
Below, you will notice that I added the class .grayscale to the img element (in order to initialize it in IE11). In addition, the class .grayscale-off is also added to the element in order for the gray effect to be off initially. In the updated jQuery, you will see that this class is just toggled.
Here is the relevant updated HTML/CSS/jQuery:
Updated Example Here
I also shortened the jQuery a little too:
$('#content').on('mouseenter mouseleave', 'article.project', function (e){
$('.grayscale', this).toggleClass('hover grayscale-off');
$(this).find('.post-link').toggle();
});
.grayscale.grayscale-replaced > svg {
opacity: 0;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg {
opacity: 1;
}
<div id="content">
<article class="project">
<img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" />
<div class="overlay">
<h3>Project Title</h3>
<a class="post-link expand" href="...">+</a>
</div>
</article>
</div>

IE prefers SVG to add filters on images.
Here is a way to achieve this on IE10, Firefox and Chrome: http://jsfiddle.net/azx3mxmt/3/
Pictures are added programmatically like this:
var container = document.getElementById("container");
var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
for (var i=200 ; i < 2200 ; i += 100) {
container.appendChild(animation(src, i));
}
SVG filters are set like this:
<svg width="128" height="128" viewBox="0 0 128 128">
<defs>
<filter id="filter" >
<feColorMatrix id="gray" type="saturate" values="0.5"/>
<filter/>
</defs>
<image x="0" y="0" width="128" height="128"
filter="url(#filter)"
xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/>
</svg>
Other effects can be achieved with SVG. Look at this web site.

Javascript animation lags

Since I started studying web development 2 months ago, I've had similar problem.
The animation lag. This is the only animation and sometimes when it triggers it's kinda low in fps. I wonder what I'm doing wrong.
<script type="text/javascript">
function showSidebar(){
$("#sidebar").stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 1000);
$("#sidebar-ctn").delay(100).stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 900);
}
function hideSidebar(){
$("#sidebar").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 500);
$("#sidebar-ctn").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 400);
}
</script>
I guess there's something wrong because I don't experience fps drops (i'm not sure what the right term, just that the animation is lagging) in other website with so many animations like this:
http://sarasoueidan.com/demos/windows8-animations/
UPDATE:
So I have discovered what causes it and it's the amount of buttons I have.
Here's what it looks like.
The sidebar has a windows 8 inspired animation and it's the one that lags.
when I test it for framerate here's the result:
but when I removed the circular buttons:
Here's the css for my buttons:
#tables button{
font-size: 1.5em;
color: white;
border: none;
outline: none;
width: 105px;
padding: 5px;
margin: 10px;
height: 70px;
text-shadow: 2px 2px 5px rgba(120,155,179,0.5);
cursor: pointer;
-moz-border-radius:100px;
-webkit-border-radius: 100px;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
Is there a better way of doing this, that it won't affect the performance even with so much buttons?

This is kinda late but I manage to lessen the fps drop significantly by using spans instead of buttons. It was the large number of buttons that made it cumbersome after all.

How to zoom out a div using animations?

I have a DIV that is covering the whole page (height and width are 100%). I am trying to use CSS (and possibly JavaScript) to create a zoom out animation effect so the DIV is smaller (making everything inside the div - its children - smaller as well) to a specific point on the page (middle of the page) and to a specific width and height (let's say 100 * 100px for example).
I am starting with the following code:
<div id="toBeZoomedOut">
<div>something</div>
<div><img src="background.jpg"></div>
</div>
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#toBeZoomedOut img {
height: 250px;
width: 250px;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
The issue with this code is that it zooms out on component down (the parent div) and immediately zooms out what's inside it then goes back to zoom in the components.
Basically it is a little buggy. Any helpful fixes to make it zoom out everything together? It would be great if I can zoom out everything together to a specific location on the page and to a specific width/height (for example, zoom everything out to left: 100px, top: 100px and the parent div should be: 100px * 100px and everything else is relative in size).
I understand this might be easier with JavaScript? Any help?
One final note, if you notice the animation is not really reflecting a zoom animation. Although this would be an additional plus, the actual zoom animation would be great.
JSFiddle link to make it easier: http://jsfiddle.net/HU46s/

I am using the universal selector to target everything inside of the parent container to have the css transitions applied to it.
The next thing I did was changed the inside contents width to a % for ease of scaling.
Here is the css:
#toBeZoomedOut * {
-webkit-transition: all 1s ease;
-moz-transition: 1s ease;
transition: 1s ease;
}
Finally, a fiddle: Demo

To make all images and div backgrounds zoom at the same time you have to use percentage size for #zoomer-inside elements and set a specific font-sizes...
However is not smooth, if you want a smoother result, I suggest you use a jQuery in combination with some animation() method or plugin.
Fiddle: http://jsfiddle.net/HU46s/1/
Code:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
width: 90%;
font-size: 20px;
}
#toBeZoomedOut img {
height: 90%;
width: 90%;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
smoother by jQuery:
Fiddle: http://jsfiddle.net/HU46s/5/
Code:
jQuery - smoother solution (even less CSS):
$('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
function(){
$(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
},
function(){
$(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
}
);
...with this only CSS you need is:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
#toBeZoomedOut img {
width: 250px;
}