asp.net and javascript please advise

Question

I am completely new to JavaScript and I am having some problems.

My mission is to create a Mouseover and mouseout script which i am having some difficulty with,

My aspx code is

<div>
    <div id="div_img" style="height: 300px; width: 300px; border: solid 1px black;   position: absolute;
            visibility: hidden;">
        <img src="" id="img_tool" />
    </div>
</div>

<script type="text/javascript" language="javascript">

        function ShowToolTip(con) {
        console.log(getOffset(con).left + '-' + getOffset(con).top);
            document.getElementById("div_img").style.visibility = "visible";
            document.getElementById("img_tool").src = con.src;
            document.getElementById("div_img").style.left = getOffset(con).left - 300 + 'px';
            document.getElementById("div_img").style.top = getOffset(con).top - 300 + 'px';
            document.getElementById("div_img").style.zIndex = "0";
            console.log(document.getElementById("div_img").style.left +'-'+document.getElementById("div_img").style.top)
        }
        function hideToolTip() {
            document.getElementById("div_img").style.visibility = "hidden";
        }

        function getOffset( el ) {
            var _x = 0;
            var _y = 0;
            while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
                _x += el.offsetLeft - el.scrollLeft;
                _y += el.offsetTop - el.scrollTop;
                el = el.offsetParent;
            }
            return { top: _y, left: _x };
        }

</script>

and my code behind c# is

 if ((e.Row.RowType.ToString() != "Header") && (e.Row.RowType.ToString() != "Footer"))
 {
      ImageButton ib = (ImageButton)e.Row.Cells[3].Controls[0];
      ib.Attributes.Add("onmouseover", "ShowToolTip(this);");
      ib.Attributes.Add("onmouseout", "hideToolTip();");

I have no idea what is next.. please help

the next step is researching how to call the js from within html/asp.net — Wim Ombelets
– Wim Ombelets, Commented Mar 6, 2014 at 9:32
Are there any errors in your Browser console? function 'ShowToolTip' undefined or the like — alexP
– alexP, Commented Mar 6, 2014 at 9:34
well then i guess that where i am stuck i dont realyy no how to go about calling the JavaScript from the html/asp code and i think there is something to do with the database? — user3387373
– user3387373, Commented Mar 6, 2014 at 9:49

Plue · Accepted Answer · 2014-03-06 09:50:36Z

1

You can directly add these events to img_tool in aspx :

<img src="" id="img_tool" onmouseover="ShowToolTip(this);" onmouseout="hideToolTip();" />

Plus, if you want to access your controls (web controls or html elements) in code behind, you have to add attribute runat="server" :

<img src="" id="img_tool" runat="server"/>

edited Mar 6, 2014 at 9:50

answered Mar 6, 2014 at 9:42

Plue

1,8101 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

invernomuto · Accepted Answer · 2014-03-06 09:41:44Z

try something like this

if ((e.Row.RowType.ToString() != "Header") && (e.Row.RowType.ToString() != "Footer"))
  {
  ImageButton ib = (ImageButton)e.Row.Cells[3].Controls[0];
  ib.Attributes.Add("onmouseover", string.Format("ShowToolTip('{0}');", ib.ClientId));
  ib.Attributes.Add("onmouseout", string.Format("hideToolTip('{0}');", ib.ClientId));
  }


    <script type="text/javascript" language="javascript">

  function ShowToolTip(con) {
    var element = document.getElementById(con);
    console.log(getOffset(con).left + '-' + getOffset(con).top);
    document.getElementById("div_img").style.visibility = "visible";
    document.getElementById("img_tool").src = element.src;
    document.getElementById("div_img").style.left = getOffset(con).left - 300 + 'px';
    document.getElementById("div_img").style.top = getOffset(con).top - 300 + 'px';
    document.getElementById("div_img").style.zIndex = "0";
    console.log(document.getElementById("div_img").style.left + '-' + document.getElementById("div_img").style.top)
  }
  function hideToolTip() {
    document.getElementById("div_img").style.visibility = "hidden";
  }

  function getOffset(el) {
    var _x = 0;
    var _y = 0;
    var element = document.getElementById(el);
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
      _x += element.offsetLeft - element.scrollLeft;
      _y += element.offsetTop - element.scrollTop;
      element = element.offsetParent;
    }
    return { top: _y, left: _x };
  }

</script>

Collectives™ on Stack Overflow

asp.net and javascript please advise

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related