So basically, I've got a bottom div and a top div inside a container. I need the bottom div to be adjustable, and the top div to kind of follow it around and occupy the empty space. I made a simple jQuery script, but it behaves very erratically and seems to exponentially expand everything.
Here's my code:
var lol = $("#lol").height();
var message = $("#text").height();
$("#message").height(lol - message);
$("#text").resizable({
handles: 'n',
resize: function() {
var lol = $("#lol").height();
var message = $("#text").height();
$("#message").height(lol - message);
}
});
#lol {
position: absolute;
top: 150px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
}
#message {
background: black;
height: 400px;
width: 700px;
}
#text {
background: red;
width: 700px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
<div id="lol">
<div id="message">
</div>
<div id="text">
</div>
</div>
When you resize text it moves the top of the div. You can reset the top to 0 to stop it from moving.
Here are 2 solutions:
var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());
$text.resizable({
handles: 'n',
resize: function(event, ui) {
$message.height(lolHeight - ui.size.height);
ui.position.top = 0;
}
});
#lol {
position: absolute;
top: 150px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
}
#message {
background: black;
height: 400px;
width: 700px;
}
#text {
background: red;
width: 700px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
<div id="lol">
<div id="message">
</div>
<div id="text">
</div>
</div>
Or
var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());
$message.resizable({
handles: 's',
resize: function(event, ui) {
$text.height(lolHeight - ui.size.height);
}
});
#lol {
position: absolute;
top: 150px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
}
#message {
background: black;
height: 400px;
width: 700px;
}
#text {
background: red;
width: 700px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
<div id="lol">
<div id="message">
</div>
<div id="text">
</div>
</div>
Related
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>
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
I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
I'm a fourteen year old trying to cope with a fairly new language so please bear with me. I made a quick html doc so that I can express my problem as clearly as possible.
If you run the snippet, you can see that by clicking the menu button the body is pushed 285 pixels from the left, and the menu is shifted to 0px from -285px.
I want to be able to click on the menu button again and shift the body back to 0, and the menu back to -285. Please look under the J Query to see the processes I've tried so far.
var main = function(){
$('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('.menu_button_active').click(function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
/* At first, I tried to just plug in the same class name in the second function, however I
quickly realized that by doing so the menu will automatically close since both functions
will run at the same time.
My understanding is that in order for the function to being separately, the menu button
would have to have a different class at the time of the click. So, I tried using
toggleClass to remove the menu_button class while at the same time adding the
menu_button_active class so that on click, the menu_button_active class can act as the
same button, but used for a different function (closing the menu.) Perhaps my understanding
of what the toggleClass method was used for was flawed, however here is the code anyway to
show you what I had done.
$('.menu_button').toggleClass("menu_button" "menu_button_active");
in place of
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
(this doesn't work)
So, my final method is shown above. By separately adding and removing the class I don't see
why it doesn't work after working out what the js would be doing. First the menu_button
would be clicked and the page is shifted, afterwards the menu_button would have a different
class name, so that it can be called by the menu_button_active function, which then
changes the class again so that the menu button can open again and so on.
*/
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: fixed;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
What's the flaw in this logic?
You define your class from javascript so you need to attach event to your class name. see http://api.jquery.com/on/
var main = function(){
$('body').on('click', '.menu_button', function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$(this).addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$(this).addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: absolute;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
You lost .menu_button_active, I can't see in nowhere of the code.Your second click function never runs, because the trigger button is missing.
var main = function(){
$('body').on('click', '.menu_button', function(){
// $('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>