Contain a large draggable child div inside smaller parent div - javascript

I would like to prevent a larger div from being dragged out of smaller div, like facebook does with it's profile images.
Does anyone have an idea of how I would go about to do this?
All the best, Laurens
In the following link I give an example of what i mean.
draggable_outside
PS: I'm sorry, I didn't get the JS section to work in the code snippet, it's my first post. I wrote it as a script in the HTML section.
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable();
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div

You can use jQuery draggable function as follows.
Here in drag event we reset x and y if they cross the boundaries.
See the fiddle here
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable(
{
drag: function(event, ui) {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
// console.log(xPos);
// console.log(yPos);
if(ui.position.left>250)
{
ui.position.left=250;
}
if(ui.position.left<-40)
{
ui.position.left=-40;
}
if(ui.position.top<-90)
{
ui.position.top=-90;
}
if(ui.position.top>200)
{
ui.position.top=200;
}
}
});
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div

Related

Unwanted blinking effect on button

I want to show a clickable button over the mouse cursor, whenever the user hover's over an image.
Code I am using: codepen
const box = document.getElementById("box");
function movebox(e) {
box.style.left = event.clientX - 20 + 'px';
box.style.top = event.clientY - 20 + 'px';
box.style.display = 'block';
}
function removebox() {
box.style.display = 'none';
}
function click() {
console.log("clicked")
}
#maindiv {
border: 1px solid blue;
padding: 1px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
min-height: 100vh;
}
#maindiv img {
max-width: 400px;
max-height: 400px;
object-fit: scale-down;
border: 1px solid red;
}
#box {
position: absolute;
z-index: 100;
display: none;
}
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script><div id="maindiv">
<img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onmousemove="movebox(event)" onmouseout="removebox()" />
<button id="box" class="btn btn-primary" onclick="click()">click</button>
</div>
Problems:
Getting unwanted blinking effect on button.
I have tried using the pointer-events: none property on button, but it also disables the onclick events.
Your function can not be named "click" because when you call it you are calling the built in click method.
Updated your code to rely on CSS to show and hide the element. Added hove to the img and the button.
Fixed a bug where you did not account for scroll position.
const box = document.getElementById("box");
function movebox(e) {
box.style.left = window.scrollX + event.clientX - 20 + 'px';
box.style.top = window.scrollY + event.clientY - 20 + 'px';
}
function clickMe() {
console.log("clicked")
}
#maindiv {
border: 1px solid blue;
padding: 1px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
min-height: 100vh;
}
#maindiv img {
max-width: 400px;
max-height: 400px;
object-fit: scale-down;
border: 1px solid red;
}
#box {
position: absolute;
z-index: 100;
display: none;
transition: all .25s;
}
#maindiv img:hover + #box,
#box:hover
{
display: block;
}
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script><div id="maindiv">
<img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onmousemove="movebox(event)" />
<button id="box" class="btn btn-primary" onclick="clickMe()">click</button>
</div>

making two anchor tags with jquery

I am looking to add two anchor links when the mouse enters #introand hide intro and when the mouse leaves the original intro shows.
$("#intro").on("mouseenter", function() {
var link = $("<a>");
var link2 = $("<a>");
link.attr("href", "en.html");
link2.attr("href", "fr.html");
link.text("Welcome!");
link2.text("Bienvenue!");
$("#intro").addClass("link link2");
$("#intro").html(link && link2);
});
$("#intro").on("mouseleave", function() {
show(slow, this)
});
jQuery:
$(document).ready(function(){
$("#intro").mouseover(function() {
$(this).addClass("link link2");
$("#intro a").show();
$("#intro h1").hide();
});
$("#intro").mouseout(function() {
$(this).removeClass("link link2");
$("#intro a").hide();
$("#intro h1").show();
});
});
#intro {
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
}
#intro a{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
<h1>Intro</h1>
<a href='en.html'>Welcome!</a>
<a href='fr.html'>Bienvenue!</a>
</div>
CSS:
#intro {
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
}
#intro a,
#intro:hover h1{
display:none;
}
#intro:hover a{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
<h1>Intro</h1>
<a href='en.html'>Welcome!</a>
<a href='fr.html'>Bienvenue!</a>
</div>

Drag-gable item is not moving . How to solve it?

I am trying to implement code from here. I have tried adding necessary files links but still code is not working as expected.It should mover within the bound of container. But
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function() {
Draggable.get('.slide').applyBounds("#container");
});
#container {
display: block;
position: relative;
height: 200px;
width: 70%;
border: solid 1px red;
}
.slide {
display: block;
position: absolute;
height: 20px;
width: 20px;
background: red;
}
.green {
background: green;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script type="text/javascript" src="grabbb.js"></script>
<link rel="stylesheet" href="grabb.css">
<!-- <script type="text/javascript">
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function(){
Draggable.get('.slide').applyBounds("#container");
});
</script> -->
</head>
<body>
<div id="container">
<div class="slide one"></div>
</div>
<button>Change bounds</button>
</body>
</html>
Drag-gable item is not moving anywhere. Please help me finding the error. Thank you.
Console Errors:
Uncaught TypeError: Cannot read property 'applyBounds' of undefined
at grabbable.html:20
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
To make it work for you, connect these libraries that are on top:
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function(){
Draggable.get('.slide').applyBounds("#container");
});
#container{
display: block;
position: relative;
height: 200px;
width: 70%;
border: solid 1px red;
}
.slide{
display: block;
position: absolute;
height: 20px;
width: 20px;
background: red;
}
.green{
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
<div class="slide one"></div>
</div>

Remove height in DOM while using jQueryUI resizable

I'm using flex to make a responsive layout for my web-app.
I'm using jQuery UI on my navigator panel to be able to resize it. Unfortunately, when the resize event is triggered, jQuery UI inserts in the DOM a hard-coded height for my element, even if I specify the handles in the resizable settings.
Here's what I get in the DOM when the resize event is triggered:
<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
I want to get rid of all the the other styles except the width.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
.mainWrapper_1
{
display: flex;
backgound: gold;
height:100%;
}
.mainWrapper_1 .navigatorManager
{
background: tomato;
flex: 0 0 30px;
}
.mainWrapper_1 .mainWrapper_2
{
background: gray;
flex: 1;
display: flex;
flex-direction: column;
}
.topSideBar
{
height:50px;
background: yellow;
}
.mainWrapper_3
{
flex: 1;
background: cyan;
display:flex;
}
.navigator
{
flex: 0 0 auto/*100px*/;
background-color: green;
}
.mainWrapper_4
{
flex: 1;
display:flex;
flex-direction: column;
background: red;
}
.tabs
{
height:50px;
background: pink;
}
.mainWrapper_5
{
flex: 1;
background: magenta;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<body>
<div class="mainWrapper_1">
<div class="navigatorManager">side</div>
<div class="mainWrapper_2">
<div class="topSideBar">
top side bar
</div>
<div class="mainWrapper_3">
<div class="navigator">
navigator
</div>
<div class="mainWrapper_4">
<div class="tabs">
TABS
</div>
<div class="mainWrapper_5">
MAIN
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"});
});
</script>
</html>
Try removing only the height attribute, the other attributes: top and left are responsible for positioning the .navigator and is probably essential for the resize feature to function. To remove an attribute you can try removeAttr() jQuery method or .removeAttribute() JavaScript method. The example below is using .removeAttr() and has .removeAttribute() commented out. If you prefer the latter just swap the comment marks to the other line.
BTW, your code had some weird placements like...
...the <script> tags being placed after the closing </body> tag.
<script> tags should either be situated at the <head> after <link> and <style> tags.
OR
<script> tags can be placed before the closing </body> tag.
Also there was a <link> tag outside of the <head>.
Although I believe it's ok to place a <link> tag outside of the head, it should be in the most possibly highest position possible (i.e. the head under any <meta> tags.). This is because the browser will render styles as they discovered along the way and you want the DOM finished as early as possible.
$(document).ready(function() {
$(".navigator").resizable({
handles: "e"
}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
Live Demo: PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
<style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
</head>
<body>
<div class="extLayer">
<nav class="navMgr">side</nav>
<div class="endoLayer">
<header class="topSideBar"> top side bar </header>
<div class="intLayer">
<nav class="navigator"> navigator </nav>
<section class="auxLayer">
<div class="tabs"> TABS </div>
<main class="coreLayer">
MAIN
</main>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
</script>
</body>
</html>

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>

Categories