I have a small problem. I pasted my code here.
My problem is this: I want to make my window div (<div id="window"> Drag me </div>) draggable only within warp div.
HTML code:
<div id="warp">
<div id="window">
Drag me
</div>
</div>
CSS code:
body {
margin: 0;
background-color: #e67e22;
}
#window {
width: 150px;
height: 200px;
//background-color: #1abc9c;
border: 2px solid #16a085;
padding: 20px;
}
#warp {
margin: 10px;
width: 700px;
height: 600px;
border: 2px solid #e74c3c;
}
JS code:
$(document).ready(function() {
$("#window").draggable();
});
I mean when I drag it with mouse then it shouldn't go out of warp div.
you can use
$( "#window" ).draggable({
containment: 'parent'
});
$("#window").draggable ({
containment : "#warp"
});
Related
I am trying to understand why scroll event listener of querySelector element doesn't work here
document.querySelector('.test-scroll')
.addEventListener('scroll', function() {
alert('Scroll');
}, false);
.test-scroll {
height: 2000px;
overflow-x: none;
overflow-y: scroll;
border: 1px solid #000;
}
<div class="test-scroll"> </div>
Because there is no content force it to actually scroll anything.
Here I added an inner div, which is higher, and make it scrollable.
Stack snippet
document.querySelector('.test-scroll')
.addEventListener('scroll', function() {
alert('Scroll');
}, false);
.test-scroll {
height: 2000px;
overflow-x: none;
overflow-y: scroll;
border: 1px solid #000;
}
.test-scroll div {
height: 3000px;
background: red;
}
<div class="test-scroll">
<div></div>
</div>
I'm using slick-carousel on my website and have such problem. http://prntscr.com/i9ojqf
I added border bettwen slides by this code: border-right: 5px solid red;
Question is: how can i get rid of border for the very last visible slide here?
Thanks!
<div class="slider js-slider">
<img /> four images here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(function() {
$('.js-slider').slick({
slidesToShow: 4
});
});
</script>
body {
background-color: #ff0;
}
.slider {
width: 522px;
margin: 150px auto 0;
border: 5px solid green;
}
.slick-slide {
height: 200px;
box-sizing: border-box;
border-right: 5px solid red;
}
img {
max-width: 100%;
height: 100%}
.slick-next, .slick-prev {
position: absolute;
left: -80px;
top: 0;
}
.slick-next {
left: auto;
right: -50px;
}
.slick-slider {
div {
&:focus {
outline: 0;
}
}
}
It's working for me.
Without having access to your code, I can't give you a definitive answer, but I can give it a go.
Let's assume your slider object has the class of .slider and each of your slides has a class of .slide.
Your slider is the parent and each slide is a child of the slider. When you use the following code snippet in your CSS file, you are targeting the last child in the slide array.
In your CSS file:
.slider .slide:last-child{
border-right: none;
}
The class names on your specific slider will differ so you should change them to the actual slider and slide classes used on your end.
I hope this makes sense. I'm new to StackOverflow and trying to help.
This is the solution with Jquery:
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
$( ".slick-arrow" ).click(function() {
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
});
<style>
.border-right {
border-right: 1px solid #000;
}
.border-right--no {
border-right: 0;
}
</style>
To remove border from the last image, you can use :last-child selector.
.slick-slide:last-child {
border-right: 0;
}
Demo: https://jsfiddle.net/g04jrd3n/
I am using jquery-UI for making drag and drop web UI , but I am facing some problems during implementation of this . I am sharing my code which is a prototype and simple example of my implementation .
In my example there have three div elements : drag me , drop here and make me draggable .
Now I explain what is that . Actually I want drag element and drop it in container but when I dropping it in container that is not placing where I want in first time that is first problem .That is coming when I set container position relative because I want top 0 left 0 .
Second problem with make me draggable div . Suppose I dropped multiple drag me div elements inside container and then save this (In this example have not save option) then goes to edit so these saved elements are not draggable right now but there have same class if you see in code . But I don't know how I make these draggable .
So I have two issues with jquery-UI please if anyone have any solution and have expertise on jquery-UI please help me .
See my code html :
.drag {
text-align: center;
margin-top:5px;
width: 100px;
height:100px;
color:white;
background-color: red;
margin-bottom: 5px;
border: 1px solid black;
}
.container {
text-align: center;
width: 400px;
margin-top:5px;
margin-left: 5%;
height: 400px;
color:white;
background-color: green;
border:1px solid black;
}
.dropped {
text-align: center;
width: 100px;
height:100px;
color:white;
background-color: red;
border: 1px solid black;
}
body {
display: flex;
}
<div class="drag">Drag me</div>
<div style="position:relative" class="container">drop here !!
<div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div>
</div>
Jquery UI :
$(document).ready(function() {
$('.drag').draggable({
helper: "clone",
appendTo:"body",
revert: "invalid"
});
$('.container').droppable({
accept: ".drag",
drop: function(e, u) {
var a = u.helper.clone();
a.css("z-index", 1000);
a.appendTo(".container");
console.log("INFO: Accepted: ", a.attr("class"));
a.attr('class', 'dropped').draggable({
containment: ".container"
});
}
});
});
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
I'm trying to to create a simple drag, drop and resize page using jquery.
So far everything works fine. But now I have faced a new challenge.
This is the current process:
1- user drags and drops an image (div) onto a parent DIV.
2- The user will be presented with a clone of the dragged and dropped image with handles so they can easily resize the image (div).
basically, what i need to do is to remove the handles (helper), on clickout and add them again if the user wants to resize the DIV and if they click inside the DIV again.
so i tried to use this code:
$("#droppable").find(".ui-resizable-handle").remove();
the code above will remove the handles only when a new image has been dragged and dropped onto the stage. also, it is not a good way of doing this becuase it will remove the handles completely and I cannot re-add them again.
This is my entire code:
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script>
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
$("#droppable").find(".ui-resizable-handle").remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
</script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:500px;
height:820px;
border:1px solid #CCC;
float:left;
}
.drag{
width:100px;
height:100px;
position:relative;
background-size:contain !important;
background-repeat:no-repeat;
float:left;
margin-left:10px;
margin-top:30px;
border:solid 1px #CCC;
}
.drag:hover{
opacity: 0.6;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#droppable{
width:720px;
height :820px;
border:1px solid #CCC;
}
#droppable .drag{
width:200px;
height :220px;
background-size:200px;
border:none;
}
.new-class{
width:200px;
height :220px;
background-size:200px;
border:solid 4px #666;
}
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n{
top: -10px;
left:50%;
width: 6px;
height: 6px;
}
.ui-resizable-e
{
right:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-s
{
bottom: -10px;
left: 50%;
width:6px;
height: 6px;
}
.ui-resizable-w
{
left:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-nw
{
left: -10px;
top: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-ne
{
top: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-sw
{
bottom: -10px;
left: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-se
{
bottom: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-helper {
border: 1px dotted #CCC;
}
</style>
</head>
<body>
<div align="center" id="wrapper">
<div class="col" id ="droppable">
</div>
<div class = "col" id="col1">
<div id="drag1" class="drag" style="background-image:url(images/Chrysanthemum.jpg); background-position:center;"> </div>
<div id="drag2" class="drag" style="background-image:url(images/Hydrangeas.jpg); background-position:center;" ></div>
<div id="drag2" class="drag" style="background-image:url(images/3.jpg); background-position:center;"></div>
</div>
</div>
</body>
</html>
I do apologies for posting my entire code, I did try to create a working jsfidle and it seems like jsfidle doesn't like jquery.ui URL.
could someone please advise on this issue ?
If you want to detect a click falling outside of a particular element, you can do that by attaching a click handler to a top-level element (commonly document) and look at event.target.
To reinsert elements you've previously removed from the DOM you have to use .detach() instead of .remove(). However, a better way to get the same visual effect is to simply use hide and show which toggle the css property diplay:, since you don't have to care about where you need to reinsert the detached elements. It would look like:
$(document).click(function(e) {
// matches all children of droppable, change selector as needed
if( $(e.target).is("#droppable *") ) {
$(e.target).find(".ui-resizable-handle").show();
}
else {
$("#droppable").find(".ui-resizable-handle").hide();
}
});