im familiar with php, but a serious learner in js, i have tried 3 methods to achieve my goal and i have seen the method used below that seems the easiest to implement so i can achieve my goal, but for some reason it does not work. I have included only the necessary bits for the specific function that isnt working, this all works inside a while loop based on entries in a db, seperated with a {$page_trackid} to distinguish between each function and link to it. I understand a 'this' style function could be used, but as i say im so new to js im just trying to achieve the necessary before i extend to getting even more complex.Is there something im doing totally wrong here? Cheers\[code\]<head> <style> .hidden {display:none;} .visible {display:block;} .subtext_img { width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right; } .subtext { padding-left: 10px; } .arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; } </style></head><body> <? $data = http://stackoverflow.com/questions/15914034/mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC") or die(mysql_error()); $page_trackid = '1'; //reset page track id // get a whole bunch of data, track info & user info based on some cross referencing via id while ($info = mysql_fetch_array($data)) { $db_trackid = $info['id']; $username = $info['username']; //data 2 track info based on db track id $data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1") or die(mysql_error()); $info2 = mysql_fetch_array($data2); //data 3 is user profile data based on db track id $data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1") or die(mysql_error()); $info3 = mysql_fetch_array($data3); //data 4 profile image based on user id, track uploader* $data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1") or die(mysql_error()); $info4 = mysql_fetch_array($data4); echo " <script> function showbox(userinfo_{$page_trackid}){ document.getElementById(userinfo_{$page_trackid}).style.visibility='visible'; } function hidestuff(userinfo_{$page_trackid}){ document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden'; } </script> <div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'> <h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2> <p class='subtext'>" . $info3['user_title'] . "</p> <p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a> </p> </div>"; echo " <div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'> <a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a> </div>"; } ?></body>\[/code\]
Show hide JS div css
- Thread starter manulorz
- Start date