I am working with jquery UI tabs to make a tabbed navigation. It has active and hover both stages when the background color should be white. I managed to get this ok, but when I'm hovering the element right beside the current element, a small portion of my arrows' background isn't changing to white but staying blue. You'll understand the program when you see the demo that I'm working on here:
http://arbabpolypackltd.com/erdem/ . It is supposed to look like this:
. Please help!! thanks!
The reason that the blue is showing is that the individual nav containers are not extending far enough to the left (to be overlaid with the nav item to their left):
Related
Ive got a hamburger nav element that is white most of the site has a dark background, but a couple of sections have light backgrounds.
What im trying to do is if the hamburger nav is over one div keep its css one way, if its over another div change its css.
Ive been trying to get this to work by calculating how much the page has scrolled using $document.scrollTop() and there by working out where the hamburger nav would be, but there a 2 issues with this :
1) its not very automated and each time new content is added to the page and the sections get longer it will have to be recalculated
2) Some of the section heights are set responsibly so knowing the height of section in advance and the hamburgers position in relation to them is not possible.
Any idea how this could be done ?
Ive made a JSfiddle here : https://jsfiddle.net/kd1x7jk4/1/
I believe what you are describing is collision detection.
There is a library that can help here:
http://sourceforge.net/projects/jquerycollision/
live site is here: http://www.mdw-art.com/new/index2.html
Image of my problem is here: http://i.imgur.com/12gc2.jpg
So the problem is when I hover over the navigation bars at the top, those are set to drop down on hover events. However, when you mouse-down too far on the outer divs and hover over the previous/next navigation tabs the menu disappears.
In the image the menus are in the red, yellow, blue, and purple tabs, the navigation tabs are in orange, and the striped areas are where they overlap.
What is the best way I can correct this issue? Am I setting it up incorrectly? Can I drastically alter the z-index on hover events to prevent it from occurring? Something else I'm not thinking of?
Hi guys I have put together a simple dropdown menu system that uses hoverIntent to display the submenu and also display a lightbox style 'lights out' dark background.
I've got the menu working, but I'd like to update it so if you move from one item to the next the dark background stays where it is rather than disappearing and reappearing.
I have created a jsFiddle so you can see what I'm talking about:
http://jsfiddle.net/gGd6Y/10/
Try hovering over menu item 1 then moving to item 2.
I would like to be able to see the element the mouse cursor has moved to in the .mouseleave() part of the call to HoverIntent, then if it's another menu item I would prevent the dark background from being switched off.
With the way the HTML is currently setup it can't be done. The shadow covers the other hoverable elements. So when you mouseleave you are hovering over the shadow not the other LIs.
My proposed solution: http://jsfiddle.net/iambriansreed/k98LP/
I made the menu appear above the shadow. I delayed the shadow fade out action and made sure no other menu item was hovered before actually fading out.
See if this helps: http://jsfiddle.net/gGd6Y/11/
I've changed the menu items to stay on top of the overlay.
Edit:
Solution proposed in my last comment:
http://jsfiddle.net/gGd6Y/16/
Simple solution is to add mouseleave listener to container of all items.
More flexible solution is to store boolean values is_element_hovered for each element. When mouseleave event happens, set small delay and after that delay check your boolean values and set background animation properly.
I'd like to create a vertical website with multiple div's that appear at certain y-points on a website. These div's will host text. The position of these div's will always be fixed. 20% from the left and about 250px from the top.
What I want is to have the content of the div to display at certain vertical points on the page and disappear when I scroll down to the next description; only to have the next div appear straight after that. So that they have a quick transition from a to b.
A few good examples are:
Clicking on the links of this site makes the descriptions appear and they change on scroll: http://www.mattssonvandeneeden.nl/
The type in the centre: http://www.freetoair.org.uk/
The headings: http://www.formsofinquiry.com/
Can anyone point me into a particular direction or help me work out how it's done. I've looked at their code and still cant get it to work.
You can use jQuery's scrollTop(), fadeIn() and fadeOut() functions to achieve this. Depending upon the scroll placing you will show/hide relevant divs.
You can check this demo on jsFiddle.net.
Hope this helps you.
I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/