ct100, masterpages and embedded javascript - Id names RSS

• • Reply
  

  jkirkerx

  Contributor

  3750 Points

  873 Posts

  ct100, masterpages and embedded javascript - Id names

  Mar 27, 2008 06:02 PM|LINK

   I wrote this control that make tablecells and assigns the ID of lets say hmcI0.  Control works fine on a regular page, because I wrote and tested it on a regular page.
  

  When you place the control on a masterpage, the ID of the tablecell changes to ct100_hmcI0, because it's on a masterpage. I sort of understand why, content place holder value
  

  The tablecell also has some javascript mouseover(ShowChildPanel('hmcI0') which now needs to be mouseover(ShowChildPanel('ct100_hmcI0')) if in a master page
  

  I'm not sure how to go about handling the whole situation
  

  If my control is on a regular page, all is good.
  

  
  

   I create my parent container called hmcI0
  

  Dim table As Table
  table = New Table
  table.CellPadding = 0
  table.CellSpacing = 0
  table.Height = [Height]
  table.Width = [Width]
  table.Style.Add(HtmlTextWriterStyle.TextAlign, [MenuAlignment].ToString)
  table.BorderWidth = [BorderWidth]
  table.BorderColor = [BorderColor]
  table.BorderStyle = [BorderStyle]
  table.CssClass = [CssClass]
  table.ToolTip = [ToolTip]
  panel.Controls.Add(table)
  
  Dim trMenu As TableRow
  trMenu = New TableRow
  table.Controls.Add(trMenu)
  
  Dim tdMenu As TableCell
  tdMenu = New TableCell
  tdMenu.ID = "hmcI" & idx.ToString

  tdMenu.Attributes.Add("onmousseover", "ShowChildPanel('" & tdMenu.ClientID & "', 'hmcG" & idx.ToString & "')")
  tdMenu.Attributes.Add("onmouseout", "HideChildPanel('" & tdMenu.ClientID & "', 'hmcG" & idx.ToString & "')")

  trMenu.Controls.Add(tdMenu)

  Now I create the Child Container where visible turns on and off, and the position is set 
   
  Dim DDP_Table As Table
  DDP_Table = New Table
  DDP_Table.Width = _Panel_Width
  DDP_Table.Height = _Panel_Height
  DDP_Table.BorderColor = Color.Gray
  DDP_Table.BorderStyle = UI.WebControls.BorderStyle.Solid
  DDP_Table.BorderWidth = 1
  DDP_Table.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#FFFFFF")
  DDP_Table.Style.Add(HtmlTextWriterStyle.Position, "relative")
  DDP_Table.Style.Add(HtmlTextWriterStyle.Left, "0px")
  DDP_Table.Style.Add(HtmlTextWriterStyle.Top, "0px")
  DDP_Panel.Controls.Add(DDP_Table)
  
  Dim DDP_TR As TableRow
  DDP_TR = New TableRow
  DDP_Table.Controls.Add(DDP_TR)
  
  Dim DDP_TD1 As TableCell
  DDP_TD1 = New TableCell
  DDP_TD1.Attributes.Add("id", "hmcG1T" & idx.ToString)
  DDP_TD1.Text = c_Value
  DDP_TD1.CssClass = c_Css
  DDP_TD1.Height = c_Height
  DDP_TD1.Width = c_Width
  DDP_TD1.Style.Add("nowrap", "nowrap")
  DDP_TD1.VerticalAlign = VerticalAlign.Top
  DDP_TR.Controls.Add(DDP_TD1)
    
  

  I call this javascript to turn on the child panel, and move it to the right and down some
  

   
  function ShowChildPanel(parentId, id) {
  		var browserType;
  		var parentPosition;
  		parentPostion = findParentPosition(parentId);	
  		var childX = parentPostion[0];
  		var childY = parentPostion[1] + 26;
  									
  		if (document.getElementById) { // DOM3 = IE5, NS6
  			browserType = "DOM3-IE5-NS6-1";
  			if (document.getElementById(id).style) {
  				document.getElementById(id).style.left = childX + "px";
  				document.getElementById(id).style.top = childY + "px";
  				document.getElementById(id).style.display = 'block';
  			} 
  			else {
  				browserType = "DOM3-IE5-NS6-2";
  				document.getElementById(id).style.left = childX;
  				document.getElementById(id).style.top = childY;
  				document.getElementById(id).style.visibility = 'show';
  			}				
  		}
  		else {
  			if (document.layers) { // Netscape 4
  				browserType = "DOM ProPreitray";
  				document.id.display = 'block';
  				document.layers[id].left = childX;
  				document.layers[id].top = childY;
  			}
  			else { // IE 4
  				browserType = "Else";
  				document.all.id.style.display = 'block';
  				document.all.id.style.left = childX;
  				document.all.id.style.left = childY;
  			}
  		}	
  	//alert("x=" + childX + " y=" + childY + "BrowserType=" + browserType);
  			
  	}
   
  

   

   

  
  
  • Edited by jkirkerx on Mar 27, 2008 09:55 PM
  • Edited by jkirkerx on Mar 27, 2008 09:56 PM
• • Reply
  

  doyleits

  Contributor

  3580 Points

  549 Posts

  Re: ct100, masterpages and embedded javascript - Id names

  Mar 27, 2008 08:35 PM|LINK

  If you are generating the table cells in the code-behind, you can use the ClientID property, which gives you the ID as it will be when the HTML is rendered...

  myTableCell.Attributes("onmouseover") = "findParentPosition('" & myTableCell.ClientID & "');"

   
  Mark Doyle, Software Architect
  Collabroscape LLC [www.collabroscape.com]
• • Reply
  

  jkirkerx

  Contributor

  3750 Points

  873 Posts

  Re: ct100, masterpages and embedded javascript - Id names

  Mar 27, 2008 10:46 PM|LINK

   I started thinking that maybe when you use the control property ID, the ID changes name on a masterpage. What would happen if I just manually added an attribute called ID.

  Works!, but I'm not sure how stable it is.  Well keep an eye on it, then mark it resolved later. 

  Dim tdMenu As TableCell
  tdMenu = New TableCell
  tdMenu.ID = "hmcI" & idx.ToString 'Changed from this
  tdMenu.Attributes.Add("id", "hmcI" & idx.ToString) ' To This
  
  
  tdMenu.Attributes.Add("onmousseover", "ShowChildPanel('" & tdMenu.ClientID & "', 'hmcG" & idx.ToString & "')")
  tdMenu.Attributes.Add("onmouseout", "HideChildPanel('" & tdMenu.ClientID & "', 'hmcG" & idx.ToString & "')")
  
  
  trMenu.Controls.Add(tdMenu)

  
  
  • Marked as answer by jkirkerx on Mar 30, 2008 11:19 PM