nashsaint Posted June 2, 2009 Share Posted June 2, 2009 hi, ive noticed the effects on the messages posted on twitter, when you hover the messages it displays another div, i think, with links on it: link to add as favorite or delete. does anyone knows how to add the link on hovering divs, or anything similar? thanks. Quote Link to comment https://forums.phpfreaks.com/topic/160685-solved-twitter-like-hover/ Share on other sites More sharing options...
kickstart Posted June 2, 2009 Share Posted June 2, 2009 Hi I have found some code to do this kind of thing. Basically it used a load of divs which I dumped at the bottom of the page, all set as style='display:none'. Each row of main data had onmouseover='do_preview(49, event)' onmouseout='hide_preview()', where the 49 refers to the particular line and matched the hidden div for that line. There was also a single hidden div near the top. The do_preview function copied the contents of the relevant hidden div from the bottom into the single one, set the coordinates of it and displayed it. Code I based it on was to give a preview of a thread in a forum, but I played around with it a fair amount. All the best Keith Quote Link to comment https://forums.phpfreaks.com/topic/160685-solved-twitter-like-hover/#findComment-848014 Share on other sites More sharing options...
nashsaint Posted June 2, 2009 Author Share Posted June 2, 2009 Thank you very much keith for the idea. This is what i done and it works great. <html> <head> <style type="text/css"> <!-- #mainDiv { height: 50px; width: auto; background-color: #039; } #hiddenDiv1 { height: 50px; width: auto; background-color: #960; } --> </style> <!-- trigger script. --> <script type="text/javascript" language="JavaScript"><!-- function HideDIV(d) { document.getElementById(d).style.display = "none"; } function DisplayDIV(d) { document.getElementById(d).style.display = "block"; } //--></script> </head> <body> <div id="mainDiv" onmouseover="HideDIV('mainDiv');DisplayDIV('hiddenDiv1')" onmouseout="HideDIV('hiddenDiv1');DisplayDIV('mainDiv')"> <p >This is the main div</p> </div> <div id="hiddenDiv1" style='display:none' onmouseover="HideDIV('mainDiv');DisplayDIV('hiddenDiv1')" onmouseout="HideDIV('hiddenDiv1');DisplayDIV('mainDiv')"> <p>This is Hidden Div 1. <a href="link1.php">Link 1</a>. <a href="link2.php">Link 2</a></p> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/160685-solved-twitter-like-hover/#findComment-848136 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.