I'm currently developing a plugin that enabled me to mimic the Office Ribbon interface for web applications.
Now, everything up now is functional, but I want to add some animation to it, just as in the original Ribbon.
For people who have Outlook 2013, you can see the behaviour what I mean:
When you click on item that has a dropdown (f.e. "New items") the dropdown comes fly in from the top.
Now, I have created a dropdown myself which become visible by clicking on the icon, but this is without animation (just display block).
Can someone provide me the code I need to make it fly in from the top?
You can find the fiddle here: http://jsfiddle.net/Complexity/nf7Lr/
my menu is decorated with the following class:
<div class="menu" id="mnuCleanUp">
So, I want the menu to fly in from the top (just under the clicked button).
Kind regards,
Kevin
To show the menu
$("#mnuCleanUp").slideDown("slow");
and to hide it back
$("#mnuCleanUp").slideUp("slow");
Jquery has built in method to have smooth appear/disappear
Have you check : http://api.jquery.com/fadein/
The easing attribute let you choose different effects : http://jqueryui.com/resources/demos/effect/easing.html
Related
I know this is a JS/ jQuery problem, and I have very decent CSS skills but sadly my JS knowledge is failing me big time. I bought a website template recently for my portfolio. It's a good one but I'm really struggling to adapt it.
What I'm trying to achieve is:
when you mouse wheel scroll (up or down) through each content block, the links below (at bottom of page) are active based on the content above. Forwards and backwards. So basically the text links at bottom would be bold depending on the active content above it.
I'd also like the text links below to link to it's relevant content above. i.e. Project 3 would open Project 3 content (with the content animation).
For a start I've tried targeting each ID for the content blocks. i.e. id="project-3" then adding href="#project-3" but this is clearly not working. I also tried data-target="#project-3". Still no dice.
I'm trying to mimic the bottom navigation of this brilliant site here: http://fakemusic.fr/ (so as you wheel scroll through each artist, the links below are highlighted + they're clickable.
I made a Codepen here:
[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)
Apologies in advance, I couldn't work out how to de-activate the annoying preloader.
Thanks in advance!
With Jquery it is very easy
Give A unique data-id to your each "display-table" class and give a unique id also in anchor of "menu-item"
make a css class which has a highlight css like underline
then try jquery conditional js like if your "display-table class" has class "projects-item-active" then add class to anchor id and remove from siblings
and if someone clicking on anchor then add class "projects-item-active projects-item-animate" to "display-table" and remove from siblings.
click project 1 project 2 project 3 and see
Pen Added
[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp
I want to create a menu with some items, and at the end of this menu, it has a "Show More" dropdown. This "Show More" shows the rest of the items of menu, that could not be viewed because of the width of the browser. A classic responsive problem.
To illustrate:
And when the width is less than the image before, it happens:
So, my question is, what's the best way to do that? Is there any ready solution?
I am using Foundation, so I can't use any of another CSS module like Bootstrap. But, I can use jQuery, CSS3, HTML5. I don't have more limits than that - I guess =)
I got those images from Instantcart website, so, you can go there to see it working.
On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.
There is ready thing for that in bootstrap called scrollspy
I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks
You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/
I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle
I want to make a menu for the admin side of a website and when I saw the top bar of stubleupon I wanted to make a menu with same style, always on top even when you scroll down, and has drop down items.
here is the link to sumbleupon exemple :
http://www.stumbleupon.com/su/2qQfq3/www.thevirtualpiano.com/
and I am not very good in javascript so if anybody can point me where I can find a resource
or if there is any jquery plugins that does this work it would be great.
You don't have to use javascript if you didn't want to.
A navigation you want could be done in CSS only.
But here are my favourites:
multi level navigation examples
38 jQuery drop down