javascript semicolon table text file database bringing in one record that has a hover to show another record on the same row...

Hi, I started swimming waste deep in this water and now it's over my head...

My situation...

Here is my jquery code to highlight a row....

<script type="text/javascript">
         
$("tr").not(':first').hover(
  function () {
    $(this).css("background","#d3d3d3");
  },
  function () {
    $(this).css("background","");
  }
);
         
</script>

When it hovers I want to show a record in columns 4 and 5 to appear in the header.

I've been using php to do this so far but I'm not sure if php is the way I want to go for this...

Here is my php to grab the records and create the table....


<?php

$row = 1;
if (($handle = fopen($statfile, "r")) !== FALSE) {

    echo '<table class="sortable" border="0">';

    while (($data = fgetcsv($handle, 1000, ";")) !== FALSE) {
        if (substr($data[0],0,3)!='HDR' && substr($data[0],0,3) != 'JOB' )  continue;
        $num = count($data);
        if (substr($data[0],0,3)=='HDR') {
            echo '<thead><tr>';
        }else{
            echo '<tr>';
        }
        for ($c=1; $c <= 4; $c++) {
            //echo $data[$c] . "<br />\n";
            if(empty($data[$c])) {
               $value = "&nbsp;";
            }else{
               $value = trim($data[$c]);
            }
        if (substr($data[0],0,3)=='HDR') {
                echo '<th style="text-align:center">'.$value."</th>\n";
            }else{
                if ($c==1) {
                echo '<td style="text-align:center"><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=job&logname='.$value.'&hostname='.$host.'">'.$value."</a></td>\n";

                }else{
                echo '<td style="text-align:center">'.$value."</td>\n";
                }
            }
        }

        if (substr($data[0],0,3)=='HDR') {
            echo '</tr></thead><tbody>';
        }else{
            echo '</tr>';
        }
        $row++;
    }

    echo '</tbody></table>';
    fclose($handle);
}
?>

So far everything works it displays my info in the table, the sortable class sorts it...

PWR 9 ; #00FF00 ;
PWR 10 ; #00FF00 ;
PWR 11 ; #FF0000 ;
HDR 0 ; Session ; User ; Domains ; E-Time ; Host ; Design ; Path ;
JOB 1 ; 122:1 ; hupcey ; 6 ; 00:22:42 ; 158.140.43.151 ;         ixdiag_model_bedb ; /home/hupcey/diags
JOB 2 ; 121:1 ; galzerano ; 2 ; 00:10:42 ; 158.140.43.151 ;         ixdiag_model_bedb ; /home/hupcey/diags

I'm in the JOB index and I want the IP to show up when you hover over the row...

Am I barking up the right tree?
Can someone help me or point  a finger? I appreciate any help on this matter.

William
William GalzeranoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jessica WhitleySoftware DeveloperCommented:
Can you please show us an image or 2?
0
William GalzeranoAuthor Commented:


I'm working on the div on the right with the two jobs in there already... It highlights on hover now, but I want the ip and path that I show in the database sample in the header..Full server SComputer. :/ Thanks :)
0
Jessica WhitleySoftware DeveloperCommented:
This can be handled by JQuery and html code even.

I would need to see the code for the header section and such to actually be able to help with that. But basically you could run a function watching for your mouse events(this will slow your application down)/ run a function that attached to the hover function you already have running that just updates your header depending on how you have it set up. There are several options depending on how you have the entire page built.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

William GalzeranoAuthor Commented:
Here is my header section...

<?php include 'vars.php';?>
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="60">


<title>
PES <?php echo $host ?> Status

</title>


<script src="jquery.min.js" type="text/javascript"></script>
<link href="mainstyle.css" rel="stylesheet" type="text/css" title="1">

<style type="text/css">
#stuff1 {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
        position: absolute;
        top: 50px;
        left: 300px;
        width:300px;
        height:70px;
        background-color:#8b8b8b;

}
#hover1 {
 width:250px;
 height:90:px;
        background-color:blue;
        border: thick solid #CCC;
}

#hover1:hover + #stuff1 {
    opacity: 1.0;
}
hr{ width:10px;}
#jobtatus1              {
        }
#stuff1 {
        opacity: 0.0;
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        position: absolute;
        top: 50px;
        left: 300px;
        width: 400px;
        height: 40px;
        background-color: #0047ab;
}
#hover1 {
        width: 250px;
 height:90:px;
        background-color: #0047ab;
        border: thick solid #CCC;
}

#hover1:hover + #stuff1 {
    opacity: 1.0;
}
hr{ width:10px;}
#jobtatus2              {
        }
        #stuff2 {
        opacity: 0.0;
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        position: absolute;
        top: 50px;
        left: 300px;
        width: 300px;
        height: 70px;
        background-color: 0047ab;
}
#hover2 {
        width: 250px;
        background-color: 0047ab;
        border: thin solid #F00;
}

#hover2:hover + #stuff2 {
    opacity: 1.0;
}
hr{ width:10px;}
#jobtatus2              {
        }
        .menu {
        height: 34px;
        margin: auto;
        color: #FFFFFF;
}
.menu a {
        text-decoration: none;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: bold;
        padding-left: -15px;
        padding-right: 10px;
        position: relative;
        top: 8px;
}
.menu a:hover {
        color: grey;
}
.menu ul {
    list-style: none;
    position: relative;
    z-index: 999;
    float: left;
}
.menu li {
    display: inline;
    vertical-align: middle;
    float: left;
}
.menu ul ul {
        margin-top: 7px;
        z-index: 999;
        border-radius: 5px;
        padding-bottom: 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        border: solid 1px #d3d3d3;
        border-bottom: solid 2px #d3d3d3;
        background: red;
        visibility: hidden;
        position: absolute;
}
.menu ul ul li {
    font-weight: normal;
    white-space: nowrap;
    padding: 0;
    padding-right: 3px;
    padding-left: 3px;
    position: relative;
    bottom: 3px;
    display: block;
    float: none;
}
.menu ul li:hover>ul {
    visibility: visible;
}
.popbox {
    display: none;
    position: absolute;
    z-index: 99999;
    width: 400px;
    padding: 10px;
    background: #EEEFEB;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2 {
    background-color: #4D4F53;
    color: #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

</style>
<script src="sorttable.js" type="text/javascript"></script>



</head>

Open in new window


and my header div, just in case you want that

<div id="header">
        <div id="logo">
            <img src="images/eslogo.png" width="30" height="30">
        </div>
        <div id="enterprise">Paladium Enterprise Server</div>
        <div id="topmenu">
            <div class="menu">
  <ul>
    <li><a href="#">main</a>
      <ul>
                <li><a href="main.php">health status</a></li>
        <li><a href="diags.html">diags</a></li>
      </ul>
    </li>
    <li><a href="#">logs</a>
      <ul>
        <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=configmgr.alertlog" target="_blank">Display configmgr.alertlog</a></li>
        <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=configmgr.log"target="_blank">Display configmgr.log</a></li>
        <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=ET3_activity.log"target="_blank">Display ET3_activity.log</a></li>
        <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=log/apsm.log"target="_blank">Display apsm.log</a></li>
        </ul>
    </li>
    <li><a href="#">hardware</a>
    <ul>
    <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=scd.et3confg"target="_blank">Display Hardware Configuration</a></li>
    <li><a href="http://wfbscd13/cgi-bin/aplog.cgi?type=file&logname=scd.et3confg&whole=summary"target="_blank">Summarize Offline Hardware Resources</a></li>
    </ul></li>
    <li><a href="htlp.html">help</a></li>
    <li><a href="contact.php" class="ui-icon ui-icon-mail-closed">contact</a> </li>
  </ul>
</div>

        </div>
    </div>

Open in new window


Thank you btw: p.s I'm a hardware engineer not a javascript expert. :/
0
Jessica WhitleySoftware DeveloperCommented:
Don't feel bad... I am working on it. I don't want to add what we don't need.
0
William GalzeranoAuthor Commented:
You are really awesome, thank you... I'll be working late... My demo is tomorrow morning... :/
1
Jessica WhitleySoftware DeveloperCommented:
So the div with an id=header is accessible by the JQuery code as well.

We can just add to the function you already are using.
underneath the div id-enterprise add a new div we will name whatever you want.


<script type="text/javascript">
         
$("tr").not(':first').hover(
  function () {
    $(this).css("background","#d3d3d3");
    $('.addnewname').append('<div>Add the information you added to the headers here</div>');
  },
  function () {
    $(this).css("background","");
  }
);
         
</script>

This adds the information you want on the hover function. You can change the styling as you want as well without changing much of the code you already have.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jessica WhitleySoftware DeveloperCommented:
You are very welcome!
0
William GalzeranoAuthor Commented:
Thank you, that help me understand a lot. Now I'll try to integrate my database record into the header. This was a tough project...
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.