I made a copy of JSbin for practice, JSbin link here, actual site link here.
This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.
But the problem is that you can resize the divs pass other divs.
My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div
And hence the question. How do I set the max-left/right for the draggable.
Also, any idea on why the draggable before Output div is diificult to drag to the right.
Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.
<div id="main>
<div id="HTML"></div>
<div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
<div id="CSS"></div>
<div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
<div id="JavaScript"></div>
<div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
<div id="Output"></div>
</div>
By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.
I came up with the following solution:
var dragDistance = 100;
$(".resize").draggable({
axis: "x",
containment: "parent",
drag: function( event, ui){
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
resize();
}
});
I removed your onDrag function in the process so it wouldn't interfere.
See the bin here:
JSBin
NOTES:
I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.
You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.
Use containment
Constrains dragging to within the bounds of the specified element or
region.
For Eg:
$( ".selector" ).draggable({
containment: "parent"
});
Click Here For a Demo
You could manually keep track of the position of each of the windows in the dragging() function, and only call the resize() method if they don't overlap:
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
Here's the complete example - I also refactored/simplified your "resize" function.
var codeboxWidth = $("#codebox").width();
$(document).ready(function() {
$("#codebox").height($(window).height() - $("#topbar").height());
$(".content").height($("#codebox").height());
$(".editbox").height($(".content").height() - $(".contentheader").height());
$("#HTML").css("left", 0);
$("#HTML").css("right", "75%");
$("#CSS").css("left", "25%");
$("#CSS").css("right", "50%");
$("#JavaScript").css("left", "50%");
$("#JavaScript").css("right", "25%");
$("#Output").css("left", "75%");
$("#Output").css("right", 0);
});
function resize(event) {
if ($(event.target).is("#1")) {
$("#CSS").css("left", event.clientX);
$("#HTML").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#2")) {
$("#JavaScript").css("left", event.clientX);
$("#CSS").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#3")) {
$("#Output").css("left", event.clientX);
$("#JavaScript").css("right", codeboxWidth - event.clientX);
}
}
$(".resize").draggable({
axis: "x"
});
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
body {
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
background: #F7F7F7;
font-family: Arial;
}
#topbar {
margin: 0;
padding: 0;
width: 100%;
height: 35px;
background: #EEEEEE;
position: relative;
}
h2 {
margin: 2px 0 0 0;
padding: 0;
float: left;
position: absolute;
}
#control {
width: 100%;
margin: 8px 0 0 0;
padding: 0;
position: absolute;
text-align: center;
}
.option {
margin: 0 -5px 0 0;
padding: 5px 10px 5px 10px;
text-align: center;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
text-decoration: none;
font-size: 0.9em;
color: black;
}
.option:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.option:last-child {
border-right: 1px solid #CCC;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.option:hover {
background: #dee5e5;
}
.opactive {
background: #EBF3FF;
}
.opinactive {
background: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
#codebox {
margin: 0;
padding: 0 width: 100%;
position: static;
top: 35px;
background: white;
}
.content {
margin: 0;
padding: 0;
min-width: 10%;
max-width: 100%;
position: absolute;
float: left;
color: #6DCAFC;
background: #F7F7F7;
overflow: hidden;
}
.resize {
top: 35px;
bottom: 0px;
width: 1px;
margin-left: 0;
height: 100%;
right: auto;
opacity: 0;
position: absolute;
cursor: ew-resize;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgba(218, 218, 218, 0.498039);
z-index: 99999;
background: #666;
}
.contentheader {
margin: 0;
padding: 0;
background: transparent;
position: relative;
}
.selectedcontent {
background: white;
}
.contentbox {
width: 100%;
height: 100%;
background: transparent;
position: relative;
box-sizing: border-box;
border-right: 1px solid darkgrey;
overflow: hidden;
}
.editbox {
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
}
.textareabox {
background: transparent;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
border: none;
outline: none;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 04</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="topbar">
<h2>Code Runner</h2>
<div id="control">
HTML
CSS
JavaScript
Output
</div>
</div>
<div id="codebox">
<div id="HTML" class="content active">
<div class="contentbox">
<div class="contentheader">HTML</div>
<div class="editbox" id="HTMLeditbox">
<textarea id="HTMLcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="1" style="left: 25%" ondrag="dragging(event)"></div>
<div id="CSS" class="content active">
<div class="contentbox">
<div class="contentheader">CSS</div>
<div class="editbox" id="CSSeditbox">
<textarea id="CSScode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="2" style="left: 50%" ondrag="dragging(event)"></div>
<div id="JavaScript" class="content active">
<div class="contentbox">
<div class="contentheader">JavaScript</div>
<div class="editbox" id="JavaScripteditbox">
<textarea id="JavaScriptcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="3" style="left: 75%" ondrag="dragging(event)"></div>
<div id="Output" class="content active">
<div class="contentbox">
<div class="contentheader">Output</div>
<div class="editbox" id="Outputbox">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jscript.js"></script>
</body>
</html>
Here's a JSBin based on your example.
Related
I'm trying to change the css position from fixed to static and viceversa, based on pixel scrolled...
The script works fine as espected, but at the point to change css position, there is a sort of lag.
If i scroll slow till at the point of switch, from the console i see the position switch fast from fixed to static and from static to fixed.
Anyway, look in the snippet, scroll near the end, and see what happen... I'm not able to figure out the reason. Hope in your help! Thanks!
Open the snipped in fullscreen to see better!
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021</p></div>
</div>
</body>
</html>
The problem you are facing is: You calculate the total value on every change of the scroll position. So when you scroll and change the position of the element from fixed to static you will add the height (60px) to total. (This is visible if you console.log(scrolled, total)). Because fixed position elements do not take up any space.
The most simple fix is to calculate the total when the page is loaded. And then, if it doesn't change you're good to go with that height forever. So the only change I did from your code is to move the calculation of total outside of the scroll function.
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021 VirtualCode.Net</p></div>
</div>
</body>
</html>
This could lead to some problems if you are loading images and what not which may take up more space (height) when completely loaded and the calculation already happened. To never face that issue you can wrap the calculation inside
$(window).load(function(){
// add total calculation code here
});
If there are multiple jquery draggable divs I want to see guides and snap to guides, edges and corners of others divs.
Here's the code:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
The blue line in following image is what i want to be shown while divs are being dragged
see image here. Divs should snap to the blue guiding lines when divs are aligned.
don't change the relative and absolute position of classes as I've used them to overlay one div on another.
I tried searching online but solutions are too old, awakward and work with jquery 2.x
Please help!
To address the first part of your question, you can manage the guides like so.
$(function() {
function moveGuides(top, left) {
$("#guide-h").css("top", top + "px");
$("#guide-v").css("left", left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,
left: p.left,
bottom: p.top + $(el).height(),
right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top, c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e, ui) {
startGuides(this);
},
drag: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
$(".draggable").resizable({
start: function(e, ui) {
startGuides(this);
},
resize: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
});
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
With helper functions, you can reveal the guides, and move them based on specific events.
The next, and much more involved portion, would be to create collision detection for the various elements. This will require checking against each of the elements involved against all the other elements. For example:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
I am guessing that you are looking to create alignment. So when a Guide collides with an edge, it should prevent the User from dragging or resizing the element further in that direction. Also, do you want it to Snap and what tolerance should that snap be?
Since you did not provide those details, I am not really able to address your second question in full.
I have horizontal scroll box i.e Row column structure in it. Thats working fine
Now I need to show selected box as well. Need to show box selected as per image i have attached which is infront after scroll.
need help in this doing this?
My html structure is like this using angular JS and ionic.
<div class="row" <div class="row" style="width:100%;overflow-x:scroll;">
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
</div>
I have structure like this its look like []1
Now how I can show div is selected using javascript.
If what I understood was correct, this is what you meant. If not please leave a comment.
I just made the scroll div move along adding or subtracting 5 to its css position left ever the div was scrolled.
var lastX = $(".row").scrollLeft();
$(".row").scroll(function() {
var position = $(".scroll-box").position();
var position1 = $(".fa-caret-down").position();
const $el = $(".row");
let currX = $el.scrollLeft();
if (currX > lastX) {
$(".scroll-box").css("left", position.left + 5);
$(".fa-caret-down").css("left", position1.left + 5);
lastX = $el.scrollLeft();
}
if (currX < lastX) {
$(".scroll-box").css("left", position.left - 5);
$(".fa-caret-down").css("left", position1.left - 5);
lastX = $el.scrollLeft();
}
});
.scroll-box {
position: fixed;
bottom: 75px;
left: 125px;
}
.fa-caret-down {
position: fixed;
left: 215px;
bottom: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="row" style="width: 100%; overflow-x:scroll;">
<div style="width: 150%; height: 150%;">The following scroll box follows the scroller.</div>
<br><br><br><br><br><br><br><br><br>
<div class="scroll-box col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
<i class='fas fa-caret-down' style='font-size:48px;color:red'></i>
</div>
You can use something like this.
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
height: 300px;
width: 300px;
border: 1px solid white;
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
<div class="scrollmenu">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
I found this cool Codepen Mouse Trail script. How can I change it that it only works inside a div, and that it uses an image (of a cursor) instead the css-code (like it is 1996)? Tnx!
https://codepen.io/tomhodgins/pen/bgRVKL
var coord = new Array(50)
function update(e){
var x = e.clientX || e.touches[0].clientX
var y = e.clientY || e.touches[0].clientY
coord.push([x,y])
coord.shift()
EQCSS.apply()
}
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
#element '[data-dot]' {
$root, $this {
cursor: none;
}
$this {
width: 30px;
height: 30px;
background: white;
border: 2px solid black;
border-radius: 100%;
border-top-left-radius: 0;
position: fixed;
left: eval("coord[50-(getAttribute('data-dot')*5)][0]")px;
top: eval("coord[50-(getAttribute('data-dot')*5)][1]")px;
opacity: calc(eval("10 - getAttribute('data-dot')") / 10);
}
}
<aside data-cursor>
<div data-dot=10></div>
<div data-dot=9></div>
<div data-dot=8></div>
<div data-dot=7></div>
<div data-dot=6></div>
<div data-dot=5></div>
<div data-dot=4></div>
<div data-dot=3></div>
<div data-dot=2></div>
<div data-dot=1></div>
</aside>
I need a 'Page section' to stick in place for (x) amount of scrolling and then move onto the next section. I've tried putting them into the child theme but nothing... Can someone tell me a good way to do wthis that's not Javascript heavy?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}
This answer might not be 100% pragmatic, due to current lack of support, but soon you will be able to use the position: sticky property of CSS, currently supported in Firefox and prefixed in Safari/iOS (Caniuse).
The feature was previously enabled in Chrome, but then subsequently removed in the interest of re-doing it more efficiently.
html, body {
margin: 0;
}
body * {
margin: 20px;
padding: 20px;
}
.header {
margin: 0;
padding: 20px;
background: #000;
}
.header span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
padding: 0;
}
.placeholder {
border: 1px solid black;
margin: 0 auto;
text-align: center;
height: 300px;
}
.slider {
background: #006264;
color: white;
font-weight: bold;
margin: 0 auto;
position: sticky;
top: 0px;
}
<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>