We Keep Coding

Popup window on landing page

I made a landing page with goods.
Every good has a description and a price.
When you click open a "popup window" should open, with the picture and description.
The question is, what if i have a lot of goods so with html and some framework popup, I will need to do all the description in html, can I somehow make a template of popup window, and provide description of goods in popup window through javascript ?

Basically you need a code which displays a modal window and the same code should also display full product details in it.
Normally, if you have a category page which displays product summary you would need to populate the modal window (which some call popup) with complete product details taken in via Ajax (the website should be able to output product data in JSON format if you got to an URL like mystore.com/ajax/p/10101 where 10101 is the product id. It depends on the website creator.
Anyways, an example JS code with modal window and which displays the product info from the page you are on is below.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});
.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
Close X
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>

How to get a popup box to appear when you click on a div?

I´m trying to make a popup box appear when I click on a div box. I´m haven´t done a lot of js or jquery, so I have a hard time figuring out how to do it. I got a box (class="box") that take up most of the screen and then a couple of boxes inside the first box. So when the second box is clicked (class="profile1") I want an popup box to appear.I later going to insert a picture were it sayes class="picture", would be nice if that was clickable as well
<div class="box">
<div class="profile1">
<div class="picture"></div>
<p class="name">NAME</p>
</div>
</div>
css
.box {
left: 19.5%;
top: 11.5%;
height:85%;
right:2.2%;
background-color: #F2F2F2;
border-radius: 5px;
position: absolute;
border: 1px soid F2F2F2(0, 0, 0, 0.3);
z-index:-1;
overflow: auto;
}
.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
Any suggestions on how to do it?
Appreciate all help

You can use jQuery UI like this:
JS:
$(function(){
$('.profile1').on("click", function(e){
e.preventDefault()
$('.picture').dialog({
width: 600,
height: 'auto',
modal:true,
title: 'Picture',
overlay: { backgroundColor: "#000", opacity: 0.9 }
})
})
})
HTML:
<div class="box">
<div class="box"> <div class="profile1">
<p class="name">NAME</p>
</div>
<div class="picture">Photo Here...</div>
</div>
CSS for ".picture":
.picture{
display:none;
width:30%;
height:30%;
}
And don't forget to include jQuery UI in addition to jQuery and the jQuery UI CSS:
jQuery: <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery UI:<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
CSS: https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css(you should download this CSS, not link to CDN)
JSFiddle: https://jsfiddle.net/91k8xa22/

Tell me if I can improve it :)
https://jsfiddle.net/www139/x6q7Ls5g/
window.addEventListener('load', function() {
var profileBox = document.getElementsByClassName('profile1')[0];
var picture = document.getElementsByClassName('picture')[0];
profileBox.addEventListener('click', function() {
document.getElementById('popupbox').style.display = 'block';
picture.innerHTML = '<img src="http://freetopwallpaper.com/wp-content/uploads/2013/09/beautiful-background-wallpaper-hd-3.jpg">';
});
});
.box {
left: 19.5%;
top: 11.5%;
height: 85%;
right: 2.2%;
background-color: #F2F2F2;
border-radius: 5px;
position: absolute;
border: 1px soid F2F2F2(0, 0, 0, 0.3);
z-index: -1;
overflow: auto;
}
.profile1 {
margin-left: 1.7%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
#popupbox {
position: fixed;
width: 50vw;
height: 50vh;
background-color: #eee;
display: none;
}
<div class="box">
<div class="profile1">
<div class="picture"></div>
<p class="name">NAME</p>
</div>
</div>
<!--popup box-->
<div id="popupbox">This is the popup box</div>
<!--end popup box-->

here is new one,
html :
<div class="box">
<div class="profile1">
<div class="picture"></div>
<p class="name">NAME</p>
</div>
</div>
<div class="popup">popup</div>
css :
.box {
left: 19.5%;
top: 11.5%;
height:85%;
right:2.2%;
background-color: #F2F2F2;
border-radius: 5px;
position: absolute;
border: 1px soid F2F2F2(0, 0, 0, 0.3);
z-index:-1;
overflow: auto;
}
.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
.popup
{
display: none;
width: 40%;
height: 300px;
margin: 0 auto;
margin-top: 50px;
background: #eee;
border-radius: 8px;
box-shadow: 0 0 10px #999;
}
#close
{
float: right;
}
js :
$(".profile1").click(function(){
$(".popup").show();
})
$("#close").click(function(){
$(".popup").hide();
})
http://jsfiddle.net/erasad22/vjpsrtux/

How to :hover one div on two other divs and make it dynamic with JS/JQuery?

I need to hover this div on 2 more divs, and this div additionally should go on its position dynamically maybe playing with the $(document).width();
So, an example is the following:
<div id="store">
<div id="storeText">Store</div>
</div>
<div id="score">
<div id="money">Money earned: 0</div>
<div id="times">Bulbs charged: 0</div>
</div>
CSS
#score {
background-color: #aaaaaa;
width: 96%;
margin: 0;
padding: 10px 2% 10px 2%; }
#store {
float:right;
background-color: #c0c0c0;
width: 10%;
height: 200px;
margin: 0;
padding: 19px 2% 19px 2%; }
#storeText {
text-align: center; }
That's what I should do, but you need to consider I have one more div in the bottom and this is what happens:
JSFiddle
So my question is, how can I position that div '#store' dynamically on that position (right) noting that it should hover all the divs and not make them go away as it actually does right now.
If you didn't get how the result should be, this link will help you understand it carefully.

Please check this code: JSFiddle
What i understand from you i put here, please let me know if you want any more help.
#store {
background-color: #aaaaaa;
width: 96%;
margin: 0;
padding: 10px 2% 10px 2%;
}
#score {
float:right;
background-color: #c0c0c0;
width: 100%;
height: 300px;
margin: 0;
}
#storeText {
text-align: center;
}
#div3 {
float:right;
background-color: red;
width: 100%;
margin: 0;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
opacity: 0.4;
padding: 10px 2% 10px 2%;
}
<div id="store">
<div id="storeText">Store</div>
</div>
<div id="score">
<div id="money">Money earned: 0</div>
<div id="times">Bulbs charged: 0</div>
</div>
<div id="div3"></div>

Unslider sliding image problems

When I add the unslider-arrows to the unslider banner it doesn't slide properly between images. When moving to the next image it resizes the image from small to full size starting at the top of the .banner div.
* Note: It only slides like this without any user input.
You can see this on the link that I have provided.
www.bravodesignbc.com
Since I am not a javascript guru I am not sure how to solve this. I don't think there is a problem with the css but I might be wrong. Here is the html and javascript for the banner and unslider-arrows
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
Here is the css
/*********banner********/
#feature{
margin-top: 60px;
margin-bottom: 60px;
position: relative;
height: 400px;
width: 100%;
background-color: #FFF;
}
.banner{
position: relative;
overflow: auto;
margin: 0 auto;
width: 800px;
height: 400px;
padding: 0px;
}
.banner ul{
padding: 0px;
margin: 0px;
list-style: none;
}
.banner li {
padding: 0px;
margin: 0px;
float: left;
height: 400px;
width: 800px;
}
.banner ul li img{
padding: 0px;
margin: 0px;
}
.buttonPrev {
z-index: 1;
position: absolute;
left: 3%;
top:180px;
width: 35px;
height:70px;
}
.buttonNext {
z-index: 1;
position: absolute;
right: 3%;
top:180px;
width: 35px;
height:70px;
}
.bottomBanner {
position:absolute;
z-index: 1;
bottom: 0px;
width: 800px;
height: 100px;
margin:0px;
padding:0px;
background-color: rgba( 255, 255, 255, 0.4);
}
.bottomBanner h2{
font-family: 'rockwell_stdlight', Helvetica, Arial, sans-serif;
font-weight: lighter;
color: #4B4D4E;
font-size: 36px;
padding-left: 170px;
}
.listBg{
background:url(../images/herringbone-pattern.png);
background-repeat: repeat;
}

It looks like your <script> block is improperly nested. I tried out your code and was able to get it to work by moving the javascript instantiating the unslider() out of the "banner" div like so:
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<ul>
<li class="listBg"><h3>Slide 1</h3></li>
<li class="listBg"><h3>Slide 2</h3></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
<script type="text/javascript">
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>

Iscroll Wrapper doesnt get a height

I got the following code:
<div data-role="content" height="100%" data-iscroll>
<div class="homebutton_zeile">
<a id="picture_home" href="#pictrues">
<div class="homebutton_all">
<div class="homebutton_name">Picture</div>
<div class="homebutton_picture">
<img src="images/picture.png" alt="image"
style="position: relative;">
</div>
</div>
</a>
</div>
</div>
</div>
My Classes of CSS
.homebutton_zeile{
width: 100%;
height: 30%;
}
.homebutton_all{
width: 30%;
height: 90%;
float:left;
margin-left: 2%;
margin-top:15px;
}
.homebutton_picture{
position: relative;
width: 100%;
height: 85%;
float: left;
background-color: #AAC7BD;
border: 1px solid black;
border-radius: 15px;
box-shadow:8px 8px 8px #666;
}
.homebutton_name{
text-align:center;
position: relative;
top:-10px;
width: 100%;
height: 15%;
margin-left: auto;
text-decoration:none;
color:black;
}
I am Using:
iscroll.js
jquery 1.8.2
jquery mobile 1.2.0
jqery mobile iscrollview.
And if its needed to know jstorage.js and fastclick.js
But the div above is not getting a height at the wrapper of iscroll. There is also a login before and this page will be shown automatically after the login after a $.mobile.changePage("#home"); function.
I tried to do it as first page before the function of changePage and it gave me the same effect. If i put a for example after the
<div data-role="content" height="100%" data-iscroll>&nbps;
The Wrapper get a height of 15px for the &nbps; but not for the images inside.