I am very often write menu like that:
User clicks on menu item and see div block for this item.
Well it's not hard to code but take some time and very boring.
Is there any JS library which can make my life a little easy and automate writing typical UI elements?
The functionality you need is very similar to the one provided by jQuery UI tabs. Take a look at the demo here.
Related
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
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
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.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.
I want to build a dynamic floating window with close button at corner. Is it possible, and also i want to add some content dynamically into that window.
Please help me.. It should be in javascript.. Better without AJAX..
Thanks in Advance
jQuery UI has an awesome floating window. What's cool about the jQuery UI version is that you can also package it with the UI theme manager, which means less time styling.
Check it out here : jQuery UI Dialog examples
All it takes is creating a container (probably a div), and one line of code. Something like this:
<div id="example">I'm in a dialog!</div>
$("#example").dialog();
Here's the documentation: jQuery UI Dialog documentation
What you are looking for is called a "lightbox" technique.
Here is a comparison of many lightbox techniques.
Many exist out there on the web, here are some for jquery and prototype libs:
Jquery: Thickbox, Lightbox
Plugin
Prototype: Lightbox 2,
Leightbox
Also, check out the
wikipedia article on lightbox.
My favourite has always been Scriptaculous, which lets you do all sorts of interesting visual things. The new kids on the block use jquery. One of these two should do the trick for you.
There are lots of samples on both sites that do what you want.
Well at the most basic just create a div and inject content by setting innerHTML to an HTML string. Positioning it can be tricky since you have to worry about scrolling and different browsers have different means of controlling this. You may also want to position relative to some originating element in the page which you can do by digging the element and it's position out of the event object your javascript function receives when the originating element is clicked.
Google hover popup - first link is http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html
There are lots of different libraries out there for making windows. I have found that Livepipes has a very well rounded and customizable javascript library that includes a window control along with a variety of others. http://livepipe.net/control
One that I haven't used but looks promising, is prototypeui. It is based on the prototype and scriptaculous javascript libraries. jqModal is another I have used that is based on JQuery.
take look at fancybox http://fancybox.net/