Participating Frequently

Answered

Need help on a project

Forum|Forum|5 years ago
March 15, 2020
3 replies
2619 views

Hi, I am struggling to do something regarding a website id like to make I have a grid system with pictures and when you click on them I want it to enlarge and show description, I have achieved this but now I want it to shrink the picture and center it in the box, however, I cannot seem to get to it center from this, if anyone can help that would be great the code for changing the size is below.

	function Openimg(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Product_img");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "100%";
			x[i].style.height = "80%";

			
		}
		
		document.getElementById(tabName).style.width = "30%";
		document.getElementById(tabName).style.height = "30%";
		document.getElementById(tabName).style.align = "center";

		
	}

This topic has been closed for replies.

Correct answer osgood_

Hi, Yes i would like two boxes per row instead of three, also here is my code for the header issue

<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="TShirts.css" rel="stylesheet" type="text/css">
<title>T-Shirts</title>
<style>
	 
h1{
	
    font-family: Cheque;
    font-style: normal;
    position: absolute;
    left:35vw;
	font-size: 2vw;
	color:white;
	text-shadow: 0 8px 10px rgba(0,0,0,0.5);
	
}
</style>
</head>
<body>
	
<h1>First Prohibited Apparel</h1>
	
<div class="product_wrapper">	 
	 	<?php 
	
	while($row = mysqli_fetch_array($result)){
	
?>
<div class="product" margin="10px">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def">
</div>
<!-- end product image -->
<div class="product_name">
<h3><?php echo $row['Product_Name'] ?></h3>
</div>
<!-- end product name -->
<div class="product_description">
<p><?php echo $row['Product_Description']?></p>
</div>
<!-- end product_description -->
<div class="product_price">
<span><?php echo $row['Product_Price'] ?></span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


<?php 
	
	}
	
	?>

</div>
</body>
</html>

Simple reason why the <h1></h1> is being dragged down when a top margin is appled to the product_wrapper is because you are positioning it absolutely. If there is no reason to do so then dont use position: absolute;

The below code shows 2 products per row example:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Expand Div</title>
 <style>
* {
box-sizing: border-box;
}
.product_wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 80%;
margin: 100px auto 0 auto;
}
.product {
width: 48%;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: width 1s ease;
margin-bottom: 20px;
padding: 30px;
}

@media screen and (max-width: 768px) {
.product {
width: 48%;
}
}

@media screen and (max-width: 480px) {
.product {
width: 100%;
}
}

.product_img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.product img {
max-width: 100%;
}
.product_description {
display: none;
}
.expand {
width: 100%;

}
.width50 {
width: 50%!important;
}
.showDescription {
display: block;
}
.border {
border: 2px solid red;
}
.wrap {
flex-wrap: wrap;
}
</style>
 </head>
 <body>

<h1 style="text-align: center;">Heading</h1>	 

	 
<div class="product_wrapper">
		 
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Leopard</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Leopard on tree branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->

<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797">
</div>
<!-- end product image -->
<div class="product_name">
<h3>King Fisher</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>King Fisher perched on branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Lion</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Roaring lion laying on grass</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


</div>
<!-- end product wrapper -->


 </body>
 
<script>
const productWrapper = document.querySelectorAll('.product_wrapper');
const product = document.querySelectorAll('.product');
const productImg = document.querySelectorAll('.product_img');
const productDescription = document.querySelectorAll('.product_description');



function expandDiv() {
product.forEach(function(item, index) {
item.onclick = function() {
product.forEach(function(item, index) {
productImg[index].classList.remove('width50');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
productImg[index].classList.add('width50');
productDescription[index].classList.add('showDescription');
item.classList.add('expand');
}
})
}



expandDiv();


window.addEventListener('resize', getWindowWidth);
function getWindowWidth() {
const productWrapper = document.querySelector('.product_wrapper');
const windowWidth = window.innerWidth;

if(windowWidth < 768) {
productWrapper.classList.add('wrap');

product.forEach(function(item, index) {
productImg[index].classList.remove('width50');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})

product.forEach(function(item, index) {
item.onclick = function() {
product.forEach(function(item, index) {
productDescription[index].classList.remove('showDescription');
})
productDescription[index].classList.add('showDescription');
}

})

}
else {
productWrapper.classList.remove('wrap');
expandDiv();
}

}
</script>
 
 
 </body>
 </html>

hans-g.

Brainiac

Hello Tim,

in one of my former websites I used "Featured Image Zoomer" with great success as an experiment >>> see my http://www.dala-laegret1963.de/lupe/lupe.php. There you will find three examples. Feel free to use the source code AND do not disturb about "Spry", this has no effect on the functionality of the page.

Todays Google showed me this: http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

Hans-Günter

osgood_

Brainiac

As I said in a previous post you dont want the div to expand sideways on mobile devices, as there is no room for it.

The code below will activate the expanding div on desktop devices after the window has been narrowed and widened.

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Expand Div</title>
 <style>
.product_wrapper {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.product {
width: 30%;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: width 1s ease;
}

@media screen and (max-width: 768px) {
.product {
width: 48%;
margin-bottom: 20px;
}
}

@media screen and (max-width: 480px) {
.product {
width: 100%;
}
}

.product_img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.product img {
max-width: 100%;
}
.product_description {
display: none;
}
.expand {
width: 50%;

}
.width30 {
width: 30%!important;
}
.showDescription {
display: block;
}
.border {
border: 2px solid red;
}
.wrap {
flex-wrap: wrap;
}
</style>
 </head>
 <body>
	 
<div class="product_wrapper">
		 
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Leopard</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Leopard on tree branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->

<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797">
</div>
<!-- end product image -->
<div class="product_name">
<h3>King Fisher</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>King Fisher perched on branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Lion</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Roaring lion laying on grass</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


</div>
<!-- end product wrapper -->


 </body>
 
<script>
const productWrapper = document.querySelectorAll('.product_wrapper');
const product = document.querySelectorAll('.product');
const productImg = document.querySelectorAll('.product_img');
const productDescription = document.querySelectorAll('.product_description');



function expandDiv() {
product.forEach(function(item, index) {
item.onclick = function() {
product.forEach(function(item, index) {
productImg[index].classList.remove('width30');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
productImg[index].classList.add('width30');
productDescription[index].classList.add('showDescription');
item.classList.add('expand');
}
})
}

expandDiv();


window.addEventListener('resize', getWindowWidth);
function getWindowWidth() {
const productWrapper = document.querySelector('.product_wrapper');
const windowWidth = window.innerWidth;
if(windowWidth < 768) {
productWrapper.classList.add('wrap');
product.forEach(function(item, index) {
product.forEach(function(item, index) {
productImg[index].classList.remove('width30');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
item.onclick = function() {
product.forEach(function(item, index) {
productDescription[index].classList.remove('showDescription');
})
productDescription[index].classList.add('showDescription');
}
})
}
else {
productWrapper.classList.remove('wrap');
expandDiv();
}

}
</script>
 
 
 </body>
 </html>

caring_days5EF5Author

Participating Frequently

Hi, What I meant was everything was fine but I wanted to make the individual boxes bigger at the start but I can't find out how to do it, I've been able to make to boxes bigger in the mobile view. also for some reason the title on my website which is

<h1>Text here</h1>

this is before everything but for some reason when i make the margin for the product wrapper bigger at the top the title comes with it, its like to title is in the div but it isn't in the code.

Nancy OShea

Adobe Expert

I see now that you have T-shirts in a SQL database. The customary procedure is to click the small image on a summary.php page which takes users to the product detail.php page that contains full-sized image, long description, price, add to cart buttons, etc... from your database. Maybe I'm missing something but I don't get how or where your JavaScript fits in to that.

Nancy O'Shea— Product User, Community Expert & Moderator

osgood_

Brainiac

I dont really see what is supposed to be happening from the code posted either. The code being used is quite outdated, so there are most likely newer and better alternatives like opening a modal window with the information on each product. Im not quite sure why you would want to open a large image then shrink it to 30%, unless its just an effect.

osgood_

Brainiac

Hi, Basically I have a div and inside the div, I have the products name and the products price at the bottom of that div and then I have an image above those e.g

And then you click on the div and it expands out and I want it to look like this when it expands.

hopefully, this has been explained better.

Is this what you are looking for, example code below:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Expand Div</title>
 <style>
.product_wrapper {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.product {
width: 30%;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: width 1s ease;
}
.product_img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.product img {
max-width: 100%;
}
.product_description {
display: none;
}
.expand {
width: 50%;

}
.width30 {
width: 30%!important;
}
.showDescription {
display: block;
}
.border {
border: 2px solid red;
}
</style>
 </head>
 <body>
	 
<div class="product_wrapper">	 
	 
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Leopard</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Leopard on tree branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->

<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797">
</div>
<!-- end product image -->
<div class="product_name">
<h3>King Fisher</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>King Fisher perched on branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Lion</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Roaring lion laying on grass</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->


</div>
<!-- end product wrapper -->


 </body>
 
 <script>
const product = document.querySelectorAll('.product');
const productImg = document.querySelectorAll('.product_img');
const productDescription = document.querySelectorAll('.product_description');
product.forEach(function(item, index) {

	
item.onclick = function() {
product.forEach(function(item, index) {
productImg[index].classList.remove('width30');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
productImg[index].classList.add('width30');
productDescription[index].classList.add('showDescription');
item.classList.add('expand');

}
})
</script>
 
 
 </body>
 </html>

osgood_

Brainiac

Is it possible to upload a working example of what you currently have or paste the complete code - html, css, javascript etc in the forum? It might be easier if we can see the complete code, as it is difficult to understand from your post so far exactly what you are trying to do. Sounds like a typical modal window style workflow until you say you want to shrink the image and center it in the box, what box?

caring_days5EF5Author

Participating Frequently

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbName = "products";

$conn = mysqli_connect($servername, $username, $password, $dbName);

if($conn->connect_error){
	die($conn->connnect_error);
}

$result = mysqli_query($conn, "SELECT * FROM tshirts");

?>
<!DOCTYPE html>
<div class="maindiv">
	
	<?php 
	
	while($row = mysqli_fetch_array($result)){
	
?>
	

<div style="cursor: pointer;" onclick="Open('<?php echo $row['ID']+1?>'); Openexp('<?php echo $row['ID']+2?>'); Openimg('<?php echo $row['ID']+4?>')" id="<?php echo $row['ID']+2?>" class="Products">
<div class="Product_img" id="<?php echo $row['ID']+4?>" position="relative" ><?php echo '<img src="data&colon;image/jpeg;base64,' . base64_encode($row['Image']) . '" width="100%" height="100%">'?></div>
<div class="ProName"><?php echo $row['Product_Name']?></div>
<div class="ProPrice"><?php echo $row['Product_Price']?></div>	
<div id="<?php echo $row['ID']+1?>"class="desc" style="display:none"><?php echo $row['Product_Description'] ?></div>
</div>

	<?php 
	
	}
	
	?>
</div> 
function Open(tabName){
		var i, x;
		x = document.getElementsByClassName("desc");
		for(i = 0; i < x.length; i++){

			x[i].style.display = "none";
			
		}
		
		document.getElementById(tabName).style.display = "block";
	}
	
	function Openexp(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Products");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "20vw";
			x[i].style.height = "20vw";
			x[i].style.background = "none";
			
		}
		
		document.getElementById(tabName).style.width = "50vw";
		document.getElementById(tabName).style.height = "35vw";
		document.getElementById(tabName).style.backgroundColor = "white";

		
	}
	function Openimg(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Product_img");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "100%";
			x[i].style.height = "80%";

			
		}
		
		document.getElementById(tabName).style.width = "30%";
		document.getElementById(tabName).style.height = "30%";
		document.getElementById(tabName).align = "middle";

		
	}

osgood_

Brainiac

Im afraid you're going to have to upload this and post to a url so we can see a working version. It's more complex than I originally thought, with 3 functions applied to one <div> and the products, ids etc generated by php.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded