Overlay div with transparent area - javascript

I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.
This is an example of my page structure:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
And here is a fiddle of the above in action. I would like the green div (#d3) to be visible on top of the overlay.
Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available

use position: relative for #d3 for the z-index to work
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
Demo: Fiddle
See this answer

For me, the outline property is the simplest way to add an overlay around any element in CSS.
No need of z-index, just add the following code:
.myElement {
outline: 99999px solid rgba(0, 0, 0, 0.5)
}
I created a demo on jsFiddle.
Have a nice day,
Thomas.

This is the explanation of why this works: "The z-index will only work if the position property is set as well."
see http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al.

Related

How do you horizontally center an element with "position: absolute"?

Okay..... So here is a list of things to know:
First, I am using fabric.js (I didn't include it in the tags because it's not the central focus of the problem), which means that when I create a new instance of a fabric.js canvas, it creates 2 canvas elements (.lower-canvas) and (.upper-canvas), which by interacting with it, I've come to find out that they are absolutely positioned, so long story short (with a huge run on) I can't change the fact there are 2 canvases and I can't change to a different library.
Second, I am using bootstrap to keep the UI looking slick. Right now it's structure looks like
<div class="row">
<div class="col" id="canvas_container">
<canvas id="canvas">
</canvas>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
So when the page is generated, it changes from the previous code block to
<div class="row">
<div class="col" id="canvas_container">
<div class="canvas-container">
<canvas id="canvas" class="lower-canvas">
</canvas>
<canvas class="upper-canvas">
</canvas>
</div>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
which changes the previous canvas to 2 different canvases with different classes but keeps the id of the initial canvas on one of the canvases, and creates a div with class "canvas-container" to encapsulate both canvases.
Third, the canvases will have dynamic sizes. The user will select which size canvas they want to use to interact with the fabric canvas.
Fourth, I have looked at various links on stackoverflow to try, and some have come really close, but still no cigar. The one I am thinking of specifically is here if you'd like to check it out.
Fifth, there shouldn't be any additional css affecting any of the elements apart from bootstrap - with the exception of the canvas elements to affect their size (measured currently in % but may change to vw or vh).
---The Problem Statement---
Just to restate the problem, I am trying to center both canvases that have absolute positions. I think this might be best accomplished if I can center just the .canvas-container, since both canvases are encapsulated in it and since they have absolute positioning. Any thoughts on this?
Let me know if there is anything else I can do to clear up anything I may not have touched on.
Thank you in advance.
--edit--
Just to give a little more context, the light blue boxes will always be the canvas element that needs to be centered.
Here is an update regarding one of the proposed solutions from #SoluableNonagon (it is the post that has a parent and 3 children that are vertically, horizontally, and "both" aligned), so you can see what is going on... for reference, the gray bar at the bottom is horizontally aligned.
The green box is the #canvas_container element which shares the class col.
The light blue box is made up of both canvases.
Moving the css "up" on level to where the child becomes the parent and the new parent's contents becomes the child results in this
#Gagandeep Sangh 's solution without making proper changes to affect the one specific element.
After making the changes to affect the 1 element, the result is like so
Generally, when an element is position: absolute the parent is position: relative.
Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering top: 50%; transform: translateY(-50%);
.parent {
position: relative;
height: 200px; // needs height/width cause 'absolute' child takes no space
width: 200px;
border: 1px solid red;
}
.child-1 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid blue;
left: 50%;
transform: translateX(-50%);
}
.child-2 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid orange;
top: 50%;
transform: translateY(-50%);
}
.child-3 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class='parent'>
<div class='child-1'>horizontal</div>
<div class='child-2'>vertical</div>
<div class='child-3'>both</div>
<div>
The <div class="canvas-container"> can be centered respective to its parent <div class="col"> using position:absolute; and setting the col div to position:relative; but here comes a new issue that after setting the <div class="canvas-container"> as absolute it will flow out of its parent div and the height of parent div will collapse as it doesn't have any other content in it, than you need to add some height to that div also, so basically you can try this
.col{
min-height:500px;
position:relative;
}
.canvas-container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
Hope it works.

Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})

Different backgrounds when scrolling down

I am inspired by this website - http://henrikljunggren.se/ -
Does anyone know how to get two different backgrounds when scrolling down?
On this site, there are multiple div with the CSS property :
background-attachement: fixed;
This can be easily achieved with the help of css property background-attachement: fixed
If you have say 2 sections like this -
<div class="section-1">
</div>
<div class="section-2">
</div>
then use
.section-1 {
background: url(path-to-your-image);
background-attachement:fixed;
}
.section-2 {
background: url(path-to-your-image);
background-attachement:fixed;
}
This will easily give you the effect.

Issue with keeping a div class floating down with the page

I've been trying a few things but cannot get it to work. I have a div in the right column and I want it to float down to a certain point with the page while scrolling.
<div class="stickyDiv">
<div class="section mod-sticky" style="position: fixed; top: 70px;">
<p>Always float with page</p>
</div>
</div>
Is there any easy way to do this with jQuery? Or just css?
made a quick jsfiddle what I want is that as soon as it reaches class contentb it will scroll with the page
https://jsfiddle.net/agwrbjh8/1/
thanks
I am not sure I understood you. Do you mean something like this:
.mod-sticky {
position: fixed;
top: 70px;
border: 1px solid green;
right: 0;
}
<div class="stickyDiv">
<div class="section mod-sticky">
<p>floater</p>
</div>
dasf asd asdf asdf
<p style="height:800px">Lorem... long text</p>
</div>
I would look at the sticky-kit jQuery plugin.
And you would use it as so:
$('.stickyDiv').stick_in_parent({
parent: $('.content'),
offset_top: 70
});
JSFIDDLE DEMO
Had to restructure your HTML so that .stickyDiv is a child of the content div you intend to stick within, and then also added a margin-left to get it to the right of the content area. Might not work for your situation but I don't see how you can get it to stick how you want with your original markup.

How do you move two images to the left and right in a div element?

I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.
I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.
Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:
<div class="wrapper">
<div class="row">
<div class="col-md-4"><img src="source" alt="something" ></div>
<div class="col-md-4">Textbox</div>
<div class="col-md-4"><img src="source" alt="something" ></div>
</div>
You can also do it without grid system like Gerasimos answer.
Try using the CSS position property if this doesn't work try entering this code in your style sheet:
#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}

Categories