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.
Related
There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg
When using a HTML <button> whenever you press the button it moves a little. A small animation to show it's actually a button.
I'm looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.
I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can't seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button - hold - and decide you want to leave the button. I can turn off "draggable" but then it will show a blue square selection box, which is very unwanted.
My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it's slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.
How can I force a button to stay in place even if it's clicked?
So you have to use another tag than button (for instance span) and manipulate it's behaviour with javascript.
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).
I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.
Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.
Example:
Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?
Update
I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?
I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.
EDIT: Margins don't work either, neither a CSS 2 translation.
You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.
Went to the JSFiddle site and played around with the styling there.
I noticed the hover was successful on the edge of the button, but the click was not.
So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.