Here is what exactly I am trying to do.
I have an image with square elements inside it. When i click on top left and bottom right corners of those elements they are surrounded with divs with border. I then have functions to drag and resize those divs(once they are created by two clicks). I want to be able to record the resized coordinates of those divs in text boxes. For example if the image is with height=700 and width=500. Then if i create a square div inside it with coordinates top left(x=190,y=150) and bottom right(x=290,y=250). Then if i drag this div around the image i want those coordinates to change accordingly. Same thing to happen if i resize it.
Here i have added the code in a web site. laughter.free.bg/imagemapping/Img1.html What you need to do is click on top left and bottom right corners of one of the snack packs. Then you`ll see a box on the right with the coordinates of this Green bordered div. I want those coordinates to change when i drag or resize this div. You can see the code in the source of the page.
Thanks a lot in advance.
It is possible to bind functions to the resize event through jQuery.
For example, ur kiroid has a class of ui-resizable. You could use something like:
$('.ui-resizable').resize(function() {
// refresh your coords here from $('kiroid').css maby?
})
Related
I have a background image and I need to add bunch of oval buttons or images on in my case the "greenish" buttons on top of the background image, that I can click in each one of them and call a function passing a parameter. Please look on the screen shot and let me know how I can position every one of the buttons on top of the image and access them with a click (onPress). I guess the only way is using flex box but I couldn't figure out the style for it.
Thanks
Just style all the green buttons on relatively to the image's boundaries with position: absolute. Percentage values for positioning should work, if your image scales properly on screen size change.
I have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
I'm making a product site in Adobe Edge. I have a circle div that needs to grow in a span of, let's say, 2 seconds when mouseover. Then a text has to appear in it. When mouseout, the text must disappear and do the reverse animation back to normal size. The circle has also to grow from its center, not the top left corner. I'v been trying to do this for hours with jquery and css3 animations but failed to get a satisfying result.
This is very easy with edge animate.
make your circle element.
set a key frame at 00:00 on the timeline for the circles width and height.
press Q (the transform tool) or select the icon at the top left of the screen just to the right of the arrow.
The transform tool scales things based on the origin point, which is repositionable but is automatically in the center of the selected object.
go to 02:00 on the timeline.
resize your circle.
set a keyframe for your text at 0 opacity.
go forward on the timeline.
set another keyframe for your text at 100% opacity.
group the circle and text into a div.
right click on that div and press 'convert to symbol'.
go back to the stage by clicking 'stage' on the top left of the preview window.
select the object that you want to use to trigger the animation.
open the actions for that object.
paste the following code into a mouseover event: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
now make a mouseout event and paste this code: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();
now what should happen is that onMouseOver, the timeline for that symbol plays forward, and onMouseOut, the timeline for that symbol plays in reverse. This way, if the animation is half way through and they mouse out, it will reverse from where it's at back to the beginning.
Probably you would like also to use mouseenter/mouseleave events rather than mouseover/mouseout, if you will nest text div inside circle div.
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html
I tried sample code in App Dev Center, but the code only can show images side by side and fill all scroll view, I want to realize like attached picture, who can give me some thoughts? Thanks~!
The width of a "page" when you use a paging scroll view is the width of the scroll view itself. So if you want to use that feature, the scroll view must be the width of the pix plus half the width of the borders on either side, so that the next picture will come into place correctly. Now, if you don't want to hide the picture at the right before it's been paged into the scroll view, just don't turn on clipsToBounds.
I've written some code which displays a wx.Frame, within which there is a wx.Panel, within which there is a jpg. The jpg is the same size as the frame, so that when the program starts up the user is presented with a picture covering the whole of the window. Overlayed over the top of this picture, and in the centre of the panel I want to put a wx.BoxSizer containing various widgets. So far I've got the sizer visible but, try as I might, I cannot shift it from the uppermost lefthand corner of the panel to the center. No doubt there are many round-about ways of doing this involving grids and borders, but before I set off down this path, I was wondering if I'm missing something simple and there is a command that can be used to position in widget in a specified part of a panel.
ps. I also know I could do this using absolute positioning, but I want to be able to resize the window while keeping the sizer at its centre.
Normally, you can't see a sizer. But regardless, you don't really center a sizer. You center the widgets INSIDE the sizer. So when you add a widget to the sizer, you'd want to do something like this:
mySizer = wx.BoxSizer(wx.VERTICAL)
mySizer.Add(widget, 0, wx.CENTER|wx.ALL, 5)
Now, that will only center it horizontally. If you want it in the very center of the panel, then create another BoxSizer that is oriented horizontally and add the first sizer to the second one, centering it too.
hSizer = wx.BoxSizer(wx.HORIZONTAL)
hSizer.Add(mySizer, 0, wx.CENTER)