Draggable, Collapsible, Dynamic DIV windows with JavaScript -Multiple

Hi Experts,

I have this issue has to be resolved ASAP. I have a javascript which creates one dynamic div at a time. I want to change it such a way that on single click it should give "n" number of divs with their IDs taken from an array.

Script I have found so far is this. Please modify it to create multiple divs.


LVL 14
Who is Participating?
Add this function to your script:

function CreateWindows(captions, widths, canMoves, ids) {
      for(var i=0; i<ids.length; i++) {
            var caption = typeof(captions) == "string" ? captions : captions[i];
            var width = typeof(widths) == "string" ? widths : widths[i];
            var canMove = typeof(canMoves) == "boolean" ? canMoves : canMoves[i];
            var id = ids[i];
            CreateDropdownWindow(caption, width, canMove, id);

and call it like this:

    <a href="javascript:CreateWindows(['Window1', 'Window2'], ['400px', '300px'], true, ['MoreContent', 'MoreContent'])">Create two windows</a>

The first parameter can be a string or an array, which will be the caption of the windows created. If it is a string then all windows will have the same caption, if it's an array then the windows will have different captions.
Similarly, the second and third parameter define the width(s) and canMove attributes. They can either be arrays of values or just one value.
The last parameter is an array of IDs. Add as many IDs as you want to this array and it will create this many windows.
Michel PlungjanIT ExpertCommented:
or better call it like this

  <a href="#" onClick="CreateWindows(['Window1', 'Window2'], ['400px', '300px'], true, ['MoreContent', 'MoreContent']); return false">Create two windows</a>
I also noticed that there is a small error in your script in function addDocumentHandlers:

lines 355-357, you should change them from
            remove.addEventListener("mousedown", function(e) { return mouseDown(e) }, true);
            remove.addEventListener("mousemove", function(e) { return mouseMove(e) }, true);
            remove.addEventListener("mouseup", function(e) { return mouseUp(e) }, true);
            document.removeEventListener("mousedown", function(e) { return mouseDown(e) }, true);
            document.removeEventListener("mousemove", function(e) { return mouseMove(e) }, true);
            document.removeEventListener("mouseup", function(e) { return mouseUp(e) }, true);
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

chinu1310Author Commented:
Cool..Thanks a lot.
I will be opening new questions on this topic for further improvements. But just one question if anybody have any idea about ready made basic framework which I can use to implement igoogle kind of personalized page.

Will wait for your suggestions and than close this question.


What difference it would make if we call with return false?

Michel PlungjanIT ExpertCommented:
<a href="javascript:ReturnSomeHtml()">Click to replace the page with generated html - the existing page content is wiped</a>

<a href="#" onClick="someThingWhenClick(); return false">event handler to execute some javascript without (necessarily) leaving the page</a>

If you use the first to do something and STAY on the page, you will actually partially unload the page.
Put an animated gif on the page and you will see it stops moving - that is the most visible result.

Other than that, the href="javascript:" protocol is really designed to replace the page you are on - I NEVER use it except if I want to be compatible with NS4 on an image map

Here's one relatively simple script:
Click the 'demo' link at the top of the page to see it in action.
There are various frameworks available and their features increase with their complexity. The Yahoo UI library is one notable example. See a demo of something similar here: http://developer.yahoo.com/yui/examples/container/panel.html

I'd also like to point you to http://miniajax.com/ where you can find various small javascript goodies related to what you're trying to do.
chinu1310Author Commented:
New question posted for javascript.

Thanks. C u guys there.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.