Highlighted

window appears

New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

Hi everybody!

I have a question about an issue .... EVISSI :: Pure Coconut Water under each can I want some information (nutrition facts, etc.) to appear when the visitor clicks on a link or a small image.

I tried it with accordion, but it isn't closed as default (?) and I can't put it under each can (horizontal) because accordion is vertical. Isn't it????

Someone suggested a modal window, but mostly that is 'over' the page.

It has to be something like this ..... C2O

Flexbox 'order' can re-order the position of the images and product_info divs:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();  

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

});

</script>

<style>

.products_wrapper {

display: flex;

justify-content: center;

flex-wrap: wrap;

width: 70%;

margin: 0 auto;

text-align: center;

}

.product_info {

position: relative;

border: 1px solid #999;

padding: 25px;

width: 100%;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

@media screen and (max-width: 768px) {

.products_wrapper {

width: 90%;

}

.product_image_1 {

width: 100%;

order: 1;

}

#product_1 {

width: 100%;

order: 2;

}

.product_image_2 {

width: 100%;

order: 3;

}

#product_2 {

width: 100%;

order: 4;

}

.product_image_3 {

width: 100%;

order: 5;

}

#product_3 {

width: 100%;

order: 6;

}  

    }

</style>

</head>

<body>

<div class="products_wrapper">

<div class="product_image_1">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

</div>

<div class="product_image_2">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

</div>

<div class="product_image_3">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

</div>

<div id="product_1" class="product_info">

<h3>Sectie 1</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3>Sectie 2</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3>Sectie 3</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

</body>

</html>

Views

404

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

window appears

New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

Hi everybody!

I have a question about an issue .... EVISSI :: Pure Coconut Water under each can I want some information (nutrition facts, etc.) to appear when the visitor clicks on a link or a small image.

I tried it with accordion, but it isn't closed as default (?) and I can't put it under each can (horizontal) because accordion is vertical. Isn't it????

Someone suggested a modal window, but mostly that is 'over' the page.

It has to be something like this ..... C2O

Flexbox 'order' can re-order the position of the images and product_info divs:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();  

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

});

</script>

<style>

.products_wrapper {

display: flex;

justify-content: center;

flex-wrap: wrap;

width: 70%;

margin: 0 auto;

text-align: center;

}

.product_info {

position: relative;

border: 1px solid #999;

padding: 25px;

width: 100%;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

@media screen and (max-width: 768px) {

.products_wrapper {

width: 90%;

}

.product_image_1 {

width: 100%;

order: 1;

}

#product_1 {

width: 100%;

order: 2;

}

.product_image_2 {

width: 100%;

order: 3;

}

#product_2 {

width: 100%;

order: 4;

}

.product_image_3 {

width: 100%;

order: 5;

}

#product_3 {

width: 100%;

order: 6;

}  

    }

</style>

</head>

<body>

<div class="products_wrapper">

<div class="product_image_1">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

</div>

<div class="product_image_2">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

</div>

<div class="product_image_3">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

</div>

<div id="product_1" class="product_info">

<h3>Sectie 1</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3>Sectie 2</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3>Sectie 3</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

</body>

</html>

Views

405

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
Oct 04, 2017 0
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

Put your product images and product information in a div container with the class of 'products_wrapper' as below. This has been inserted between the 2 divs which presumably are the green lines spanning the browser window with - <div class="fluid BackAloe"></div>        <div class="fluid BackAloe"></div>

(Take note a 'class' and a 'data-img' attribute has been added to each image as shown in red below)

<div class="fluid BackAloe"></div>

<div class="products_wrapper">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3><a href="#">Sectie 2</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3><a href="#">Sectie 3</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

<div class="fluid BackAloe"></div>

Below is the jQuery to show and hide the product information <divs>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();   

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

});

});

</script>

Below is the css to style the products_wrapper and products_info divs:

.products_wrapper {

width: 70%;

margin: 0 auto;

}

.product_info {

border: 1px solid #333;

padding: 30px;

margin: 30px 0;

}

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...
Oct 04, 2017 0
New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

Heeee, this looks nice, thanks!!! EVISSI :: Pure Coconut Water

Can there also be a possibility to close the dive when clicked on a 'close' button?

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...
Oct 04, 2017 0
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

Yes, add your closing trigger inside the parent product_info div:

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

Then add the jQuery to the existing script:

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide(); 

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

});

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

</script>

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...
Oct 04, 2017 0
New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

YEP!!

One more thing to go ..... at the second can I put two more div's (close is also in a div to align right, that went well), but now the whole thing 'breaks out' of the original product_info div !!!

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...
Oct 04, 2017 0
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

Mobos  wrote

YEP!!

One more thing to go ..... at the second can I put two more div's (close is also in a div to align right, that went well), but now the whole thing 'breaks out' of the original product_info div !!!

Not really sure what you mean, can you upload a new vesrion so I can see what is going on. If coded correctly you can just add the 2nd and 3rd closing <divs> in their containers (see below)

Then if you want to position the closing icon to the right make the .product_info container have a position of relative and the close_product_info container have a position of absolute:

.product_info {

border: 1px solid #333;

padding: 30px;

margin: 30px 0;

position: relative;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

<div class="products_wrapper">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3><a href="#">Sectie 2</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3><a href="#">Sectie 3</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

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...
Oct 04, 2017 0
New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

EVISSI :: Pure Coconut Water   The middle can

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...
Oct 04, 2017 0
New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

Yes, I managed the close button on top, right .....

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...
Oct 04, 2017 0
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

Mobos  wrote

Yes, I managed the close button on top, right .....

add

overflow: hidden;

to .product_info css selector:

.product_info {

overflow: hidden;

}

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...
Oct 04, 2017 0
New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

Ahaaaa, perfect!

Thanks so far for all your help.   I hope this will be o.k., otherwise I'll be back .....

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...
Oct 04, 2017 0
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

Haaaaa, still have an other question ..... on mobile devices the cans EVISSI :: Pure Coconut Water Natural, Pineapple & Mango  go under eachother. But if you click on the plus the window with nutrition facts opens not under the can but under the be lowest can.

Is there a solution??

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...
Oct 05, 2017 0
LEGEND ,
Oct 05, 2017

Copy link to clipboard

Copied

Flexbox 'order' can re-order the position of the images and product_info divs:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();  

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

});

</script>

<style>

.products_wrapper {

display: flex;

justify-content: center;

flex-wrap: wrap;

width: 70%;

margin: 0 auto;

text-align: center;

}

.product_info {

position: relative;

border: 1px solid #999;

padding: 25px;

width: 100%;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

@media screen and (max-width: 768px) {

.products_wrapper {

width: 90%;

}

.product_image_1 {

width: 100%;

order: 1;

}

#product_1 {

width: 100%;

order: 2;

}

.product_image_2 {

width: 100%;

order: 3;

}

#product_2 {

width: 100%;

order: 4;

}

.product_image_3 {

width: 100%;

order: 5;

}

#product_3 {

width: 100%;

order: 6;

}  

    }

</style>

</head>

<body>

<div class="products_wrapper">

<div class="product_image_1">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

</div>

<div class="product_image_2">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

</div>

<div class="product_image_3">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

</div>

<div id="product_1" class="product_info">

<h3>Sectie 1</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3>Sectie 2</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3>Sectie 3</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

</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...
Oct 05, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

That looks great Osgood!!

(although the close-button is now close to the edge, but that's not the biggest problem)

Thanks for all your help here, it's priceless!!!

(Well, apart from my monthly payment for the whole Adobe package, hihi)

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...
Oct 06, 2017 0
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

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...
Oct 06, 2017 0
osgood_ LATEST
LEGEND ,
Oct 06, 2017

Copy link to clipboard

Copied

Mobos  wrote

Sorry, forgot the link ..... EVISSI :: Pure Coconut Water Natural, Pineapple & Mango

Looks good.

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...
Oct 06, 2017 0