Moving a div within a div on mouse move - javascript

Can someone help me with a issue I have. So I have two divs div1 needs to be the height and width of the browser screen and over flow hidden.
Within that div I have another div div2 which is twice the width and hight of the first div. I then need to move that div around on mouse move.
#view-window {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#background-wrapper {
background: url('../images/background.png') no-repeat center center;
background-size: 100% 100%;
position: absolute;
}
<div id="view-window">
<div id="background-wrapper">
</div>
</div>
Kind of like this but when my mouse is in the top left corner of the view box the top top of the red box should be in that corner also.
https://codepen.io/anon/pen/bqKogL

Try this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
#move {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
background: green;
}
</style>
<div id="move">
</div>
<script type="text/javascript">
var div = document.getElementById('move');
document.addEventListener('mousemove',function(e) {
div.style.left = e.pageX+"px";
div.style.top = e.pageY+"px";
});
</script>
</body>
</html>

Use below code:
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY,'left': e.pageX});
});
$(".outer").height($(window).height());
$(".outer").width($(window).width());
});
.moveAble {
position: absolute;
}
.info {
background-color:red;
height: 50px;
width:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="moveAble">
<div class="info"></div>
</div>
</div>

Related

Using main scrollbar to scroll inner div then scroll rest of page

I have a container div right-col inside of my hero div, that holds two inner divs. The inner divs are sticky and the container div is scrollable to give the illusion of cards sliding up.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="left-col">h</div>
<div class="right-col">
<div class="top">1st card</div>
<div class="bottom">2nd Card</div>
</div>
</div>
<div class="projects">a</div>
<div class="contact-footer"></div>
<div></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>
CSS:
body{
overflow: auto;
background-color: black;
}
.hero {
display: flex;
flex-direction: row;
}
.left-col{
width: 40vw;
background-color: black;
height: 100vh;
}
.right-col{
min-width: 60vw;
background-color: blue;
overflow: auto;
height: 100vh;
}
.top{
height: 100vh;
background-color: chartreuse;
position: sticky;
top: 0;
}
.bottom{
height: 100vh;
background-color: orange;
position: sticky;
top: 10%;
}
.projects{
height: 100vh;
background-color: crimson;
position: sticky;
top: 0;
}
However, the scroll bar is on the inside of the div right-col and independent from the main scrollbar. Is there a way that I can use the main scrollbar to scroll through the container div till it reaches the bottom then continues to scroll through the rest of the page? Possibly using js or jquery?
You could try adding the following css. It will make the inner scroll bar 0 width, so basically it will be invisible but still work.
.hero ::-webkit-scrollbar {
width: 0px;
}
If you need something more specific you could try using the scroll event to possibly synchronize both scroll bars or something.

How do I make `window.scrollTo` more precise?

When I click on box1, the scroll effect needs to scroll down to box2 (top edge of the blue box). This works fine on web, but I'm not able to replicate the effect at a precise point on mobile.
document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: 507,
behavior: "smooth"
});
});
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
}
.gap {
width: 100%;
height: 400px;
background-color: yellow;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="gap"></div>
<div class="box2" id="box2"></div>
<div class="gap"></div>
<div class="box3" id="box3"></div>
</body>
When clicking on box1 in an IPhone simulator, scrollTo takes me to the bottom half of the yellow box.
You're scrolling to a specific coordinate (top: 507), which is going to be different on mobile.
Use JavaScript to fetch the top of coordinate of the specific element you want to scroll to:
var box2 = document.getElementById("box2");
document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: box2.getBoundingClientRect().top,
behavior: "smooth"
});
});

How to put a content inside the box after it has been hovered?

I'm planning to make a sticky note kind of style and I want to show the content inside the box without it being displayed first when the hover is not active. Like here in my code example: Please help!
body {
margin: 45px;
}
.box {
display:inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
}
.container {
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box{
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
fiddle
Hey guys, I'm sorry if my explanation of what I wanted to achieve wasn't clear. There's a pink box that is visible when not hovered and there's a violet box inside when it's hovered. I want the paragraph inside the violet box hidden when the pink box is not hovered. But my code shows here that even the pink box isn't hovered, the paragraph inside the violet box is already been displayed.
You have to set the position: absolute of the inside div i.e. .box to place it over the text. Remember to set position: relative to the parent div i.e. .container.
Absolute positioned element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned
relative to its closest positioned ancestor if any; otherwise, it is
placed relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins.
More help on position property
body {
margin: 45px;
}
.box {
display: inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
I hope this will help you.

How can I make a slideshow using HTML, CSS, and Javascript displaying an app's images on an image of an iPhone?

This is what I have so far
This is the code that I used to get this image on there:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"type="text/css"href="index.css"/>
<title>My Title</title>
</head>
<body>
<div class="slider">
</div>
</body>
</html>
and here is the CSS I used for my div "slider" class
.slider{
background-image: url('images/background.png');
height: 100%;
width: 50%;
position: absolute;
background-repeat: no-repeat;
}
So how can I make a div INSIDE of this div, which will allow me to display a slideshow of my app's images? I want it to be very similar to these websites:
shazam.com
instagram.com
venmo.com
I don't know how to fit these images the right way, can somebody please help?
If I understand you correctly, you are talking about something like this
JSFiddle Demo
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-1195){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
.mask {
position: absolute;
left: 31px;
top: 122px;
width: 239px;
height: 342px;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195px;
height: 342px;
}
.page {
width: 239px;
height: 342px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<img src="https://d3sq5bmi4w5uj1.cloudfront.net/images/brochure/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page" style="background: red;"><img src="https://www.w3schools.com/w3images/fjords.jpg"/></div>
<div class="page" style="background: blue;"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"/></div>
</div>
</div>

Javascript/ CSS webkit filter - remove blur on specific element

I'm trying to blur the background page and popup a loading box that is NOT blurred. I would think the blur(0px) would remove the blur on the loading div. However, the popup box also remains blurred.
How can I remove the blur for a specific element only?
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
<html>
<body id="blurme">
<h1>Welcome to My Website</h1>
<div id="loading">
Please wait
</div>
</body>
</html>
Here's the CSS the loading box
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
display:none;
}
This is an issue of inheritance. By moving the blurme id to another div, the loading div ceases to be a child of the blurme object: The first letter in CSS is for cascading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
</body>
</html>
This should fix the problem.
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
</body>

Categories