Skip to main content
M
Mobos
Known Participant
October 4, 2017
Answered

window appears

  • October 4, 2017
  • 2 replies
  • 1354 views

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

This topic has been closed for replies.
Correct answer osgood_

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>

2 replies

M
MobosAuthor
Known Participant
October 5, 2017

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

O
osgood_Correct answer
Legend
October 5, 2017

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>

M
MobosAuthor
Known Participant
October 6, 2017

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)

O
osgood_
Legend
October 4, 2017

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;

}

M
MobosAuthor
Known Participant
October 4, 2017

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?

O
osgood_
Legend
October 4, 2017

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>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices