[RESOLVED] How to move the <div> using javascript??
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Page 1 of 5 1234 ... LastLast
Results 1 to 15 of 71

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

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

  4. #4
    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...

  5. #5
    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.

  6. #6
    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...

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

  8. #8
    Join Date
    Jun 2008
    Posts
    142

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

    Hey thanks for your reply. It's works fine.

    but i need to add the above in my application. In my previous post i mentioned: Moving <div> tag is another JSP, the table of the rows are in another JSP which is calling from moving <div> through Ajax. so where i have to write the script?? But i tried to write in table jsp but it' not moving the div tag. so can you suggest where i have to mention the script and body ??

    thanks ....

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

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

    Personally, with a script which is longish and used alot, I'd have all of the functions in a separate javascript (.js) file, and reference it:
    Code:
    <script type="text/javascript" src="MovingDiv.js"></script>
    This script would then be cached by the browser, so that speeds loading time (i'm still running at 56kbps, and it does make a difference).

    That doesn't, however, answer you question!
    If I've understood properly, the table is being loaded through AJAX (from 'table JSP'). Are you putting that into the page using .innerHTML or appending? Or have you gone the route of evil and use frames or iframes?
    In either case, you will need to adjust the 'table JSP' to include the onClick statements in each row
    Code:
    <tr id="whatever" onclick="PositionTip('whatever');">
    If you are using frames, then the moving div and the script needs to go in with the 'table JSP'
    If you are using another method, you can put the script and div in either but it MUST be a top-level tag.

    hope that's some guidance. If not, post your current JSP code and sample JSP output, and I'll do some thinking


    Oh, you'll probably want to call HideTip at the beginning of the AJAX update.

    ~Jawa
    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.

  10. #10
    Join Date
    Jun 2008
    Posts
    142

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

    Hi

    i tried in my application, in debug the following statement is skipped. it's failing the condition
    Code:
     if ((Row = document.getElementById(taskId)) && (TipDiv = document.getElementById("movingDiv")) && (Table = document.getElementById("tipTable"))) {
    thanks....

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

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

    You might need to set the ID of the moving div, or the table containing the rows. You can find the error using this code:
    Code:
    if (!(Row = document.getElementById(taskId))) {
      alert("Can't Find Row");
    };
    if (!(TipDiv = document.getElementById("movingDiv"))) {
      alert("Can't Find Moving Div");
    };
    if (!(Table = document.getElementById("tipTable"))) {
      alert("Can't Find Table");
    };
    btw, what browser are you using?
    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.

  12. #12
    Join Date
    Jun 2008
    Posts
    142

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

    with the following code , Can't Find Row only printing.

    Code:
     if (!(Row = document.getElementById(taskId))) {
            console.log('Can t Find Row');
            };
        if (!(TipDiv = document.getElementById("movingDiv"))) {
            console.log('Can t Find movingDiv');
            };
        if (!(Table = document.getElementById("tipTable"))) {
            console.log('Can t Find tipTable');
            };
    I am using firefox.
    and I set the Id for the moving< div>
    Code:
    <div id=movingDiv onclick="DeBounce=true;">
    and table ID :
    Code:
    <table id="tipTable" width=100% cellspacing=0 cellpadding=0 border=0 align=center style="BORDER-COLLAPSE: collapse" >
    but table id is another JSP. which is table JSP.

    thanks..
    Last edited by adusumalli; August 18th, 2008 at 01:08 PM.

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

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

    Good, you're using FF, that mean's we can use (and you have used) console.log.

    If it's printing that, then you haven't got the ids of the rows matching the parameter passed to the function, or the parameter in the function deceleration isn't taskId
    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.

  14. #14
    Join Date
    Jun 2008
    Posts
    142

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

    yeah.
    but i mentioned in table JSP the ID i mentioned as like this:

    Code:
    <tr id="TR_LINE_<%=t.getID()%>"  bgcolor="#FFFFFF"  onClick="changeContext(<%=t.getID()%>);" >
    In the main JSP i metioned the all script code as u gave.

    Code:
    function changeContext( taskId )
      {
        if ( _gOldHightlightTaskId > 0 && $('TD_TASK_'+_gOldHightlightTaskId) != null )
        {
           $( 'TR_LINE_'+_gOldHightlightTaskId ).bgColor='FFFFFF';
        }
    
        _gOldHightlightTaskId = taskId;
        _gTaskId = taskId;
        if ( _gOldHightlightTaskId > 0 && $('TD_TASK_'+_gOldHightlightTaskId) != null )
        {
            $( 'TR_LINE_'+_gOldHightlightTaskId ).bgColor='FFA500';
        }
        refreshDetailTab();
        PositionTip(_gTaskId); // here i am calling the fuction what u provide.
      }
    so what i need to give ??

    thanks..

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

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

    Change it to PositionTip('TR_LINE_' +_gTaskID);
    It's always the little things
    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.

Page 1 of 5 1234 ... LastLast

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center