We Keep Coding

How to make a page "lights out" except for one element

I'm not really asking for help with my code, I'm more asking, how do you do this?
When you click my div, the screen goes black, but I want my div underneath to still show as normal, but the rest of the area to be blacked out.
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">

You can use the box-shadow property to achieve this effect.
Updated the Code
function lightsout() {
document.getElementById("maindiv").classList.toggle("visible");
}
.visible{
box-shadow: 0 0 0 10000px #000;
position: relative;
}
body{
color: red;
}
<div style="width:100px;height:100px;border:2px solid blue; color: #000;" onclick="lightsout()" id="maindiv">Click Me</div>
Other elements on the page will be hidden...

You can simply add z-indexes to your positioning. With giving the black area a lower z-index than your button but a higher z-index than the rest, you will have your effect.
Also it is recommended to not use inline styles, as your code becomes way more maintainable with styles and markup seperate.
function lightsout() {
document.getElementById("lightsout").classList.toggle("visible");
}
.button {
position: relative;
z-index: 10;
width: 100px;
height: 100px;
border: 2px solid blue;
background: white;
}
#lightsout {
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
visibility: hidden;
}
#lightsout.visible {
visibility: visible
}
<div class="button" onclick="lightsout()">Click Me</div>
<div id="lightsout"></div>
Other elements are hidden.

you can use css,
z-index, and add divbox background-color like this :)
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
#lightsout{
z-index: -1
}
<div style="width:100px;height:100px;border:2px solid blue;background-color:white;" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">http://stackoverflow.com/questions/42688925/how-to-make-a-page-lights-out-except-for-one-element#

Hover over picture in scroll list

I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.
I can't for the life of me figure out how to do it.
I made this fiddle to show what my scroll bar looks like.
https://jsfiddle.net/burgoyne/u1zdn80p/1/
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.
Thanks!

You have to specify what you want in a CSS img:hover rule, like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>

About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.
About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?

You can place text inside with class named
<span class="text-content"><span>Some text here</span></span>
and then u can use css to place text on the image, something like ...
span.text-content
{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
I hope this helps.

Styling icon inside button

I have piece of code like this :
<md-button ng-repeat="s in savedSearchName"
ng-click="loadSearch(s)" ng-right-click="removeFilter($event, s)"
class="filterButton">
{{s}}
<md-icon md-svg-src='style/images/icons/ic_close_24px.svg' class="buttonRemover"
title="Remove filter" ng-click="removeFilter($event, s)"
</md-icon>
</md-button>
And I'm trying to resize my md-icon and place it in the top-right corner of my button. SO I have the folowwing css :
.buttonRemover {
color: red;
position: relative;
width: 14px;
height: 14px;
right: -5px;
top : 0px;
float: right;
}
So first :
Why do I need to set a negative right ? (right: 0px doesn't place my icon next to the button's right-border). I'm guessing it has something to do with the float: right; but removing it makes the icon even further from the top-right corner.
Secondly :
How can I display my icon only when the mouse is hover the parent button ?

The following code should work:
.filterButton {
position: relative;
}
.buttonRemover {
// other styles
position: absolute;
top: 0;
right: 0;
display: none; // or visibility: hidden;
}
.filterButton:hover .buttonRemover{
display: block; // or visibility: visible
}

This should work ;)
.filterButton {
position:relative;
}
.filterButton:hover .buttonRemover {
opacity:1;
}
.buttonRemover {
color: red;
position: absolute;
width: 14px;
height: 14px;
right: 0px;
top : 0px;
opacity:0;
transition:0.2s all linear;
}

Getting inline HTML/JavaScript popup to appear in the middle of screen regardless of resolution

I am using the following Javascript and CSS to create popups:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}
The location these popups appear is done with:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>
The content of the popup goes between:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>
How can I get this popup to popup in the middle of the screen regardless of resolution?

Set top to 50%, left to 50%. Then have a negative left margin that is half of the width of the popup, and a negative top margin that is half of the height of the popup. What you have seems to be close...
But margin-top should be -125px and margin-left should be -200px, given a popup that is 400x250 in size.

For dynamically-sized popups, consider wrapping your content in div.vc-outer and div.vc-inner.
CSS
.vc-outer {
display: table;
position: fixed;
width: 100%;
height: 100%; }
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle; }
.popup {
display: inline-block; }
HTML
<div class="vc-outer"><div class="vc-inner">
<div class="popup">Hey!</div>
</div></div>

You are giving inline style(even same property) as well as using ID. I will suggest to do this only once and that to using ID.

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?

Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.

position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.

I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...

This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}

You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});

display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)