CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 15 of 71

Hybrid View

  1. #1
    Join Date
    Jun 2008
    Posts
    142

    [RESOLVED] How to move the <div> using javascript??

    Hi

    I faced problem with moving <div> using Javascript. I found one example in google . The following code i found.

    Code:
    <html>
    <head>
    	<script type="text/javascript">
    		var incrementVal = 1;
    		var timer;
    		var flag;
    		function scroll(flag){
    			var obj = document.getElementById("movingDiv");
    			var isIE6 = (document.documentElement.clientHeight)? true : false;
    
    			var Y = parseInt(obj.style.top);
    			var cY = (isIE6)?document.documentElement.clientHeight-250 :((document.all)? document.body.clientHeight-250:window.innerHeight - 250);
    			if(flag==1 && Y<cY){
    				obj.style.top = (Y+incrementVal)+"pt";
    				timer = setTimeout("scroll(1)",incrementVal*1);
    			}else if(flag==-1 && Y>0){
    				obj.style.top = (Y-incrementVal)+"pt";
    				timer = setTimeout("scroll(-1)",incrementVal*1);
    			}else{
    				clearTimeout(timer);
    			}
    		}
    	</script>
    </head>
    <body  class="body">
    <div class="maindiv">
      <div class="html_js_code" style="text-align:center;">
       <table class="table-with-thin-border" style="margin:auto;background-color:white;width:40pt;height:100pt;">
      	<tr>
      		<td valign="top" align="center">
      			<a href="#" onClick="scroll(-1);" onClick="scroll(0)">
      				<img src="../images/upArrow.gif" width="18" height="24" alt="Scroll Up" />
      			</a>
      		</td>
      	</tr>
      	<tr>
      		<td valign="bottom" align="center">
      			<a href="#" onClick="scroll(1);" onClick="scroll(0)">
      				<img src="../images/dnArrow.gif" width="18" height="24" alt="Scroll Dn"/>
      			</a>
      		</td>
      	</tr>
      </table>
      <div id="movingDiv" style="position:absolute;left:100pt;top:10pt;border:1px blue outset;width:160px;background-color:lightyellow;font-weight:bold;">Moving Div</div>
    </div>
    </div>
    </body>
    </html>
    In this code, when i click on downarrow it is continuesly going down. but what i want is : when i click on some place the Moving <Div> will come to exact place where i click. can any body suggest on this code ??

    thanks in advance...

  2. #2
    Join Date
    Aug 2005
    Location
    Imperial College London, England
    Posts
    490

    Re: How to move the <div> using javascript??

    Ok. The best way that I've found to do this is to use the mousemove event to trace the position of the mouse. Then you, in the mousr click event, move the div.
    e.g.
    Code:
    <html>
    <head>
    	<script type="text/javascript">
    var LastMouse = new Array(0, 0);
    var isIE = document.all ? true : false;
    
      function MouseCatch(e) {
    	if (isIE) {
    	  LastMouse = [event.clientX, event.clientY];
    	} else {
    	  LastMouse = [e.pageX, e.pageY];
    	};
      };
    
      function MoveDiv() {
    	if (d = document.getElementById("movingDiv")) {
    	  d.style.left = LastMouse[0] + "px";
    	  d.style.top = LastMouse[1] + "px";
    	};
      };
    
      document.onmousemove = MouseCatch;
    	</script>
    </head>
    <body  class="body" onClick="MoveDiv();">
      <div id="movingDiv" style="position: absolute; left: 100px; top: 10px; border: 1px blue outset; width: 160px; background-color: lightyellow; font-weight: bold;">Moving Div</div>
    </body>
    </html>
    Hope that helps!
    Oh, I've never tested it when there's been scrollbars (I always use it with self-sizing pages, so there never are scrollbars )
    Last edited by javajawa; August 15th, 2008 at 02:54 PM.
    Help from me is always guaranteed!*
    VB.NET code is made up on the spot with VS2008 Professional with .NET 3.5. Everything else is just made up on the spot.
    Please Remember to rate posts, use code tags, send me money and all the other things listed in the "Before you post" posts.

    *Guarantee may not be honoured.

  3. #3
    Join Date
    Jun 2008
    Posts
    142

    Re: How to move the <div> using javascript??

    hey thanks for reply.

    one more updation i need in this example. Suppose when i click on left side, it should be disply on right side. in my application, i have a table in that table number of rows are there. when i click on any row it should be display parallel to that line, where i click on the line.

    and in my application it should always coming from top. Actually in this div i have table, when i click on right side table row, the moving <div> table should be display parallel to that line.

    i hope u understood my requirement.

    thanks in advance...

  4. #4
    Join Date
    Aug 2005
    Location
    Imperial College London, England
    Posts
    490

    Re: How to move the <div> using javascript??

    Ok. I'm not going to do this all for you (well, not for free anyway ), but here's some pointer.
    Two really useful functions (my versions below) for this kind of thing are GetWindowSize and FindPosition.
    Code:
    function GetWindowSize() {
        var size = new Array(-1, -1);
        if( typeof(window.innerWidth) == 'number' ) {
          size[0] = window.innerWidth;
          size[1] = window.innerHeight;
        } else if( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
          size[0] = document.documentElement.clientWidth;
          size[1] = document.documentElement.clientHeight;
        } else if( document.body && (document.body.clientWidth || document.body.clientHeight)) {
          size[0] = document.body.clientWidth;
          size[1] = document.body.clientHeight;
        };
        return size;
      };
      function FindPos(obj) {
        var curleft = curtop = 0;
        var h = obj.offsetHeight;
        var w = obj.offsetWidth;
        if (obj.offsetParent) {
          do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
        };
        return [curleft,curtop,curleft + w,curtop + h];
      };
    Now, on each cell in your table you use something similar to the following code (I'm assuming you're going for a tool-tip type effect here, hence the naming)
    Code:
    <td id="ttc_72" onClick="ShowToolTip('ttc_72');">.....</td>
    Obviously, you have to have the id's matching in each cell (there are ways on generating this, but that's outside the scope of this reply)

    Next, the ShowToolTip function:

    Code:
    function ShowToolTip(cell_id) {
      if (Cell = document.getElementById(cell_id) && TipDiv = document.getElementById("ToolTipDiv")) {
        var CellPos = FindPos(Cell);
        var WinSize = GetWindowSize();
        if (LastMouse[0] + parseInt(TipDiv.offsetWidth) > WinSize[0]) {
          TipDiv.style.left = (LastMouse[0] - parseInt(TipDiv.offsetWidth)) + "px";
        } else {
          TipDiv.style.left = (LastMouse[0]) + "px";
        };
        TipDiv.style.top = CellPos[1] + "px";
      };
    I'm not certain this will give the effect you want (In fact I haven't tested it, and I'm still worried about LastMouse when working with scrollbars!), but If you take these sections of code into your file (all of the script in the script tags, the rest as changes to the HTML) you should get something (if not, post the full code to save me putting this lot together )
    Help from me is always guaranteed!*
    VB.NET code is made up on the spot with VS2008 Professional with .NET 3.5. Everything else is just made up on the spot.
    Please Remember to rate posts, use code tags, send me money and all the other things listed in the "Before you post" posts.

    *Guarantee may not be honoured.

  5. #5
    Join Date
    Jun 2008
    Posts
    142

    Re: How to move the <div> using javascript??

    hey sorry to trouble you. I am new to Javascript. I am posting my code.
    The following code is in one table which is data displaying in my screen view. In this table have 7 columns. If i click on this table at any row, It should display the moving <div> parallely where i click on the row. this table is in xhpPrjCTask.jsp and moving <div> is in another jsp.
    code:
    Code:
    <tr id="TR_LINE_<%=t.getID()%>"  bgcolor="#FFFFFF"  onClick="changeContext(<%=t.getID()%>);" >
     <td width=12 class="tblContentCellLR tsPad2 <%=bgstyle%>"><%=t.renderCActionMenu(_ahsPage)%> </td>
    
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=left>
        <table cellspacing=0 cellpadding=0 border=0><tr>
    
        <td valign=middle>
    <%
          if ( t.getMoveLeftTaskId() <= 0 ) out.println( "<img src=\"graphics/ozIcon10LeftDisable.gif\" width=12 height=12>" );
          else                              out.println( "<img src=\"graphics/ozIcon10Left.gif\"        width=12 height=12 onClick=\"moveTaskLeft( "+t.getID()+", "+t.getMoveLeftTaskId()+" );\" >" );
    %>
        </td>
        <td valign=middle>
    <%
          if ( t.getMoveRightTaskId() <= 0 ) out.println( "<img src=\"graphics/ozIcon10RightDisable.gif\" width=12 height=12>" );
          else                               out.println( "<img src=\"graphics/ozIcon10Right.gif\"        width=12 height=12 onClick=\"moveTaskRight( "+t.getID()+", "+t.getMoveRightTaskId()+" );\" >" );
    %>
        </td>
        <td valign=middle>
    <%
          if ( t.getRightShiftIdx() > 0 )
          {
            out.println( "<img src=\"graphics/z0.gif\" width="+(16*t.getRightShiftIdx())+" height=1>" );
          }
    %>
        </td>
        <td class=verySmall><img src="graphics/z0.gif" width=2 height=1></td>
        <td class=verySmall><img src="graphics/z0.gif" width=2 height=1></td>
        <td class=verySmall valign=middle nowrap name="taskname" id='TD_TASK_<%=t.getID()%>'><div id='divTaskName_<%=t.getID()%>:divParentTask_<%=t.getParentTaskId()%>'  onClick="MM_openBrWindow('ozPrjTaskDtl.jsp?id=<%=t.getID()%> ','prjEdit','width=780,height=580');" oncontextmenu="return contextMenuCursor( event, 'PRJEDIT', '<%=t.getID()%>', '<%=t.getID()%>' );" class=dragclass><a href="#" ><%=AhsStringUtil.limitLength(t.getName(),60)%></a></div></td>
        <td class=verySmall valign=middle nowrap>
          <div id='divTaskText_<%=t.getID()%>' style="display:none"><%=t.getName()%></div>
          <div id='divTaskId_<%=i+1%>' style="display:none"><%=t.getID()%></div>
        </td>
        </tr></table>
    
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap onClick="fcTaskShowABC('<%=t.getID()%>');" > 
        <div id="divABC_<%=t.getID()%>"><%=t.getPriority()%></div>
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap onClick="fcTaskShowFlag('<%=t.getID()%>');" >
        <div id="divFlag_<%=t.getID()%>">
    <%
      if ( t.getType().equals("YELLOW") ) out.println( "<img src=\"graphics/fcFlagYellow.gif\" width=14 height=14>" );
      if ( t.getType().equals("RED") )    out.println( "<img src=\"graphics/fcFlagRed.gif\" width=14 height=14>" );
      if ( t.getType().equals("GREEN") )  out.println( "<img src=\"graphics/fcFlagGreen.gif\" width=14 height=14>" );
    %>    
        </div>
      </td>
      <%
          if( vAllDelegation.size() > 0) {
      %>
           <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap><div id='divTaskName_<%=t.getID()%>:divParentTask_<%=t.getParentTaskId()%>'  onClick="MM_openBrWindow('ozPrjTaskDelegate.jsp?id=<%=t.getID()%> ','prjDeligate','width=780,height=580');" class=dragclass><a href="#" ><%=owner %></a></div></td>
      <%
          } else {
      %>
          <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap><div id='divTaskName_<%=t.getID()%>:divParentTask_<%=t.getParentTaskId()%>'  onClick="MM_openBrWindow('ozPrjTaskDelegate.jsp?id=<%=t.getID()%> ','prjDeligate','width=780,height=580');" class=dragclass><a href="#" ><%=t.getOwner(_ahsPage) %></a></div></td>
     <%
         }  if ( prj.getStatus().equals( "FINISHED")) {
     %>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap> <%=percent%> </td>
     <%
         } else {
      %>
    
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap> <%=t.getPctComplete()%> </td>
      <%
          }
      %>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=left>
      <div id="divSD_<%=t.getID()%>">
    <%
        if ( t.getSubTasks(_ahsPage).size() > 0 )
          out.println( t.getStartDate(_ahsPage) );
        else
          out.println( _r.drawDatePicker(_ahsPage,"sd_"+t.getID(),"sd_"+t.getID(),7,t.getStartDate(_ahsPage),"verySmall7"," onChange=\" _gTaskId="+t.getID()+";taskChangeStartDate(); \" ", " _gTaskId="+t.getID()+";taskChangeStartDate(); ") );
    %>
      </div>
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=left>
        <div id="divED_<%=t.getID()%>">
    <%
        if ( t.getSubTasks(_ahsPage).size() > 0 )
          out.println( t.getEndDate(_ahsPage) );
        else
          out.println( _r.drawDatePicker(_ahsPage,"ed_"+t.getID(),"ed_"+t.getID(),7,t.getEndDate(_ahsPage),"verySmall7"," onChange=\" _gTaskId="+t.getID()+";taskChangeEndDate(); \" ", " _gTaskId="+t.getID()+";taskChangeEndDate(); ") );
    %>
        </div>
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=center>
        <div id="divDR_<%=t.getID()%>"> <%=t.getDuration(_ahsPage)%> </div>
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=center onClick="_gCurrTab='NOTES';changeContext( <%=t.getID()%> );">
    <%
        if ( NotepadUtil.getProjectTaskNotesExcludeSubTasks( _ahsPage, boardId, t.getID() ).size() > 0 ) out.println( "<img src=\"graphics/ozIcon12DailyNotes.gif\" width=12 height=12>" );
    %>
      </td>
      <td class="tblContentCellLR tsPad2 <%=bgstyle%>" nowrap align=center onClick="_gCurrTab='ADVANCED';changeContext( <%=t.getID()%> );">
    <%
        AhsDbTable dbTimes = new AhsDbTable( _ahsPage, "TIB_TIME", "LOCAL" );
        dbTimes.addSelectColumn( "TIME_ID" );
        dbTimes.setWhereClause( " ACTIVE_STATUS='Y' AND OWNER_TYPE='PRJTASK' AND OWNER_ID = " + t.getID() );
        dbTimes.setNumRows( 1 );
        Vector vTimes = new Vector();
        dbTimes.doSelect( conn, vTimes, msg);
        if ( vTimes.size() > 0 )
          out.println( "<img src=\"graphics/ozIcon12Time.gif\" width=12 height=12>" );
    %>
      </td>
    </tr>
    The moving <div> jsp is in another jsp i.e : ozPrjCProjectSumry.jsp the following code is for moving <div> jsp which is in table:
    Code:
    <td width=280 valign=top>
    <table width=280 cellspacing=0 cellpadding=0 border=0 align=center>
    <tr><td class=verySmall align=center>
      <ul id="midnavss70">
          <li><a id="atab1" href="#" onClick="_gCurrTab='NOTES';refreshDetailTab();" class=here > <%=_prompt.get("notes")%> </a></li> 
          <li><a id="atab2" href="#" onClick="_gCurrTab='PROGRESS';refreshDetailTab();"            > <%=_prompt.get("progress")%> </a></li>
          <li><a id="atab4" href="#" onClick="_gCurrTab='DOCS';refreshDetailTab();"             > <%=_prompt.get("docs")%> </a></li>
          <li><a id="atab3" href="#" onClick="_gCurrTab='ADVANCED';refreshDetailTab();"            > <%=_prompt.get("advanced")%> </a></li>
      </ul>
    </td></tr>
    <tr><td height=1 bgcolor=BBBBBB><img src="graphics/z0.gif" height=1></td></tr>
    <tr><td class=textnavW2>
      <div id=mainDetailDiv style="display:block"></div>
    </td></tr>
    </table>
      </td>
    can you tell me where i have to add u r code ??

    thanks in advance...

  6. #6
    Join Date
    Aug 2005
    Location
    Imperial College London, England
    Posts
    490

    Re: How to move the <div> using javascript??

    Ok, I just lost loads of typing for this post. So you're getting a summary

    !) Code you post output code - i.e. what the user's browser sees
    2) The location of the functions shouldn't make a difference, as long as it's loaded before they're first called
    3) Demo Code:
    Code:
    <html>
    <head>
      <script type="text/javascript">
    var isIE = document.all ? true : false;
    var DeBounce = false;
    
      function GetWindowSize() {
        var size = new Array(-1, -1);
        if( typeof(window.innerWidth) == 'number' ) {
          size[0] = window.innerWidth;
          size[1] = window.innerHeight;
        } else if( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
          size[0] = document.documentElement.clientWidth;
          size[1] = document.documentElement.clientHeight;
        } else if( document.body && (document.body.clientWidth || document.body.clientHeight)) {
          size[0] = document.body.clientWidth;
          size[1] = document.body.clientHeight;
        };
        return size;
      };
    
      function FindPos(obj) {
        var curleft = curtop = 0;
        var h = obj.offsetHeight;
        var w = obj.offsetWidth;
        if (obj.offsetParent) {
          do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
        };
        return [curleft,curtop,curleft + w,curtop + h];
      };
    
      function PositionTip(row_id) {
        if ((Row = document.getElementById(row_id)) && (TipDiv = document.getElementById("movingDiv")) && (Table = document.getElementById("tipTable"))) {
          var RowPos = FindPos(Row);
          var TablePos = FindPos(Table);
          var WinSize = GetWindowSize();
    
    //This is to stop it going off the edge of the screen - change as apporiate to positioning
    //TablePos[2] is the right co-ord of the table. WinSie is the availiable width
          if (TablePos[2] + parseInt(TipDiv.offsetWidth) > WinSize[0]) { 
            TipDiv.style.left = (WinSize[0] - parseInt(TipDiv.offsetWidth)) + "px";
          } else {
            TipDiv.style.left = TablePos[2] + "px";
          };
          TipDiv.style.top = RowPos[1] + "px";
          TipDiv.style.visibility = "visible";
          DeBounce = true; //Stops the div being hidden immediately, as if you click a row, you click the body
        };
      };
    
      function HideTip() {
        if (!DeBounce) { //Stops the div being hidden immediately, as if you click a row, you click the body
            if (TipDiv = document.getElementById("movingDiv")) {
              TipDiv.style.visibility = "hidden";
            };
        } else {
          DeBounce = false;
        };
      };
        
    
      </script>
    </head>
    <body  class="body" onclick="HideTip();">
      <div id="movingDiv" onclick="DeBounce=true;" style="visibility: hidden; position: absolute; left: 100px; top: 10px; border: 1px blue outset; width: 160px; background-color: lightyellow; font-weight: bold;">Moving Div</div>
    
      <table id="tipTable">
        <tr id="Row_1" onclick="PositionTip('Row_1');">
          <td>Cell 1-1</td>
          <td>Cell 1-2</td>
          <td>Cell 1-3</td>
          <td>Cell 1-4</td>
          <td>Cell 1-5</td>
          <td>Cell 1-6</td>
          <td>Cell 1-7</td>
        </tr>
        <tr id="Row_2" onclick="PositionTip('Row_2');">
          <td>Cell 2-1</td>
          <td>Cell 2-2</td>
          <td>Cell 2-3</td>
          <td>Cell 2-4</td>
          <td>Cell 2-5</td>
          <td>Cell 2-6</td>
          <td>Cell 2-7</td>
        </tr>
        <tr id="Row_3" onclick="PositionTip('Row_3');">
          <td>Cell 3-1</td>
          <td>Cell 3-2</td>
          <td>Cell 3-3</td>
          <td>Cell 3-4</td>
          <td>Cell 3-5</td>
          <td>Cell 3-6</td>
          <td>Cell 3-7</td>
        </tr>
        <tr id="Row_4" onclick="PositionTip('Row_4');">
          <td>Cell 4-1</td>
          <td>Cell 4-2</td>
          <td>Cell 4-3</td>
          <td>Cell 4-4</td>
          <td>Cell 4-5</td>
          <td>Cell 4-6</td>
          <td>Cell 4-7</td>
        </tr>
      </table>
    </body>
    </html>
    Help from me is always guaranteed!*
    VB.NET code is made up on the spot with VS2008 Professional with .NET 3.5. Everything else is just made up on the spot.
    Please Remember to rate posts, use code tags, send me money and all the other things listed in the "Before you post" posts.

    *Guarantee may not be honoured.

  7. #7
    Join Date
    Aug 2005
    Location
    Imperial College London, England
    Posts
    490

    Re: How to move the <div> using javascript??

    Sorry, I wasn't expecting you to react so fast, so the post has been updated...
    Enjoy!
    Help from me is always guaranteed!*
    VB.NET code is made up on the spot with VS2008 Professional with .NET 3.5. Everything else is just made up on the spot.
    Please Remember to rate posts, use code tags, send me money and all the other things listed in the "Before you post" posts.

    *Guarantee may not be honoured.

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured