Jump to content

[SOLVED] Rollover popup

supermerc

By supermerc
in PHP Coding Help

Recommended Posts

supermerc Regular Member

supermerc

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/158595-solved-rollover-popup/
Share on other sites
nadeemshafi9 Advanced Member

nadeemshafi9

Posted
Posted 
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');
}

zq29 Advanced Member

zq29

Posted
Posted

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.

zq29 Advanced Member

zq29

Posted
Posted

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>";
?>

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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";
}
?>

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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).

supermerc Regular Member

supermerc

Posted
  • Author
Posted

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.

 

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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.

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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>

supermerc Regular Member

supermerc

Posted
  • Author
Posted

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

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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.

 

 

supermerc Regular Member

supermerc

Posted
  • Author
Posted

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

 

nadeemshafi9 Advanced Member

nadeemshafi9

Posted
Posted

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');
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.