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. 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 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> Link to comment https://forums.phpfreaks.com/topic/160685-solved-twitter-like-hover/#findComment-848136 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.