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

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#

Related

How to vertically and horizontally center a div using javascript and css margin?

I am currently trying to center a rectangle in an image with only using javascript (no css center properties). However, even if the numbers are right, the showing is wrong.
To do this, I use the following code :
$(document).ready(function() {
$(".img-zoom-container").css("width", $("#myimage").width());
$(".img-zoom-container").css("height", $("#myimage").height());
$("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
$("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
$("#lens_container").css("top", ($("#lens").height() / 2));
$("#lens_container").css("left", ($("#lens").width() / 2));
});
.img-zoom-container
{
border: 1px solid red;
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
}
#lens_container
{
border: 1px solid cyan;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
The item I am trying to center is the #lens_container div (appears blue on screen). I also have a white square (#lens div) of size 50px by 50px. I would like to center and to size the blue rectangle in order to have half of the square width at each side of the blue rectangle and same with height. However, as you can see when trying the code, it is not the case although the maths are correct.
I do not know if you can understand my needs, but I would really appreciate help there.
Thanks in advance.
There are 2 issues:
First, position: absolute means to position the item "to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block" (reference). The parent element ".img-zoom-container" is not positioned. The initial container block would be <body>, which has some padding by default.
So your #lens_container is positioned relative to <body> of the iframe, which is probably not what you expected. Moreover, <body> by default has a non-zero padding size. You may see it clearer if you simply use CSS to position everything to top: 0 and left: 0:
body {
background-color: rgba(0, 0, 0, 0.1);
}
.img-zoom-container
{
border: 1px solid red;
width: 600px;
height: 160px;
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
#lens_container
{
border: 1px solid cyan;
width: 550px;
height: 110px;
position: absolute;
top: 0;
left: 0;
}
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
To have both #lens and #lens_container positioned relative to .img-zoom-container, you have to give .img-zoom-container a "position" value so it can be the "position ancestor":
$(document).ready(function() {
$(".img-zoom-container").css("width", $("#myimage").width());
$(".img-zoom-container").css("height", $("#myimage").height());
$("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
$("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
$("#lens_container").css("top", ($("#lens").height() / 2));
$("#lens_container").css("left", ($("#lens").width() / 2));
});
.img-zoom-container
{
border: 1px solid red;
position: relative; /** this line **/
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
}
#lens_container
{
border: 1px solid cyan;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
It's still 1-2 pixels off. That is because you didn't take the border width into consideration (your second issue). You'd get a better result once you clear your head and think how you want the border widths to behave.
Depending on its container, you could just set an ID on your div like:
CONTENT .
Then in javascript, if there is an event to center it, you could make a function like:
function centerDivItem() {
document.getElementById("id1").style.alignContent = "center"
}
And then, as I said, call it from another place.

HTML5 animations creating a dashed border that smoothly moves inward on hover

I am making a drag and drop module - and need to have it so that when the dragging process occurs - the dashed line around the outside moves in and the box goes a particular color. I don't want the look of the dashed line to change though. There is the option of maybe having the dashed line animate move around the edge of the box
.
for now its ensuring the contents doesn't jump - to make it absolutely positioned so its disconnected from the border morphing?
how to css3 animate the border moving in/out smoothly?
https://jsfiddle.net/L47xrsnt/4/
html
<div class="drag-drop">
<div class="drag-drop-border">
<div class="contents">
xx
</div>
</div>
</div>
css
.drag-drop {
.drag-drop-border {
border: 2px dashed pink;
}
&:hover {
padding: 15px;
background: gold;
}
}
You can try like below:
.box {
height: 100px;
background: yellow;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 3px;
border: 2px dashed pink;
transition: 0.5s;
}
.box:hover::before {
margin: 10px;
}
<div class="box">
</div>
To make the border transition smoother, you can add following CSS code in your :
{
transition: 0.5s padding ease-in-out;
}
You can add other parameters in transaction as per your requirement.

Highlighting images on mouse enter

I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)
Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}
If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.
Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}

Div Expandsion on Click

I was wondering if anyone can give me some insight on javascript/jquery for div expansion. In the JSFiddle you will find:
Four black divs:
.first_box {
width: 142px;
height: 142px;
margin-left: 0px;
margin-top: 0px;
position: absolute;
display: table;
background-color: black;
}
A unique hover color for each div:
.first_box:hover {
width: 142px;
height: 142px;
margin-left: 0px;
margin-top: 0px;
position: absolute;
display: table;
background-color: green;
}
So my question is:
What can I use so that when a div is clicked, it expands to the size of the four divs (289 X 289)?
The expanded div will then be filled with unique content.
Thank you!
JSFiddle: http://jsfiddle.net/SXfeG/1/
If you use absolute positionning, you can add some CSS like that :
.div-clicked {
width: 289px !important ;
height: 289px !important ;
margin-top: 0 !important ;
margin-left: 0 !important ;
z-index: 400 ;
}
div {
transition: all 1s ; // To add transition effect
}
And then, with jQuery, you can toggle 'clicked' class simply by using :
$('div').on('click', function (e) { $(this).toggleClass('clicked') ; })
JSFiddle : http://jsfiddle.net/85QFN/

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)

Categories