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?
Related
I have 4 div. When I click on one of the divs the green shown will expand. Then I click on another diva and a green background with subtitles will also be shown. I mean, I want only one div to be expanded. For example, if I click the 3 div it expands me the content of the 3 diva. Then I click the 2 div and it expands me the content of the 2 diva and automatically hides the content of the previous div that was expanded. I hope that everone understand what I want to do.
<script>
function showHide(obj)
{
var nextObj=obj.nextSibling;
while(!nextObj.tagName) nextObj=nextObj.nextSibling;
nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
}
</script>
.iptv{
width:200px;
height:50px;
background-color:blue;
margin-bottom:10px;
color:white;
margin-left:auto;
margin-right:auto;
}
.drop{
background-color:green;
width:200px;
height:50px;
margin-left:auto;
margin-right:auto;
}
a{
text-decoration: none;
color:white;
}
<body>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
</body>
There are a couple of errors in your code:
The divs weren't "closed"
It's not obj.nextSibling, but obj.nextElementSibling (there's a difference: What is the difference between node.nextSibling and ChildNode.nextElementSibling?)
After correcting these errors and adding the code for closing the other divs, the snippet works:
function showHide(obj) {
const nextObj = obj.nextElementSibling;
const dropDowns = document.querySelectorAll('.drop')
dropDowns.forEach(e => {
e.style.display = 'none'
})
nextObj.style.display = 'block'
}
.iptv {
width: 200px;
height: 50px;
background-color: blue;
margin-bottom: 10px;
color: white;
margin-left: auto;
margin-right: auto;
}
.drop {
background-color: green;
width: 200px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: white;
}
<div class="down">
<div onclick="showHide(this)" class="iptv">Button1</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button2</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button3</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
<div class="down">
<div onclick="showHide(this)" class="iptv">Button4</div>
<div class="drop" style="display:none">
Home
About
Contact
</div>
</div>
I have a packery.js layout of divs of three different sizes. I would like them to appear in random order every time the page loads but so far I can only get the content inside the divs to randomize. So on refresh I get the divs in the same order/pattern but the content inside in a different order.
Here's the basic HTML:
<div class="container">
<div class="grid">
<div class="grid-item grid-item--height2">
<div class="grid-item-content">
<p>content here</p>
</div>
</div>
<div class="grid-item grid-item--width2">
<div class="grid-item-content">
<p>content here</p>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<p>content here</p>
</div>
</div>
</div>
</div>
Here's my CSS:
.grid {
width: 100vw;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 120px;
height: 120px;
background: #ffffff;
border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.grid-item:hover {
cursor: pointer;
}
.grid-item--width2 { width: 240px; }
.grid-item--height2 { height: 240px; }
.grid-item--large {
width: 480px;
height: 300px;
background-color: slategrey;
}
& my Javascript:
var $grid = $('.grid').packery({
itemSelector: '.grid-item'
});
$grid.on( 'click', '.grid-item', function( event ) {
// change size of item by toggling large class
$( event.currentTarget ).toggleClass('grid-item--large');
// trigger layout after item size changes
$grid.packery('layout');
});
(function($) {
$.fn.randomize = function(tree, childElem) {
return this.each(function() {
var $this = $(this);
if (tree) $this = $(this).find(tree);
var unsortedElems = $this.children(childElem);
var elems = unsortedElems.clone();
elems.sort(function() { return (Math.round(Math.random())-0.5); });
for(var i=0; i < elems.length; i++)
unsortedElems.eq(i).replaceWith(elems[i]);
});
};
})(jQuery);
$(document).ready(function() {
$(".container").css("display", "block");
$("div.grid").randomize("div.grid-item");
});
I don't know if I'm just putting the js in the wrong order or something but I can't figure it out - I would really appreciate a push in the right direction!
Thank you.
The reason of only content being rendomized is because you are sorting children nodes of div.grid-item instead of children of div.grid
Second, i think packery is adding absolute positioning to the grid-item nodes. So fixing js code would not reflect the correct positioning unless
position: relative !important;
left: 0 !important;
top: 0 !important;
is added to .grid-item class.
Created a pen for this.
https://codepen.io/11kodykay11/pen/xxwVOra
So I figured it out, in case anyone is wondering.
The HTML (the inline CSS is just to illustrate that the divs randomize in order, not just the content):
<div class="container">
<div class="grid">
<div class="grid-item">
<div style="background-color: red;" class="grid-item-content expand">
<p>content here #1</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: blue;" class="grid-item-content expand">
<p>content here #2</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: green;" class="grid-item-content expand">
<p>content here #3</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: yellow;" class="grid-item-content expand">
<p>content here #4</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: orange;" class="grid-item-content expand">
<p>content here #5</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: purple;" class="grid-item-content expand">
<p>content here #6</p>
</div>
</div>
</div>
</div>
The CSS:
.expand {
display: block;
width: 150px;
height: 150px;
}
.expand:hover {
cursor: pointer;
}
.grid-item-content {
width: 150px;
height: 150px;
border: 1px solid black;
}
.grid-item--large {
width: 520px;
height: 375px;
}
& the JS:
$(document).ready(function () {
var $grid = $(".grid").packery({
itemSelector: ".grid-item"
});
$grid.on("click", ".expand", function (event) {
$(event.currentTarget).toggleClass("grid-item--large");
$grid.packery("layout");
});
});
(function ($) {
$.fn.randomize = function (tree, childElem) {
return this.each(function () {
var $this = $(this);
if (tree) $this = $(this).find(tree);
var unsortedElems = $this.children(childElem);
var elems = unsortedElems.clone();
elems.sort(function () {
return Math.round(Math.random()) - 0.5;
});
for (var i = 0; i < elems.length; i++)
unsortedElems.eq(i).replaceWith(elems[i]);
});
};
})(jQuery);
$("div.grid").randomize("div.grid-item");
Codepen link: https://codepen.io/ddmmyyyy/pen/OJyQmQz
I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the "value" section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.
So far I have been using the flickity API and have created most of the setup necessary.
The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).
My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.
jQuery(document).ready(function( $ ) {
var $carousel = $('.js-carousel');
$carousel.flickity({
prevNextButtons: false,
pageDots: false
});
// Split each word in the cell title into a span.
var $cellTitle = $('.js-cell-title');
// Wrap every letter in the cell title
$cellTitle.each(function() {
var $this = $(this);
var letters = $this.text().split('');
$this = $(this);
$this.empty();
$.each(letters, function(i, el) {
$this.append($('<span class="text-split">')
.append($('<span class="text-split__inner">')
.text(el)));
});
// Dirty way of getting the whitespace
var emptySplits = $this.find('.text-split__inner:contains( )');
emptySplits.addClass('whitespace');
emptySplits.parent().addClass('whitespace');
});
//focus the carousel when it is scrolled to
$(window).scroll(function() {
var carousel = $(".carousel");
var carouselTop = $('.carousel').offset().top;
var carouselHeight = $('.carousel').outerHeight();
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var isScrollMode = carousel.hasClass('scrollMode');
var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
(carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);
if(!isInView && isScrollMode){
carousel.removeClass('scrollMode');
carousel.blur();
console.log('EXIT');
} else if (!carousel.hasClass('scrollMode') && isInView){
carousel.addClass('scrollMode');
carousel.focus();
//NEEDS FUNCTION TO SCROLL THE CAROUSEL
console.log('ENTER');
}
});
//end of carousel event
function carouselEnd() {
var cells = $(".carousel-cell");
var numberOfCells = cells.length;
var lastCell = cells[numberOfCells - 1];
if( lastCell.classList.contains('is-selected') ){
//will add .show class to the hidden content
}
}
$carousel.on( 'settle.flickity', function( event, pointer ) {
carouselEnd();
});
});
.carousel{
.row{
margin:0;
}
.carousel-cell {
width: 66%;
margin-right: 3rem;
}
.cell__wrap {
width: 100%;
margin: 0 auto;
}
.cell__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.cell__title {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%) translateX(-20%);
}
.text-split {
overflow: hidden;
display: inline-block;
&.whitespace {
display: initial;
}
#for $i from 1 through 100 {
&:nth-child(#{$i}) .text-split__inner {
transition-delay: 0.02s * $i;
}
}
}
.text-split__inner {
transform: translateY(100%);
display: inline-block;
transition: transform 0.3s ease;
.is-selected & {
transform: translateY(0);
}
&.whitespace {
display: initial;
}
}
.cell__thumb {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Base styles
html,
body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* background-color: #00011D;
color: #FFF; */
}
.container {
width: 100%;
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<section class="carousel">
<div class="container a">
<div class="carousel js-carousel">
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
</div>
</div>
</section>
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");
}
I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});