I cannot seem to find a similar question out there in Google nor Stack Overflow. Here is my situation.
I have a div being used for a background image. I want this image to be hidden except for what is behind a second div that moves around with the mouse.
The moving div is a 250px by 250px circle like this.
<div class="page-mouse-tail"></div>
<style>
.page-mouse-tail {
position: fixed;
float: left;
width: 250px;
height: 250px;
border-radius: 100%;
}
</style>
I move that div around using this Javascript:
"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function (event) {
Array.prototype.forEach.call(mouseTails, function (tail) {
tail.style.left = event.pageX + "px";
tail.style.top = event.pageY + "px";
});
});
Is there anyway I can make it so the background-image div can only be seen by what is "underneath" the mouse-tail div? Like a clip-path that is a circle, but moves with the mouse. I would like to only use CSS and Javascript, if possible. Thank you.
Yes by applying a giant box-shadow to your "page-tail" div
"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function(event) {
Array.prototype.forEach.call(mouseTails, function(tail) {
tail.style.left = event.pageX + "px";
tail.style.top = event.pageY + "px";
});
});
body {
background: url(http://wallpaper.ouzs.com/wallpapers/windows_dual_monitor2880x900.jpg);
background-size: cover;
}
.page-mouse-tail {
position: fixed;
float: left;
width: 150px;
/* for demo */
height: 150px;
border-radius: 100%;
border: 1px solid red;
box-shadow: 0 0 0px 9999px white;
}
<div class="page-mouse-tail"></div>
You can add this to the second div's style:
overflow: hidden;
Related
I want to create my background circle so that it will cover my whole width of container but the problems that I am facing are:
I am using wheel method which I want to change with scroll method but won't able to give a exact scroll position to start scrolling scrollTop is using start of my website but I want to start my scroll after 3rd container div.
In wheel function my background zooms-in with wheel up as well as well down I only want it to work on scroll down.
I want my zoom to zoom out once it reached width of whole screen.
my code:
const zoomElement = document.querySelector(".zoom");
let zoom = 1;
const ZOOM_SPEED = 1;
document.addEventListener("wheel", function(e) {
if (e.deltaY > 0) {
zoomElement.style.transform = `scale(${zoom += ZOOM_SPEED})`;
} else {
zoomElement.style.transform = `scale(${zoom -= ZOOM_SPEED})`;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
.downarrow {
position: relative;
left: 50%;
font-size: 2rem;
color: #f0f0f0;
}
.zoom {
background: #282828;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
left: 47.80%;
}
.container {
width: 100%;
height: 100vh;
}
<div class="container">
<div class="zoom"></div>
<p class="downarrow">↓</p>
</div>
I want to mimic this site downarrow effect:
https://lione.axiomthemes.com/
I have a div inside another div with transform scale applied.
I need to get the width of this div after the scale has been applied. The result of .width() is the original width of the element.
Please see this codepen:
https://codepen.io/anon/pen/ZMpBMP
Image of problem:
Hope this is clear enough, thank you. Code below:
HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS
.outer {
height: 250px;
width: 250px;
background-color: red;
position: relative;
overflow: hidden;
}
.inner {
background-color: green;
height: 10px;
width: 10px;
transform: translate(-50%);
position: absolute;
top: 50%;
left: 50%;
transform: scale(13.0);
}
JS
$(function() {
var width = $('.inner').width();
// I expect 130px but it returns 10px
//
// I.e. It ignores the zoom/scale
// when considering the width
console.log( width );
});
Use getBoundingClientRect()
$(function() {
var width = $('.inner')[0].getBoundingClientRect();
// I expect 130px but it returns 10px
//
// I.e. It ignores the zoom/scale
// when considering the width
console.log(width.width);
});
https://jsfiddle.net/3aezfvup/3/
i achieved your 130 by this
var x = document. getElementsByClassName('inner');
var v = x.getBoundingClientRect();
width = v.width;
You need the calculated value. This can be done in CSS.
Use calc() to calculate the width of a <div> element which could be any elements:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
I found this about this topic.
Can i use Calc inside Transform:Scale function in CSS?
For JS:
How do I retrieve an HTML element's actual width and height?
I have some code that moves an image/element across the screen multiple times. The idea is that I'm trying to create a simple add bar with the image moving within the add bar, the element acting as the border of the bar/the actual bar.
With my current setup, the image moves outside of the element during animation despite being places within the /.
fiddle (may need to find new image) :http://jsfiddle.net/rwowf5j8/3/
<body onload="setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 300, 800, 500)}, 600)">
<div id="Advert">
<img src="JS.png" id="test">
</div>
</body>
<script>
function anim(elem,style,unit,from,to,time) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
elem.style[style] = (from+step*(to-from))+unit;
if( step == 1) clearInterval(timer);
},30);
elem.style[style] = from+unit;
}
</script>
</body>
#Advert {
background-color: white;
border-style: solid;
border-width: 2px;
width: 500px;
height: 225px;
left: 300px;
}
#test {
position: absolute;
left: 140px;
}
Giving your container relative positioning and hiding the overflowing elements will stop your issue:
#Advert {
background-color: white;
border-style: solid;
border-width: 2px;
width: 500px;
height: 225px;
overflow: hidden;
position: relative;
}
Because the container is now relative I've also removed the left: 300px.
http://jsfiddle.net/rwowf5j8/6/
http://jsfiddle.net/rwowf5j8/5/
add
#Advert {
position: relative;
/*left: 300px;*/
overflow: hidden;
}
Also, left: 300px won't work unless you add position: relative.
I want to make the menu fixed on top when window scroll down over 160 pixel, but if the body content is too short, it will become an infinite loop, because if I scroll down over 160 pixel, menu will become fixed which means scroll height will turn to under 160 pixel, so script will make the menu relative back, how to solve this.
Demo
HTML
<div id="header">header</div>
<div id="content">content</div>
JavaScript
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll > 160) {
$('#header').css('position', 'fixed');
} else {
$('#header').css('position', 'relative');
}
});
CSS
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
background: black;
color: yellow;
position: relative;
padding: 6px;
}
#content {
width: 100%;
height: 780px;
background: gray;
}
when adding position fixed to menu, add also paddin-top for content (padding-top value equals header height + header top and bottom padding)
JS:
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll > 160) {
$('#content').css('padding-top', '72px');
$('#header').css('position', 'fixed');
} else {
$('#content').css('padding-top', '0');
$('#header').css('position', 'relative');
}
});
fiddle
you do not need any javascript here...so remove all js... and edit your css:
#header {
width: 100%;
height: 60px;
background: black;
color: yellow;
position: fixed; /* make menu header always fixed */
padding: 6px;
top:0px;
}
#content {
width: 100%;
height: 780px;
margin-top:72px; /* margin top 72px because of header height is 60px + pedding 6px*2 */
background: gray;
}
This is my problem, I have a div and inside 2 divs, one is centered and the other one is fixed on the left, the problem is when I resize the screen the centered div overlaps the fixed one, what I wanted to do is detect when the centered div overlaps the other div and change its left value with javascript, but is not working, any ideas?
This is my design:
<div id="content-wrap">
<div id="content">
</div>
<div id="leftbar">
</div>
</div>
and the CSS:
#content-wrap
{
clear: both;
float: left;
width: 100%;
}
#content
{
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
width: 760px;
overflow: auto;
}
#leftbar
{
background-color: transparent;
width: 200px;
height: 470px;
position: absolute;
top: 185px;
left: 50px;
}
and this is the javascript code:
window.onload = function Centrar() {
var leftBar = $get("leftbar");
if (leftBar != null) {
var content = $get("content");
var size = leftBar.offsetLeft + leftBar.offsetWidth;
if (content.offsetLeft < size) {
content.style.left = size + 20 + 'px';
}
}
}
Thanks in advance for any help.
The easiest fix would be to apply a min-width to your #content-wrap container that prevented the overlap from occurring:
#content-wrap {
clear: both;
float: left;
width: 100%;
/* #leftbar width x 2 + #content width */
min-width: 1160px;
}
However, if you want to use Javascript, you'll need to attach the code to the window load and resize events:
$(window).bind('load resize', function() {
var content = $('#content');
var leftbar = $('#leftbar');
// get the right edge of the #leftbar
var leftbarEdge = leftbar.width() + leftbar.offset().left;
// check if an overlap has occured and adjust #content left position if yes
if (leftbarEdge > content.offset().left) {
content.css({
left: leftbarEdge - content.offset().left
});
}
});
The last change you'll need to apply to get this working is to set #content to position: relative in the CSS so it respects the left property you're setting with Javascript:
#content {
position: relative;
/* remaining css */
}
You can see it in action here.