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.
Related
I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.
I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.
You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.
I'm using quicksand to filter categories and Superbox (http://toddmotto.com/labs/superbox/) to show a gallery based off of the premium plugin Royal Slider in a dropdown.
http://bvh.delineamultimedia.com/?page_id=2
There seems to be an issue with the Royal Slider around the _animateTo:function in this file... http://bvh.delineamultimedia.com/wp-content/plugins/new-royalslider/lib/royalslider/jquery.royalslider.js?ver=3.0.93 around line 1825. That is causing the slider to not work properly when inside of the Superbox dropdown feature. When I click the next button on the Royal Slider it doesn't seem to want to go to the next image until I close the Superbox and open it again. Then is when the next image appears.
On this page... http://bvh.delineamultimedia.com/?page_id=13 I don't seem to have an issue with the Royal Slider which is why I believe there is a conflict with the Superbox and Royal Sliders javascript. Also, on this page... http://bvh.delineamultimedia.com/?page_id=12 Superbox works fine with static images perfectly.
I'd like to somehow state "if there is a gallery show it - else show the static image" in the same place.
I also feel like my code that I've altered here. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js Isn't the best since I'm guessing a bit here and there to get this to work.
I've been trying to learn how to debug JS but to be honest am a bit lost. The reason I think the issue is happening around _animateTo:funtion is because console isn't firing around _stopAnimation. Could anyone lend a hand on why this is happening and a good way to debug this problem. I feel a bit overwhelmed at the moment.
To see the issue: to go http://bvh.delineamultimedia.com/?page_id=2 and click on the first image, there will be a dropdown where you will see the gallery. If you click the next arrow it does NOT go to the next image. IF you close the Superbox dropdown and reclick on the first image to see the Superbox dropdown, you will see the image move to the next image, but only after you close and re-open superbox after you click the next arrow.
I hope that makes sense. Thanks so much!
I checked out the code in your Superbox.js . The problem is that you were cloning the element instead of appending it. In this case, the Royal Slider. This line is the culprit, it creates two different "sliders". Which only one was working, though it was hidden.
if (sliderData.length > 0) { // show the slider if there is one
superbox.append(sliderData.clone(true));
}
Just remove the .clone() method and it should be fine.
To fix the element from disappearing during the closing callback. Replace this line here:
superbox.find('.royalSlider').remove(); // remove the slider from previous events
to this one:
superbox.find('.royalSlider').appendTo($(this));
So in summary, all this does is move the slider from your list-item element into the Superbox when its triggered, and puts it back when its closed.
I'm creating a popup for elements in the DOM, much like Qtip. I know there are alot of done plugins for this but I wanted to create one myself.
Basicly what the code does:
Hover element, take that elements offset and alter a little bit so that the popup is over the element.
Show the popup element and then change its position according to the element that was hovered.
But it seems like I've failed. It doesn't work in IE7.
When I hover an element in IE7 my popup shows in the right location BUT the element that was hovered changes position.
JSfiddle: http://jsfiddle.net/egj46/
I can't say what exactly is causing that, it can be solved by moving the popup div "pHolder" to after the content.
hope your all good... Another question :/
Heres the page im working on:
http://beelinetest.site50.net/uw_virtual_tour.html#
Its not a huge problem, but if you press the tabs quickly- two will shoot up- what can i do about this? So it waits for the first tab to complete its movement?
Also, another thing while im here, notice the slight hover over movement ive added to the tabs? When hovered over they move 7px up, then back down when un-hovered. But when clicked the tab moves up and it still thinks my mouse is on hover... Its not until i move the mouse until it moves back down 7px...
Thanks in advance, Tom
Your click handler for each tab should disable the clicks on the other tabs until the "slide in" function is complete. Looking at your code, it might be easier to accomplish if you had a common selector rather than selecting each individual one by id. Perhaps you could add a class to each div you want to use as a tab, then you could operate on them as a group.
I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?
I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}
I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.
There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.