We Keep Coding

A few jsPlumb issues

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 }
})
}

How one can use colspan in the jqGrid footerData?

Want to create the jqgrid footer as described in below grid:
I want the footer in the jqgrid as shown in above jqGrid.
I have set the footerrow:true and $self.jqGrid("footerData", "set", { Total: actualSum });, with this i am able to get the footerRow.
And to add label to this as i mentioned 'Grand Total: ' i need to merge two columns Amount and Tax..
So, how can achieve these.
I have gone through this.
But the cellattr is used to merge the cells.. Incase of footer row i am not able to get this cellattr if there is way to use these approach. How can i fix my probelm using this?
I even gone through these answer.
Here, just the the right border are made hidden conditionally but the colsapn is not used.
So that too didn't help me to fix my problem.
Currently i am getting the footer like these:
#Oleg can you just guide me how i can fix this issue and create the footer using the colspan as i described.

One can use colspan in the footer too. It's important to understand that jqGrid set the footer once during creating the grid and then just can change the width of columns on the footer if the user resized the column width.
To simplify the code I suggest to set resizable: false property on the columns where we use colspan. The demo demonstrates the solution:
In the demo I added resizable: false property in "Client" and "Date" columns ("name" and "invdate" columns) and used the following code after jqGrid is created:
var $footRow = $("#list").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");
var $name = $footRow.find('>td[aria-describedby="list_name"]'),
$invdate = $footRow.find('>td[aria-describedby="list_invdate"]'),
width2 = $name.width() + $invdate.outerWidth();
$invdate.css("display", "none");
$name.attr("colspan", "2").width(width2);
$footRow.find('>td[aria-describedby="list_tax"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_total"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_closed"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_ship_via"]').css("border-right-color", "transparent");

Create grid of image

Here I have to implement a webpage
which has a grid that display images. It will be easy if all the images have the ideal width and height, so I can arrange these images to fit the grid. However, with images of various sizes, I hasn't found solution yet. So, anyone has any idea or know some library/tool that can
flexibly create the image grid like that ?
Thankyou !

I reckon this is what you are looking for: http://masonry.desandro.com/ . JS library that allows to do exactly what you want.

If you're using jQuery I would recommend using Masonry, it's also built into core wordpress if you're using that too.
Here's an example of using it.
function masonry_shiz(){
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reloadItems');
});
$(window).load(function() {
$(".masonry-brick").each(function(i) {
$(this).delay((i + 1) * 50).fadeIn();
});
});
}masonry_shiz
Here's a link to the plugin

Try using jQuery plugin called Freewall. It is available at http://vnjs.net/www/project/freewall/
Check this demo for the same plugin (same as your requirement):
http://vnjs.net/www/project/freewall/example/image-layout.html

check out these links:
stackoverflow-question
jquery-plugin
another-alternative
and this article here.Hope it helps

If your design is not supposed to change, you can use a CSS framework to build such a page.
A famous one is Bootstrap, which allows you to order <div> tags in a grid, using rows and columns. This is responsive as well, meaning the result is auto-adapted to large screens as well as phones and tablets.
You can use other frameworks such as elasticss, Knacss, Blueprint.

Jquery not resizing image on slider

The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).
I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":
$(document).ready(function() {
$('#slides').coinslider({ hoverPause: true });
$('#slides').css('background-size', '477px 205px');
$('#slides').css('overflow', 'hidden');
});
but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again

Change this:
$('#slides').css('background-size', '477px 205px');
To this:
$('#slides').width(477).height(205);
The overflow: hidden will hide the rest of the image.

More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?
Reference 1,
Reference 2

After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size" on it like this:
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop,
'background-size':'477px 205px'
});
as it wasn't fixed a size to it, it would take the real size of the image as default.
Thank you for trying to help me with this issue!

Change the Position of an Image in JavaScript

I hope that's the correct description of this problem. If not, please forgive me, I'm new here and new to JavaScript..
I am creating a turntable animation of a chair using a jQuery plugin called Spritespin. I have it setup so it loads a long strip of sprites of the chair rotating around its axis.
The Spritespin website shows what parameters of an object notation I can change to get the thing to work. This is what it looks like:
// initialize the spritespin
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
As you can see, all I have to do is create a strip of (in my case) 24 images of 640 x 640 and link to it.
The problem is that I would like to add some functionality. I'd like to have a set of colour swatches to the side of the rotating chair that alow the user to pick a different colour.
My idea is to put all 7 sprite strips into one huge image (15360 x 4480) and shift its y position based on which swatch is clicked. But I have no idea how to write that code or if it's even the smartest way to go about it.
This is how my swatches are setup right now:
<div id="colourSwatches">
<div id="swatchBlack"></div>
<div id="swatchBlue"></div>
<div id="swatchBrown"></div>
<div id="swatchPink"></div>
<div id="swatchRed"></div>
<div id="swatchTurquoise"></div>
<div id="swatchYellow"></div>
</div>
I hope that wasn't too convoluted and that someone can help me.

I looked over the spritespin.js file and didn't see any function to change either offsetX/Y or the image it was using. However it seems you can call the spritespin function on the div again with changes eg:
$('a').click(function() {
var swatch = $(this).attr('id');
if(swatch == "black") {
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
}
});
There are obviously different ways you can proceed to change the image : option like setting it to a variable which goes through the if statements (cutting down on the size of the file), using the variable in something like
image : "turntable/images/LC-01_strip_" + swatch + ".jpg"
or reading the filenames using AJAX or JSON. I unfortunately do not know how this affects the DOM or if clicking the link 1 million times will break the browser.