When i hover on top of div tag then am showing one css overlay and i like to add couple of buttons (Like and Share) on top of overlay how can i do that?
this is my code for hover
.portfolio-item img {
width:100%;
vertical-align:top;
}
.portfolio-item:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.portfolio-item:hover:after {
opacity:1;
}
#like {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
javascript used to create div
var element = document.createElement("div");
element.setAttribute("id",listItem"+i);
element.setAttribute("class","col-md-4 portfolio-item");
output.appendChild(element);
javascript to show overlay icon
var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);
document.getElementById("red"+i).appendChild(ele);
html code
<div id="output" class="col-lg-12 container"></div>
Now it look like this on hover"
and am expecting something like this:
You can create a child div inside the main container
<div id="output" class="col-lg-12 container">
<img src="SOMETHING"/>
<div><i class="fa fa-heart"/><span class="counts">23</span></div>
</div>
In css
#output img {
width:100%;
height:100%;
}
#output > div{
display:none;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
z-index: 10;
}
#output > div:hover{
display:block;
}
Assuming you have setup font awesome properly,
you could do something like this when you are creating the overlay.
var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);
var faHeart = document.createElement("div");
faHeart.setAttribute("class","fa fa-heart-o");
ele.appendChild(faHeart);
Related
I'm not a front end developer so sorry if my question look easy. I search the whole day figuring out how to create a z-index like effect but with a special condition. (Z-index don't work for what I want to accomplish and it's normal).
I would like to find a way to make the text disappear and appear when it cross a div. But the problem that I have with z-index is the following : the text of the first div do not disapear when it cross the red div.
https://jsfiddle.net/2bry9nuj/20/
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>>
</div>
#firstDiv
{
position: relative;
width: 100%;
height: 500px;
background-color:green;
z-index: 1;
}
#secondDiv
{
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1
{
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
If you don't understand the problem properly you can see a demo on the homepage of this website just scroll down and you will see. https://www.lucidmotors.com/
You are almost good, you simply need to clip the text to its section. You can use clip-path for this
#firstDiv {
position: relative;
width: 100%;
height: 500px;
background-color: green;
}
#secondDiv {
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#firstDiv,
#secondDiv {
clip-path:inset(0);
}
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>
</div>
position:fixed doesnt respect z-index cause of the CSS spec or whatever, so you need javascript for this. Please take a look at the following code
text = document.getElementsByTagName("h1");
window.addEventListener("scroll",scroll);
bounds = [];
for(i=0; i<text.length; i++){
bounds.push(text[i].getBoundingClientRect());
}
scroll();
function scroll(){
for(i=0; i<text.length; i++){
text[i].style.top = this.scrollY - bounds[i].top + "px";
}
}
body{
margin:0;
}
#firstDiv, #secondDiv{
height:100vh;
background:grey;
overflow:hidden;
position:relative;
}
#secondDiv{
background:tomato;
}
h1{
position:absolute;
text-align:center;
line-height:100vh;
width:100%;
}
<div id="firstDiv">
<h1>
test1
</h1>
</div>
<div id="secondDiv">
<h1>
test2
</h1>
</div>
cheers
I have three inline-block divs on my page (see JSFiddle):
Div #one contains a button 'Show' and is absolutely positioned so that it overlaps the div #two. When 'Show' is clicked, div #two slides out from under #one using translateX, like so:
When this happens, I would like to push div #three down so that it appears just below div #two, like so:
I'm not sure how to go about achieving this using pure CSS that doesn't involve moving #three along the Y-axis using #three { transform: translateY(...) }. I was wondering if translateX is the wrong approach here since it does not disturb the position of neighbouring elements, but I don't know what to use in its place.
As I have already stated in the comment section: It really depends on what your final goal is and what content you put in your divs - how everything is structured.
I feel like this is more of a XY-problem. I.e. the design-choice demands for a special case/solution that could be solved in another way so that the "hacky" solution does not have to exist in the first place.
Nevertheless, since you have asked for it I give you a solution for this specific problem:
const container = document.querySelector('.container');
const slide = document.getElementById('show');
const done = document.getElementById('hide');
const two = document.getElementById('two');
const right = document.querySelector('.right');
show.addEventListener('click', function() {
two.classList.add('show');
right.classList.add('shift');
});
hide.addEventListener('click', function() {
two.classList.remove('show');
setTimeout(function() {
right.classList.remove('shift');
}, 1000)
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
transform: translateX(0);
}
.right.shift {
clear: left;
display: block;
float: none;
transform: translateX(100px);
}
#one,
#two {
height: 100%;
}
#one {
background-color: lightblue;
position: absolute;
z-index: 1;
}
#two {
background-color: yellow;
transform: translateX(0);
transition: transform 1s;
}
#two.show {
transform: translateX(100%);
}
<div class="left">
<div id="one">
Click 'Show' to show panel 2
<button type='button' id='show'>Show</button>
</div>
<div id="two">
Click 'Hide' to hide panel 2
<button type='button' id='hide'>Hide</button>
</div>
</div>
<div class="right">Some other content</div>
Alternative
You could implement a spoiler section that you can toggle to display more information if it is desired.
const spoilerBtn = document.getElementById('spoiler-btn');
const spoiler = document.getElementById('spoiler');
spoilerBtn.addEventListener('click', function() {
spoiler.classList.toggle('show');
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
}
#spoiler {
background-color: tomato;
display: none;
}
#spoiler.show {
display: block;
}
<div class="left">Aside text here</div>
<div class="right">
Toggleable section: <button id="spoiler-btn">toggle</button>
<div id="spoiler">This content can be toggled</div>
<p>Some other content</p>
</div>
My modal display an intern URL with iFrame. I'm looking to open this intern URL when you click inside the modal.
My code bellow doesn't work. When I click inside the modal nothing happening. The code works only when I click on the close button.
Thanks for help
See the code updated with your answer. It still doesn't work. My close button doesn't work anymore
$('#cosmeto').click(function() {
$('#cosmetomodal').show().addClass('modal-open');
});
$('#closec').click(function() {
var elem = $('#cosmetomodal');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
$('#myiframe').on('click', function(){
elem.removeClass('modal-open');
elem.hide();
window.open('google.fr','');
});
.cosmetomodal {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
padding-top: 100px; /* Location of the box */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.cosmeto-content {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 300ms ease-in-out;
margin: auto;
border-radius: 5px;
overflow: scroll;
text-align: center;
}
.cosmetomodal.modal-open #cosmeto-content {
opacity:1;
top:50%;
}
#myiframe {
position: fixed;
left:0;
z-index: 999;
top:0;
right:0;
bottom:0;
cursor: pointer;
}
<div id="cosmetomodal" class="cosmetomodal" style="display:none;">
<div id="cosmeto-content" class="cosmeto-content">
<div id="myiframe"></div>
<iframe src="principes_actifs.html" onload="iframeResize(this);" style="border:none;" ></iframe>
<button id="closec" type="button">Close </button>
</div>
</div>
<div id="file" class ="container">
<input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" height="250px" width="250px" />
</div>
You can place an invisible div <div class="myiframe"></div> that covers the area of the popup being set to absolute, and use javascript to say when it's clicked go to url. Have to set the correct z-indexes with css.
Working jsfiddle: http://jsfiddle.net/e351ck0d/1/
Remove ,'_blank' from window.open('https://google.com','_blank'); and write instead ,'_self' if want to open the url in the same window.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="file" class ="container">
<input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" height="250px" width="250px"/>
</div>
<div id="cosmetomodal" class="cosmetomodal" style="display:none;">
<div id="cosmeto-content" class="cosmeto-content">
<div class="myiframe"></div>
<iframe src="principes_actifs.html" onload="iframeResize(this);"></iframe>
<button id="closec" type="button">Close </button>
</div>
</div>
CSS:
.cosmetomodal {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.cosmeto-content {
position:fixed;
margin-bottom: 150px;
width:70%;
left:50%;
padding:15px;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 300ms ease-in-out;
border-radius: 5px;
overflow: scroll;
text-align: center;
z-index: 1;
}
.cosmetomodal.modal-open #cosmeto-content {
opacity:1;
top:50%;
overflow: scroll;
}
.myiframe {
position: absolute;
left:0;
z-index: 2;
top:0;
right:0;
bottom:0;
cursor: pointer;
}
#closec {
position: absolute;
z-index: 99999;
}
JS:
var elem = $('#cosmetomodal');
$('#cosmeto').click(function() {
$('#cosmetomodal').show().addClass('modal-open');
});
$('.myiframe').on('click', function(){
elem.removeClass('modal-open');
elem.hide();
window.open('https://google.com','_blank');
});
$('#closec').click(function() {
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
EDIT: to fix the scroll bar, you can set the absolute overlay div to start 30px (or use %) from right, like this:
.myiframe {
position: absolute;
left:0;
z-index: 2;
top:0;
right:30px;
bottom:0;
cursor: pointer;
}
and the iframe to occupy the whole modal width:
.cosmeto-content iframe {
width: 100%;
}
EDIT 2: a slightly different approach, while i start to understand what you're looking for: http://jsfiddle.net/e351ck0d/2/
I've set the iframe to show in its entire height, but a fixed height to the popup, so you'll only scroll the popup, keeping both the invisible div with link and scroll functionality). Also i had to place the button outside (check the html part too.
I have a very simple loading icon, the div is full screen and the image is just a gif:
<div id="loading" class="a">
<img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" />
</div>
Here are the styles:
.a {
display: none;
position: absolute;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
.b {
display: block;
position: absolute;
margin: 0 auto;
}
When I want to display it, I do so like this:
var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;
$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();
And to hide:
$("#loading").hide();
This works fine in firefox but doesn't seem to work in Chrome or on my iPhone. I can't see an error anywhere - any idea why some browsers don't like it?
Thanks
You should do something like this:
.hidden {
display:none;
}
Then you can add and remove the class to show and hide it.
To hide:
$("#loading").addClass("hidden");
To show:
$("#loading").removeClass("hidden");
Try this one
JavaScript
$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(200).fadeOut('slow');
$('body').delay(200).css({'overflow':'visible'});
});
CSS
/* cover complete screen */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:#FFF;
z-index:9999; /* makes sure it stays on top */
-webkit-transition:none;
transition:none;}
/* preloader container at the middle */
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
text-align:center;
}
HTML
<body>
<div id="preloader">
<div id="status">
<h4>Loading...</h4> <!-- include your loading img here -->
</div>
</div>
<h3>This is a body text</h3>
</body>
I am trying to unveil a responsive background image. Basically, I have a value on load. Let's say 50%. So I want half of my image to be sharp, and the other half to be blurred.
Never done this before so I had the idea to produce two images : one plain, one blurred.
HTML - Two empty divs. Those divs are in a container-fluid div, so their width change at every window resize, that's important.
<div class="col-lg-9 left-header">
<div class="overlay">
</div>
<div class="bg">
</div>
</div>
<div class="col-lg-3 right-header">
// some stuff
</div>
Now, everything else has to be js and css.
So I start to style my divs accordingly.
Blurred bg, notice absolute positionning :
.overlay {
background:url('../img/overlay.jpg');
height:580px;
width:100%;
background-position:right;
background-size:cover;
position:absolute;
right:0;
}
Non-blurred bg
.bg {
background:url('../img/bg.jpg');
background-size:cover;
background-position:right;
height:580px;
}
As you can see in the jsfiddle https://jsfiddle.net/yqdx9vgc/, there is a big problem especially at large widths. Indeed, I wanted to play with the width parameter of the .overlay. But then, the two background cover images aren't of the same proportions, so the effect is not working.
Ideally, in the end, I want to set the width with jquery. For instance, if my value is 50%, then I tell jquery to put .overlay at 50% width. But my solution isn't working, how could I keep the same dimensions for both background images with different div sizes ? While keeping the responsive effect
I achieved this effect with pure CSS, enjoy:
https://jsfiddle.net/fk9rbgv5/1/
Here is the code:
.unveil-container {
width:100%;
position:relative;
overflow:hidden;
background-size:100% 100%;
background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
padding:0;
/* This is for keeping proportion - remove if you do not want */
display: inline-block;
width:100%;
}
/* this whole before is for proportion */
.unveil-container::before {
content:'';
display: block;
margin-top: 50%;
}
.overlay {
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
height:100%;
/* PLAY WITH WIDTH */
width:50%;
top:0;
background-position:100% 0;
background-size:200% 100%;
position:absolute;
left:50%;
-webkit-filter: blur(5px);
}
.bg {
position:absolute;
left:0;
top:0;
width: 50%;
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size:200% 100%;
background-position:0%;
height:100%;
}
<div class="col-lg-9 left-header unveil-container">
<div class="overlay"></div>
<div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>
You can set 2 elements, one inside the other, and then translate them in opposite directions using translate.
Animating them is easy with javascript.
With this layout, the elements are 100% width, and the background can be cover (or contains)
var target1, target2, step;
function move () {
target1.style.transform = "translateX(" + step + "%)";
target2.style.transform = "translateX(-" + step + "%)";
step -= 1;
if (step < 0) step = 100;
}
function start () {
target1 = document.getElementById('moving');
target2 = target1.children[0];
step = 50;
setInterval(move, 20);
}
.base {
width: 80%;
height: 300px;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
z-index: 2;
overflow: hidden;
transform: translateX(50%);
}
.overlayimage {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
transform: translateX(-50%);
-webkit-filter: blur(5px);
-webkit-filter: invert();
}
<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>
I changed your filter to make it more visible ...