Maximise & Minimise function

Results 1 to 4 of 4

Thread: Maximise & Minimise function

  1. #1
    Join Date
    Dec 1969
    Posts
    143

    Default Maximise & Minimise function

    Hi,<BR><BR>I have a problem positioning divs on a page after minimizing the tables:<BR>Here is the detail.<BR><BR>I have a page with two table in it, individually wrapped in a div.When I try to minimize the first table, the second table should essentially occupy the room that was originally taken by table 1.That is, I would like to display just he header of table 1 when minimized and table 2 should move up.<BR>I&#039;m not able to position my divs this way.I guess I&#039;m going wrong somewhere.Please help me!<BR>here is my piece of code:<BR><BR>&#060;html&#062;<BR>&#060;head&#062;< BR>&#060;title&#062; New Page 2 &#060;/title&#062;<BR>&#060;style type="text/css"&#062;<BR> p.c1 {text-align: right}<BR> #elDRAGOne { <BR> position: absolute;<BR> left: 5; top: 35; <BR> width: 800;<BR> clip: rect(0 800 800 0)<BR> }<BR> #elDRAGtwo { <BR> position: absolute;<BR> left: 5; top: 360; <BR> width: 800;<BR> clip: rect(0 800 800 0)<BR> &#060;/style&#062;<BR>&#060;script language="JavaScript" type="text/javascript"&#062;<BR>&#060;!--<BR>function ShowHide(shtarget, callingpic)<BR>{<BR>if ( shtarget.style.display==&#039;none&#039;)<BR>{<BR>//Already hidden, so show<BR>shtarget.style.display=&#039;inline&#039;; <BR>callingpic.src=&#039;../images/window_min_box.gif&#039;;<BR>callingpic.alt=&#039; Minimize &#039;;<BR>} else<BR>{<BR>shtarget.style.display=&#039;none&#03 9;;<BR>callingpic.src=&#039;../images/window_restore_box.gif&#039;;<BR>callingpic.alt=&# 039;Restore &#039;;<BR>}<BR>}<BR>//--&#062;<BR>&#060;/script&#062;<BR>&#060;/head&#062;<BR>&#060;body&#062;<BR>&#060;script LANGUAGE="JavaScript1.2"&#062;<BR>&#060;!--<BR><BR> currentX = currentY = 0; // initialize global position-tracking variables<BR> whichEl = null; // initialize global element-being-dragged variable<BR> <BR> // function for onmousedown<BR><BR> function grabEl() { <BR> whichEl = event.srcElement;<BR><BR> <BR> while (whichEl.id.indexOf("DRAG") == -1) {<BR> whichEl = whichEl.parentElement;<BR> if (whichEl == null) { return }<BR> }<BR><BR> whichEl.style.pixelLeft = whichEl.offsetLeft;<BR> whichEl.style.pixelTop = whichEl.offsetTop;<BR><BR> currentX = (event.clientX + document.body.scrollLeft);<BR> currentY = (event.clientY + document.body.scrollTop); <BR><BR> <BR> }<BR><BR> function moveEl() { <BR> if (whichEl == null) { return };<BR><BR> newX = (event.clientX + document.body.scrollLeft);<BR> newY = (event.clientY + document.body.scrollTop);<BR><BR> distanceX = (newX - currentX);<BR> distanceY = (newY - currentY);<BR> currentX = newX;<BR> currentY = newY;<BR><BR> whichEl.style.pixelLeft += distanceX;<BR> whichEl.style.pixelTop += distanceY;<BR> event.returnValue = false;<BR> // function for onmousemove<BR> }<BR><BR> function dropEl() { <BR> <BR> whichEl = null;<BR> // function for onmouseup<BR> }<BR> <BR> <BR> function checkEl() {<BR> if (whichEl!=null) { return false }<BR> }<BR><BR> function cursEl() {<BR> if (event.srcElement.id.indexOf("DRAG") != -1) {<BR> event.srcElement.style.cursor = "move"<BR> }<BR> }<BR><BR><BR> document.onmousedown = grabEl;<BR> document.onmousemove = moveEl;<BR> document.onmouseup = dropEl;<BR> document.onmouseover = cursEl;<BR> document.onselectstart = checkEl;<BR><BR><BR>//--&#062;<BR>&#060;/script&#062;<BR><BR><BR>&#060;div ID="elDRAGOne"&#062;<BR><BR>&#060;table id="MyWindow" border="0" class="border" cellpadding="0" cellspacing="0"<BR>width="100%" &#062;<BR> &#060;tr&#062;<BR> &#060;td width="45%" height="21" bgcolor="#528abd" class="title-white"&#062;&#060;img src="../images/dragdrop.gif" align="absmiddle" title="Drag and Drop" class="cursordrag" &#062;&nbsp;Table1 &#060;/td&#062;<BR> &#060;td width="45%" height="21" bgcolor="#528abd" class="title-white"&#062;&#060;img<BR> src="../images/window_close_box.gif" onclick="MyWindow.style.display=&#039;none&#039;" width="16"<BR> height="14" alt="Close " align="right"&#062;&#060;img src="../images/window_min_box.gif"<BR> onclick="ShowHide(MyWindowClient, this)" width="16" height="14" alt="Minimize "<BR> align="right"&#062;&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr id="MyWindowClient"&#062;<BR> &#060;td width="100%" height="100" valign="top" colspan="2"&#062;<BR> &#060;table&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test1&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test1&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test1&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test1&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;/table&#062;<BR> <BR> &#060;/td&#062;<BR> &#060;/tr&#062;<BR> <BR><BR> &#060;/table&#062;<BR>&#060;/div&#062;<BR><BR>&#060;div ID="elDRAGtwo"&#062;<BR><BR>&#060;table id="MyWindow2" border="0" class="border" cellpadding="0" cellspacing="0"<BR>width="100%" &#062;<BR> &#060;tr&#062;<BR> &#060;td width="45%" height="21" bgcolor="#528abd" class="title-white"&#062;&#060;img src="../images/dragdrop.gif" align="absmiddle" title="Drag and Drop" class="cursordrag" &#062;&nbsp;Table2 &#060;/td&#062;<BR> &#060;td width="45%" height="21" bgcolor="#528abd" class="title-white"&#062;&#060;img<BR> src="../images/window_close_box.gif" onclick="MyWindow2.style.display=&#039;none&#039;" width="16"<BR> height="14" alt="Close " align="right"&#062;&#060;img src="../images/window_min_box.gif"<BR> onclick="ShowHide(MyWindowClient2, this)" width="16" height="14" alt="Minimize "<BR> align="right"&#062;&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr id="MyWindowClient2"&#062;<BR> &#060;td width="100%" height="100" valign="top" colspan="2"&#062;<BR> &#060;table&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test2&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test2&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test2&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;tr&#062;<BR> &#060;td&#062;test2&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;/table&#062;<BR> <BR> &#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;/table&#062;<BR> <BR>&#060;/div&#062;<BR>&#060;/body&#062;<BR>&#060;/html&#062;<BR><BR><BR><BR>Thanks

  2. #2
    Join Date
    Dec 1969
    Posts
    3,961

    Default RE: Maximise & Minimise function

    No, divs don&#039;t work like that, you&#039;d have to manually move the .top position of the second div to the .top position of the first, obviously remembering it&#039;s original position so you can re-position it when you show the first table again.

  3. #3
    Join Date
    Dec 1969
    Posts
    143

    Default using css?

    Is it possible to do with CSS?<BR><BR>I can fix this if I enclose all these table under a single table.<BR>But I can&#039;t do this in my case because I also want to be able to drag and drop these tables individually.<BR><BR>Please advice.<BR><BR>Thanks<BR>Mili

  4. #4
    Join Date
    Dec 1969
    Posts
    3,961

    Default RE: using css?

    Um, no I think you need Javascript and/or DHMTL.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •