13 Replies - 477 Views - Last Post: 05 May 2015 - 12:06 PM

#1 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Pop up window not working properly

Posted 04 May 2015 - 06:46 AM

I created a newsletter pop up that works off of a link and it works perfectly. Now I'm trying to create a another pop up window that is for viewing quick details about a product. For some reason the only thing that is happening is the darker opacity is taking effect.

This is my newsletter code that works perfect.

<p>click here to subscribe to our newsletter <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
							
								<div id="light" class="newsletterenvelope"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
									<form id="newsletterform" action="index.php" method="POST">
										<span class="spanlargefont"><span class="spancenter">Subscribe To Our Newsletter</span></span>
										<div class="floatrightinline"><p>Subscribe to our newsletter to receive special promotions and get up to date news about BuyFarBest.</p></div>
										<div class="floatleftinline"><img src="images/mailicon.png" alt="mail"></div>
												<div class="center">
													<input class="inputbarcenter" name="name" placeholder="Name" type="text" required>
													<input class="inputbaremailcenter" name="email" placeholder="Email Address" type="email" required><br><br><br>
													<input id="newssubmit" name="submit" type="submit" value="Subscribe" onclick="closeSelf();"/>
												</div>	
									</form>
								</div>
								<div id="fade" class="black_overlay"></div>


The CSS for it

/*-----------------Newletter form------------*/
.newsletterenvelope {
	width: 100%;
	padding: 5px 0;
	border-radius: 5px;
	border: 3px solid #14D2CC;
	background-color: #FFFFFF;
	margin: auto;
	display: none;
	position: fixed;
	top: 27.5%;
	left: 27.5%;
	width: 45%;
	padding: 6px;
	z-index:1002;
	overflow: auto;
}
#newsletterform {
	width: 70%;
	margin: 3% 15%;
}
#newssubmit[type=submit] {
	margin: 0 auto;
	display: block;
	width: 75%;
	padding: 12px;
	border-radius: 5px;
	border: 1px solid #7ac9b7;
	background-color: #4180C5;
	color: #F0F8FF;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}
#newssubmit:hover  {
	background-color: #34669E;
}
/*--------------Popup Style------------------*/
.black_overlay{
    display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}


Now the product part. I'm trying to create a hover effect that displays the 'Quick Details' link for the pop-up. The link displays okay but when I click on the link the only thing it does it create the darkened opacity effect. The white form type part does show up when clicking it. The form is actually displaying somewhat before I even click on the link. It isn't hiding until clicked on like the newsletter? The link to my site is buyfarbest.com... it is on the first page about half way down you can see what is actually happening. I have went over this over and over and can't seem to see what it is I'm doing wrong. The part that should be the base of the popup window is almost exactly the same.

Anyone have any ideas?


<div class="featuredproductscontainer">
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
											<div class="viewproductbutton">
												<a class="viewproductbuttonlink" href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='block';document.getElementById('fade').style.display='block'">Quick View</a>
											</div>
											
									</div>
									<p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
									<p> <?php echo "$" . $product['price']; ?> </p>	
								</div>
								
								
							<div id="view2" class="productquickviewcontainer">	
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
									</div>
									<p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
									<p> <?php echo "$" . $product['price']; ?> </p>	
								</div>
							</div>	
							<div id="view3" class="productquickviewcontainer">	
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
									</div>
									<p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
									<p> <?php echo "$" . $product['price']; ?> </p>	
								</div>
							</div>
						</div>
						<form id="viewone" class="productquickviewcontainer"><a href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
									<div class="quickviewproductpiccontainer">
											<div class="quickviewproductpic">
												<?php echo "<img class='imgsized' src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
											</div>
									</div>
									<div class="quickviewproductinfocontainer">
										fsdafdffda
									</div>
						</form>
						
				</div>



.productquickviewcontainer {
	width: 100%;
	padding: 5px 0;
	border-radius: 5px;
	border: 3px solid #14D2CC;
	background-color: #FFFFFF;
	margin: auto;
	display: none;
	position: fixed;
	top: 25%;
	left: 25%;
	width: 55%;
	padding: 6px;
	z-index:1002;
	overflow: auto;
}	

.quickviewproductpiccontainer {
	float: left;
	height: 80%;
	width:60%;
	margin-top: 10%;
	margin-bottom: 10%;
	border: 1px solid black;
}
.quickviewproductinfocontainer {
	float: right;
	height: 100%;
	margin-top: 10%;
	margin-bottom: 10%;
	border: 1px solid black;
	
}


Is This A Good Question/Topic? 0
  • +

Replies To: Pop up window not working properly

#2 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6336
  • View blog
  • Posts: 25,545
  • Joined: 12-December 12

Re: Pop up window not working properly

Posted 04 May 2015 - 06:55 AM

Your question is about JS so post the resultant HTML page, not the PHP version.
Was This Post Helpful? 0
  • +
  • -

#3 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 07:18 AM

View Postandrewsw, on 04 May 2015 - 06:55 AM, said:

Your question is about JS so post the resultant HTML page, not the PHP version.


The php you are seeing in what I posted is only to obtain the price/name/pic of the product. I think it has to do with the JS onlcick. It seems like the id's are messing everything up. As you can see, it is basically the exact code as the newsletter.


I also didn't know if the way I positioned:

 <form id="viewone" class="productquickviewcontainer"><a href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

                                    <div class="quickviewproductpiccontainer">

                                            <div class="quickviewproductpic">

                                                <?php echo "<img class='imgsized' src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>

                                            </div>

                                    </div>

                                    <div class="quickviewproductinfocontainer">

                                        fsdafdffda

                                    </div>



Underneath of everything effected it. I tried putting this right under...

 <div class="featuredproducts">

                                    <div class="featuredproductspic">

                                        <?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>

                                            <div class="viewproductbutton">

                                                <a class="viewproductbuttonlink" href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='block';document.getElementById('fade').style.display='block'">Quick View</a>

                                            </div>

                                             

                                    </div>

                                    <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>

                                    <p> <?php echo "$" . $product['price']; ?> </p>  

                                </div>



But that did nothing and it only made what I was trying to hide, until the onlcick event took place, display over top of my product containers.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6336
  • View blog
  • Posts: 25,545
  • Joined: 12-December 12

Re: Pop up window not working properly

Posted 04 May 2015 - 07:27 AM

Again, post the resultant page, View the Source of the page in your browser. People answering a JS question don't want to wade through PHP. We also won't assume that the PHP is not causing a problem; the best/only way to discount PHP as an issue is to see the page that it results in.
Was This Post Helpful? 0
  • +
  • -

#5 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 07:30 AM

View Postandrewsw, on 04 May 2015 - 07:27 AM, said:

Again, post the resultant page, View the Source of the page in your browser. People answering a JS question don't want to wade through PHP. We also won't assume that the PHP is not causing a problem; the best/only way to discount PHP as an issue is to see the page that it r

Gotcha.. Here you are.

<div class="featuredproductscontainer">
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<img src='productpics/' alt='Product Pic'>											<div class="viewproductbutton">
												<a class="viewproductbuttonlink" href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='block';document.getElementById('fade').style.display='block'">Quick View</a>
											</div>
											
									</div>
									<p><a href='./viewProduct.php?view_product='></a></p>
									<p> $ </p>	
								</div>
								
								
							<div id="view2" class="productquickviewcontainer">	
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<img src='productpics/' alt='Product Pic'>									</div>
									<p><a href='./viewProduct.php?view_product='></a></p>
									<p> $ </p>	
								</div>
							</div>	
							<div id="view3" class="productquickviewcontainer">	
								<div class="featuredproducts">
									<div class="featuredproductspic">
										<img src='productpics/' alt='Product Pic'>									</div>
									<p><a href='./viewProduct.php?view_product='></a></p>
									<p> $ </p>	
								</div>
							</div>
						</div>
						<div id="viewone" class="productquickviewcontainer"><a href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
									<div class="quickviewproductpiccontainer">
											<div class="quickviewproductpic">
												<img class='imgsized' src='productpics/' alt='Product Pic'>											</div>
									</div>
									<div class="quickviewproductinfocontainer">
										fsdafdffda
									</div>
						</div>
						<div id="fade" class="black_overlay"></div>
						
				</div>
			</div>
		</div>
		<div class="graypageOut">
			<div class="graypage">
				<div class="index-content">

					<div class="centermailimg"><img src="/images/mailicon.png" alt="mail"></div>
						<p class="subscribecolortext">Get up-to-date news and special deals sent to your inbox</p><br>
							<p class="subscribebodytext">We want to hear from you, let us know what we can do to make your experience better!</p>
						<br><br>
								<div class="subscribebutton" onmouseover="this.style.background='#12BDB8';" onmouseover="this.style.color='white';" onmouseout="this.style.background='transparent';">
									<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Subscribe</a>
								</div>
							
						<div id="light" class="newsletterenvelope"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
							<form id="newsletterform" action="" method="POST">
								<span class="spanlargefont"><span class="spancenter">Subscribe To Our Newsletter</span></span>
								<div class="floatrightinline"><p>Subscribe to our newsletter to receive special promotions and get up to date news about BuyFarBest.</p></div>
										<div class="center">
											<input class="inputbarcenter" name="name" placeholder="Name" type="text" required><br>
											<input class="inputbaremailcenter" name="email" placeholder="Email Address" type="email" required><br><br><br>
											<input id="newssubmit" name="submit" type="submit" value="Subscribe" a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'"></a>
										</div>
							</form>
						</div>
						<div id="fade" class="black_overlay"></div>
						<div id="lightone" class="newsletterthankyou"><a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'">Close</a>
							<span class="spanlargefont"><span class="spancenter">Thanks for subscribing!</span></span>
								<p class="center">It won't be long before you start getting awesome deals sent to your inbox.</p>
						</div>
						<div id="fadeone" class="black_overlay"></div>
						
						<br>
		
				</div>
			</div>

This post has been edited by andrewsw: 04 May 2015 - 07:32 AM
Reason for edit:: fixed quote

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6336
  • View blog
  • Posts: 25,545
  • Joined: 12-December 12

Re: Pop up window not working properly

Posted 04 May 2015 - 07:34 AM

Are there errors in the console?
Was This Post Helpful? 0
  • +
  • -

#7 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 07:38 AM

View Postandrewsw, on 04 May 2015 - 07:34 AM, said:

Are there errors in the console?


Yes. Most have to do with an htaccess file I just added or the fact I don't have pics assigned. However, the token I am not sure of.

Failed to load resource: the server responded with a status of 404 (Not Found)
http://buyfarbest.com/productpics/ Failed to load resource: the server responded with a status of 404 (Not Found)
buyfarbest.com/:33 Uncaught SyntaxError: Unexpected token }
http://buyfarbest.com/productpics/ Failed to load resource: the server responded with a status of 404 (Not Found)
http://buyfarbest.co...ont-awesome.css Failed to load resource: the server responded with a status of 404 (Not Found)
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1786
  • View blog
  • Posts: 5,697
  • Joined: 15-January 14

Re: Pop up window not working properly

Posted 04 May 2015 - 12:02 PM

It doesn't look like line 33 corresponds to the code you posted above, can you tell which line that is that it's complaining about?
Was This Post Helpful? 0
  • +
  • -

#9 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 12:10 PM

View PostArtificialSoldier, on 04 May 2015 - 12:02 PM, said:

It doesn't look like line 33 corresponds to the code you posted above, can you tell which line that is that it's complaining about?


It's complaning about my CSS file line?


	<!-- Styles -->
			<link type="text/css" rel="stylesheet" href="/Style.css"/>

Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1786
  • View blog
  • Posts: 5,697
  • Joined: 15-January 14

Re: Pop up window not working properly

Posted 04 May 2015 - 02:25 PM

No, that's a Javascript error message. It is complaining about a Javascript syntax error, but line 33 doesn't match up with the code you posted in post 5. You probably left some lines out of the start.
Was This Post Helpful? 0
  • +
  • -

#11 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 02:56 PM

View PostArtificialSoldier, on 04 May 2015 - 02:25 PM, said:

No, that's a Javascript error message. It is complaining about a Javascript syntax error, but line 33 doesn't match up with the code you posted in post 5. You probably left some lines out of the start.



Well in my file line 33 is my CSS line, but when I click on the link for the error, this comes up.. (The line after 33 is my

             <script>
				$(function(){
					  $('#header').data('size','big');
					});

					$(window).scroll(function(){
					  if($(document).scrollTop() > 0)
					{
						if($('#header').data('size') == 'big')
						{
							$('#header').data('size','small');
							$('#header').stop().animate({
								height:'40px'
							},600);
						}
					}
					else
					  {
						if($('#header').data('size') == 'small')
						  {
							$('#header').data('size','big');
							$('#header').stop().animate({
								height:'100px'
							},600);
						  }  
					  }
					});
			</script>



This is how I have my file. The first line in what I'm posting is line 33.

	<link type="text/css" rel="stylesheet" href="/Style.css"/>
			<link type="text/css" rel="stylesheet" id="font-awesome-css" href="/font-awesome/4.0.3/css/font-awesome.css"  media="screen">
			
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
			<script type="text/javascript" src="my-script.js"></script>
			<script type="text/javascript">
				//$(document).ready(function(){
					alert("I'm working on my page now")
				});
			</script>
			<script type="text/javascript">
				$(function(){
					  $('#header').data('size','big');
					});

					$(window).scroll(function(){
					  if($(document).scrollTop() > 0)
					{
						if($('#header').data('size') == 'big')
						{
							$('#header').data('size','small');
							$('#header').stop().animate({
								height:'40px'
							},600);
						}
					}
					else
					  {
						if($('#header').data('size') == 'small')
						  {
							$('#header').data('size','big');
							$('#header').stop().animate({
								height:'100px'
							},600);
						  }  
					  }
					});
			</script>

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6336
  • View blog
  • Posts: 25,545
  • Joined: 12-December 12

Re: Pop up window not working properly

Posted 04 May 2015 - 03:02 PM

On line 9 of the last code you have }) but you commented out the line that contains the opening brackets to these closing brackets.
Was This Post Helpful? 0
  • +
  • -

#13 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 04 May 2015 - 03:13 PM

View Postandrewsw, on 04 May 2015 - 03:02 PM, said:

On line 9 of the last code you have }) but you commented out the line that contains the opening brackets to these closing brackets.


Gotcha. I changed it to enclose all of that specific script. The token error went away, but the pop up still isn't working.
Was This Post Helpful? 0
  • +
  • -

#14 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Pop up window not working properly

Posted 05 May 2015 - 12:06 PM

Resolved. The issue ended up being open transform properties that I didn't assign to a class or id. Once I removed that, it worked perfectly.

Thanks for the help guys.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1