I was trying to create a line between two multiple draggable element.
I am using the below code form jQuery library(https://www.jqueryscript.net/other/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line.html)
this was giving one to many lines between the elements.
Html code:
<div class="node1">Drag Me</div>
<div class="node2" style="left: 32px; top: 252px;">Drag Me</div>
<div class="node2" style="left: 435px; top: 356px;">Drag Me</div>
<div class="node2">Drag Me</div>
<div class="node2" style="left: 528px; top: 80px;">Drag Me</div>
<div class="node2" style="left: 219px; top: 402px;">Drag Me</div>
<div class="node2" style="left: 652px; top: 221px;">Drag Me</div>
js code :
<script type="text/javascript">
var mySVG = $('body').connect();
mySVG.drawLine({
left_node:'.node1',
right_node:'.node2',
horizantal_gap:10,
error:true,
width:1
});
$( ".node1" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});
$( ".node2" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});
</script>
How can I achieve many to many type between elements of html. I want to create line between multiple draggable elements.
Related
Here is my Codepen link: resizable event
I'm using Jquery UI resizable, thing is working fine but now I want to the resizable event on each block only active one by one, if you click another block, the resizable event on the previous block will be destroy, I've tried the .each function but it's not working.
Same thing when I try to destroy the resizable event when click anywhere on the screen except the div, I got the Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'.
When a component is clicked, got resizable, you should mark it as resizable enabled by adding a class. Like:
https://codepen.io/ducfilan/pen/jGPwop
$(document).on("click", ".component-items", function () {
$('.processed-resizeable').resizable("destroy");
$('.processed-resizeable').removeClass("processed-resizeable");
$(this).resizable();
$(this).addClass('processed-resizeable');
$(this).draggable({
start: function (event, ui) {
$(this).resizable("destroy");
}
});
});
.component-list {
border:1px solid #343434;
margin-top:50px;
padding:5px 20px;
height:300px;
position: relative;
}
.component-items {
cursor:pointer;
position: absolute;
}
.ui-resizable {
border:1px solid #d3d3d3;
}
#items-1 {
top:10px;
left:500px;
}
#items-2 {
bottom:100px;
left:15px;
}
#items-3 {
top:100px;
right:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="component-list">
<div class="component-items" id="items-1">
<h3>Block 1</h3>
</div>
<div class="component-items" id="items-2">
<h3>Block 2</h3>
</div>
<div class="component-items" id="items-3">
<h3>Block 3</h3>
</div>
</div>
</div>
</div>
</div>
I know that there are many questions like that, but I couldn't find a solution to my problem.
In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.
<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
<div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
<div class="page" id="dashboard_all" style="width: 8360px;">
</div>
</div>
<div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
This is the code that the plugin creates when I apply it to the div #overflow
$(document).ready(function() {
$("#overflow").mCustomScrollbar({
axis:"x",
theme:"jmsHorizontalScrollbar",
scrollButtons: {
enable: true
},
scrollInertia: 950,
callbacks:{
onScroll:function(){
//this functions sets the value in another js file. -(this.mcs.left) to get a positive value
getNavigator().setScrollLeft(-(this.mcs.left));
},
alwaysTriggerOffsets:false
}
});
})
Then I use the position found in the callback like that
$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);
But nothing happens.
If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.
Thank you in advance,
Matteo
I did it! I used the scrollTo method in the onUpdate callback
onUpdate:function(){
$("#overflow").mCustomScrollbar('scrollTo',position, {
// scroll as soon as clicked
timeout:0,
// scroll duration
scrollInertia:0,
});
}
Using the latest jQuery UI, the drag and drop function doesn't work properly, when moving elements from one list to another. I want to drag elements from one list to another and replace the drooped element with another one, the problem is that jquery UI replaces the element but it moves it to the bottom of the list, it doesn't keep it to the position where it was dropped.
<head>
<style>
#list1{
float:left;
width: 200px;
margin-right: 20px;
}
#list2{
float:left;
width: 200px;
}
.element1{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ededed;
}
.element2{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ffeded;
}
.highlight{
border: 1px dashed #999999;
color: #333333;
height: 25px;
background-color: #faffd6;
}
</style>
</head>
<body class="">
<div id="wrapper">
<div id="list1">
<div class="element1">Element 1</div>
<div class="element1">Element 2</div>
<div class="element1">Element 3</div>
<div class="element1">Element 4</div>
<div class="element1">Element 5</div>
<div class="element1">Element 6</div>
</div>
<div id="list2">
<div class="element2">Element 1</div>
<div class="element2">Element 2</div>
<div class="element2">Element 3</div>
<div class="element2">Element 4</div>
<div class="element2">Element 5</div>
<div class="element2">Element 6</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
$(window).load(function () {
$("#list1").sortable({
revert: true,
placeholder: "highlight",
});
$("#list2").sortable({
revert: true,
placeholder: "highlight",
});
$( ".element1" ).draggable({
connectToSortable: "#list2",
revert: "invalid",
stop: function( event, ui ) {
$(this).replaceWith('<div class="element1">Element 99</div>');
}
});
});
</script>
The problem you got is that you have two different events and you catch only one of them.
You drag item from gray-list and place it inside the pink-list, your highlight element is shown and then you drop it. This is your problematic usage.
You grad item from gray-list and place it inside the pink-list, your highlight element is shown, then you take your dragged element outside of that list (you still have the margin of the new list-item, but the highlighted element is not there) and you drop it. This scenario is all good.
Your problem is that on the first scenario the dragged element position (DOM-wise) is the last element of the list, and when you drop it what happen is that you get animation to put it in the correct position (where the highlight element is places) and then there is a switch. If you change that the function that should change between those elements will not know which elements to switch.
The way to fix this issue is to go to the "droppable" element - the list you put your item in. use the deactivate event of the sortable (#list2) to run anything you want after the element was placed in the right place.
$("#list2").sortable({
revert: true,
placeholder: "highlight",
deactivate: function(event, ui) {
$(ui.item).replaceWith('<div class="element1">Element 99</div>');
}
});
Note the usage of event.toElement and not this, since this in the current scope is the list element and not the dragged element. Don't forget to remove the code of the stop event from your draggable element.
Basically I am looking for a code that makes a div visible on a certain location on the webpage. when you scroll trough the website you get at certain headings when you are at a specific heading the div needs to get visible in the navbar.
The div #greybar is the div that needs to get visible only on a certain location while scrolling, the whole navbar is fixed
HTML:
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/logotekst.png">
</div>
<div id="menubutton"><a onclick="playclip();" href="#homejump">Home</div>
<div id="menubutton"><a onclick="playclip();" href="#aboutjump">About</div>
<div id="menubutton"><a onclick="playclip();" href="#infojump">Info</div>
<div id="menubutton"><a onclick="playclip();" >test</div>
</div>
<div id="greybar"></div>
</div>
CSS:
#greybar {
width: 100%;
height: 5px;
background-color: #A4A4A4;
}
If you are using javascript and jQuery, you can have a look at jQuery functions
hover, show, hide, text. At the end of all pages, there are good examples.
EDIT: You should rather use class="menubutton" and not id="menubutton".
After that, you can use script like
<script>
$( "div.menubutton" ).hover(
function() {
$( "#greybar" ).text( $( this ).text());
$( "#greybar" ).show();
}, function() {
$( "#greybar" ).hide();
$( "#greybar" ).text("");
}
);
</script>
EDIT 2:
add to greybar class position: fixed;
i am creating html elements live and appending them to the window.
The issue im having is that i can't use jquery ui on them. I have tried the deffer method, but that doesn't work as well.
What i am trying to accomplish is to clone the last div, add it to the container and make it resizable
here's some code jsfiddle:
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button class="add">add</button>
#container {width: 600px;height: 300px;}
#container h3 {text-align: center;margin: 0;margin-bottom: 10px;}
.resizable {width: 100px;height: 100px;float: left;}
.resizable, #container {padding: 0.5em;}
var dfd = $.Deferred();
dfd.done(function () {
var lastDiv = $('.resizable').last();
var lastDivClone = lastDiv.clone();
lastDivClone.appendTo('#container');
return lastDivClone;
});
$('.add').on("click", function () {
var x = dfd.resolve();
x.resizable("enable");
});
$(".resizable").resizable({
containment: "#container",
grid: 50
});
any ideas?
Remove the resizable handle first.
lastDivClone.appendTo('#container').find('.ui-resizable-handle').remove()
.end().resizable({
containment: "#container",
grid: 50
});
http://jsfiddle.net/ExplosionPIlls/945p6/2/