I have a complex problem. I want to create a menu. At the same time just only 3 elements are visible, and 2 other, which are transparent-gradient. If I move the cursor in a transparent element, the list will scroll up or down. The menu menu have sub-levels, which have the same format as the main level.
Here is a sample:
When it stop, it's okay. The first, and last displaying element's CSS set linear-gradient. When it move, i use jquery to animate the moving. But the result is not exactly I want. When it scroll, it looks like the whole list is moving, not scrolling. I want to use jQuery just the move animation, and the transparent gradient set the whole list, not for the list element.
I guess I should use mask for the list, but the background is transparent too. I run out from ideas.
I solve it. I use "overflow:hidden" and svg mask. The sub-level is an other ul list, not include in the first level, and jquery set the display.
Related
I have an element that is draggable using jQuery UI's .draggable(), but I want it to follow a certain path while dragging.
In fact, while it is being dragged the whole layout of the page will be changing.
Since I have one set of styles for how the page looks like before the drag and one set of styles of how the page looks like after the drag is done, I figured using a CSS animation would make sense.
So, now, my question is how can I make that animation occur as the drag is happening?
Or if there is another way to do this then an animation, how can I transition from one style to another as a drag is happening.
What I'm trying to do is get the draggable element to drag into its place in the second styles.
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 want to add buttons somewhere on the page to manipulate JQuery Draggable element without mouse dragging, i.e. programmatically. In other words, I want to shift (or pan) draggable element inside its container up or down, left or right depending on what button user clicks. How can I do it? I cannot seem to find that option in docs. Do I simply manipulate CSS left/top to achieve it and make sure I do not go outside of the container?
$(".drag-view").draggable({drag:function(event, ui){containment:a /*...*/}});
You could draw the element on the screen and then use $.animate() to move it into position. The element would have to be positioned absolutely to animate in that fashion and would, as you mentioned, be a result of top and left.
I'm looking for a way to make my dropdown menu go up when there isn't enough room on the page to see it completely. I'm using HTML, Javascript, CSS, and JQuery only.
Thank you for the help.
-Lynn
Very unclear what you're looking for, but I'm going to assume you want to modify the position of your drop downs when there isn't enough place on the screen. Your best bet would be to have a check in your javascript to see if your drop down (ie. it's height) is bigger than the window's height. If it's not, don't worry about it (assuming the position is correct). If it's bigger, set a new position to the drop down (assuming it's on absolute positioning, depending on how high you want it, it could be as simple as setting the top attribute to 0. This should be executed every time the document is loaded.
Personally it's best to avoid this situation completely, a drop down should never reach, let alone surpass the dimensions of the website.It negatively affects the UX of your website.
EDIT : Based on more info, here is what I would do based on what I understand of your problem. Usually the drop downs are styled in absolute positioning, though to find out exactly where to position them, it's always relative to your principal navigation (where your drop downs will drop down from). So knowing this, I would emulate this logic in a jquery/js script. Here is the high-level logic:
$(<your main navigation's section>).hover(function(){
//logic for hover in
<show drop down (opacity:1 or display:block)>
if(menu position is greater or equal to 50% of screen){ //this means that menu is located in bottom of screen
<display drop down below navigation>
}else{ //menu position is less than 50$ of screen (menu is located in top half of screen
<display drop down above navigation>
}
}, function(){
//logic for hover out
});
Your logic for displaying your drop down is nothing more than a simple jquery call to display the drop down container (by redefining the opacity or display argument of the container's style). To know where to place your drop down, here is your logic:
if above your main navigation, get the y-position of your main-navigation and subtract your drop down's height (retrieve all these values with jquery/js). Give or take an offset that would want between your drop down and your main-nav, and you have the absolute y-position of your drop down. the absolute x-position will be relative to the x-position of the button being hovered by the user in the main-nav, offsetted depending on how your want your drop down be positionned relative to its parent menu item.
if below your main navigation, the calculations are reversed. I'll let you this one to you, as a little playing won't hurt :)
When i mentionned earlier that even though the drop down is positionned: absolute, but in relality the measurements are truly relative to the main navigation, this is especially true to you since your positionning of your main navigation and your drop downs are all dynamic, meaning that a static position wouldn't work in this case.
I've given your the logic behind the code, let me know if you don't understand what I'm trying to explain.
Pat
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/