I have a large d3 chart nearly 4000px x 9000px and I have one text box in which user gives input to search a particular node in chart.
I have used flesler's ScrollTo plugin of jQuery to scroll my screen but issue is when zoom in/out is there then it is not able to locate the given object i.e. it is not moving the svg instated it is scrolling only page.
Is there any way to scroll svg along to locate the node in center of screen?
code snippets of flesler's plugin I'm using is
$.scrollTo($(".mySelector'), 800,{queue:true,offset:{top:-100,left:-1000},margin:true});
Thanks.
Related
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
I am using jQuery mapplic plugin, calling in div element in the following way:
<div><section><div id="mapplic" class="mapplic-routes"></section></div>
After selecting from and to and go Icon in the routes svg is zooming and not displaying within the fixed position. The image is big in size and zooming to top within the browser.
How do I display mapplic svg image in a fixed position?
I tried with position property and tried with div properties.
I have a div report_container which is used to display a collection of dynamically generated charts. the charts are drawn using javascript (Yahoo UI library) and they are plotted on divs which are created dynamically using javascript as well ( because the number of charts varies) when I setreport_container styles overflow to scroll, the div scrolls but the charts which were drawn does not scroll at all. Any idea how can I make the charts scroll with the rest of the content?
EDIT: a screenshot from the console .. the highlighted div is the one where one of the charts start and is created by YUI
I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way i.e. i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.
Here is the js fiddle
http://jsfiddle.net/fahadnabbasi/2FLuf/11/
You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.
I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip
Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/
After including the plugin just add. You can also add a parent div and apply it to that with .parent():
$('.resizable').rotatable();
Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize
For example; if I had a flot canvas graph and I wanted to be able to view a closeup of one of the areas, I want to be able to zoom into a specific area and have a scrollbar appear for horizontal and vertical panning so every section can be viewed. Is this possible?
You may want to use the zoom CSS property. Here is a little example of it in action.
As for the scroll bars, you could try placing the zoomed element within a parent which has overflow: scroll; set.
I hope this helps.
Anything is possible, but flot doesn't support that by itself. Your best bet would be to use the panning and zooming functions built into flot (via the navigate plugin), but then for the scrollbars, you might have to overlay some fake scrollbars (perhaps using a div with overflow:scroll, as #Wolfy87 suggested) and hook them up to the flot graph.
Flot triggers plotpan and plotzoom events when the graph has moved, so you would use them to keep your scrollbars in sync.
I haven't seen anyone do this before, so I can't point you towards an example. But the code doesn't seem unreasonable to put together.