Show svg foreign element with D3.js on mouse hover? - javascript

I have an svg group and when I hover the mouse above it I want to show additional elements of the group. I have the code at a point where it does work in reverse (e.g. when I hover the mouse above the g the additional elements are hidden):
It works in reverse (JSfiddle)
But when I change it so that the button is initially hidden and then gets visible on hover it does not work anymore: How I actually want it.
I am sorry I couldn't use the built in stackoverflow code viewer, it somehow refused to work.
I think the problem is that the body tag surrounding the button stays at opacity: 0 even after the hove event is triggered. It is easy to observe in the browsers Inspector.

You have to set the opacity in the <button> element itself:
.html(`<button style="color: #000000; background-color: #FF8C00;
border: 1px solid #888888; opacity:0" class="connector-button">
<i class="fa fa-arrows-v" aria-hidden="true"></i></button>`);
Here is your updated fiddle: https://jsfiddle.net/7eoamnn4/

Related

Button turns blue on press (not outline, not select highlight)

I have a button that turn blue when the user holds on to it for a while sample below on mobile. Sample below
This not an issue with ::selected or outline has i have added that and it didn't work.
The whole button turns blue for a few seconds and disappears. How do i stop the button from turning blue?
As I could infer from your problem statement, the background-color of your button might be changing due to :active pseudo-class acting on it which stays for few seconds of click on button and then when click is released it disappears. You may target the button:active selector and override the behavior with the desired background-color and color. I have tried creating a mock of what may help you.
button{
background-color: blue;
color: #ffffff;
height: 32px;
}
/* scenario you might need to override with the background color you want to retain */
button:active{
background: darkblue;
}
<button type="submit">Trial</button>
could you please post your code. Another way we cant help you. we dont know the problem. why button is looks like that. You are telling us about the problem but didn't show anything about problem

Custom cursor creating shivering svg

I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.
At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}

Changing Line color on focus inside input or textarea

I've come across a lot of online editors (for ex. dillinger), where, when the user clicks inside the textarea, the line which has focus changes color. I'm curious to know how stuff works here. Not just the line color but any styling which is possible in an editor's editing portion, I'm completely unaware of it. I came across the concept of zebra striping while googling about it, but I don't think it has anything to do with editable portions where a single line has to be focused dynamically.
It seems achievable though, but how?
PS: Please don't provide any existing tool/utility to achieve this. I prefer reinventing the wheel. If it is not an easy road, at least provide the best to your knowledge.
Thanks in advance.
This is a textarea, but it has many divs underneath it (i.e. a lower z-index) to style it in a particular way. More specifically this is an Ace editor so they may detail some of their effects in the documentation.
For example, if you inspect the source of that page you will find the class ace_active-line which you can see is a div that is located underneath the textarea. The textarea has a transparent background which is why you're able to see the div underneath.
Most simply put this is achieved through the utilization of CSS selectors, in specific :focus.
Even with layered divs and other accompanying elements, you can style these divs when the topmost div is in focus, for instance:
input div.inner-input {
border: 1px black;
}
input:focus div.inner-input {
border: 1px orange;
}
This can also be further achieved through jQuery to edit another div's class or attributes when an input comes into focus.
input.onFocus() {
$('.under-div').addClass('active-line');
}
Well, if you want to reinvent the wheel, you'll need to build the roads to use the wheels on too.
In this case you cannot be working in a textarea (as mentioned in the tags). Instead, the rendering of the editor will be all yours.
One of the approaches would be:
Create a <div> container for the area where the text will entered.
Create another <div> inside the first one. This will be our overlay. Make sure that it has a low z-index. Let's say it's z-index: 1.
Create a third <div> container under the first one. This will be the actual text editor. It has to have transparent background and a higher z-index.
Put a <div> inside the container #2. It's going to be our row highlighter.
For every line in the editor you'll need to render its own <div>, with a <span> inside of it for text. Yup, a lot of custom code: you'll need to write proper functions to push new <div> when user hits Enter to start a new line and so on and so forth.
You'll also need to make sure that the height of these row-div's is fixed to a certain minimum value (up to you to figure out the value and the formula behind the calculation, probably something based on the window height, maybe user preferences or font size). It can grow though, for example when user has word wrapping enabled.
When all of it is done the real magic can begin: highlighting. Let's imagine we have a three-line document loaded. It will look like this:
<div id="textContainer">
<div id="overlay" style="z-index: 1">
<div id="highlighter" style="background: yellow; display: block;">
</div>
</div>
<div id="textEditor" style="background: transparent; z-index: 100;">
<div>
<span>Line 1</span>
</div>
<div>
<span>Line 2</span>
</div>
<div>
<span>Line 2</span>
</div>
</div>
</div>
Now you can determine the exact position and width of the textContainer on the screen: it's required to easily (and with little performance overhead) handle different screen/window sizes.
When user focuses on a certain row you'll need to run some JavaScript which grabs the current top and height values of the row (<div>) the user focused on and sets the <div id="highlighter"> location and height to be the same.
Use css focus function to change the outline color when focus on input box.
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Working fiddle : https://jsfiddle.net/gwLgckvf/

Font-Awesome icon preventing click in parent button

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>

What causes this mouse behavior?

What causes this to happen? (the mouse is not being moved or clicked)
I suspect that the :hover CSS style results in the object having a different size (possibly margin), which causes the :hover CSS style to cease to be applied. This returns the object to its original dimensions, and the :hover CSS style is applied by the browser once more.
The browser can only keep up with this at a certain rate and you see visible flickering.
It's an edge condition.
It is because you are adding a border on hover.
But because you hover near the top, when the border is added, your cursor goes outside of the element.
Would be best to add
border: 1px solid #FFFFFF;
border-bottom: 0px;
to begin with, in your CSS
At a guess, the rollover event is adding a border which changes the effective size of the element, so that the mouse is no longer over it, or something like that...

Categories

Resources