Need help on a project

Report · Mar 15, 2020

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

		
	}

Report · Mar 16, 2020

I know I can only see the one about where I said it might be a bug?

Report · Mar 16, 2020

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

Report · Mar 16, 2020

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>

Report · Mar 16, 2020

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.

Report · Mar 16, 2020

Which individual boxes do you want to make bigger. Currently on desktop devices there are 3 boxes in a horizontal row, do you only want 2 boxes per row?

If youre applying a margin-top to the product_wrapper css (see in bold below)

.product_wrapper {
display: flex;
justify-content: space-between;
width: 80%;
margin: 100px auto 0 auto;
}

and the <h1></h1> tag, which is inserted before the product_wrapper div, is being affected then something is incorrect with your code. If you take my last code example I posted and insert an <h1></h1> tag before the product_wrapper div then add a marging top to the product_wrapper css only the product_wrapper div will move down.

Report · Mar 16, 2020

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>

Report · Mar 16, 2020

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>

Report · Mar 16, 2020

Hi, that is perfect, and if I did want to now show a favourites button as a heart and a shopping cart icon to both the regular div and the expanded div for each product how may I do this.

Report · Mar 16, 2020

Well you would just add another div after the 'product_price' div and before the closing 'products' </div> - add the icons/links:

<div class="cart_favorite_icons">
<span>Add To Cart</span> | <span>Favorite</span>
</div>

Report · Mar 16, 2020

Perfect! thank you for all the help

Report · Mar 16, 2020

Perfect! thank you for all the help

IMH opinion, the reward should be much more than that.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 17, 2020

Thanks Ben. I'm sure Tim is grateful for the help.

I'm just sitting around a lot these days having made the decison not to pursue active work any longer or only that which I get inspired by or pays well enough, so any challenge is beneficial to myself as it keeps me focused.

My time is largely complete as a full time active worker. I dont like the way things are going much, as you already know, so rather than swim against the tide its best to lie back in the deckchair and observe. Its freed up a lot of time to experiement and pursue other interests, especially as spring/summer is coming up, although this CoVid19 virus has derailed much of everybodies plans for the foreseeable future.

Hope it doesn't result in destroying too many businesses and too many peoples personal finances. Happy days! Sit back, relax - 'What ever will be, will be'

Need help on a project

1 Correct answer

Perfect! thank you for all the help