Solved

What's wrong with this tool tip?

Posted on 2016-08-04
9
29 Views
Last Modified: 2016-08-05
Head out to http://brucegust.com/kitchen/stunt.php#

Click on "select options" and you'll get a screen that looks like this:

screenshot
Click where it says "Add Pull Out Trash Can." There should be a tooltip that pops up with an image. You'll get the image in Windows, but then it freezes up. In Safari, it doesn't reveal the image at all.

I've botched things somewhere. What's wrong and how do I fix it?

Thanks!
0
Comment
Question by:brucegust
  • 4
  • 3
  • 2
9 Comments
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
I can't figure out what you're trying to accomplish with the mousemove event function. It appears that you're trying to make the image follow the movement of the mouse. But your calculation is off and the image is being pushed out of view beyond the right side of the pop-over box. Please explain what the mousemove event is supposed to be doing.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Tried to go to that link but Nod decided it was not healthy for me to go there.Screenshot
0
 

Author Comment

by:brucegust
Comment Utility
Julian, I don't why you would get that message. Let me know if you get the same message by just going out to brucegust.com/kitchen. There's nothing harmful out there, that I know of.

Kim, I know enough about Javascript to sound ignorant. Short answer: I don't know. This is a script I've used in the past without ever popping the hood to understand WHY it works the way that it does. I've never used it in the context of a pop up window like the way I've got it configured in this context - not sure if that makes a difference. But the bottom line that I need is I want a situation where my user can hover over an active link and see a tooltip that display the corresponding image that's attached to that particular catalog item.

The image doesn't have to follow the mouse. It just needs to pop up on "hover." That's it.
0
 

Author Comment

by:brucegust
Comment Utility
Gentlemen, here's the source code just in case you run into the same problem that Julian encountered.

I've got some "notes" in the code to help in navigating to the part of the code that represents a "short." There's something foul, just because the moment I hover over the link where I need to see a picture, the whole computer freezes up. It's sad...

Here's a "table of contents..."

Line 500 is where my hidden box resides. It becomes visible when the shopper clicks on "select options."

On line 512, you'll see a SELECT statement that I'm "echo-ing," just so I can see what the system is seeing. Immediately following that you see "a href="#" class="tip_trigger" style="color:#000000; text-decoration:underline;"><span class="tip"><img src="assets/images/trashpullout_thumbnail.jpg" style="width:150px;"></span>Add Pull Out Trash Can</a>." That's the bugger. I can see the pic when I hover over the link, but the screen and computer freezes up. Obviously, there's a short somewhere and here is where your mighty knowledge comes into play...

What do you think...

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KitchenCabinetCo.com by Online Cabinets Direct</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/carousel_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/sidebar.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script language="Javascript">
	function MM_jumpMenu(targ,selObj,restore){ //v3.0
	eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
	if (restore) selObj.selectedIndex=0;
}

</script>

<script>
$.ajaxSetup({ cache: false });

$(document).ready(function(){
	
	
//this is your starting point where all your slidingNavTerms are hidden and your display_hide links are displayed

		$(".slidingNavTerms").hide();
		$(".display_hide").show();
 
//here's your actual function, as far as a user clicking on a link in order to see the "hidden" link beneath it 
 
		$('.display_hide').click(function(){
			$(this).next().slideToggle();
			//$(this).html("System Performance &#9650;");
		});
	
//this is the command that corresponds to all of the links on your main nav bar in that anytime the user hovers over a "primary" link, it sets all of the previously exposed links to "hidden." This way
//any expanded menus don't linger. Since I've got graphic to correspond with every link, I gave each link a function. It may not be the most elegant approach, but it got the job done.	

	$('.restore').hover(function(){
		$(".slidingNavTerms").hide();
		$(".display_hide").show();
	});
	
	$('.button').click(function() {
		//$('.screen'+$(this).val()).text('Button clicked: ' + $(this).val());
		$('#screen').show();
		$(this).next().show("slow");
	});
	
	$('.close_window').click(function() {
		//$('.screen'+$(this).val()).text('Button clicked: ' + $(this).val());
		$('#screen').hide();
		//$(this).prev().hide("slow");
		//$(this).hide("slow");
		$(".box").hide("slow");
	});
	
	/*$(".menu_toggle").click(function(e){
	e.preventDefault();
	$('#screen').hide();
	$(".box").hide("slow");
	$("#wrapper").toggleClass("menuDisplayed");
	$(window).scrollTop(0);
	});*/
	
	$("#show_cart").click(function(e){
	e.preventDefault();
	$('#sidebar_content').load('ajax.php?session_id=sucqqh1g0asn0onij1041mj2d4');
	//$('#sidebar_content').load(url +' #sidebar_content');
	$("#wrapper").toggleClass("menuDisplayed");
	$(window).scrollTop(0);
	$('#show_cart_button').hide();
	$("#select_option").hide();
	$(".button").hide();
	$('#screen').show();
	});
	
	$("#myForm").submit(function(e) {// use the correct ID
		e.preventDefault();// we don\'t want to submit anything until we\'ve first determined that the user\'s not get ready to duplicate something that\'s already in the database.
		
		var devTest = $( "#myForm" ).serialize(); //packaging all of our submitted variables into one, neat little var
		//alert("Develop test, URL prams = "+devTest);// publish a little alert box that lets you see your posted variables
		$.post( "ajax.php", devTest) // posting all of our variables to ajax.php 
			.done(function(Drumstick) { //the "done"function is what you\'re doing when the AJAX call (in this case the ajax.php page) is "done" running and we\'re now hearing back from the server
				if (Drumstick.charAt(0) == "E") //"Drumstick.charAT(0) is just fancy code for the first letter of what you\'re getting back from the server
				{
					alert("ERROR - The submarket has been entered before");
				}
				else 
				{	
					//alert(Drumstick);
					$('#sidebar_content').html(Drumstick);
					$(".box").hide("slow");
					$("#wrapper").toggleClass("menuDisplayed");
					$(window).scrollTop(0);
					$("#select_option").hide();
					$(".add_to_cart_button").hide();
					$("#show_cart_button").hide();
					$('#screen').show();
				}
			});
		});	
		
		$("#doorForm").submit(function(e) {// use the correct ID
		e.preventDefault();// we don\'t want to submit anything until we\'ve first determined that the user\'s not get ready to duplicate something that\'s already in the database.
		
		var devTest = $( "#doorForm" ).serialize(); //packaging all of our submitted variables into one, neat little var
		//alert("Develop test, URL prams = "+devTest);// publish a little alert box that lets you see your posted variables
		$.post( "ajax.php", devTest) // posting all of our variables to ajax.php 
			.done(function(Drumstick) { //the "done"function is what you\'re doing when the AJAX call (in this case the ajax.php page) is "done" running and we\'re now hearing back from the server
				if (Drumstick.charAt(0) == "E") //"Drumstick.charAT(0) is just fancy code for the first letter of what you\'re getting back from the server
				{
					alert("ERROR - The submarket has been entered before");
				}
				else 
				{	
					//alert(Drumstick);
					$('#sidebar_content').html(Drumstick);
					$(".box").hide("slow");
					$("#wrapper").toggleClass("menuDisplayed");
					$(window).scrollTop(0);
					$("#select_option").hide();
					$(".add_to_cart_button").hide();
					$("#show_cart_button").hide();
					$('#screen').show();
				}
			});
		});	
	
		$("#menu_toggle_option").click(function(e){
		e.preventDefault();
		//alert("ajax_2.php");
		$('#sidebar_content').load('ajax.php?session_id=sucqqh1g0asn0onij1041mj2d4');
		$("#wrapper").toggleClass("menuDisplayed");
		$('#show_cart_button').show();
		$("#select_option").show();
		$(".button").show();
		$('#screen').hide();
		return false;
		 //alert("The paragraph was clicked.");
	});
	
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
	
});

</script>
</head>
<body><!-- this is your browser container-->
<div id="screen"></div>
<div class="navbar_background">
<div style="background-color:#000000; height:49px; width:100%; position:absolute; z-index:-2"></div>
	<div class="bbb_logo"></div>
	<div class="social_icons">
		<a href="http://facebook.com" target="_blank"><div class="facebook_link"></div></a>
		<div class="blog_link"></div>
					<a href="checkout.php?session_id=sucqqh1g0asn0onij1041mj2d4"><div class="store_link"></div></a>
				<a href="#"><div class="avatar_link"></div></a>
	</div>
	<div class="no_cam_sign"></div>
	<!-- this is your navbar -->
	

<div class="navbar">
		<div class="navcontainer">
			<ul>
				<li><a href="index.php">Home</a></li>
				<li><a href="#" class="restore">About</a>
					<ul>
						<li><a href="about.php">About</a></li>
						<li><a href="construction.php">Construction</a></li>
						<li><a href="about.php#specs">Specifications</a></li>
						<li><a href="why.php">Why Buy RTA Cabinets...</a></li>
						<li><a href="#" class="display_hide" style="outline:0;">Policies  &#9660;</a>
							<div class="slidingNavTerms">
								<a href="returns.php" style="line-height:26px; outline:0;">Return Policy</a>
								<a href="privacy.php" style="line-height:26px; outline:0;">Privacy Policy</a>
								<a href="damage.php" style="line-height:26px; outline:0;">Damage Policy</a>
							</div>
						</li>
					</ul>
				</li>
				<li><a href="gallery_full.php" class="restore">Gallery</a>
					<ul style="width:400px; height:auto; background-color:#ffffff;">
										<br>
						<table border="0" style="width:auto; margin:auto;">
						<tr>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=558"><img src="Photos/crop.php?h=85&w=85&f=BlackIslandDistress[1].jpg"  border="0" alt="558" style="margin-left:-28px;"></a>
										Black Distressed										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=389"><img src="Photos/crop.php?h=85&w=85&f=brandywine_shaker2.jpg"  border="0" alt="389" style="margin-left:-28px;"></a>
										Brandywine Shaker										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=548"><img src="Photos/crop.php?h=85&w=85&f=2909GeorgiaAveKitchenC.jpg"  border="0" alt="548" style="margin-left:-28px;"></a>
										Chocolate Mist										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=324"><img src="Photos/crop.php?h=85&w=85&f=FrenchVanilla2.jpg"  border="0" alt="324" style="margin-left:-28px;"></a>
										French Vanilla Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=323"><img src="Photos/crop.php?h=85&w=85&f=kitchen010.jpg"  border="0" alt="323" style="margin-left:-28px;"></a>
										Ginger Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=304"><img src="Photos/crop.php?h=85&w=85&f=Mocha Hood 2.jpg"  border="0" alt="304" style="margin-left:-28px;"></a>
										Mocha Deluxe										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=773"><img src="Photos/crop.php?h=85&w=85&f=white_deluxe.jpg"  border="0" alt="773" style="margin-left:-28px;"></a>
										White Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table style="width:125px; margin:auto;" border="0">
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
																				<A HREF="gallery.php?category=692"><img src="Photos/crop.php?h=85&w=85&f=2909GeorgiaAveKitchenB.jpg"  border="0" alt="692" style="margin-left:-28px;"></a>
										White Shaker										</td>
									</tr>
								</table>
														</td>

						<td>&nbsp;</td></tr></table><br>	
					</ul>					
				</li>
				<li><a href="all_doors.php" class="restore">Door Styles</a>
					<ul style="width:480px; height:auto; background-color:#ffffff;">
					<!-- code for feature doors -->					
											<table border="0" style="width:450px; margin:auto;">
							<tr>
							<td colspan="4" style="padding-top:5px; padding-bottom:5px;"><a href="rta_doors.php" class="doors">view standard finishes...</a></td>
						</tr>
						<tr>
						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=389"><img src="assets/images/door_colors/Brandywine Shaker.jpg" border="0" alt="Brandywine Shaker Sample Door" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Brandywine Shaker										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=324"><img src="assets/images/door_colors/3FV12.jpg" border="0" alt="French Vanilla Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										French Vanilla Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=323"><img src="assets/images/door_colors/Ginger.jpg" border="0" alt="Ginger Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Ginger Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=555"><img src="assets/images/door_colors/HARVEST3.JPG" border="0" alt="Harvest Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Harvest Deluxe										</td>
									</tr>
								</table>
														</td>

						</tr><tr>
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=304"><img src="assets/images/door_colors/Mocha.jpg" border="0" alt="Mocha Deluxe Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Mocha Deluxe										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=725"><img src="assets/images/door_colors/WhiteChocolatePen.jpg" border="0" alt="White Deluxe Chocolate Glaze Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										Chocolate Glaze										</td>
									</tr>
								</table>
														</td>

						
							<td style="text-align:center;">
								<table border="0" style="margin:auto;">
									<tr>
										<td style="text-align:center;">
																				<A HREF="door_samples.php?id=692"><img src="assets/images/door_colors/WhiteShaker.jpg" border="0" alt="White Shaker Door Sample" style="width:75px; margin-left:-22px;;"></a>
										</td>
									</tr>
									<tr>
										<td style="text-align:center; color:#000000; font-size:8pt;">
										White Shaker										</td>
									</tr>
								</table>
														</td>

						<td>&nbsp;</td></tr>						 <tr>
							<td colspan="4"><a href="custom_doors.php" class="doors">view custom finishes...</a></td>
						</tr>
						</table><br>					</ul>	
				
				</li>
				<li><a href="#" class="restore">How to Design Your Kitchen</a>
					<ul>
						<li><a href="design.php">Design</a></li>
						<li><a href="assembly.php">Assembly</a></li>
					</ul>
				</li>
				<li><a href="faqs.php" class="restore">Faqs</a></li>
				<li><a href="reviews.php" class="restore">Reviews</a></li>
				<li><a href="contact.php" class="restore">Contact</a></li>
			</ul>
		</div>	
	</div></div>
<div id="wrapper">
	<div id="page_content_wrapper">
		<div id="sidebar_wrapper">
			<div style="background-color:#b20606; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;"><a href="#" id="menu_toggle_option" style="color:#ffffff;">Continue Shopping</a></div><div style="background-color:#0687b2; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;"><a href="checkout.php?session_id=sucqqh1g0asn0onij1041mj2d4" style="color:#ffffff;">Checkout</a></div>
			<br><br>
				<div id="sidebar_content"></div>
			</div>
			<!-- end of cart sidebar-->
		<div style="margin:auto; width:1000px; height:auto; margin-bottom:50px;"><!-- this centers your content-->
			<br><br>
			<div style="background-image:url(images/satellite_text_header.jpg); background-repeat:no-repeat; width:857px; height:81px; margin:auto;"><!-- filler-->
			<a href="index.php"><div style="width:328px; height:45px; position:relative; display:inline-block;"></div></a>
			<a href="all_doors.php"><div style="width:82px; height:22px; position:relative; display:inline-block; margin-left:10px;"></div></a>
			<a href="cabinets_home.php"><div style="width:52px; height:22px; position:relative; display:inline-block; margin-left:-3px;"></div></a>
			<a href="trim_home.php"><div style="width:98px; height:22px; position:relative; display:inline-block; margin-left:-1px;"></div></a>
			<a href="posts_home.php"><div style="width:138px; height:22px; position:relative; display:inline-block; margin-left:2px;"></div></a>
			<a href="accessories_home.php"><div style="width:113px; height:22px; position:relative; display:inline-block; margin-left:2px;"></div></a>
			</div>
			<div style="background-image:url(images/satellite_filler.jpg); background-repeat:y-repeat; width:857px; height:auto; margin:auto;">	
				<div style="width:790px; min-height:750px; margin-left:50px;"><br><!--main content-->	
<style>
.tip {

	background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid #cccccc;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;
	margin-top:-50px;
	margin-left:25px;
	z-index:1000;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
 </style>		
			<div style="position:absolute; width:182px; height:48px; margin-top:-45px; margin-left:320px;"><a href="all_doors.php"><img src="images/back_to_doors.jpg" border="0"></a></div><br>
			
			<!-- here is where you put your product info -->
						<div style="margin-left:20px; height:26px; float:left; padding-top:5px;">
								<a href="cabinets_home.php" style="color:#000000;"><b>Cabinets</b></a>&nbsp;&#10148;&nbsp;<b><a href="cabinets_home.php?category_id=7" style="color:#000000;">Base Cabinets</b></a>&nbsp;&#10148;&nbsp;<b><a href="cabinets.php?category_id=7" style="color:#000000;">Standard Base Cabinets</b></a>
							</div>
			<div style="width:132px; height:26px; position:relative; margin-left:640px;" id="show_cart_button"><a href="#"><img src="images/view_cart.png" border="0" id="show_cart"></a></div>
			<br>
				<br>
					<table border="0" style="margin:auto;">
						<tr>
														<td style="width:75px; text-align:center;"><img src="images/left_arrow.png"><br>n/a</td>
							<td style="text-align:center; padding-left:10px; padding-right:10px;">
														<img src="assets/images/2010CabinetImages/B15.jpg" border="0" alt="B15" style="height:180px;">
									
							</td>
							<td><br>
							<div class="product_label">
							<b>Standard Base Cabinets</b><br>
							<b>Part Number:</b> B15<br>
							<b>Your Price:</b> $165.00							</div>
							<input type="image"  src="images/select_options.png" class="button" style="margin:auto; margin-top:3px;" id="select_option">
							<!-- right in here is your hidden "box" div-->
							<div class="box">
								<!--beginning of bordered div-->
								<div style="width:580px; height:auto; margin:auto; padding:5px; margin-top:10px;">
								
									<!--beginning text and nameplate-->
									Select your cabinet options from the pulldown menu below. Then be sure to enter the quantity at the bottom. If you have any questions, be sure to contact us at  (615) 828-8377 or email: <a href="mailto:orders@onlinecabinetsdirect.com" style="color:#000000;">orders@onlinecabinetsdirect.com</a>.<br><br>
									<div style="background-color:#000000; color:#ffffff; font-weight:bold; width:560px; height:25px; margin:auto; text-align:center; padding-top:3px;">B15 | Base Cabinets | $165.00</div><br>
									<!--end of beginning text and nameplate-->
									<form method="Post" id="myForm"><!-- this is being sent to ajax.php and you're triggering the "add_to_cart" function with the session_id-->
									<table style="width:475px; margin:auto;" border="0">
																															<tr>
												<td><b>select imagepath from option_features where id='2'													<a href="#" class="tip_trigger" style="color:#000000; text-decoration:underline;"><span class="tip"><img src="assets/images/trashpullout_thumbnail.jpg" style="width:150px;"></span>Add Pull Out Trash Can</a>
																								</b></td>
											</tr>
											<tr>
												<td><select name="select_1" style="width:500px;">
												<option></option>
																																						<option value="1_1_145.00">
													Add Pull Out Trash Can													+[$145.00]
																										</option>
																																						<option value="1_2_0">
													Do Not Add Trash Can Pull Out													</option>
																								</select>
												<br><br></td>
											</tr>
																																												<tr>
												<td><b>select imagepath from option_features where id='14'													<a href="#" class="tip_trigger" style="color:#000000; text-decoration:underline;"><span class="tip"><img src="assets/images/trashpullout_thumbnail.jpg" style="width:150px;"></span>Add Roll Out Tray</a>
																								</b></td>
											</tr>
											<tr>
												<td><select name="select_2" style="width:500px;">
												<option></option>
																																						<option value="2_5_100.00">
													Add 2 ROTB15													+[$100.00]
																										</option>
																																						<option value="2_3_50.00">
													Add 1 ROTB15													+[$50.00]
																										</option>
																																						<option value="2_4_0">
													Do Not Add Roll Out Trays													</option>
																								</select>
												<br><br></td>
											</tr>
																																																							<tr>
												<td><b>select imagepath from option_features where id='15'Cabinet Assembly												</b></td>
											</tr>
											<tr>
												<td><select name="select_3" style="width:500px;">
												<option></option>
																																							<option value="3_7_60.00">Standard Finish Utility / Oven Cabinet Assembly +[$60.00]</option>
																																									<option value="3_6_30.00">Standard Finish Base / Wall Cabinet Assembly +[$30.00]</option>
																																									<option value="3_8_0.00">No Assembly / Customer Will Assemble Upon Receipt</option>
																										</select>
												<br><br></td>
											</tr>
																																																							<tr>
												<td><b>select imagepath from option_features where id='23'Finished Side Panel Skins As You Are Looking At The Cabinet Front												</b></td>
											</tr>
											<tr>
												<td><select name="select_4" style="width:500px;">
												<option></option>
																																						<option value="4_12_0">
													Both Side Exposed													</option>
																																						<option value="4_10_0">
													Right Side Exposed													</option>
																																						<option value="4_9_0">
													Left Side Exposed													</option>
																																						<option value="4_11_0">
													No Side Exposed													</option>
																								</select>
												<br><br></td>
											</tr>
																																																																		<tr>
												<td><b>select imagepath from option_features where id='28'Hinge Direction												</b></td>
											</tr>
											<tr>
												<td><select name="select_5" style="width:500px;">
												<option></option>
																																						<option value="5_14_0">
													Hinge Left													</option>
																																						<option value="5_13_0">
													Hinge Right													</option>
																								</select>
												<br><br></td>
											</tr>
																																									<tr>
											<td><b>Select Your Cabinet Color From Our Drop Down Menu</b></td>
										</tr>
										<tr>
											<td><select name="select_6" style="width:500px;" disabled>
																						<option selected value="6_324_0">
											French Vanilla Deluxe											</option>
																				<!--here's where you need to put your list of all doors so user can change their finish if they want to-->
										</select><br><br>
										</td>
									</tr>
																		<tr>
										<td colspan="2" style="text-align:center; background-color:#cccccc; padding:5px;"><b>quantity:</b> <input type="text" size="15" name="quantity" style="display:inline-block;"></td>
									</tr>
									</table>
								</div>
								<!--end of bordered div-->
								<br><br>
								<!-- close button -->
								<!-- the session_id is what triggers the ring_it_up / add_to_cart function on line 509 of the ajax.php page-->
								<div style="bottom:0; left:0; right:0; position:relative; padding-bottom:5px; width:248px; height:50px; text-align:center; margin:auto;"><img src="images/cancel.png" class="close_window" style="float:left;">&nbsp;&nbsp;
								<input type="hidden" name="session_id" value="sucqqh1g0asn0onij1041mj2d4">
								<input type="hidden" name="feature_door_id" value="324">
								<input type="hidden" name="door_price" value="0">
								<input type="hidden" name="the_count" value="6">
								<input type="hidden" name="part_id" value="B15">
								<input type="hidden" name="product_id" value="8">
								<input type="hidden" name="product_name" value="B15">
								<input type="hidden" name="price" value="165.00">
								<input type="hidden" name="category_name" value="Base Cabinets">
								<input type="image" src="images/add_to_cart_button.png" style="float:left;" border="0"></a></div></form>
								<!--end of close button-->
								
							</div>
							<!-- end of hidden box div-->
							</td>
														<td style="width:75px; text-align:center;"><a href="door_shop.php?door_id=324&product_id=9"><img src="images/right_arrow.png" border="0"></a><br>B18</td>
						</tr>
					</table>
							<br>
			<div style="width:100%; margin:auto; height:25px; text-align:center;">
						<select name="select54" style="width:500px; border-radius:10px; font-size:10pt; background-color:#000000; color:#ffffff;" onchange="MM_jumpMenu('top',this,1)">	
			<option>Change Door / Color Finish...</option>
															<option value="door_shop.php?door_id=548&product_id=8">French Vanilla Deluxe With Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=550&product_id=8">French Vanilla Deluxe With Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=549&product_id=8">French Vanilla Deluxe With Pewter Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=561&product_id=8">French Vanilla Deluxe With Harvest Glaze Including Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=672&product_id=8">Black Distressed Ginger Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=569&product_id=8">Ginger Vandyke Distressed Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=552&product_id=8">Mocha Deluxe Vandyke Distressed Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=534&product_id=8">French Vanilla Deluxe Vandyke Distressing Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=557&product_id=8">Standard Black Finish Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=554&product_id=8">Ginger Vandyke Rub Finish Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=553&product_id=8">Mocha Deluxe Vandyke Rub Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=304&product_id=8">Mocha Deluxe</option>
																	<option value="door_shop.php?door_id=323&product_id=8">Ginger Deluxe</option>
																<option value="door_shop.php?door_id=324&product_id=8" style="background-color:#cccccc; color:#000000;">French Vanilla Deluxe</option>
																<option value="door_shop.php?door_id=389&product_id=8">Brandywine Shaker</option>
																	<option value="door_shop.php?door_id=692&product_id=8">White Shaker</option>
																	<option value="door_shop.php?door_id=555&product_id=8">Harvest Deluxe</option>
																	<option value="door_shop.php?door_id=556&product_id=8">Teaberry Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=558&product_id=8">Black Distressed Mocha Price Includes Assembly +[$130.00]</option>
																	<option value="door_shop.php?door_id=725&product_id=8">White Deluxe Chocolate Glaze</option>
																	<option value="door_shop.php?door_id=726&product_id=8">Black Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=748&product_id=8">Dark Grey Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=747&product_id=8">Light Grey Shaker Price Includes Assembly +[$85.00]</option>
																	<option value="door_shop.php?door_id=789&product_id=8">Green Chocolate Glaze Price Includes Assembly +[$115.00]</option>
																	<option value="door_shop.php?door_id=734&product_id=8">White Deluxe Chocolate Mist +[$115.00]</option>
																	<option value="door_shop.php?door_id=753&product_id=8">White Deluxe Charcoal Mist +[$115.00]</option>
																	<option value="door_shop.php?door_id=733&product_id=8">White Deluxe Vandyke Distressed +[$130.00]</option>
																	<option value="door_shop.php?door_id=735&product_id=8">Pecan With Black Glaze +[$115.00]</option>
																	<option value="door_shop.php?door_id=773&product_id=8">White Deluxe No Glaze +[$85.00]</option>
																	<option value="door_shop.php?door_id=776&product_id=8">Espresso Shaker +[$100.00]</option>
									</select>
			</div><br>
				<div class="shop_navbar">
	<div class="shop_navbar_container">
		<ul>
		<!--here's where you put your first function that's calling all of your macro_categories sans RTA Cabinet Door Samples and Shippiing-->
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="#">Cabinets &#9660;</a>
				<!-- here are your submenus. With "Trim & Details," you've got several subcategories that require a little more width so that's why there's an if statement here -->
								<ul>
																	<li><a href="#">Base Cabinets</a>
						<ul>
													<li><a href="cabinets.php?category_id=33">
							Corner Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=2">
							Drawer Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=3">
							Full Height Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=4">
							Peninsula Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=34">
							Sink Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=6">
							Specialty Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=7">
							Standard Base Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=8">
							Trimmable Knee Drawers & Desk File Drawers							</a></li>
													<li><a href="cabinets.php?category_id=35">
							Trimmable Knee Drawers & Desk File Drawers@Vanity							</a></li>
												</ul>
						</li>
																	<li><a href="cabinets.php?category_id=14">
							Tall Cabinets							</a></li>
																		<li><a href="cabinets.php?category_id=23">
							Vanity Cabinets							</a></li>
																<li><a href="#">Wall Cabinets</a>
						<ul>
													<li><a href="cabinets.php?category_id=24">
							Blind Corner Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=25">
							Chimney Hoods							</a></li>
													<li><a href="cabinets.php?category_id=26">
							Corner Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=27">
							Mullion Doors							</a></li>
													<li><a href="cabinets.php?category_id=28">
							Refrigerator Cabinets 24							</a></li>
													<li><a href="cabinets.php?category_id=1">
							Specialty Wall Cabinets							</a></li>
													<li><a href="cabinets.php?category_id=36">
							Standard Wall Cabinets							</a></li>
												</ul>
						</li>
										</ul>
								<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="#">Trim & Details &#9660;</a>
				<!-- here are your submenus. With "Trim & Details," you've got several subcategories that require a little more width so that's why there's an if statement here -->
								<ul style="white-space:nowrap; width:250px;">
																			<li><a href="trim.php?category_id=15">
							Decorative Door Panels							</a></li>
																		<li><a href="trim.php?category_id=16">
							Fillers							</a></li>
																		<li><a href="trim.php?category_id=17">
							Hood Box Columns							</a></li>
																		<li><a href="trim.php?category_id=18">
							Moldings & Trim							</a></li>
																		<li><a href="trim.php?category_id=19">
							Moldings & Trim@Trim &...							</a></li>
																		<li><a href="trim.php?category_id=20">
							Panels & Toe Kick							</a></li>
																		<li><a href="trim.php?category_id=21">
							Touch Up Kits							</a></li>
																		<li><a href="trim.php?category_id=22">
							Valances & Base Skirts							</a></li>
											</ul>
								<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
							<li><a href="accessories.php?category_id=10">Cabinet Accessories</a></li>
							<!-- end of submenus -->
			</li>
				<!-- Cabinet Accessories and Posts, Corbels and Onlays don't have any subcategories, so there's no submenu for them -->
								<li><a href="posts.php?category_id=11">Posts, Corbels & Onlays</a></li>
								<!-- end of submenus -->
			</li>
				</ul>
	</div>
</div><!-- this concludes your product nav bar-->		<table style="width:700px; margin:auto;" border="0">
			<tr>
				<td style="text-align:center;" rowspan="2"><img src="assets/images/door_colors/3FV12.jpg" style="width:225px;">
												<div style="position:absolute; width:96px; height:78px; margin-top:-75px; margin-left:135px;"><img src="images/free_shipping.png"></div>
				</td>
				<td style="vertical-align:top; text-align:center;"><span class="satellite_title">French Vanilla Deluxe</span><hr style="margin-top:-2px;"><a href="door_samples.php?id=324"><img src="images/information_button.jpg" border="0" style="margin-top:-2px;"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="gallery.php?category=324"><img src="images/gallery_button.jpg" border="0" style="margin-top:-2px;"></a>
			</tr>
			<tr style="height:250px;">
				<td style="vertical-align:top;"><br><ul><li><b>Name:</b> French Vanilla Deluxe Door Sample</li><li><b>Your Price:</b> $165.00</li></ul>
				<div style="position:relative; width:84px; height:86px; float:right; display:inline-block;"><form method="Post" id="doorForm"><input type="hidden" name="session_id" value="sucqqh1g0asn0onij1041mj2d4"><input type="hidden" name="feature_door_id" value="FV">
				<input type="hidden" name="price" value="165.00">
				<input type="hidden" name="sample_door_alert" value="1">
				<input type="hidden" name="quantity" value="1">
				<input type="hidden" name="product_id" value="324">
				<input type="hidden" name="the_count" value="1">
				<input type="hidden" name="part_id" value="FVDS">
				<input type="hidden" name="category_name" value="RTA Cabinet Door Samples">
				<input type="hidden" name="product_name" value="French Vanilla Deluxe Door Sample">
				<input type="image" src="images/add_to_cart.png"></form></div>Click on the "select options" button below to choose the features and specifications you desire for this product.<br><br><div style="text-align:center;"><b>FREE SHIPPING ON ALL DOOR SAMPLES!</b></div>				
				</td>
			</tr>
		</table>
				</div><!-- this closes your main content -->
			</div><!-- this closes your filler-->
			<div style="background-image:url(images/satellite_text_footer.jpg); background-repeat:no-repeat; width:857px; height:25px; margin-left:71px; margin-top:-10px;"></div>
		</div><!-- this closes what centers your content-->
	</div><!-- this closes your page_content wrapper-->
	<div class="footer">Kitchen Cabinet Company | rtakitchencabinetsonline.com |  (p) 615-828-8377 | (e) admin@kitchencabinetsonline.com</div>
</div><!-- this closes your wrapper-->

</body>
</html>

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Yup access denied there too - all browsers - same message.
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
Remove lines 153-169 and see what happens. Back it up first in case this doesn't do what I think it will.
0
 

Author Comment

by:brucegust
Comment Utility
Kim, that did it!

Two questions: Why? Why did that make a difference?

Second, the picture pops up right over the text as opposed to it being slightly to the right of the last word. How can I position it without getting into the dynamics that killed the page to begin with?

I'm going to close this question and then add another link to my "second" question just so I'm not taking advantage of your good graces.

Julian, I don't know what's going on...
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
The reason that made a difference is that the mousemove event was using mouse coordinates based on the window position, but the absolute position of the image was based on the nearest ancestor element with a position property which was the popover box. So the mousemove event was positioning the image too far to the right, out of view.
0
 

Author Comment

by:brucegust
Comment Utility
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now