[SOLVED] Popup windows help

timmah1 · January 10, 2008

Hello,

I'm using a popup window to show little details about a person. Within that popup is a link to either close the window, or view the whole profile.

What I want to do, and can't figure out, is when someone clicks on the link to view the whole profile, I want the popup to close and the profile to open in the main window.

How do I do that?

Any help would be greatly appreciated.

Thanks in advance

phpQuestioner · January 11, 2008

try this:

Web Page Where Original Pop-Up Begins:

<script language="javascript">
function shoWin()
{
window.name="myWin";
window.open('pop-up.html','popIt','width=500,height=400,resize=no,toolbar=no,menubar=no,statusbar=no,scrollbar=no,left=0,top=0,screenX=0,screenY=0')
}
</script>

<a href="javascript://" onclick="shoWin()">Click Here For More Information</a>

"pop-up.html" Web Page

<a href="http://www.google.com" target="myWin" onclick="javascript:setTimeout('window.close()', 100); return true">View Profile</a> | <a href="javascript://" onclick="javascript:window.close()">Close Window</a>

timmah1 · January 11, 2008

Thanks!

I have another question, maybe you can help me with.

I have this page

http://www.cheezyfries.net/honey/test.php

If you'll notice, it's a rollover with a layer, using css and javascript.

What I need to do is where the yellow shows form the rollover, is put information there about that girl, (ie, name, age, etc.).

I use PHP, how would I go about that?

Do you need to see my code?

Thank you

phpQuestioner · January 11, 2008

is it static or dynamic content?

is it random?

timmah1 · January 11, 2008

It's dynamic.

What it does is pull info about the girls from the database and displays the picture of them.

Then, I need it to be able to display just their name, age, location when the photo gets rolled over.

No, it's not random, just the newest ones registered

Here's the code

<style>
.thumbnail a:hover
{
float: center;
color: #FFF;
height: 200px;
width: 200px;
border: 1px solid #fff;
margin: 0 0 0 0;
padding: 0;
background-color: yellow;
position:absolute; 
z-index:1
}
</style>
<marquee id="scrollingnewadditions" onMouseOver="this.stop();" onMouseOut="this.start();">
<div class="thumbnail"><a href="javascript:openpopup('http://www.cheezyfries.net/honey/view.php?escort=<?php echo $myrow2['name']; ?>&id=<?php echo $myrow2['id']; ?>')">
<img src="escorts/<?php echo $myrow2['photo']; ?>" height="110" class="border" alt="<?php echo $myrow2['name']; ?>"></a></div>	
</marquee>

phpQuestioner · January 11, 2008

do it the same way; you post the girl's pic; just display text from the data table row, instead of a image.

timmah1 · January 13, 2008

I need to keep the picture as well

phpQuestioner · January 13, 2008

you can still use php and do both.

timmah1 · January 13, 2008

I understand that, but I don't know how. That's why I'm here asking.

I get the rollover with no problem, but that's just an empty box with a background of yellow.

I need to be able to populate that box with that particular person

phpQuestioner · January 13, 2008

All you have to do is do mysql_query; where the image and the text are in the same row of the data table.

you would do something like:

<?php
// connect to db
// select db
$results = mysql_query("select * from dataTableName where gid='$gid'"); // "gid" would be you auto incrementing field in your data table.
while ($myrow2=mysql_fetch_array($results)) {

?>

<marquee id="scrollingnewadditions" onMouseOver="this.stop();" onMouseOut="this.start();">
<div class="thumbnail"><a href="javascript:openpopup('http://www.cheezyfries.net/honey/view.php?escort=<?php echo $myrow2['name']; ?>&id=<?php echo $myrow2['id']; ?>')">
<img src="escorts/<?php echo $myrow2['photo']; ?>" height="110" class="border" alt="<?php echo $myrow2['name']; ?>"></a></div>
<div>
<?php echo $myrow2['girls_details']; ?>
</div>	
</marquee>

<?php
}
?>

This is a rough example; so I make no guarantees - If you want better results with this kind of script; I suggest posting this question where it belongs, in the PHP forum.

http://www.phpfreaks.com/forums/index.php/board,1.0.html

Good Luck

timmah1 · January 13, 2008

I appreciate your help, and I really do, but this was a javascript question, not a php question.

Yes, php is involved, but the problem lies with the rollover, and correct me if I'm wrong, php can't do that.

What you gave me was what I already have.

With putting

<div>
<?php echo $myrow2['girls_details']; ?>
</div>

at the end of the code does nothing but display the girls details, before the photo is rolled over.

I need to be able to pass php variables into javascript, and only show those variables when the user rolls over the photo.

Here is my complete script

<h1 title="43">Welcome to the Honey Pot Club</h1><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td valign="top">
		<table width="900" align="center" cellpadding="0" cellspacing="0" class="redthin">

			<tr>
				<td>
					<div id="content"> 
<marquee id="scrollingannouncements">
• <a href="announcements.cfm.htm#announcement7">test from rob</a>   

</marquee>
<form id="frmEscortSearch" name="frmEscortSearch" action="pages/escorts.cfm" method="post" enctype="application/x-www-form-urlencoded">
<div id="searchform">
	<img src="images/head-escort-search.gif" alt="escort search" width="265" height="34">
	<fieldset>
		<div class="commongroup">
			<label>
				Choose Location
			</label>
			<br />
			Postcode
			<input name="PostalCode" type="text" id="PostalCode" size="12" maxlength="20" value="" onChange="document.getElementById('TownCity').selectedIndex=0;">
			or <select id="TownCity" name="TownCity" size="1" onChange="document.getElementById('PostalCode').value='';">						
				<option value="">Select Town/City...</option>



						<option value="Knoxville" >Knoxville</option>



						<option value="liverpool" >liverpool</option>



						<option value="london" >london</option>



						<option value="manchester" >manchester</option>


			</select>
			Other: <a id="specialrequest" href="broadcastrequest.cfm.htm">Send Special Request</a>
		</div>
		<div class="commongroup">
			<div class="labelelement">
				<label>
					Service Type
				</label>
				<br />
				<select id="EscortType" name="EscortType" size="1">
					<option value="0"  selected>Any</option>
					<option value="-1" >Newest Escorts</option>
					<option value="-2" >Duo</option>

						<option value="88" >Agency Escort Duo</option>

						<option value="26" >Agency Female Escort</option>

						<option value="103" >Female Escort Duo</option>

						<option value="25" >Independent Female Escort</option>

						<option value="85" >Independent Male Escort</option>

						<option value="102" >Male & Female Duo</option>

				</select>
			</div>
			<div class="labelelement">
				<label>
					Duration
				</label>
				<br />
				<select name="duration">
					<option value="0">Any Duration</option>

						<option value="70" >30 minutes</option>

						<option value="71" >1st hour</option>

						<option value="72" >Additional hours</option>

						<option value="73" >Dinner Date (3 hrs)</option>

						<option value="74" >All night (12 hrs)</option>

						<option value="75" >All day and night (24 hrs)</option>

					<option value="-2">Special Request</option>
				</select>
			</div>
			<div class="labelelement">
				<label>
					Place
				</label>
				<br />
				<input id="Incalls" name="InOut" type="radio" value="1" >Incalls 
				<input id="Outcalls" name="InOut" type="radio" value="0" >Outcalls
				<input id="Both" name="InOut" type="radio" value="2" checked>Any
			</div>
		</div>
		<div class="commongroup">
			<div class="labelelement">
				<label>
					Body Type
				</label>
				<br />
				<select id="Bodytype" name="Bodytype" size="1">
					<option value="0" selected>Any</option>

						<option value="114" >Athletic</option>

						<option value="111" >Petite</option>

						<option value="112" >Tall</option>

						<option value="122" >Very Large</option>

						<option value="113" >Voluptuous</option>

				</select>
			</div>
			<div class="labelelement">
				<label>
					Age Range
				</label>
				<br />
				<select name="ageRange" id="ageRange">
					<option value="0|0" selected>Any</option>
					<option value="18|20" >18-20</option>
					<option value="21|25" >21-25</option>
					<option value="26|30" >26-30</option>
					<option value="31|35" >31-35</option>
					<option value="36|40" >36-40</option>
					<option value="40|99" >40+</option>
				</select>
			</div>
			<div class="labelelement">
				<label>
					Hair Colour
				</label>
				<br />
				<select id="Hair" name="Hair" size="1">
					<option value="0" selected>Any</option>

						<option value="47" >Auburn</option>

						<option value="48" >Black</option>

						<option value="46" >Blonde</option>

						<option value="49" >Brunette</option>

						<option value="50" >Red</option>

				</select>
			</div>
			<div class="labelelement">
				<label>
					Eye Colour
				</label>
				<br />
				<select id="Eyes" name="Eyes" size="1">
					<option value="0" selected>Any</option>

						<option value="51" >blue</option>

						<option value="52" >brown</option>

						<option value="53" >green</option>

						<option value="54" >grey</option>

						<option value="55" >hazel</option>

				</select>
			</div>
			<div class="buttonoverride">
				<br>
				<input type="hidden" name="pgid" value="escorts">
				<input type="hidden" name="subpgid" value="index">
				<input type="image" id="searchgoBtn" name="goBtn" src="images/view.gif" onclick="document.getElementById('searchpatience').style.display='block';document.getElementById('searchgoBtn').style.display='none';">
				<p id="searchpatience" style="display:none;"><blink>Searching...</blink></p>
			</div>
		</div>
	</fieldset>
</div>
</form>




<div id="featuredescort">
											<p align="center"><img src="images/head-featured-escort.gif" alt="featured escort" height="31"></p>
											<div align="center">
												<table width="220" height="260" border="0" cellpadding="0" cellspacing="0" background="images/small-framebg.jpg">
													<tr>
														<td valign="top">
															<div id="featuredprovider">

<?
// Connect to the database
mysql_connect ('localhost', 'honey', 'potclub') ;
mysql_select_db ('honey_users'); 

// Edit this number to however many links you want displaying
$num_displayed = 1 ;

// Select random rows from the database
$result = mysql_query ("SELECT * FROM users WHERE featured = '1' ORDER BY RAND() LIMIT $num_displayed"); 

// For all the rows that you selected
while ($row = mysql_fetch_array($result)) 

{
// Display them to the screen...

echo "<a href=\"javascript:openpopup('http://www.cheezyfries.net/honey/view.php?escort=$row[name]&id=$row[id]')\">
<img src=\"escorts/" . $row["SampleOne"] . "\" height=\"126\" border=1 title=\"" . $row["EscortName"] . "\">
</a> 
<table border=\"0\" cellspacing=\"0\" cellpadding=\"4\">
  <tr>
    <td align=\"left\">Name:</td>
<td align=\"left\">" . $row["EscortName"] . "</td>
  </tr>
  <tr>
  </tr>  
  <tr>
    <td align=\"left\">Age</td>
<td align=\"left\">" . $row["Age"] . "</td>
  </tr>

</table>
"
;
}
?>
																	<a href="escorts/escort43/index.html"><img src="images/view2.gif" alt="view" width="64" height="24" border="0"></a>

															</div>
														</td>
													</tr>
												</table>
											</div>
</div>
<table  width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td valign="top">
					<div align="left">           
						<img src="images/spacer-black.gif" alt="north west" width="15" height="1"><img src="images/head-newest-escorts.gif" alt="new escorts" width="266" height="31">
					</div>
					<table width="881" height="228" class="table03" align="center" cellpadding="0" cellspacing="0">
						<tr>
							<td>
								<br>
								<br>
								<br>
<?
include "./DB_config.php";
$escort_count = mysql_fetch_assoc(mysql_query("SELECT count(*) as num FROM users"));
echo "<table width=\"780\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";

//set 3 to 6 of you want 4 columns. Set it to 5 if you want 5, etc
$numcols2 = 3; // how many columns to display
$numcolsprinted2 = 0; // no of columns so far

// get the results to be displayed
$query2 = "SELECT * FROM users ";
$queryall2 = $query2.$sorted2.$querylimit2;
$mysql_result2 = mysql_query($queryall2);

// get each row
while($myrow2 = mysql_fetch_assoc($mysql_result2))
{

//get data - eg, 
$SampleOne = $myrow2['SampleOne'];
$EscortName = $myrow2['EscortName'];
$location = $myrow2['location'];
$id = $myrow2['id'];

if ($numcolsprinted2 == $numcols2) {
print "</tr>\n<tr>\n";
$numcolsprinted2 = 0;
}

// output row from database
?>
<style>
.thumbnail a:hover
{
float: left;
height: 200px;
width: 200px;
border: 1px solid #ff0000;
margin: 0 0 0 0;
padding: 0;
background-color: #BA941D ;
position:absolute; 
z-index:1
}
</style>
<td>
<marquee id="scrollingnewadditions" onMouseOver="this.stop();" onMouseOut="this.start();">
<div class="thumbnail"><a href="javascript:openpopup('http://www.cheezyfries.net/honey/view.php?escort=<?php echo $myrow2['EscortName']; ?>&id=<?php echo $myrow2['id']; ?>')">
<img src="escorts/<?php echo $myrow2['SampleOne']; ?>" height="110" class="border" alt="<?php echo $myrow2['EscortName']; ?>"></a></div>	
</marquee>
</td>

	<?php
	echo "\n";;

// bump up row counter
$numcolsprinted2++;

} // end while loop

$colstobalance2 = $numcols2 - $numcolsprinted2;
for ($i=1; $i<=$colstobalance2; $i++) {

}

print "</table>\n";

?>
								<br>
								<table width="133" height="30" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#A5691B" bgcolor="#FFFFEB">
									<tr>
										<td>
											<div align="center">
												<strong><? echo $escort_count['num'];?></strong> Entries Listed 									
											</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
<div id="welcomemessages">
											<p><img src="images/head-welcome.gif" alt="welcome"></p>
											<p align="justify">
												The Honeypot Club is the premium guide to finding high class escorts 
												located and available to work throughout the North West of England. 
												Our escorts are carefully hand picked and each meets our extremely 
												high standards. 
											</p>
											<p><br>
											<img src="images/head-last-minute.gif" alt="last minute search" width="266" height="31"></p>
											<p>

												Click the view button below to find escorts who are available tonight or in up to 7 days.
											</p>

												<div align="left">
													<table width="100%" border="0" cellspacing="0" cellpadding="4">
														<tr>
															<td width="100%">
																<form id="frmLastMinute" name="frmLastMinute" action="http://www.thehoneypotclub.co.uk/notices.cfm" method="post" enctype="application/x-www-form-urlencoded">

																	<input type="image" src="images/view.gif">
																	<input type="hidden" name="pgid" value="escorts">
																	<input type="hidden" name="subpgid" value="notices">
																</form>
																<br>
											  					There are currently: <strong>0</strong> notices </p></td>
														</tr>
													</table>
												</div>

</div>

					<table width="100%" border="0" cellspacing="0" cellpadding="5" style="clear:both;">
						<tr>
							<td width="50%" valign="top">
								<p><img src="images/head-membership.gif" alt="honepot club membership" width="265" height="34"></p>
								<p align="left">
									Signing up as a Honey Pot Club member is fast and easy and completely <br>
FREE! Just click the link below to join.
								</p>
								<p align="center"> 
									<br>
									<img src="images/signup.gif" alt="reasons to signup..." width="312" height="75"></p>
								<p align="right">
									<a href="newsletter.cfm.htm">please click here >></a>
								</p>
							</td>
							<td width="4"><img src="images/bullet-red.gif" width="1" height="210"></td>
							<td width="50%" valign="top"><img src="images/head-getlisted.gif" alt="get listed with us" width="265" height="34">
								<p>
									Would you like to be listed in the North West's premier escort directory?<br>
									We are growing everyday and with more and more visitor, a listing with<br>
									us will bring you in those appointments you are looking for!
								</p>
								<p>
									When you become a Honey Pot Escort you will benefit from the ability to<br>
									tailor your availability, fill last minute appointment slots, showcase a <br>
									number of professionally shot pictures and more.
								</p>
								<p>
									Find out more about getting listed with us, <a href="getlisted.cfm.htm">please click here >></a>
								</p>
							</td>
						</tr>
					</table>
					<br>
	</td>
</tr>
</table>	




					</div>
				</td>
			</tr>
		</table>
	</td>
</tr>

</table>

Now, I would like to know if someone here can help me with only displaying the girls details AFTER they roll over her picture.

A working example is here

http://www.cheezyfries.net/honey/test.php

Where the yellow box is at is where the girls details need to go.

Thank You

phpQuestioner · January 13, 2008

Now, I would like to know if someone here can help me with only displaying the girls details AFTER they roll over her picture.

From the looks of your demo; you've already got that set-up; just add the php in the yellow div (format as needed; maybe float another div inside the yellow box and add the girls details there). That is the easiest way to do this. Why do you want to go through trouble of setting up a javascript variable and seting up javascript to display the content of the girls details; when you can do this all with php? And no php cannot create a rollover event; it is server side - you need client side (javascript) for a rollover event.

timmah1 · January 13, 2008

Believe me, it's not what I want to do, this client I'm working with wants this. It's a pain.

I guess I don't understand what you mean by setting up another div in the yellow box?

If I add the variable in the code within the div, it shows before the user rolls over the photo.

I'm at a lost. I'm sorry to be such a pain, but I'm at my wits end here with this

phpQuestioner · January 13, 2008

give me a minute; I am going to look at the code on your demo and see what's up with the content displaying before mouse over.

UPDATE

ok - your version wasn't going to work out the way you wanted it to and I cannot specifically tell why that is; so do ask - lol.

try this instead:

<style type="text/css">

.thumbnail
{
overflow:hidden;
float: left;
color: #FFF;
height: 114px;
width: 83px;
border: 1px solid #fff;
margin: 0 0 0 0px;
padding: 0;
position:relative; 
}

.thumbnail2
{
overflow:auto;
float: left;
color: #000;
height: 200px;
width: 200px;
border: 1px solid #fff;
margin: 0 0 0 0px;
padding: 0;
position:absolute;
z-index:2;
background:yellow; 
}

</style>

<script language="javascript" type="text/javaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->

function details()
{
document.getElementById('girl').className='thumbnail2';
}

function nodetails()
{
document.getElementById('girl').className='thumbnail';
}

</script>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr> 
    <td><marquee id="scrollingnewadditions" onMouseOver="this.stop();" onMouseOut="this.start();">
<div id="girl" class="thumbnail" onmouseover="details()" onmouseout="nodetails()"><a href="javascript:openpopup('http://www.cheezyfries.net/honey/view.php?escort=&id=')">
<img src="escorts/1.jpg" height="110" class="border" alt="" onmouseover="details()" onmouseout="nodetails()"></a>
hot blond wants it bad
</div>	
</marquee>
</td>
  </tr>
  <tr> 
    <td bgcolor="#0000FF"> </td>

  </tr>
</table>

now; your going to have to format your css; so the text displays as you want it to, but I am going to leave that up to you.

so good luck and I hope that works out for you.

timmah1 · January 13, 2008

WOW!

I am impressed.

You do not know how thankful I am to you for this.

Thank you SO SO SO SO SO much!!

phpQuestioner · January 13, 2008

your welcome

Sign In

[SOLVED] Popup windows help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information