Code

Discussion on Metro Flexible Navigation

Discussion on Metro Flexible Navigation

Cart 532 sales

liviu_cerchez supports this item

Supported

49 comments found.

Hi! Bought it and it looks really good! how difficult would it be to expand the tiles if you click them to fullscreen? I know it’s possible. But could you maybe get me in the right direction. thanks

Hi, You need to use a plugin like fancybox to expand a tile – take a look here: http://fancyapps.com/fancybox/#examples

Hi. How to implements in cms joomla 1.5 . Please Help.

Hi, this script is HTML, JS, CSS based – you have to integrate it with your favorite CMS yourself or hire a web developer.

I’m on Ffox 19 at Ubuntu canonical and the scrolling (left-right) doesn’t work with arrow keys. It’s supposed to scroll, right?

Hi, no keyboard support for scrolling, but maybe I’ll think about adding it in the future.

Thanx for the prompt reply (and great work BTW). One more question. Does it take options like a plugin i.e. is it possible to define the element that constitutes a tile?

Hi, the tile is based on your markup and classes that define it’s size – no JS options for that.

Hi!

How can I enable animation, I have noticed that you use masonry object.

Thanks

Hi, you need to check out the documentation for the Isotope plugin. It currently uses CSS engine for animation, but I didn’t add any classes to the .css file for this matter. A simple solution would be to modify the animationEngine to jquery in the metro.js file.

jf Purchased

Thumbs up on your work. Please tell me if it’s simple to change the scroll (left to right -> Top to bottom)

Thank you :)

Hi, you can remove the “horizontal” class from the .metro-layout element in the index.html file. That should do the job if I understood your concern.

excellent navigation, i wanna ask if it can be used on any template or how can i apply it on my html site.

plus can it be added to a php script

The script is a standalone script that can be configured to work in your site. You can add any PHP scripts, of course – this is up to you and the needs of your project.

Hi, I like the “Metro Flexible Navigation” UI design. but when I used “Live Preview” on the IE7, it’s not work well, why?

for ex: 1. left/right arrow not work 2. mouse wheel can’t scroll

Hi, thank you for the support. The preview works fine for me: http://d.pr/i/oG26 (arrows+scroll work as expected).

IE 9 :

It doesn’t work with mouse wheel. why?

Mouse wheel scroll works fine for me on IE9 .

Hi, can I use this as a slideshow / header section / part of a wordpress theme page?

Hi, you can use the plugin in whatever environment with adjustments if you purchase the proper license.

Can you provide a link to a demo site that actually works – shows what it does when it opens another page – does it have menu appear on right hand side like Win8 does?

Just what i was looking for however i was hoping that once button is pressed it expands pushing others to the side and bottom or make in them smaller and displaying some hidden content.

Could this be done with the following plugin.

Best regards, Chris

Yes, item can be expanded because Isotope (the masonry grid Metro Navigation is using) is really customizable: http://stackoverflow.com/a/11429236

Hi for some reason when I try to view the page from mobile browser I can’t scroll down.

Hi. The vertical scroll is available only when vertical layout is active. Otherwise the scroll can go only left and right.

Hi, Thanks a lot for this plugin. I try to insert a textarea into a box. This textarea is displayed very well but i can’t write into it. Do you have a workarround for this ?

Thanks

I’ll test things and look for a workaround.

You can prevent the dragscrollable plugin from retaining the mouse events, file metro,js line 92:
$container.dragscrollable( {dragSelector: '.items', preventDefault: false} );

Thank you very much ! It works perfectly.

Hi, is it possible to add your jquery plugin into an html landing page of wordpress? I’m a novice so I’m not quite sure how to do it but I’d love to use your plugin as a frontview to show of different embedded material, e.g. youtube and posts, and link to them when clicked upon.

Of course, it’ possible. Get in touch with me via my contact page (my profile – bottom right) and we can talk further.

Nice Liviu, question. does it also work on smartphone browsers do you know? Please advise. Thanks Adequay

Yes, it should work on smartphones.

Hello looks lovely! Do you know if this will work with a winjs Metro type app? (doing in Blend, latest build of all the Metro JavaScript/HTML libraries…)

Thank you. This is a layout presentation page, you can integrate it with whatever frameworks you can.

I have new chrome

When I cover for example mail icon it gets all blue, If cover yahoo it gets all purple, icon disappears.

What browser are you testing on? Please use a modern browser to get a nice hover effect.

Hover effect doesnt work on Chrome :(

It does, it’s a slight opacity effect. Hover over the image box to see it in action.

Hi, this navi looks great. Are there any plans to add a drag and drop feature in the future (like metro has) so you can rearrange the windows. At the moment i assume the order simply comes from the order they’re placed in the html file?

The order comes from the Isotope plugin used to display the grid elements and it’s based on the order of the elements in the HTML , too. As you can see the drag is currently used to scroll within the viewport, so no drag and drop would make sense in this situation. Check out this script to rearrange items within Isotope, maybe it will help you: http://jstarrdewar.com/blog/2011/10/28/extend-jquery-draggable-to-work-with-isotope

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey