[Last Call] Learn how to a build a cloud-first strategyRegister Now


Draggable, Collapsible, Dynamic DIV windows with JavaScript -Multiple

Posted on 2007-10-18
Medium Priority
Last Modified: 2012-05-05
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.


Question by:chinu1310
  • 3
  • 2
  • 2

Accepted Solution

discon0 earned 1600 total points
ID: 20107036
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.
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 400 total points
ID: 20107048
or better call it like this

  <a href="#" onClick="CreateWindows(['Window1', 'Window2'], ['400px', '300px'], true, ['MoreContent', 'MoreContent']); return false">Create two windows</a>

Expert Comment

ID: 20107070
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);
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 14

Author Comment

ID: 20107136
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?

LVL 75

Expert Comment

by:Michel Plungjan
ID: 20107238
<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


Expert Comment

ID: 20107245
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.
LVL 14

Author Comment

ID: 20110124
New question posted for javascript.

Thanks. C u guys there.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question