I have board element which contains 25 tiles arranged in grid layout. I want it so that the user can drag the tile element, but can not see it being dragged. It's kind of a game. So I managed to remove the ghost image while dragging, but the issue now is the cursor. I am not able to change the dragging cursor to a normal cursor. Here is what the webpage looks like:
Here, is the cursor that is showing while I drag:
Here, is the cursor that I want when I drag (pointer cursor):
Here is my javascript code:
let tileMap =
[
["00","10","20","30","40"],
["01","11","21","31","41"],
["02","12","22","32","42"],
["03","13","23","33","43"],
["04","14","24","34","44"]
]
tileMap.forEach(tileSet => tileSet.forEach(tileID => {
//Creating tile element
let tile = document.createElement('div');
tile.classList.add('tile')
tile.id = tileID;
tile.draggable = true;
//Adding mouse action listeners to the tile element
tile.ondragstart = e => handleDragStart(e);
tile.ondragover = e => handleDragOver(e);
tile.ondragend = e => handleDragEnd(e);
//Adding the tile element to the board
document.querySelector('#board').appendChild(tile);
}))
function handleDragOver(e) {
}
function handleDragStart(e) {
let ghostImage = document.createElement('img');
ghostImage.src = '';
ghostImage.alt = '';
e.dataTransfer.setDragImage(ghostImage, 0, 0);
}
function handleDragEnd(e) {
}
My 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">
<title>Flow Free (vanilla-version)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="board">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Here's the CSS file:
body {
background-color: darkslategray;
padding: 0; margin: 0;
}
#wrapper {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100vw; height: 100vh;
}
#board {
aspect-ratio: 1/1;
width: 80vmin;
background-color: aliceblue;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
border: 5px solid aliceblue;
}
.tile {
position: relative;
background-color: darkcyan;
border: 2px solid aliceblue;
overflow: hidden;
}
.stamp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 80%;
border-radius: 50%;
}
.connector-direct {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(90deg);
width: 50%;
height: 100%;
}
.connector-turn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.connector-turn::before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: darkcyan;
width: 25%;
height: 25%;
}
.connector-turn::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 75%;
height: 75%;
border-right: 100vw solid darkcyan;
border-bottom: 100vh solid darkcyan;
}
I have tried couple of things but couldn't come up with an answer. Although, there is an alternative here you can use to get your desired effect. I think it is browser/platform dependent also. So, it is not going to be a generic kind of thing.
From what I have seen on internet, they have given some options to do this. I had tried those things in my system but that doesn't seems to work. There are always some alternatives out there to do same things. As you can see in the above link, they also have implemented the drag and drop feature without using the draggable attribute.
There is also one draggable module in jQuery, you can check that.
P.S. I'm using Linux system, so maybe there also some difference across other OS. That's why I said it won't be a good/generic way.
Related
I created a vertical line on my webpage, and want the line to grow/shrink as the user scrolls by it. Right now the line is just staying the same height the entire time. If you look at this website, https://robbowen.digital/ a good example of what I would like is shown. I have been looking into parallax but can't quite seem to figure it out. Can anyone help? Is this something simple that can be implemented? Here is my codepen https://codepen.io/atrain42/pen/OJQLPqx
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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="vertical"></div>
<header>
<h1>hello</h1>
</header>
<section>
<h1>section 01</h1>
</section>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background-color: aquamarine;
z-index: 1;
}
header h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
section {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgb(235, 198, 245);
z-index: 1;
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
.container {
position: relative;
z-index: 2;
}
.vertical {
position: absolute;
top: 30%;
left: 20%;
height: 40rem;
z-index: 2;
color: black;
border-right: 2px solid black;
background-attachment: fixed;
}
You can do so adding an event listener to scroll and set the height of div according to the scroll value, take a look:
const verticalLine = document.getElementById("vertical")
document.addEventListener('scroll', function(e) {
// use division by two to limit the height size
scrollPosition = window.scrollY / 2 ;
// set the current scroll position as the height of div
verticalLine.style.height = `${lastKnownScrollPosition}px`
});
See the example on codepen
the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>
I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!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="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>
Actually i want to do same as image
i am trying this css
.av-image-caption-overlay{
bottom: -6em !important;
background-color: black !important;
height: 200px !important;
opacity: 0.5;
left: 0;
filter: alpha(opacity=50) !important;
}
but not work perfectly i am sharing result.
It's not the most elegant nor is it the only way to do it, but this will work.
body {
font-family: sans-serif;
}
.av-image-caption-overlay {
position: absolute;
}
.av-image-caption-overlay img {
max-width: 400px;
}
.av-image-caption-overlay span {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, .5);
background: linear-gradient(0deg, rgba(0,0,0,.75) 25%, rgba(0,0,0,0) 100%);
height: 100px;
left: 0;
right: 0;
color: white;
padding: 24px;
font-size: 20px;
display: flex;
align-items: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="av-image-caption-overlay">
<span>CAPTION</span><img className="text-image-list-image" src="https://i.stack.imgur.com/xm82O.jpg" alt="" />
</div>
</body>
</html>
Background linear-gradient should do it.
The key thing is create an element inside the div you want to style, give it the following properties, and it should work.
div {
position: relative;
background: url(/* Some image url */); /* Or you could append an 'img' tag into this div like I did in the codepen below */
}
.overlay { /* Or you could use the '::before' pseudo-element of the div here */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(transparent, #000a);
z-index: 999;
}
Here is what I was able to do on Codepen about this https://codepen.io/emekaorji/pen/xxLvQaW
I'm trying to make my own custom UI for a video player. It will include a options toggle button which will open a options container. The options container should not close when the user clicks anything within the container and the options toggle should toggle correctly. How can I make the options container hide when the user clicks else where on the screen? Thanks
I will also be inserting a number of video players in a single document.
var oc = document.querySelector(".options_container"),
ot = document.querySelector(".options_toggle");
oc.style.visibility = "hidden";
ot.onclick = function() {
if (oc.style.visibility == "hidden") oc.style.visibility = "visible";
else oc.style.visibility = "hidden";
};
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You may try like this:
$(document).ready(function(){
$('.options_toggle').click(function(event){
event.stopPropagation();
$(".options_container").slideToggle("fast");
});
$(".options_container").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".options_container").hide();
});
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
display:none;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You can register a function to listen on click event. If the user clicks anywhere on the screen which is not container then it will close all the containers. You can further modify the function to implement more complex validation.
function closeContainers() {
// Get all the containers
let containers = document.getElementsByClassName("container");
// If the user hasn't clicked on the current container then remove the visibility
containers.forEach(function (container) {
if (container.classList.contains('visible')) {
container.classList.remove('visible');
}
})
}
// Close the container if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.container')) {
closeContainers();
}
}
I want a button that splits the screen when clicked. The button is on a html page called PF1.1.html and when the button is click i want it to spilt the screen but the new screen created to be a page named PF1.html and so on. No matter how many times u click the button it keeps creating split screen pages with the PF1.html.
This is the split screen test: https://jsfiddle.net/v1p5h9g7/1/
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="split left">
<div class="centered">
<h2>Don't know how to make it open PF1.HTML and how to resize it after</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Test</p>
</div>
</div>
Here it is, i think you want something like this - here is the code mentioned and also you can check out this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Split screen on click</title>
<!--added text to remove the answer-->
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
/* height: auto; */
height: auto;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
#child{
width: 200px;
height: 200px;
border: 2px solid #000000;
border-radius: 3px;
}
#clicker{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
var sec = document.createElement("DIV");
sec.setAttribute("id", "child");
document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>