supermerc Posted May 18, 2009 Share Posted May 18, 2009 Hey, I have this script that shows all the the items in my vault table from my database. However I want to display things like the item name the cost and a bigger image in a little popup rollover and then it disapears when you arent over anymore. I already had something to the popup rollover but I dont know how to make it work to pull information from database. all i have was <head> <script language="JavaScript"> function show_it(){ document.all.box1.style.visibility = "visible"; } function hide_it(){ document.all.box1.style.visibility = "hidden"; } </script> </head> <style> #box1 { position: right; top: 50px; left: 100px; border: solid 3px #000000; background-color: #ffff00; visibility: hidden; } </style> <body> then here i would have my image with the onmouse.... etc <div id="box1"> <table cellspacing="0" cellpadding="0" style="background-image:url(http://quiver.outwar.com/images/bg.jpg);color:#FFFFFF;font-size:8pt;font-family:Verdana;width:300px;"> <tr><td colspan="2" style="font-weight:bold;height:20px;font-size:10pt;color:#FFFFFF" align="left"><?= $row[name] ?></td></tr> <tr><td align="left" valign="top" style="padding:2px;font-family:Verdana;font-weight:bold;font-size:7pt;color:#FFFFFF;"> [Player Bound]<br/>[slot - Foot]<br/><br>+164 HP<br>+20 exp per hr<br> </td> <td align="center" valign="top" style="width:80px;font-family:Verdana;font-size:7pt;color:#FFFFFF;"> <img src="http://quiver.outwar.com/images/foot3.gif" style="border:1px solid #666666;margin:2px;"><br> <br></td> </tr> <tr><td colspan="2" style="padding:2px;" valign="top"> <div style="font-family:verdana;font-size:7pt;font-style:italic;color:#FFCC00"> </div> </body> basicly that works, but then when I put my loop to put all my items in database i dont know how to make it so that popup div box will show information for each item. Please help Quote Link to comment Share on other sites More sharing options...
nadeemshafi9 Posted May 18, 2009 Share Posted May 18, 2009 function onmouseover(){ newdiv=document.createElement('div'); newdiv.id = 'thepopup'; newdiv.style = 'position: absolute; top: 40%; left: 40%;'; newimg.onclick=closebox(); //JQUERY $.ajax({ type: "POST", url: "getmypopupcontent.php", data: "name=John&location=Boston", success: function(msg){ newdiv.innerHTML = msg; }); document.body.appendChild(newdiv); } function closebox(){ document.body.removeChild('thepopup'); } Quote Link to comment Share on other sites More sharing options...
zq29 Posted May 18, 2009 Share Posted May 18, 2009 Rather than posting some code on its own, would you not think it be more helpful / useful if you offered an explanation to go with it, nadeemshafi9? supermerc, the example posted above by nadeemshafi9 is about a third of a solution which employs AJAX (via the jQuery toolset) to fetch the information from a PHP script in real-time. Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 18, 2009 Author Share Posted May 18, 2009 Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP. what do you mean by that? Quote Link to comment Share on other sites More sharing options...
zq29 Posted May 18, 2009 Share Posted May 18, 2009 Another alternative would be to dynamically create the JavaScript that builds the tooltips with PHP. what do you mean by that? PHP that builds JavaScript: <?php echo "<script type='text/javascript'>"; for($i=1; $i<=10; $i++) { echo "document.write('{$i}');"; } echo "</script>"; ?> Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 18, 2009 Author Share Posted May 18, 2009 I dont understand how the popup comes into it tho Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 19, 2009 Author Share Posted May 19, 2009 bump Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 19, 2009 Share Posted May 19, 2009 Here's a snippet from something I built recently. I'm not including the javascript because I'm reading you already have that part done, right? <?php //code to build the images $result=mysql_query("SELECT * FROM `table`"); while($get_row=mysql_fetch_assoc($result)) { echo "\r\n\t<div class=\"some_photo\">"; echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />"; echo "\r\n\t</div>"; } ?> onmouseover the javascript portion does an innerHTML change of the preview div. Mine just changes the image code - but you could have it build a little table with database values. Like so: //javascript document products = array(); <?php //same code as above - except it builds a javascript array. $result=mysql_query("SELECT * FROM `table`"); while($get_row=mysql_fetch_assoc($result)) { echo "products[i++] = '<img src=\"/big_images/".$get_row['filename']."\" alt=\"\" /><br />Name: ".$get_row['prod_name']."<br />Price: ".$get_row['price']."';\r\n"; } ?> Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 19, 2009 Author Share Posted May 19, 2009 No i dont think my javascript matches that because how mine works is the div is outside the code, from what i see on yours its inside..? Quote Link to comment Share on other sites More sharing options...
zq29 Posted May 19, 2009 Share Posted May 19, 2009 supermerc, these are examples of concepts we are offering you here - Our aim is not to do your work for you, it is to put you in the right direction in the hope that you will figure out how to do this yourself. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 19, 2009 Author Share Posted May 19, 2009 I know but i tried out the code he gives me but it just makes a loop from database it doesn't help me change whats in the div for each item, I already had a code to show the items in vault. Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 19, 2009 Share Posted May 19, 2009 then you're looking for javascript, not php. <script type="text/javascript"> function popPreview(imgid) { document.getElementById('preview_window').innerHTML = '<img src="/big_images/'+imgid+'" alt="" width="350" />'; document.getElementById('preview_window').style.visibility = 'visible'; } function popGoAway() { document.getElementById('preview_window').style.visibility = 'hidden'; document.getElementById('preview_window').innerHTML = ''; } </script> this is associated with a div called "preview_window" like such: <div id="preview_window"></div> simply replace the "innerHTML" value with whatever you want in that div. You can build an array of them (like in a previous example), and pass the array key as a second value in the pop_preview function. Be sure to make your array global inside that function so you can get to that data, though. edit: you will also have to write a bit of CSS to make that div hidden by default. your onmouseover reveals it, and onmouseout hides it again (from previous example). Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 19, 2009 Author Share Posted May 19, 2009 when you say onmouseover the javascript portion does an innerHTML change of the preview div are you talking about this? echo "\r\n\t<div class=\"some_photo\">"; echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />"; echo "\r\n\t</div>"; because if so then its not gonna work, because I want my image to show and when you go over the image then it shows a different div with information on the image. Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 20, 2009 Share Posted May 20, 2009 Here's a functional example you can look at. http://theadvertiser.com/cruzzers Remember, just because it doesn't have whatever little piece you want doesn't mean you throw the whole thing away. Take what works, add what you need and move on. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 20, 2009 Author Share Posted May 20, 2009 thats exactly what I need! Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 20, 2009 Share Posted May 20, 2009 reveal code on that page and you'll see the same stuff all over this forum thread. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 20, 2009 Author Share Posted May 20, 2009 well its in php it doesnt show in source Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 20, 2009 Share Posted May 20, 2009 Seriously, dude, the PHP has little to do with what you're trying to do. The layout is an attached CSS stylesheet, the mouseover code is an attached javascript file; all of which is publicly accessible via your browser's "view source" function. Since you're convinced there's some magic in the PHP, here's exactly what every bit of PHP on that page does; it should look quite familiar. <div id="reader_photos"> <?php $query="SELECT * FROM `table`"; $result=mysql_query($query); while($get_row=mysql_fetch_assoc($result)) { echo "\r\n\t<div class=\"reader_photo\">"; echo "\r\n\t\t<img src=\"/thumbs/".$get_row['filename']."\" alt=\"".$get_row['filename']."\" onmouseover=\"popPreview('".$get_row['filename']."');\" onmouseout=\"popGoAway();\" />"; echo "\r\n\t</div>"; } } ?> </div> <div id="preview_window"></div> Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 20, 2009 Author Share Posted May 20, 2009 I donno it just doesnt seem to work for me... heres my code <? include 'config.php';?> <head> <script type="text/javascript"> function popPreview(imgid) { document.getElementById('preview_window').innerHTML = '<img src="http://quiver.outwar.com/images/'+imgid+'" alt="" width="350" />'; document.getElementById('preview_window').style.visibility = 'visible'; } function popGoAway() { document.getElementById('preview_window').style.visibility = 'hidden'; document.getElementById('preview_window').innerHTML = ''; </script> </head> <style> #preview_window { padding:25px; visibility:hidden; width:auto; max-height:325px; overflow:hidden; border:3px solid #0eb8f0; z-index:1; position:absolute; background:#a7def0; top:auto; left:auto; } </style> <body> <div id="reader_photos"> <?php $query="SELECT * FROM `vault`"; $result=mysql_query($query); while($get_row=mysql_fetch_assoc($result)) { echo "\r\n\t<div class=\"reader_photo\">"; echo "\r\n\t\t<img src=\"http://quiver.outwar.com/images/".$get_row['spath']."\" alt=\"".$get_row['spath']."\" onmouseover=\"popPreview('".$get_row['spath']."');\" onmouseout=\"popGoAway();\" />"; echo "\r\n\t</div>"; } ?> </div> <div id="preview_window"></div> </body> </html> Just like what youve been telling me all along this post and the same as on your example. http://pulse.comxa.com/poptest.php <-- Live example of mine Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 20, 2009 Share Posted May 20, 2009 Well, for one, you didn't close your popGoAway() function. Also, you'll need to layout the page using CSS to make it appear properly. here's the CSS used on the example page .reader_photo { width:80px; height:80px; float:left; padding:5px; background:#a7def0; border:3px solid #0eb8f0; margin:25px; text-align:center; } I'd encourage you to use Firefox and install the firebug and web developer add-ons. These can help you to with figuring out the client side of things - like javascript errors. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 20, 2009 Author Share Posted May 20, 2009 Thanks it works now! Except that the position automatically goes to the top left of the page everytime, i tried to fix it but I dont know how. I want it to be like yours and I have the same css as yours but mine doesnt go at same place. http://pulse.comxa.com/poptest.php <-- Live example of mine Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted May 20, 2009 Share Posted May 20, 2009 check my body tag - there's an onmousemove that calls a function. It's also tied to a few other functions, copy them all to your javascript and you should be good to go. Quote Link to comment Share on other sites More sharing options...
supermerc Posted May 20, 2009 Author Share Posted May 20, 2009 thanks a bunch Quote Link to comment Share on other sites More sharing options...
nadeemshafi9 Posted May 20, 2009 Share Posted May 20, 2009 download jquery include it and create a php file which outputs your popup function onmouseover(){ newdiv=document.createElement('div'); newdiv.id = 'thepopup'; newdiv.style = 'position: absolute; top: 40%; left: 40%;'; newimg.onclick=closebox(); //JQUERY $.ajax({ type: "POST", url: "getmypopupcontent.php", data: "name=John&location=Boston", success: function(msg){ newdiv.innerHTML = msg; }); document.body.appendChild(newdiv); } function closebox(){ document.body.removeChild('thepopup'); } Quote Link to comment 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.