JsPlumb - Endpoints do not refresh position when used on draggable element - javascript

I started using jsPlumb and JQuery, I want to connect draggable elements but if I add the
draggable behavior before the connection then the connection does not refresh position.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".window").draggable();
var a = $("#a");
var b = $("#b");
jsPlumb.connect({
source:a,
target:b,
connector:["Bezier",68],
endpoints:[
["Dot",{radius:12}],
["Rectangle",{width:20,height:30}]
]
});
});
</script>
</body>
</html>

i wrote jsPlumb.
the reason it doesn't refresh is that it has no way of knowing something is being dragged. instead of calling $(".window").draggable(), you either need to let jsPlumb do that for you when a connection is made, or through this method:
jsPlumb.draggable($(".window"));
the first option will not initialise the dragging for any window that doesn't have a connection. the second one will.

There are few ways to do so - refer to the jsPlumb documentation
,but generally you can use:
Id of the element
Array of elements
Or selector (for example class selector that was mentioned previously: jsPlumb.draggable($(".window"));
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 19px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
cursor: pointer;
}
</style>
<script>
jsPlumb.ready(function () {
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("container0");
//jsPlumb.draggable(["container0", "container1"]);
jsPlumb.draggable($(".window"));
//perform operation only after DOM is loaded
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source: e0, target: e1 });
});
</script>
</head>
<body >
<div class="window" style="left: 20px" id="container0">
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>

Related

Angular Trigger Div Click based on condition

I need to disable click on certain divs based on some condition. Can anyone guide me please? Currently am using ng-disabled which is not working
Working Demo below for you to play
.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}
.charts{
height:30px; width:30px;
border:1px solid #ccc;
margin:20px 0 0 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<body>
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled = "chart.clickable"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
</body>
</html>
You cannot disable a div using ng-disabled the possible solutions are either you can add an ng-class for disabled elements with no cursor events or you can use a fieldset instead of div.
First Solution - Using ng-class and changing script handling clickable property
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
.disabled {
opacity: 0.4;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<div ng-click="(chart.clickable)? chart.selected = !chart.selected : chart.selected = chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected, 'disabled': !chart.clickable}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
Second Solution. Using fieldset instead if div.
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<fieldset ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled="!chart.clickable"></fieldset>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
I will prefer the second one.
You can do it as follows :
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.clickable ? chart.selected = !chart.selected: ''" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
You can apply a common class over elements that need not be clicked and apply pointer-events: none; to the same.
CSS should always be preferred in such cases instead of Javascript.

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

Resize all children elements in iframe [duplicate]

I have this code and it works fine:
Head
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Body
<div id="test" style="border: .1em solid black;">
</div>
However when I change my "div" into "iframe" I can't resize it anymore.
Body
<iframe id="test" style="border: .1em solid black;">
</iframe>
Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.
Below Code Work for me in smooth way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>
I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe.
This can be done using only CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Also all the major browsers have good support. Check out this link and also about the browser support

Div selected state

Hi people #stackoverflow,
I'm currently trying to make a nav bar with the function of 'selected-state'.
I got it to work nicely with jsfiddle, http://jsfiddle.net/uphem/U7NLM/ but the selected-state somehow isn't working when I create a html out of this.
It's pretty much an exact copy of what I had in jsfiddle.
I tried to embed the jquery as a file and that didn't work either.
I can't seem to figure out why it's not working..
Please help!
<html>
<head>
<title>selected state test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})​
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}​
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​
</body>
</html>
You have to load the jQuery code only after the page is loaded, like this:
<script type="text/javascript">
$(document).ready(function() {
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})
});
</script>
as well, Could it be that your jQuery import call is wrong?
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
for more information about when and how to use // instead of http:// read Is it valid to replace http:// with // in a ?
I've tried your code and it worked for me after that change
If you are working offline your jQuery call is wrong.
Use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Use this code
<html>
<head>
<title>selected state test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".menu_button").click(function(e) {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}​
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​
</body>
</html>
Try adding:
$(document).ready{
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})​;
}
It's a problem with your src:
// this directs to yourdomain.com/ajax....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//Instead use one of the following
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>selected state test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>
</body>
</html>

Can I alert all my elements?

Is it possible to send all the elements in my document to the alert function?
If so, how can I do that?
Here is an example document. I want to print all of the elements.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Sure, you can do it like this:
alert(document.documentElement.outerHTML);

Categories