I'm using NVD3 1.8 for charting and I've implemented a custom tooltip because our visual design department didn't like the one that the library came with. I've been able to implement most of the design, but I have one problem:
The arrow on the tooltip needs to point to the guideline whether it's on the right or the left. I made this arrow using CSS and I can easily add a class to move it to the other side, but the problem is figuring out when to apply the class. When the user's mouse gets too close to the right side of the screen, the transform: translation() value of the tooltip is changed so that it appears to the left side of the mouse rather than the right.
This is done based on the width if the tooltip, NOT a static distance from the right edge of the screen (I know this because my tooltip dynamically resizes based on its contents, and a tooltip further to the left can sometimes be flipped left by having larger number values). I don't know how to access the "flip" information programmatically, as it seems to make this check after the tooltip is already rendered. How can I get around this conundrum?
Is it possible to just decide that if the guideline is on the right side of the screen then make the tooltip go to the left, and if it's on the left side make the tooltip go to the right?
You could perform a calculation where you just take the width / 2. This is what I do whenever I have a tooltip. I also move the tooltip below the cursor when it's on the upper portion of the page and move the tooltip above the cursor when it's on the bottom portion of the page
Hope this helps.
Related
Working on a small Tooltip component. Running into an issue where the tooltip on mobile goes outside the screen and gets cut off. I'm wondering if there's a way to detect that and then use that info to switch the direction so it's not cut off.
Here's an example of what i'm dealing with
Some more details - Tooltip component wraps around a word in a 'p' tag and add tooltip on click.
I'm trying to make a simple Chrome Extension that allows you to loop a section of a YouTube video. I'm able to put the button, I have all the logic behind it finished, styling etc except one thing. The buttons on the YouTube videos control panel, "Play" button, etc, are aligned in the middle of the control panels horizontal axis. However, my button sits at the bottom of it.
And the only way I'm able to make it have the same alignment as the other buttons is to set it's bottom to 13px. Of course this is a static value and won't work on different screen resolutions and when the video goes fullscreen.
I just want to know a way to make it centered along the horizontal axis like the other buttons. Any help would be much appreciated. Thanks.
You can use percentages like bottom:5% instead of bottom:13px to position the bottom relatively to its parent container. The button will change it's distance from the bottom with resolution change but will keep the same ratio of 5% relative to it's container height the whole time.
I've been working on a program to allow people to draw arrows on a page with their mouse. They can select/deselect arrows and modify their location and size. Pressing delete will remove the arrow. I have it mostly working, but I can't get it when a user drags the arrow to have the sizing handles follow it. Also, when they click on a sizing handle, the arrow on the end next to the dot changes size. Can't figure out what coordinates I'm supposed to be using. The other end is fine. Here is the code on my site: http://www.mtncom.net/doug/
I have a menu box that contains a few links to pages. I'd like it so that if the user "bumps" it with their cursor, the box reacts and jerks slightly (swings in direction mouse 'pushed' it) and then swings back and forth until it comes to a stop. The menu is in a div, and I need the contents to stay in their relative position to the menu (though rotating with it I guess).
How can I accomplish this using Javascript? Preferably not CSS.
How can I accomplish this using Javascript?
You need a function that listens for mouse movements and reports its position. It then compares the cursor position to the positional bounds of the menu. If its within your thresholds you would then reposition/rotate the menu relative to the cursor's approach vector.
How about using jQuery Bounce? There is a similar question here: JQuery UI bounce effect - bounce only once on entering div that might help.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.