Highlighted

Need help on a project

New Here ,
Mar 15, 2020

Copy link to clipboard

Copied

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

		
	}

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> 

 

 

Topics

Code, How to, Other

Views

978

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help on a project

New Here ,
Mar 15, 2020

Copy link to clipboard

Copied

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

		
	}

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> 

 

 

Topics

Code, How to, Other

Views

979

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Mar 15, 2020

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 15, 2020

Copy link to clipboard

Copied

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

		
	}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 15, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 15, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 15, 2020

Copy link to clipboard

Copied

Some e-com sites, have a close -up image viewer on the product detail page like this. 

https://tinyurl.com/twn66wu

 

JQuery Loupe is similar.

https://redopop.com/loupe/

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

Well unless the OP comes back and provides more difinitive information I guess we'll be left guessing. It doesnt sound much like a zoom/maginify image alone feature to me as there is html text also involved and nothing in the code posted  relates to a 3rd party js source or bespoke js/css that would provide a smooth transition.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

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

 

Capture1.PNG

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

Capture.PNG

hopefully, this has been explained better.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

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> 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

Hi,

 

Yes, this is exactly what I was looking for and does this work infinitely downwards the screen? and is it easy to paginate, sorry I'm not good at coding just starting out

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

I dont think its going to work well on mobile devices without a lot of extra coding. You really would not want the div to expand wider on a smart phone anyway.

 

I think you should investigate using modal windows where the product information pops up in an overlay window above the grid of products. That is much more controllable on all devices.

 

As for pagination that would need to be executed in php as it seems you are getting all of the information from a database. There are a lot of tutorials on Youtube that explain that process. You can paginate in javascript as well if you bring your information back from the database as a json file but that is another story.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

hi, what if a did a media query. to say if the screen gets to a certain size then it changes it to just be a row of products and then it'll work better on mobile 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

also is there a way to have it so that when its made bigger you can double click the picture to make it in the centre of the screen and darken everything else so that you get a full-sized image and all other images of that product 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

If you mean at mobile device sizes the format changes to a vertical list of products - that can be done with some css and some additional javascript -

 

 

 

 

<!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;
}
</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');

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');
}

})



window.addEventListener('resize', getWindowWidth);
function getWindowWidth() {
const productWrapper = document.querySelector('.product_wrapper');
const windowWidth = window.innerWidth;
if(windowWidth > 768) {
productWrapper.style.flexWrap = "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');
}
})
}

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

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

hi, this has worked for the list however the div is no longer expanding when I change the size of the window which is understandable however when I enlarge it again, the div isn't changing size upon click. i think it might be a bug

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

also is there a way to make it so when you click away from all of the listings it closes them all

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

You have to refresh your page.  Only developers change screen size.  Real users don't. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

Hi, thanks for that information, and what about clicking away to close all the things.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

hi just a couple of things, one how do i make the divs they are in bigger as i am editing the value of width in .product and it isn't doing anything two how do i space them out, so each of them has a margin as again adding margin-right: 10px; in .product isnt working.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

 

As I said on mobile devices you don't want the div to expand sideways, as there is nowhere for it to go.

The below code will expand the div again if you widen the browser window after narrowing it.

 

<!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> 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

hi, no the other one was fine i meant the div of the actual images, i have expanded them in mobile view but for some reason cant seem to do it in desktop view

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

As I said you don't want to expand the div sideways on mobile devices as it has nowhere to go.

The code below will actvate the expanding div for desktop devices, once the window has been narrowed and widened again. 

 

<!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> 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

For some reason the post is not going through

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

Test post

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

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> 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

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> 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 16, 2020

Copy link to clipboard

Copied

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>
<!-- end cart favorite icons -->

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Mar 16, 2020

Copy link to clipboard

Copied

Perfect! thank you for all the help

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

Perfect! thank you for all the help

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Mar 17, 2020

Copy link to clipboard

Copied

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' 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group