I have a PDF document embedded in div in a page. The page also has re-sizable regions to make one column smaller/larger than another on demand.
When re-sizing the regions, onmousemove events are not fired when the mouse is over the pdf, thus breaking a lot of the re-size functionality.
Any way to get these onmousemove events?
Thanks!
Not that I know of.
One option is to replace the embedded PDF with a placeholder (a <div> for example, same dimensions as embedded PDF) during dragging. So, when the mousedown event fires, hide the PDF, show the placeholder. When the user has finished dragging show the PDF again.
Ended up overlaying a div on top of the PDF.
Related
There seems to be a bug with the embedded scene and the option of mouse cursor (cursor='rayOrigin: mouse'),
i've put an mouseenter and mouseleave event on a box to change it's size. It works fine as long as the page is contained in the browser, but when the page is "scrollable" the events get messed up ( like showed in the gif, link bellow). I don't know if I messed up somewhere but it seems that it comes from Aframe. There's a link bellow for the github issue ( more details on it).
GIF :
Github Issue :
https://github.com/aframevr/aframe/issues/3410
The mouse-cursor component uses the whole window to calculate the position, so You'd have to rewrite it, to utilize the <canvas> for raycasting.
There is a workaround, you can make a fullscreen scene and put it in an <i-frame>, where the window is the iframe's body.
Example here.
I have a Dojo Content Layout Pane on my Page and inside that there is an image which is being formed inside my Python code. The images is made from multiple small segments. Now what I have to do is to show different tooltips on different segments of the image. What I did was that I associated the image to a and each area has different tooltip. Now the problem is that when the Content Pane is resized, then it resizes the image as well but the coordinates in remain the same so the tooltips get screwed up. Is there any way to change the coordinates when the resizing is done? Because what I think is that when resizing is being done, then DOJO is handling it and the internal onresize event us not triggered.
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I'm looking for a script that will allow a user to pick an image in an HTML page and drag it to a new location while allowing the other page's element to align around it.
While dragging the image should be completely visible (there are many scripts, like TinyMCE and CKeditor) which don't show the image while dragging and only show its new location and the elements around the dragged image after dropping it.
And just to be clear, the image is using the same z-index as the rest of the page (its inline).
I hope I was clear enough, let me know otherwise.
Something like jQuery Masonry? http://masonry.desandro.com/
My page has a full screen flash object with a centered fixed content area (the rest background).
Without touching the flash source, I want to add "links" to set places within the content area to run script(s) (eg. ajax, event tracking) - similar to an image map.
Needed: - any page click compares the clicked x/y coordinates to a lookup table and if coordinates are within a "link" region, run a script - remember the coordinates are of the fixed content area within flash, not relative to the browser. will the Flash animation and interactivity still work as normal?
Options tried:
set flash wmode=transparent and place a div containing links covering active area
This works in IE but Firefox disables the interactivity of the Flash file under the div layer
AFAIK Internet explorer is the only browser that allows click events to be received by elements under transparent content, so an image map won't work.
I do not believe there is a way to accomplish what you are trying to do.
Though, If you could edit the flash source you could capture the event there and then send the coordinates of the click to javascript through ExternalInterface.