Draggable, Collapsible, Dynamic DIV windows with JavaScript -Multiple

Posted on 2007-10-18
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.,1759,2103610,00.asp

Question by:chinu1310
    LVL 5

    Accepted Solution

    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
    or better call it like this

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

    Expert Comment

    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);
    LVL 14

    Author Comment

    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
    <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

    LVL 5

    Expert Comment

    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:

    I'd also like to point you to where you can find various small javascript goodies related to what you're trying to do.
    LVL 14

    Author Comment

    New question posted for javascript.

    Thanks. C u guys there.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    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…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now