I'm doing a site with a "hidden" image. I hide the image using a dark overlay, but now I want the cursor to see through the dark overlay.
An almost working example is here: https://jsfiddle.net/swx5x38j/
What I want to know is, how I make the light div look through the dark overlay div. Is this somehow possible, or should I go for different solution? And does some have a hint on such one?
The code follows here as well. First the CSS:
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background: #fff;
}
The jquery is as follow
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
And last the HTML
<div id="image"></div>
<div id="overlay"></div>
<div id="light"></div>
instead an overlay, you could use a box-shadow:
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;box-shadow:0 0 0 3000px rgba(0,0,0,0.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<div id="light"></div>
You can create a fake image and calculate the offset of the background image like this:
CSS
* {
margin: 0;
padding: 0;
}
.image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
}
#image {
width: 800px;
height: 600px;
top:0px;
left:0px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#fakeImage {
position:absolute;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
background: #fff;
overflow:hidden;
}
HTML
<div id="image" class="image"></div>
<div id="overlay"></div>
<div id="light" style="display:none;">
<div id="fakeImage" class="image"></div>
</div>
JS
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
var _top = (- $('#light').offset().top) + 'px';
var _left = (- $('#light').offset().left) + 'px';
$('#fakeImage').css({'top': _top, 'left': _left });
});
The random image required a unique class with the same image.
JSFiddle example
Add a massive border to the #light and add a negative margin:
https://jsfiddle.net/mpcmvej6/
.
And remove #overlay.
This method seems the most simple to me.
The good part about this method is that there is no need to support box shadow and it does not require a second image element.
Another method is putting a copy of the image inside #light and move it in the opposite direction of #light.
Related
I have a div, imgCover that overlaps an image. imgCover has a background set at rgba(255,255,255,.7), but I am wanting the opacity to gradually go from 0.0 - 1.0.
Is there anyway that I can get the imgCover's opacity to be at 0.0 at the far left and then at the far right 1.0?
jsfiddle
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background-color: rgba(255,255,255,.7);
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>
Use linear gradient instead of background-color:
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>
The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>
Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});
I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>
I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>
I am not an expert in jQuery (and to be honest, I am taking my first steps).
I have the example below, and what I am trying to do is choose the direction of the expansion of my div. I am using animate() and expanding the width and height.
At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.
I want it to know if there is another way to get to this, without changing the float of #map.
jsFiddle.
Snippet:
$(document).ready(function () {
$('#expand').click(function (expandir) {
this.value = 'collapse';
if ($(this).data('name') === 'show') {
$('#map').animate({ width: '600', height: '400' });
$('#inside').animate({ width: '600', height: '336' });
$('#expand').animate({ top: '370' });
$(this).data('name', 'hide');
} else {
this.value = 'expand';
$('#map').animate({ width: '300', height: '250' });
$('#inside').animate({ width: '300', height: '169' });
$('#expand').animate({ top: '220' });
$(this).data('name', 'show');
}
});
});
html, body {
width: 100%;
height: 100%;
}
#map {
z-index: 1;
position: relative;
width: 300px;
height: 250px;
border: 1px solid;
}
#expand {
z-index: 4;
position: absolute;
top: 220px;
left: 10px;
width: 70px;
height: 25px;
}
#inside {
z-index: 2;
position: absolute;
top: 40px;
right: 0;
background-color: #000000;
width: 300px;
height: 169px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#close {
position: absolute;
margin-top: 0;
margin-left: 0;
background-color: #34FF56;
width: 100px;
height: 50px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#btn {
z-index: 3;
position: relative;
float: left;
margin: 2px;
background-color: #FF9834;
width: 70px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<input type="button" data-name="show" value="expand" id="expand" />
<div id="inside"></div>
<div id="btn"></div>
</div>
You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}