I recently started using jsPlumb to make a UI for a client, but I have come across two issues that I can't seem to solve.
jsFiddle here: http://jsfiddle.net/ugxopksz/
The first is my endpoints and connections not being repainted when I resize the window. The site this is going on has some responsive design in it. I tried doing the whole
$(window).resize(function(){
jsPlumb.repaintEverything();
});
But that doesn't do crap. I don't get an error from it, but it doesn't do anything at all.
My second problem is I cannot find anyway to specify more than one source for one connection. Something like:
instance.connect({
source:"oneT",
target:"center",
anchor:[[1, 0.5, 0, 0, 0, 80], [0, 0.5, 0, 0, 7, -40]]
});
Unless I can declare some array and create a loop that will make that block of code for each element in the array. The reason I am looking for that is this UI is pulling from a database and creating each outer element, since they can change I'd like it to be able to handle if database changes occur I don't have to go in and manually add new elements.
Any help would be greatly appreciated.
Since you have created the connections using a seperate jsPlumb instance you have to repaint the jsPlumb components using the same instance.
Change the following line
jsPlumb.repaintEverything();
to
instance.repaintEverything();
Click here for updated jsFiddle link
For First Question:
Making use of list elements(li tag) is not preferable for connection. Instead you can make of div elements and try it. Resize of windows also fails to repaint since the li tags doesn't have proper positions. From Doc's it is clear that element having position absolute will behave normal under all conditions.
Have a look at this FIDDLE for connecting DIV elements and also for repaint option on resizing window.
For Second Question:
For now jsPlumb doesn't support multiple id's for source parameter so you have no other option than to loop them in an array as:
var trg = 'center';
var src = ['oneT','twoT','threeT'];
for(var i=0;i<src.length;i++)
{
jsPlumb.connect({
source: src[i],
target: trg,
connector: [ "Flowchart", {cornerRadius:1} ],
paintStyle:{ lineWidth:5, strokeStyle:'#3E2522' },
anchors: [[1.02, 0.5, 0, 1],
[-0.02, 0.5, 0, 0]],
endpointStyle: { radius:0.5 }
})
}
Related
I am new to Spark AR and trying to start an animation from canvas top to bottom. However, canvas height is 0 at start. It only becomes activated a moment later. So, I suppose I need to emit certain event when canvas.bounds.height > 0, and subscribe a function to it. But how?
Try this:
canvas.bounds.height.gt(0).monitor().subscribe(e=>{
if(e.newValue){
//canvas height is greater than 0, do stuff...
}
});
Bounds.height is a ScalarSignal type, which supports a huge variety of different types of event listeners. See the documentation page here for more info: https://sparkar.facebook.com/ar-studio/learn/developer/reference/classes/ReactiveModule.ScalarSignal
Hey all Im trying to wrap my head around all this, been playing with it all day. What I'm trying to accomplish is have a background image zoom in (and eventually become transparent through opacity) when the user scrolls down. I've got one half of the desired effect working but It doesn't seem to want to work on user scroll, it just automatically executes.
It must be something simple but Im pretty new to this.
here is the code I've written
var tween = TweenMax.to('#regular', 0.5, {
scale: 2
});
// Init Controller
var controller = new ScrollMagic.Controller();
// Create the Scene and trigger when visible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: '#featured-image',
reverse: true,
offset: 700
})
.setTween(tween)
.addTo(controller)
http://codepen.io/anon/pen/EjWLyO
Your basic problem is that the setTween method of your scene is not available & this is because you are missing an include of animation.gsap.min.js important plugin in your codepen when it comes to using TweenMax alongside ScrollMagic.
So add this external javascript after your ScrollMagic include in your pen and you are gold.
I have a similar issue, although I am using the above-described javascript solution.
For my specific case I found a solution described here:
https://greensock.com/forums/topic/16014-staggerfrom-always-runs-on-page-load-not-on-scroll-magic-event/
Set in each tween the parameter: immediateRender : false
I am also running a TweenMax call to set the initial parameters after all scene init.
I am doing project in jquery to display the bus map as rows and columns. For that I am using gridster.js to display the seat arrangement. I am having the piece of following code
$(".gridster ul", xxxMapContainerST).each(function(){
var gridster =$(this).gridster({
widget_margins : [ 1, 1 ],
widget_base_dimensions : [ 30, 30 ],
draggable : false,
avoid_overlapped_widgets : false,
extra_rows : 0,
extra_cols : 0,
resize:false
}).data('gridster').disable();
});
Here the problem arise is when I want to display empty seats i.e not a cornered seats. The empty seat position was filled by the adjacent seats (filled by vertically down position seats). It causes severe misalignment. I have googled . No obvious solution found. Anyone kindly do some remedy for this problem.
Below link raises the same question, yet no answer found
Make gridster.js tiles stick in specific grid positions (snap to grid)
I was going thru something like same. May be I am answering it way too late!
But the demo link you have mentioned here is using a better 'version' of Gridster.
E.g. , the package I have downloaded from gridster's official page is v0.5.6 - 2014-09-25
and the one which consists of demo is - v0.6.10 - 2015-05-31
If you still want to upgrade your app
Following are the download links for CSS and JS
JS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js
CSS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.css
I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.
How can I get rid of this easily? Thanks.
Making some huge assumptions about your situation, I've decided that you might try something like this: $(function(){$('.jcrop-holder').removeAttr("style");});
If that's not what you need, you oughtta give us some more info!
I had a similar issue with an old version of jCrop and created a custom destroy function. Here is the gist of it:
function crop_reset()
{
//Reset coordinates of thumbnail preview container
$('#crop_preview').data("coords.x", 0);
$('#crop_preview').data("coords.y", 0);
$('#crop_preview').data("coords.w", 0);
$('#crop_preview').data("coords.h", 0);
//Reset src of jcrop img and copies bound to page specific full size and preview divs
$("#crop, #crop_preview, .jcrop-holder img").attr("src", "");
}
function crop_start()
{
//Initialize and remove previous jCrop containers using load event callback
$('#crop').Jcrop({
onChange: showPreview,
onSelect: showPreview,
onLoad: hidePreview,
aspectRatio: 1,
setSelect: [0, 0, 50, 50],
minSize: [50, 50],
allowResize: false,
allowMove: true
},function(){$(".jcrop-holder").not(":last").remove();});
//Remove previous jCrop containers using timer if callback is not supported
/*
window.setTimeout(function noblank(){
$(".jcrop-holder").not(":last").remove();
}, 1000);
*/
}
How do I change the zindex of an element inside a canvas?
Example code:
fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
image.set('left', 200).set('top', 250);
canvas.add(image);
});
var helloWorld = new fabric.Text('Hello world!', {
left: 0,
top: 0,
fontfamily: 'delicious_500',
zindex: 10
});
canvas.add(helloWorld);
Using the fabric.js library.
For future reference:
fabric.Element.html#bringForward
I can't get the dang thing working at all, but here's my guess as to what's happening:
Fabric asks that URL for the image. Fabric has been given a callback method when the image is returned, so while it's waiting, it moves on to the next task
Fabric creates the Text object and adds it to the canvas.
Finally, it notices that the image has loaded (the specific example you provided actually 404'd on me), and passes it to the callback method.
Because the image is added to the canvas after the text, I'm assuming that Fabric is acting just as the canvas normally would: things that are added later are drawn on top of things that are already there. ...Even though you gave the text a z-index.
Remember, I couldn't get it to work and just gave up. So it's entirely possible I'm totally, completely wrong. If that is the case, I have another theory:
Are you sure that zindex is the correct property? If you are, then try setting it on the image, as well:
image.set('left', 200).set('top', 250).set('zindex', 5);
And if you aren't sure, then... there you go.
Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:
canvas.moveTo(object, index);
object.moveTo(index);
i hope this is what you want:
http://jsfiddle.net/Kienz/RRv3g/