I am developing a simple website for a client using Rails and I want to give them an easy way to create and manage their top navigation menu. Wordpress has a great tool (see example below) for this but I haven't found anything like it that is generally available.
So far I am thinking that Jquery Sortable would be the best place to start but to make it handle nested data (like trees), adding and removing elements, and add rules such as limiting the depth of nested elements seems like a lot of work.
How have you guys gone about solving this problem?
Have you tried this
You can initialize like
$(function () {
$("ol").sortable()
})
It also supports animation.
You can also take a look into the alternatives provided
Related
I'm having trouble understanding the Foundation 4 JS docs sorry - if I use this:
$(document).foundation();
Every thing works great, but If I use this:
$(document).foundation('orbit', {bullets:false});
The bullets get removed from orbit but then none of the other javascript works (the responsive .toggle-topbar or the custom forms #customDropdown).
I've also tried this:
$(document)
.foundation()
.foundation('orbit', {bullets: false});
But then all the JS works but the bullets don't get removed.
I'm just not sure how it works sorry, any pointers in the right direction would be much appreciated.
Cheers
Ben
Your suggested answer #CMSCSS, while it works for you, is not accurate in general, especially this part:
if you initialize one plugin with options (e.g. Orbit) your have to
initialize all the others you want to use or they won't run
The reason that custom styles or behaviors won't work or won't be applied is because of the order in which you initialize foundation and its components. To make everything work, your custom styles/behavior and foundation in general, you should do the customization first then initialize foundation. You can go to one of my answers and see how you can make it work. My answer was never accepted but it's a proven solution. I do it that way and it works. On a page I have an orbit, custom forms and grid layout and all work using the given technique. Hope that helps you.
So figured out that if you initialize one plugin with options (e.g. Orbit) your have to initialize all the others you want to use or they won't run like this:
$(document)
.foundation('dropdown topbar forms')
.foundation('orbit', {bullets: false});
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
I have been using nagios + pnp4nagios for a while and am happy with the images rrdtool creates. My current task is to create a panel that has some statistics generated by nagios and after a while the statistics change. I'm looking for something like that:
But also able to switch screens automatically. I do know that I can make a timed javascript function that switches the layout after a determined time, but I also want to add effects and other stuff to the picture. Any good javascript library that has it?
such effects can be achieved easily with most javascript libraries. I like jQuery quite well. See the examples in link text for inspiration
Ok on meebo.com there is instant messages that when you click at the top you can move around i wanna make something like that?
So how do I make Movable forms in JS?
I recommend the jQuery UI plugin called Draggable.
You first need to create your form. Your form will most likely be a div (with solid color or image for the background). Within the div, you have all your form content. The div will also need to be position absolutely (i.e. style="position:absolute")
The JavaScript is fairly straight forward; however, I would personally use something like jQuery to do the work. I'm not sure how familiar with JavaScript you are, but even for an advanced user, using something like jQuery just makes sense. There is a library of tons of already built forms etc with great instructions on how to use them. Let me know if you need more info on how to use a library like jQuery (you can find it here:
http://jquery.com/
You can see all the plugins here:
http://plugins.jquery.com/ (look at 'windows and overlays' - lots of them!)
Click on one that looks interesting, and click on 'demonstration' to see if you like it. For example, the third link down - (mb)ConteinersPlus, a jQuery component for fully customizable and featured container layout (DIV box model) - would let you do this (with almost no work on your end)
http://pupunzi.com/ (this is the example link)
Obviously, if you want to learn how to script it by hand, let me know.
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).