How to create hyperlink in Canvas - html

I am able to add given text into canvas using jcollage ( http://radikalfx.com/files/collage-with-text/demo.html) plugin but when user entered a text such as: www.example.com, it should automatically be converted to a hyperlink.
Some body please help how to figure that user entered text is hyperlink and how to find hyperlink position because i am converting that canvas as image and showing in web view in Titanium there also if user clicked on hyperlink i have to transfer it to that page.

That's not as simple as you might think.
The canvas doesn't actually "store" the text, it's just a grid of pixels. It's not aware of elements drawn on the canvas or anything. As such, the canvas can't "hyperlink" a text element.
One of the options would be to add a click event listener to the canvas, get the x/y of the event, and if you hit the text, redirect to the url. To do this you would need to keep track of the text's position (rotation?) and size, manually.
Another, possibly easier option, would be to simply add a element on top of the image that contains the text. Then, you can simply add a hyperlink.
Working example of a link overlaying the canvas

It's not possible.
In order to make a "hyperlink", you would have to create your own box, fill it with text, keep tabs of its position (in 3D -- to make sure that it's not covered by another layer), style the text in a specific format, and THEN check to make sure that if a person clicks on the canvas, and the click happened on the box, AND the box was the top-most layer, that you'd set the user's window.location to be equal to whatever they typed in (if you validated that it was, indeed a correctly-written URL).

Related

How to make a div draggable from just 1 on of its child nodes

I am using the draggable attribute to enable reordering of elements like the following . I detect the various drag events and can interpret these to reorder the array of data to show.
The problem is that I attach draggable to the row as a whole to get the visual effect I want from the browser, but I cannot now select the text "Two" using the mouse, because it is being interpreted as a drag event. Attaching draggable="false" to the input did not help.
The ideal UI would that you have to drag from the drag-icon but that when you do, you see the whole row of elements move (at least in Chrome as I know draggable can look different between browsers).
One option might be to use a blurry png of the row specify the drag Image, but ideally it would be an the live data
So the solution was to add event listener to the drag icon such that when the mouse was over the parent node was given the draggable attribute at that time. That prevented dragging from any other part of the component as well as the artifact when trying to select text - a double win

how to get the same font effect in photoshop image

I am really new at photoshop and I created some some effect on text few days back now I Want to get the same effect and apply it again in different image
It's basically a date and now I want to modify it but I need same effect
Here is the image that I created
I now want to edit it to todays date but I don't remember how I did.. Please help me people..
Double click on the layer containing the text to get the layer style window.
There you will find a "Drop Shadow" option than you need to click and check. The settings that I would guess for the image you posted are
Distance: 0
Spread and Size vary depending on the size of your text
You can save the layer style by clicking "New style" in the layer style window. This will allow you to re-use the same settings.
To use a saved layer style go to Styles in the layer style window and choose from the styles list.

How do you auto fit an image on a button so that you don't have to stretch the button to show the picture in Access 2010?

I'm building an access database for my music catalog. I've created one main table with a bunch of queries. I want to make a decent looking front end. I have a bunch of buttons with macros assigned to them already. The problem (which I presume is something very small that I'm missing) is that I added a picture to the button it's just a picture of vinyls that would run a query to show my vinyls. The picture only displays a portion rather than the whole picture. I can get it to show the picture by expanding the button size but this is not desired.
Any help is appreciated.
Thank you and Happy Thanksgiving.
The button doesn't resize the image you assign to it.
You first need to resize your picture files to whatever size you deem suitable for the button, then use that scaled down image.
Alternatively, you can use the Image control instead of a button. That control will allow you to resize the image inside it, but it will generally appear slightly blurry, depending on the image and the dimensions you resize it to.
Also, forcing Access to load larger image and then resize them can make your application less responsive if you have a lot of images, since you make it do extra work.
A workaround is to work with an image and a button.
Insert and size the image you need in the form
Add a button, setting its property "transparent" to true
Overlay the transparent buton over the image
Make sure the button is on the topmost layer usuing the "bring forward" in the image menu. We have then the transparent button over the picture
Associate VBA code or macro to transparent button.
For all intent and purposes, user will click on an image, but because there is a transparent button over it, will be in fact clicking on the button

Selenium: How can I click through a transparent overlay?

I have an element that fires some javascript on click.
Partially covering the element is a mostly-transparent graphic, which passes all events to that element. This way, regardless of if the overlay or the element is clicked, the element gets the events.
I'm trying to write a test in selenium that clicks the element under test and verifies the behavior, however the chrome webdriver tells me it can't click the element because the overlay will get the click event.
That is fine, though... How do I tell selenium that I don't care, to click anyways? I don't want to specifically click the overlay (in this test), the overlay is just eye-candy so the test should still work even if I remove the overlay.
edit:
To make clear... I want it to click in wherever it would have, if the overlay wasn't there. this way it'll click the element if there is no overlay, but click the overlay if covered.
You will not be able to click on the object under the overlay as Selenium has been written to only access what a user can access. If a manual user cannot click through then neither can Selenium.
You could either fire JavaScript directly on that object via the javascript_executor method, or alternatively, perform the interaction which will remove the overlay in your test
I could resolve this issue: In my application top header was visible and i clicked on one of the top elements (which was visible) and could continue with rest of the script execution
I solved this issue by clicking the coordinates of the close button.
Check out this answer. I showed how to click on the little "x" there, without needing to know the name of the actual button. Sometimes its easier to find the class of the image, for example.
Worst case, find the closest element to the button and change the last method to move_to_element_with_offset(element,x, y) to go from the element you found to the coordinates of the button on screen.
Once you do that, the overlay disappears and you can click as normal.

svg path pointer-events - click detection

I'm writing some HTML so that I can draw a Bezier curve using the HTML SVG and PATH tags. My curve comes out really nice and now I want to add a capability where if a user hovers his/her mouse over the curve I change the color. What's happening though is that the SVG creates a large box that contains the path and it catches all clicks. It's essentially blocking everything underneath it, even in areas where the path is not present. Imagine that the path goes from the bottom left corner to the top right corner and someone clicks in the top left corner (where it's empty but I have a button). That click doesn't go through.
I realized that in CSS I can add a pointer-events: none; line and that allows me to click through the SVG altogether but that disables the SVG completely.
So the question is, is there a way that I can get a path (with a large stroke width) to catch clicks and allow clicks to go through in areas where the path is not present?
mj
I had a similar issue where the empty section of my path was blocking and preventing hover of SVG elements underneath it, even in the section where the path was not present. I resolved it by specifying none for the fill CSS attribute and also removed the fill-opacity attribute. So try this, hopefully it will help.