My automatic carousel doesn't work. I tried using setInterval as you can see below but it still doesn't work. I really don't know why. It's syntactically correct and I think it ain't logically wrong either. Please help.
HTML:
<div class = "slidingPhotos" align="center">
<div class = "slide active-item">
<div class = "photo1">
<img src = "Images/mainImage.jpg"></img>
</div>
<div class = "description">
<h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
</div>
</div>
<div class = "slide ">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage3.jpg"></img>
</div>
<div class = "description">
<h3> You have a thousand products to choose from at O-Grocery! </h3>
</div>
</div>
</div>
<div class = "slide">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage2.jpg"></img>
</div>
<div class = "description">
<h3> You can guarantee 100% freshness of goods! </h3>
</div>
</div>
</div>
</div>
<div class ="footer" align="center">
<div class = "dots">
<div class = "arrow-prev">
<img src = "Images/arrow-prev.png"></img>
</div>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class = "arrow-next">
<img src = "Images/arrow-next.png"></img>
</div>
</div>
</div>
jQuery:
setInterval(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(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);
you have a syntax error
setInterval(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();
} // <- THIS is missing in your code
currentSlide.fadeOut(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);
http://jsfiddle.net/evilbuck/aj0nuyLk/
Related
I'm finishing the project and I'm struggling with couple things:
1 Shopping Cart in javascript
I expected <p class="subTotal">$ 0</p> to update after adding, or deleting elements from the shopping cart. Instead, when I add element to the shopping cart, p.subTotal updates 2x the price of dish.
The next one is deleting elements from the shopping cart. When I do that, the console return this:
Console screenshot #1
2 Removing the object
To remove object from the shopping cart I had to select parent of the parent of the button.
Inside the button I've put the svg icon. Somehow, when I click on svg icon, javascript code selects parent of the parent of the svg instead of the button's.
3 Adding dishes to the shopping cart
I've put <a href="#" class="addToCart"> inside of <div class="food">.
This action results in console, showing me another error:
Console screenshot #2
If You can answer even one question I will really appreciate that.
I have only few hours left to finish it.
Code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready);
} else {
ready();
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('trash');
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('quantity');
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i];
input.addEventListener('change', quantityChanged);
}
var addToCart = document.getElementsByClassName('addToCart');
for (var i = 0; i < addToCart.length; i++) {
var button = addToCart[i];
button.addEventListener('click', addToCartClicked);
}
}
function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.parentElement.remove();
updateCartTotal();
}
function quantityChanged(event) {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
}
function addToCartClicked(event) {
var button = event.target;
var shopItem = button.parentElement;
var title = shopItem.getElementsByClassName('name')[0].innerText;
var price = shopItem.getElementsByClassName('price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('foodImg')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
function addItemToCart(title, price, imageSrc) {
var product = document.createElement('div');
product.classList.add('product');
var basket = document.getElementsByClassName('basket')[0];
var productContents = `
<div class="product">
<div class="productInfo">
<div class="productName">
<img src="${imageSrc}" alt="Spicy seasoned seafood noodles">
<div>
<p class="productTitle">${title}</p>
<p class="money">${price}</p>
</div>
</div>
<input class="quantity" type="text" value="1">
<p class="cash">${price}</p>
</div>
<div class="note">
<input type="text" placeholder="Order Note...">
<button class="trash"><svg width="24" height="24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.8789 8.71882L18.9784 8.72017C19.3475 8.75069 19.6304 9.05716 19.65 9.42605L19.6405 9.63174L19.326 13.483L18.9961 17.2414C18.9263 17.9917 18.8638 18.6245 18.8099 19.1227C18.6225 20.8588 17.4955 21.9323 15.7966 21.9641C13.1494 22.013 10.6048 22.0125 8.13373 21.9591C6.48398 21.9244 5.37366 20.8393 5.18955 19.1297L5.0623 17.8702L4.83994 15.427L4.61216 12.7461L4.35172 9.52788C4.31935 9.11498 4.61951 8.75335 5.02215 8.72016C5.39123 8.68973 5.7183 8.94584 5.79519 9.30677L5.82511 9.60173L6.06966 12.6187L6.33669 15.7459C6.45646 17.0996 6.56034 18.1952 6.64346 18.9648C6.74838 19.939 7.26138 20.4404 8.16411 20.4593C10.6159 20.5124 13.1415 20.5129 15.7701 20.4643C16.7277 20.4464 17.2488 19.9499 17.356 18.9574L17.4827 17.7046C17.5198 17.3185 17.5594 16.8923 17.6013 16.4293L17.8686 13.3538L18.1906 9.4075C18.2204 9.02902 18.5192 8.7389 18.8789 8.71882ZM3.73139 6.98918C3.32745 6.98918 3 6.65338 3 6.23916C3 5.85945 3.27515 5.54564 3.63214 5.49597L3.73139 5.48913H6.91772C7.29636 5.48913 7.62785 5.23928 7.74642 4.87929L7.77543 4.76813L8.02304 3.50533C8.24111 2.66897 8.9492 2.07349 9.779 2.00633L9.93592 2H14.0639C14.9075 2 15.6523 2.54628 15.9391 3.39039L15.9874 3.55209L16.2243 4.76783C16.2987 5.14872 16.6025 5.4332 16.9701 5.48177L17.0821 5.48913H20.2686C20.6725 5.48913 21 5.82493 21 6.23916C21 6.61887 20.7248 6.93267 20.3679 6.98234L20.2686 6.98918H3.73139ZM14.0639 3.50006H9.93592C9.7307 3.50006 9.54829 3.62322 9.47252 3.77803L9.44682 3.84604L9.20979 5.06238C9.1808 5.21084 9.13879 5.3538 9.08512 5.49012L14.9148 5.49031C14.8813 5.40526 14.8523 5.31763 14.8282 5.22768L14.79 5.06208L14.5636 3.8928C14.5107 3.68991 14.3473 3.54138 14.1502 3.50742L14.0639 3.50006Z" />
</svg></button>
</div>
</div>`;
product.innerHTML = productContents;
basket.append(product);
product
.getElementsByClassName('trash')[0]
.addEventListener('click', removeCartItem);
product
.getElementsByClassName('quantity')[0]
.addEventListener('change', quantityChanged);
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('basket')[0];
var products = cartItemContainer.getElementsByClassName('product');
var total = 0;
for (var i = 0; i < products.length; i++) {
var product = products[i];
var priceElement = product.getElementsByClassName('money')[0];
var quantityElement = product.getElementsByClassName('quantity')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + price * quantity;
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;
}
// Date in header
var dt = new Date();
document.getElementById('datetime').innerHTML = dt.toLocaleDateString();
<div id="foodCard">
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 1.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 2.png" alt="Salted Pasta with mushroom sauce">
<div class="text">
<p class="name">Salted Pasta with mushroom sauce</p>
<div>
<p class="price">$ 2.69</p>
<p class="availability">11 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 3.png" alt="Beef dumpling in hot and sour soup">
<div class="text">
<p class="name">Beef dumpling in hot and sour soup</p>
<div>
<p class="price">$ 2.99</p>
<p class="availability">16 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 5.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<section id="order">
<div id="container">
<header>
<h2>Orders #34562</h2>
<div id="selector">
<button class="active">Dine in</button>
<button>To Go</button>
<button>Delivery</button>
</div>
<div id="description">
<p>Item</p>
<p>Qty</p>
<p>Price</p>
</div>
</header>
<div class="basket">
</div>
<div id="bottom">
<div id="total">
<div id="discount">
<p>Discount</p>
<p>$0</p>
</div>
<div id="subTotal">
<p>Sub total</p>
<p class="subTotal">$ 0</p>
</div>
I couldn't have time to go through the full code, but I had an observation. document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;, is the getElementsByClassName('subTotal') returning a element or just returning undefined? Because, you can't access innerHTML from undefined.
Also, is shopItem.getElementsByClassName('foodImg')[0] not undefined? If it is undefined, then you will get src of undefined error. Is there an element with class name foodImg?
This code is designed to make the sections display = none/block onclick, is there an easier way to write it so it is simpler and less lines of code.
I feel like I shouldn't need to rewrite it each time per every link and there should be a way to have 1 script that will work with the whole navbar.
HTML
<header>
<img onclick="video()" id="logo" src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587122319/Icons/logo-no-text_yyug8o.svg" alt="Mac Logo" style="width: 10vw;" />
<nav>
<a onclick="contact()">Contact</a>
<a onclick="work()">Work</a>
<a onclick="blog()">Blog</a>
</nav>
</header>
<main>
<section id="main" style="display: block;">
<h1>Mac Hooper</h1>
<p><strong>Developer.</strong><br> Progressive, modern web development.</p>
</section>
<section id="contact" style="display: none;">
macdevh#gmail.com
<div id="social">
<img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/insta_maq9f2.svg" alt="Instagram Logo">
<img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/glab_jumort.svg" alt="Twitter Logo">
<img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/twit_t57gos.svg" alt="Gitlab Logo">
</div>
</section>
<section id="work" style="display: none;">
<div class="container">
<a href="https://lucycull.design" target="_blank" rel="noopener"><div class="card">
<img id="work-img" src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587134668/Portfolio/lucy_ijnjoq.jpg" />
<h2>Lucy Cull</p>
</div></a>
</div>
</section>
<section id="blog" style="display: none;">
<div class="container">
<a href="https://medium.com/#machooper_69036/make-vscode-yours-e362dab48ff6" target="_blank" rel="noopener"><div class="card">
<img src="https://miro.medium.com/max/600/0*ZdpEvxpU6_SFxDzT.gif" />
<h2>Make VSCode Yours</p>
</div></a>
<a href="https://medium.com/#machooper_69036/my-setup-the-desk-5f4ed6824192" target="_blank" rel="noopener"><div class="card">
<img src="https://miro.medium.com/max/700/1*PFXyIbHjkQE-tGzlj6xMEA#2x.jpeg" />
<h2>My Desk</p>
</div></a>
<div class="card">
<img src="https://miro.medium.com/max/1400/1*qXN9PuwTmiHueFoeskJZnw.jpeg" />
<h2>My Tech Stack</p>
</a></div>
<div class="card">
<img src="https://miro.medium.com/max/700/1*PFXyIbHjkQE-tGzlj6xMEA#2x.jpeg" />
<h2>My Computer</p>
</div></a>
</div>
</section>
<section id="video" style="display:none;">
<video autoplay loop muted src="https://res.cloudinary.com/dnrojsaks/video/upload/v1587133353/Video/assets_img_header_bxtgiz.mp4"></video>
</section>
</main>
js
<script>
function video() {
var main = document.getElementById("main");
var video = document.getElementById("video");
var contact = document.getElementById("contact");
var work = document.getElementById("work");
var blog = document.getElementById("blog");
if (
video.style.display === "none") {
main.style.display = "none";
video.style.display = "block";
contact.style.display = "none";
work.style.display = "none";
blog.style.display = "none";
} else {
video.style.display = "none";
}
}
function contact() {
var main = document.getElementById("main");
var video = document.getElementById("video");
var contact = document.getElementById("contact");
var work = document.getElementById("work");
var blog = document.getElementById("blog");
if (
contact.style.display === "none") {
main.style.display = "none";
video.style.display = "none";
contact.style.display = "block";
work.style.display = "none";
blog.style.display = "none";
} else {
contact.style.display = "none";
}
}
function work() {
var main = document.getElementById("main");
var video = document.getElementById("video");
var contact = document.getElementById("contact");
var work = document.getElementById("work");
var blog = document.getElementById("blog");
if (
work.style.display === "none") {
main.style.display = "none";
video.style.display = "none";
contact.style.display = "none";
work.style.display = "block";
blog.style.display = "none";
} else {
work.style.display = "none";
}
}
function blog() {
var main = document.getElementById("main");
var video = document.getElementById("video");
var contact = document.getElementById("contact");
var work = document.getElementById("work");
var blog = document.getElementById("blog");
if (
blog.style.display === "none") {
main.style.display = "none";
video.style.display = "none";
contact.style.display = "none";
work.style.display = "none";
blog.style.display = "block";
} else {
blog.style.display = "none";
}
}
Just write a generic function that takes the section-name as parameter and then compute your style.display.
In such cases, I would always make use of combining classes and Id. Yes I know maybe someone has a better approach but this for me always is easier.
NB: I just wrote this here I didn't test it if it has bugs comment I will check it but it should work 100%.
Your style
<style>
.item
{
display: none;
}
</style
Your HTML
<nav>
<a class="link-item" id="contact">Contact</a>
<a class="link-item" id="work">Work</a>
<a class="link-item" id="blog">Blog</a>
</nav>
<span class="contact item">Put your video here</span>
<span class="work item">Your work content here</span>
<span class="blog item">Your blog content here</span>
Jquery
$(function()
{
$(".link-item").click(function(e)
{
var targetClassName = $(this).attr('id') //get the id of the clicked item so that you can
//display it later
$(".item").hide(function(e) //hide all item
{
$("."+targetClassName).show() //on callback display the item which was clicked using its classname
}
}
}
Disclaimer: I have done it with JQuery, you can convert this Jquery to Javascript. Your question was on Javascript so you might want JQuery or just do it with you Javascript but it should give you same results
I prefer JQuery(Javascript library) it's smaller and thus easily debugable. But if you want JS comment I can do it with Javascript
I am trying to create a column containing items, within this column you can go to "next" or "prev" page.
This works fine and quick!
Now here my question is
How do I create up to page 8 or even more, so that you could scroll through the pages?.
I am trying something with this, but I somehow cant implement it into html
function next() {
var nextUrl = "Page + (index+1)";
}
function back() {
var prevUrl = "Page + (index-1)";
}
Here is my current setup
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span onclick="show('Page1');">
prev
</span>
<span onclick="show('Page2');">
next </span>
</p>
</div>
</div>
You can do something like this :
var currentPageId = 1;
var totalpages = $('.page').length;
$('.prev').click(function(e) {
if (currentPageId > 1) {
currentPageId--;
show('Page' + currentPageId);
}
});
$('.next').click(function(e) {
if (currentPageId < totalpages) {
currentPageId++;
show('Page' + currentPageId);
}
});
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div id="Page3" class="page" style="display:none">
page 3
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span class='prev'>
prev
</span>
<span class='next'>
next </span>
</p>
</div>
</div>
Below is html code for content within Shattered Popup:
<div class="popups-cont">
<div class="popups-cont__overlay"></div>
<div class="popup">
<div class="popup__pieces"></div>
<div class="popup__content">
<div class="popup__close"></div>
<p class="popup__text">1111111</p>
</div>
</div>
</div>
<div class="popups-cont">
<div class="popups-cont__overlay"></div>
<div class="popup">
<div class="popup__pieces"></div>
<div class="popup__content">
<div class="popup__close"></div>
<p class="popup__text">2222222</p>
</div>
</div>
</div>
<img id="c1" class="client col1 row1" src="http://bower.io/img/bower-logo.png" alt="">
<img id="c2" class="client col2 row1" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="">
When clicking on button with id c1 I expect modals with popup__text = "1" to open and "2" when c2 is clicked.
Javascript code:
var numOfPieces = 6*6;
var frag = document.createDocumentFragment();
function insertInnerPieces($el, innerPieces) {
for (var i = 0; i < innerPieces; i++) {
var $inner = document.createElement('div');
$inner.classList.add('popup__piece-inner');
$el.appendChild($inner);
}
};
for (var i = 1; i <= numOfPieces; i++) {
var $piece = document.createElement('div');
$piece.classList.add('popup__piece');
insertInnerPieces($piece, 3);
frag.appendChild($piece);
}
document.querySelector('.popup__pieces').appendChild(frag);
var $popupsCont = document.querySelector('.popups-cont');
var $popup = document.querySelector('.popup');
var popupAT = 900;
document.querySelector('#c1').addEventListener('click', function() {
$popupsCont.classList.add('s--popup-active');
$popup.classList.add('s--active');
});
document.querySelector('#c2').addEventListener('click', function() {
$popupsCont.classList.add('s--popup-active');
$popup.classList.add('s--active');
});
function closeHandler() {
$popupsCont.classList.remove('s--popup-active');
$popup.classList.remove('s--active');
$popup.classList.add('s--closed');
setTimeout(function() {
$popup.classList.remove('s--closed');
}, popupAT);
}
document.querySelector('.popup__close').addEventListener('click', closeHandler);
document.querySelector('.popups-cont__overlay').addEventListener('click', closeHandler);
How do I get distinct modals to pop up from respective icons/buttons?
You can find the fiddle example here: Shattered Popup Example
I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is