Having a problem getting my javascript working properly . For a single tooltip, it works great. But when I rollover multiple tips, I get a flickering effect. It seems the mouseover, out events are being 'queued' or something.
I've created a fiddle where you can see what I'm talking about
http://jsfiddle.net/eco_bach/dpFBQ/2/
Any other optimization suggestions appreciated!
You just need to add .stop(true, true) before the fadeIn() or fadeOut() methods to end any current animation. This will stop it flickering as seen here
Your code is creating and animating the tool tip every time you mouse over an element, so the flickering is expecting. I suspect you want to open it once and then just update its location and content when hovering others.
In that case you will need to track wether the tooltip is already open or not, if it is update its content and location but skip animating it. If not, do do the animation.
Related
i have finished creating my website and are going to start creating animations for it. I fell in love with this sites animation, https://www.aristidebenoist.com/ , and are trying to recreate it. Anybody know the basis for this effect, and how to go about creating it?
Just checking out the elements in the console, it looks like the developer wrapped his inline elements with a span within a span and gave it a transform/animation property.
You could achieve the same by applying a class that has a transition or animation once the screen has been scrolled to a certain point.
Here is a pen to checkout : https://codepen.io/matt6frey/pen/dwKWMg
Hope that helps out. Cheers!
I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."
After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard 'list' items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.
Issue #1:
When you mouse over the Category, the 'dropdown' div appears as it should, but when you go to mouseover the 'dropdown' div it disappears. But if you mouseover another category the 'dropdown' div disappears and the new one appears as they both should. What am I missing?
Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the 'dropdown' div appears to blink by popping up twice. Can't figure that out either?
I have posted my code here: http://jsfiddle.net/UXxL8/
Thanks so much and I know it's probably something simple I'm overlooking. But you know how it is after you stare at the same code for too long...
Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.
I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.
I set up an updated fiddle here. The Category 3 menu item has been updated.
You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued - fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.
Here's the improved code.
Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.
On most websites, you can press your scroll wheel and drag the mouse around in order to scroll. I use this all the time, and I'm sure others do too.
However when I use jScrollPane to replace the scroll bar, it simply doesn't work. Is there any workaround available?
Edit: Video to clarify what I mean, on the first page it works, but not on the second one.
http://screencast-o-matic.com/watch/cX60XpOwT
This is not possible without either 1) creating a custom method for handling middle-click and scroll or 2) in someway hiding the orginal scrollbar under something else or out of the screen. So theoretically, it's possible, but it's not included in jScrollPane at this time.