Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Div Tag Parenting Issue

    I'm having problems dealing with Div tags and image positioning. THe problem is related to relative Div tag parenting. The onmouseout code below works great, but the image position is off. How can I handle my Div issue here?


    <table width="100%" border="0">
    <tbody>
    <tr>
    <td>
    <div> <-------------- The ones under this Div are off.
    dvr2
    <br>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">Channel1</div>
    </div>
    </div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="Test_Device"> <-------------- These are fine.
    ipc1
    <br>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">3000</div>
    </div>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">2300S</div>
    </div>

    // THIS RELATIVE IMAGE POSITION WORKS WITH CLASS TEST_DEVICE, BUT NOT WITH CLASS "TESTINGIMG"
    <div id="rg_h" onmouseout="Main_Home_Home_ControlObj.normalImg();" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;position: relative; top: 0; visibility: hidden; width: 250px;height:160px;" data-initialized="1">
    </div>
    </td>
    </tr>

    </tbody>
    </table>

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there, first post on this forum for me. Closing all of your div tags would be a good start. Every <div> needs an accompanying </div>. This is kind of weird seeing divs inside a table, too ... but that's another story for another day.

    Good luck with your project.

    Quote Originally Posted by lesponce View Post
    I'm having problems dealing with Div tags and image positioning. THe problem is related to relative Div tag parenting. The onmouseout code below works great, but the image position is off. How can I handle my Div issue here?


    <table width="100%" border="0">
    <tbody>
    <tr>
    <td>
    <div> <-------------- The ones under this Div are off.
    dvr2
    <br>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">Channel1</div>
    </div>
    </div>
    </td>
    </tr>

    <tr>
    <td>
    <div class="Test_Device"> <-------------- These are fine.
    ipc1
    <br>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">3000</div>
    </div>
    <div class="TestingImg">
    <div class="TestingImg2">
    <div class="TestingImg_Desc">2300S</div>
    </div>

    // THIS RELATIVE IMAGE POSITION WORKS WITH CLASS TEST_DEVICE, BUT NOT WITH CLASS "TESTINGIMG"
    <div id="rg_h" onmouseout="Main_Home_Home_ControlObj.normalImg();" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;position: relative; top: 0; visibility: hidden; width: 250px;height:160px;" data-initialized="1">
    </div>
    </td>
    </tr>

    </tbody>
    </table>

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    The problem is related to table row. Works on one of them, but not the other one.

    Output = @"<table border=""0"" width=""100%"">";

    foreach (var item in list)
    {
    if (item.OnHomePage)
    {
    if (CurrentTestRepId != item.TestRepId)
    {
    CurrentTestRepId = item.TestRepId;

    if (DeviceCnt == 0)
    {
    Output += @"<tr><td><div>";

    }
    else
    {
    Output += @"</td></div></tr>";
    Output += @"<tr><td><div class=""Home_Device"">";
    }

    DeviceCnt++;
    Output += item.DeviceName;
    Output += "<br />";
    }


    Output += @"<div class=""Home_SnapshotImg"">";
    Output += @"<div class=""Home_SnapshotImg2"">";
    Output += @"<a href=""javascript:Main_ControlObj.ShowVideo(" + DeviceCnt.ToString() + ", "
    + item.TestRepId.ToString() + ", " + item.DeviceId.ToString() + ");" + @""">";


    if (item.DevicePictureFile != "")
    {
    Output += @"<img onmouseover=""Main_ControlObj.mouseoverNormal(this.src, this);"" ";
    Output += @" onmouseout=""Main_ControlObj.mouseoutNormal(this);"" src=""../Directory/"
    + item.DevicePictureFile + @"""";

    }
    else
    {
    Output += @"<img src=""../Directory/NoSnapShot.jpg""";
    }

    Output += @" alt=""Could not Find Picture"" width=""100px"" height=""80px"" />";
    Output += @"</a>";
    Output += @"</div>";


    Output += @"<div class=""Home_SnapshotImg_Desc"">";


    Output += item.DeviceName;

    Output += @"</div>";

    Output += @"</div>";
    }

    i++;
    }



    if (i == 0)
    {
    Output = "We found no devices";
    }
    else
    {
    Output += @"<div id=""BLAH"" data-initialized=""1"" style=""background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); left: 0;position: absolute; top: 0; visibility: hidden; width: 250px;height:160px;"" onmouseout=""Main_ControlObj.normalImg();""><div id=""BLAHc"" class=""BLAHc uh_hc"" style=""height: 100%; width: 100%;""><div style=""position: absolute;""><a href="""" ><img id=""img6"" border=""0"" src=""#"" alt="""" width=""250"" height=""160"" /></a></div></div></div>" + "</td></div></tr></table>";
    }

    return Output;
    }





    // JAVASCRIPT

    this.mouseoverNormal = function(src, img) {
    CurrentStatus = "TryBig";
    CurrentTimeOut = setTimeout(function() { bigImg(src, img); }, 500);
    }

    this.mouseoutNormal = function(img) {
    CurrentStatus = "normal";
    img.style.visibility = "visible";
    clearTimeout(CurrentTimeOut);
    }

    this.normalImg = function() {
    if (element) {
    CurrentStatus = "normal";
    document.getElementById("BLAH").style.visibility = "hidden";
    element.style.visibility = "visible";
    }
    }


    function bigImg(src, img) {
    if (CurrentStatus == "TryBig") {
    var big = document.getElementById("img6"), a = big.parentNode, p = pos(img);
    CurrentStatus = "Big";
    a.removeAttribute("href");
    document.getElementById("BLAH").style.visibility = "visible";
    big.src = src;
    if (img.parentNode.href) {
    a.href = img.parentNode.href;
    }

    document.getElementById("BLAH").style.position = "absolute";
    document.getElementById("BLAH").style.margin = "1px";
    document.getElementById("BLAH").style.left = img.offsetParent.offsetLeft + 'px';
    document.getElementById("BLAH").style.top = img.offsetParent.offsetTop - 20 + 'px';




    img.style.visibility = "hidden";
    element = img;
    clearTimeout(CurrentTimeOut);
    img.style.visibility = "hidden";

    }
    }


    this.pos = function(obj) {
    var rtn = [0, 0];
    while (obj) {
    rtn[0] += obj.offsetLeft;
    rtn[1] += obj.offsetTop;
    obj = obj.offsetParent;
    }
    return rtn;
    }

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post
    Disregard this problem. Issue resolved.


  •  

    Posting Permissions

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