I have been having a really hard time dealing with this issue that just keeps coming at me from different sides.
The task: Create a web application where I can use JQuery SVG with other parts of JQuery like JQuery UI, for example draggable. I have been pretty successful so far, except with this issue.
Where I would form my SVG elements, and for some reason they would get cut off at a certain size. This was believed to be due to the viewport not being big enough to fit the products.
I am creating an application that scales to the full size of the browser viewport, so this is a big issue.
As you can see in the post I answered my question with finding out I can change the width and height (width was set to 3000, and height was not set) with svg.configure, and it ended up seeming to fix my issue...
That was until I went down to a lower value instead of 12.
Attached is the scene at scale = 1, and you can see from my debugger that the rect is in the wrong spot, but why is it?
Next in this image I used from scale 1-20 to show the changes that are occurring to the scene based on just the scale changing.
I noticed that this is all due to the height of configuring, and when I turn it off, everything is in place as it should be.
I noticed that without configuring the items would start to cut off at about 13, and with configure on it would start to fit in place at about 15-20.
The next part of the image is showing configure off and how it gets cut off from 15-48.
So I decided to try and make it so that if my scale was above 11 then configure, else don't.
The problem with this is that I am trying to move each rectangle as it's own element. With configure off the Width is 3000 thus I grab any number of random objects from my scene, and this isn't good at all.
Keeping configure on allows me to grab the items pretty well, but at lower scale it screws me up.
I also noticed(because I thought this was the issue at first) that when I was at 12 some of the rects weren't fully sized, and that if I added +3 or so to my configure height it would fill in the remaining amount... This might be due to be having a 0.03*scale border around my rectangles, so I will have to check if that's it, or if I need more than that for my viewport to be full.
Also, if configure is off and the scene is bigger than the screen then objects will also be cut off, width wise as well, it's very weird. Configure on fixes all of this.
So what exactly is going on? Is this a bug or am I doing something wrong? I have been working with Jquery for a few months now, and just recently got into web dev in general, so I'm not sure about everything with the web, and this SVG.
I would appreciate any help as this has been giving me issues from the start.
Raphael.js was what I was using before this, and it was really simple and I had no issues at all, so I'm curious what's going on with this....?
Thanks all!
My code:
var scale = ....
for(var i = 0; i < total; i++)
{
var face = document.createElement("div");
face.id = 'face'+i;
document.getElementById('plan').appendChild(face);
$('#face'+i).svg();
var faceE = $('#face'+i).svg('get');
// faceE.configure({width: w*scale, height: h*scale}, true);
faceE.rect(0,0,w*scale,
h*scale,{fill:'black', stroke:
'red', strokeWidth: 0.3*scale});
$( '#face'+i ).draggable({ snap: true});
$('#face'+i).css({position:"absolute", left: x*scale, top:y*scale, width: w*scale, height:h*scale});
}
@kbwood help please when you can thank you!!!
EDIT:
I noticed when going through my console something weird is going on here.
Now when I scroll over the div I see the rectangle is supposed to be in the "correct" spot, as shown above...
HOWEVER when I scroll on svg or rect it shows the current position of the rects.
I don't know where it's causing this issue to jump down, but I noticed that if I changed my y in my rect to -5.0016 (tried to take about half of 11 which is the height) I noticed that it lined up about perfectly.
So I'm curious why (now at scale 4) that this occuring? Why is it also occuring only on certain scales and once I'm at a large enough scale nothing is changed? Maybe I should be a certain # higher, and that as I scale up that number becomes less and less.
either way messed up, please assist!!!!
EDIT 2: Addition to my first edit. It is actually even weirder than what I first thought. The div will show the place it should be in, the svg shows where it is now, and the rect does some weird stuff when I scroll.
If I scroll down, then the shadow of the SVG rectangles move down, but everything stays in it's place.
Hello all,
I have been having a really hard time dealing with this issue that just keeps coming at me from different sides.
The task: Create a web application where I can use JQuery SVG with other parts of JQuery like JQuery UI, for example draggable. I have been pretty successful so far, except with this issue.
It all started out with this http://stackoverflow.com/questions/27010266/jquerysvg-elements-get-clipped-at-a-certain-point-how-to-fix-this/27031302#27031302
Where I would form my SVG elements, and for some reason they would get cut off at a certain size. This was believed to be due to the viewport not being big enough to fit the products.
I am creating an application that scales to the full size of the browser viewport, so this is a big issue.
As you can see in the post I answered my question with finding out I can change the width and height (width was set to 3000, and height was not set) with svg.configure, and it ended up seeming to fix my issue...
That was until I went down to a lower value instead of 12.
Attached is the scene at scale = 1, and you can see from my debugger that the rect is in the wrong spot, but why is it?
http://imagizer.imageshack.us/a/img633/2685/7UYA8e.png (try maxing the zoom of your browser to view better)
Next in this image I used from scale 1-20 to show the changes that are occurring to the scene based on just the scale changing.
I noticed that this is all due to the height of configuring, and when I turn it off, everything is in place as it should be.
I noticed that without configuring the items would start to cut off at about 13, and with configure on it would start to fit in place at about 15-20.
The next part of the image is showing configure off and how it gets cut off from 15-48.
So I decided to try and make it so that if my scale was above 11 then configure, else don't.
The problem with this is that I am trying to move each rectangle as it's own element. With configure off the Width is 3000 thus I grab any number of random objects from my scene, and this isn't good at all.
Keeping configure on allows me to grab the items pretty well, but at lower scale it screws me up.
I also noticed(because I thought this was the issue at first) that when I was at 12 some of the rects weren't fully sized, and that if I added +3 or so to my configure height it would fill in the remaining amount... This might be due to be having a 0.03*scale border around my rectangles, so I will have to check if that's it, or if I need more than that for my viewport to be full.
Also, if configure is off and the scene is bigger than the screen then objects will also be cut off, width wise as well, it's very weird. Configure on fixes all of this.
So what exactly is going on? Is this a bug or am I doing something wrong? I have been working with Jquery for a few months now, and just recently got into web dev in general, so I'm not sure about everything with the web, and this SVG.
I would appreciate any help as this has been giving me issues from the start.
Raphael.js was what I was using before this, and it was really simple and I had no issues at all, so I'm curious what's going on with this....?
Thanks all!
My code:
@kbwood help please when you can thank you!!!
EDIT:
I noticed when going through my console something weird is going on here.
Now when I scroll over the div I see the rectangle is supposed to be in the "correct" spot, as shown above...
HOWEVER when I scroll on svg or rect it shows the current position of the rects.
I don't know where it's causing this issue to jump down, but I noticed that if I changed my y in my rect to -5.0016 (tried to take about half of 11 which is the height) I noticed that it lined up about perfectly.
So I'm curious why (now at scale 4) that this occuring? Why is it also occuring only on certain scales and once I'm at a large enough scale nothing is changed? Maybe I should be a certain # higher, and that as I scale up that number becomes less and less.
either way messed up, please assist!!!!
EDIT 2: Addition to my first edit. It is actually even weirder than what I first thought. The div will show the place it should be in, the svg shows where it is now, and the rect does some weird stuff when I scroll.
If I scroll down, then the shadow of the SVG rectangles move down, but everything stays in it's place.
Here are the pics: http://imageshack.com/a/img905/8505/u0gI9U.png http://imageshack.com/a/img538/7152/gV5jd9.png
EDIT 3: This is NOT a JQuery SVG issue, but seems to be an SVG bug of some sort, since Raphael.js does the same thing.