I would need advice :) I'am using library svg-pan-zoom (https://github.com/ariutta/svg-pan-zoom) in javascript. I have big technical diagram in SVG.. and my goal is zoom at specific element containing attr "id". I would like have that element in center of window...
In a link/image below it is possible to see how page looks after load...
(https://i.stack.imgur.com/YhTTZ.png)
I tried many different ways but without success... I was not able to achieve the desired result.
Please it would be possible to provide me function for zoom at specific element (to have that element in center of window )
Many many thanks.
Related
Have a situation that I am trying to figure out the best approach.
It consists of an image, then peg's pointing off reference points of the image w/ labels. I am attaching an image as an example.
I have not mocked up code yet, still debating the best approach so I was hoping to get some input from the community.
Thoughts:
Static use of top/left positioning: Issue there is this needs to be responsive. As the image scales, we lose accurate placement
Javascript: Could try n use javascript to calculate the positions using ratio'd equations and jquerys .postition()
SnapSVG (or similar), This is what I am playing with right now, create the lines/circles with snap and animate them in. I've never used it, so there is a learning curve.
Would love to hear some thoughts! Thank you
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
I am looking to be able to change the dimensions of smartwindows I have set to appear whenever a given marker is clicked. The default sizing mechanism is not producing windows that are wide enough. Checked the Yahoo Maps API but couldnt find any way to pass dimensions to a smart window. Is it even possible?
couldnt find any solution that would pass parameters to the smartwindow function, but in any case i managed a workaround by setting CSS styles for the html elements i was rendering inside the smart windows. how the dimensions for a smart window are calculated without specifying dimensions for elements within the window is still unclear to me (as it did not reflect standard styling) so in any case if anyone has a more elegant solution additions are still welcome.
I'm trying to implement some kind of very basic flow chart functionality in a div.
Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (divs) splitting.
Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.
Thanks as always SO
W
It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.
i have a map of the US:
http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg
i am trying to embed this code in it:
http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
as you can see it has CSS and javascript
however, i am having a very diffficult time trying to place the css and javascript in the right area. can someone please help me
i am doing this frmo the svg:
and when there is actually a mouse over, it is not doing anything
NOTE: VIEWERS: I KNOW THIS DOES NOT MATCH THE QUESTION SPECIFICALLY: IT IS MY ATTEMPT TO HELP THE POSTER GIVEN A BROADER VIEW OF QUESTIONS POSTED.
I am going to indirectly answer your question given my overview of your other questions.
My assumption: You wish to display a text box given the mouse over of a certian area of a map. On the original page you posted
Thus, you need to investigate this: http://www.w3schools.com/js/js_image_maps.asp regarding image maps. THEN you can put the nice box/text visuals associated with the area on the image over which your mouse moves.
This is much more highly supported than the direct svg method you are attempting, which is not supported well.
To get the image, you can right click it on that page and "save picture as" in your browser.
NOTE: There is a 400px map at the bottom of that page, clicking the "EDIT" link to the right of that will show you the image map for that resolution of a map which might be a good starting point should you wish if to be of a different size (other than 400px). Thus you would need to modify the numbers on that image map if you scale the map to another resoultion on your page.