I know this is pretty simple but I'm so tired already and I can't seem to find the right keywords to find the solution on a search engine... I'm building a simple front-end only ecommerce website, I've already got the modal up but I need for it to show the right information depending on which product I click... How do I do this?
EDIT: my bad for not putting in the code...
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="modal.css">
<title>Merlin's Potions</title>
</head>
<h3>Potions</h3>
<div class="items">
<div class="item" id="item1">
<img src="../img/aging-potion.png" alt="Potion">
<h6>Aging Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item2">
<img src="../img/bulgeye-potion.png" alt="Potion">
<h6>Bulgeye Potion -</h6> <span>$19.99</span>
</div>
<div class="item" id="item3">
<img src="../img/dragon-tonic.png" alt="Potion">
<h6>Dragon Tonic -</h6> <span>$64.99</span>
</div>
<div class="item" id="item4">
<img src="../img/love-potion.png" alt="Potion">
<h6>Love Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item5">
<img src="../img/polyjuice-potion.png" alt="Potion">
<h6>Polyjuice Potion -</h6> <span>$99.99</span>
</div>
<div class="item" id="item6">
<img src="../img/sleeping-draught.png" alt="Potion">
<h6>Sleeping Draught -</h6> <span>$14.99</span>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="../img/bulgeye-potion.png" alt="" id="modalImg1">
<div class="modalTxt" id="modalTxt1">
<h4>Aging Potion</h4>
<h5>Use/Effect:</h5>
<p>It affects one's eyes, causing them to swell</p>
<h5>Ingredients:</h5>
<ul>
<li>Beetle eyes</li>
<li>Eel eyes</li>
</ul>
<h5>Price:</h5>
<span class="modalPrice">$29.99</span>
<br>
<span class="buyBtn">ADD TO CART</span>
</div>
</div>
</div>
</html>
<script type="text/javascript">
document.querySelector('.item').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = 'flex';
document.querySelector('#modalTxt1').style.display = 'inline-block';
document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = "none";
modaltext.style.display = "none";
});
</script>
.item img{
width:50px;
}
.bg-modal{
display: none;
-ms-align-items: center;
align-items: center;
justify-content: center;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
position: fixed;
top:0;
}
.modal-content {
text-align:left;
position: relative;
border-radius:4px;
width:80%;
height:80%;
background-color:white;
}
.close {
position: absolute;
right:14px;
top:0px;
font-size:42px;
transform:rotate(45deg);
cursor: pointer;
}
.modal-content img {
width:200px;
display:none;
}
.buyBtn {
background-color:red;
padding: 9px 18px;
border-radius:4px;
color:white;
}
.modalPrice{
color:red;
}
.modalTxt{
position: absolute;
}
.modal-content{
width:60%;
}
.modal-content img{
width:56%;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
}
.modalTxt{
right:10%;
top:50px;
}
.modalTxt h4{
font-size:18pt;
}
.modalTxt h5{
font-size:18pt;
margin-top:24px;
}
.modalTxt p {
margin-top:24px;
}
.modalTxt ul {
margin-top:24px;
}
.modalPrice{
font-size:18pt;
line-height:1.5em;
}
.buyBtn{
position: absolute;
bottom:-50px;
}
For example this is your product
<div onCLick="showModal(this)">
<h3>Product Name</h3>
<p>product description</p>
</div>
Now you need the javascript function
function showModal(product) {
// get the product information
var productName = $(product).find("h3").text();
var productDescription = $(product).find("p").text();
var modal = $("#myModal");
// fill the modal with the information
$(modal).find(".modal-title").text(productName);
$(modal).find(".modal-body").text(productDescription);
// show the modal
$("#myModal").modal("show");
}
Related
I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.
The setup I am using:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>First Step Connections - Online Media Marketing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="testimonial-carousel-container">
<div id="btn-prev"> < </div>
<div id="testimonial-carousel">
<div id="testimonial-container">
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
How was lunch today?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Football is the best sport!
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Meeting at 12pm.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
The weather outside is gorgeous.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Susan can you call Jim?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris</br>
Houston, TX
</span>
</div>
</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>
Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.
The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.
So when I get to the last testimonial it continues fluidly to the first.
Here is my css incase you need it:
:root {
--main-red-color: #e11a2c;
--main-blue-color: #013e7b;
--main-green-color: #8dc63f;
}
* {
color:var(--main-blue-color);
box-sizing:border-box;
font-family:"Lato", sans-serif;
}
#testimonial-carousel-container {
width:70%;
margin: auto;
position:relative;
}
#testimonial-carousel {
margin: auto;
background-color:var(--main-blue-color);
position:relative;
overflow:hidden;
}
#testimonial-container {
white-space:nowrap;
width:100%;
position:relative;
}
.speech-bubble {
border-radius:5px;
background-color:var(--main-green-color);
width:auto;
display:inline-block;
padding:20px;
text-align:center;
position:relative;
}
.speech-bubble .arrow {
border-style: solid;
position:absolute;
}
.bottom {
border-color: var(--main-green-color) transparent transparent transparent;
border-width:8px 8px 0 8px;
bottom:-8px;
}
#testimonial {
padding:10px 5px 5px 5px;
height:200px;
background-color:var(--main-red-color);
position:relative;
display:inline-grid;
opacity:.4;
}
#testimonial img {
width:40px;
height:40px;
border-radius:50%;
margin-top:13px;
}
#testimonial span {
color:#fff;
font-weight:900;
}
#btn-prev, #btn-next {
position:absolute;
background-color:var(--main-red-color);
color:#fff;
height:40px;
width:40px;
z-index:5;
border:3px solid #fff;
text-align:center;
line-height:40px;
font-weight:900;
margin-top:-20px;
}
#btn-prev:hover, #btn-next:hover {
background-color:var(--main-blue-color);
}
#btn-prev {
top:50%;
left:-40px;
}
#btn-next {
top:50%;
right:-40px;
}
As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?
You can view the demo at:
http://firststepconnections.com/carousel/
I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.
if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps
You just need to include the jQuery library from here: http://jquery.com/download/
You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
I have everything working in html and jquery but what I need to do is assign and append a number to make the unique id work with the Repeater field. Here is what I have when it comes the HTML CSS and jquery. Is there a way to append a unique number (such as 1 or 2...) to the end of the #expand id in the html, with jQuery?
Here is the code I have with the help from you guys here:
#expand-1 .bio-pic2, #expand-2 .bio-pic2 {
position:absolute;
top:0;
left:0;
}
#expand-1, #expand-2 {
position:absolute;
width:1000px;
border: 1px solid black;
display: none;
background-color:#ffffff;
z-index:9999;
height:323px;
}
.bio-pic2 img {
position:absolute;
top:0;
left:0;
width:323px;
}
.testimonial {
position:absolute;
top:333px;
left:0;
font-size:15px;
}
.desc {
position:absolute;
top:10px;
left:333px;
}
.bio-pic {
float:left;
cursor: pointer;
z-index:9998;
margin:0 5px 0 0;
}
<div id="expand-1">
<div class="test">
<div class="bio-pic2">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
<div class="test">
<div class="bio-pic2">
<img src="http://brent-ransom.com/photo2-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
<img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
e.stopPropagation();
//$('.bio-pic2').toggle("slow");
var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
$(menu).show().animate({
width: 500
}, 1000);
});
$("#expand-1, #expand-2").click(function () {
$(this).animate({
width: 0
}, 1000, function () {
$(this).hide();
});
})
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/
to change an id...
var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);
I am trying to make a bar chart and the bar animates from top to bottom right now, but I want it to animate from bottom to top. How do I get it go from bottom to top?
CSS
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
Javascript
<script src="../../jquery-1.6.4.min.js"></script>
$(document).ready(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
});
});
});
"click here to see it in jsfiddle"
You can define position:absolute to your bar. Write like this:
.bar {
width:50px;
height:250px;
list-style-type:none;
position:relative;
}
.bar p {
background-color:#63F;
position:absolute;
bottom:0;
left:0;
}
Check this http://jsfiddle.net/6zqSS/1/
http://jsfiddle.net/t4THf/5/
CSS
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
HTML
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
JS
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
Click here for demo
You could also achieve this using css keyframes, for example for webkit http://jsfiddle.net/kudoslabs/YddaY/
css
dl{ position: relative ; height: 200px ; }
dt,dd{ position: absolute ; }
dd{ height: 70% ; width: 30px ; background: grey ; bottom: 20px ; -webkit-animation: animate-bar 1.25s 1 linear; }
dt{ bottom: 0 ; }
#-webkit-keyframes animate-bar{
0% {height: 0% ; }
}
html
<dl>
<dt>Freshman</dt>
<dd>70%</dd>
</dl>
http://jsfiddle.net/chovy/6zqSS/2/
.bar {
position: relative;
}
.bar p {
position: absolute;
bottom: 0;
}
Use keyframes to animate the css property, e.g. width
Once you set the width of your element (e.g. div) the animation will kick in
.animated-bar {
animation: animateBar 0.25s ease-in;
#keyframes animateBar {
0% {
width: 0;
}
}
}
<div class="animated-bar" style="width: 200px"><div>
I following this simple tutorial to build a modal dialog
index.html
<div id="results">
<div id="resultsListing">
<ol class="results">
<li class="place clearfix">
<div class="dish-result">
<div class="header clearfix">
<a href=
"javascript:void(0)" class="place-name"></a>
</div>
</div>
</li>
</ol>
</div>
</div>
(etc...)
<div id="overlay">
<div id="dish-popup-container">
<div id="dish-popup" class="popup">
<div class="dish clearfix">
<div class="header"></div>
<div class="details">
<div class="like-button">
<a href="#" class="button">/* this should replaced with dynamic content
*/</a><span class="counter-b">0</span>
</div>
</div>x
</div>
</div>
</div>
</div>
searchui.js
function onPlaceClicked(place_id, dish_id, serp) {
var place = placesById[place_id];
var dish = getDishById(place, dish_id);
var dict = {
place:place,
dish:dish,
topDish:dish,
serp:serp
};
changeState({place:place_id, dish:dish_id});
$(document).trigger('placeClicked', [dict]);
}
function popupPlace(dict) {
$('div#dish-popup').render(dict,window.dishPopupTemplate);
if(typeof(dict.dish) === 'undefined') {
$('div#dish-popup').addClass('place-only');
} else {
$('div#dish-popup').removeClass('place-only');
}
$('#overlay').show();
showPopupMap(dict.place, "dish-popup-map");
}
I'm not sure if this part was necessary but included it anyway:
custom.js
/* Modal Dialog */
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
CSS:
/* =Overlay
-------------------------------------------------------------- */
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay #dish-popup {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
Now when I click a .place list item. The #overlay div doesn't show up.
What could be the cause of this?