In Firefox, this code works perfectly, but in Chrome all the content in this section is not displayed after the the last active item was closed. 5th item, if you go over all the items in the order.
FIDDLE.
JS:
var markets = {
radius: 250, // in px
init: function () {
$('.markets-item a').click(function (e) {
e.preventDefault();
var market = $(this).parent('.markets-item');
if (market.hasClass('active')) {
markets.showMarkets(market);
return false;
}
markets.showItem(market);
return false;
});
$('#markets-wrap').css('min-height', $('#markets-wrap').height() + 'px');
},
showItem: function (market) {
$('.markets-item').removeClass('active fadeIn').removeAttr('style');
market.addClass('active');
var notActivedItems = $('.markets-item:not(.active)');
notActivedItems.addClass('fadeOut');
$('.markets-item:not(.active):last').one(animatedend, function () {
var offset = market.position();
market.data('top', offset.top)
.data('left', offset.left)
.css({
position: 'absolute',
top: offset.top + 'px',
left: offset.left + 'px'
})
.animate({
top: 0,
left: 7
}, 0, function () {
notActivedItems.hide().removeClass('fadeOut');
markets.showSubmarkets(market);
var img = market.children('a').children('img');
market.data('src', img.attr('src'));
img.attr('src', 'images/icons/back.png');
});
});
},
showMarkets: function (market) {
market.children('a').children('img').attr('src', market.data('src'));
var submarkets = $('.submarket:visible');
if (0 === submarkets.length) {
markets._show(market);
return;
}
submarkets.addClass('fadeOut');
$('.submarket:visible:last').one(animatedend, function () {
submarkets.removeClass('fadeOut').hide();
markets._show(market);
});
},
_show: function (market) {
var notActivedItems = $('.markets-item:not(.active)');
market.animate({
top: market.data('top') + 'px',
left: market.data('left') + 'px'
}, 0, function () {
market.removeAttr('style').removeClass('active');
notActivedItems.show().addClass('fadeIn').one(animatedend, function () {
$(this).removeClass('fadeIn');
});
});
},
showSubmarkets: function (market) {
var items = market.children('.submarket');
if (0 === items.length) return;
var delta = Math.PI / 3 / items.length;
var x = 0,
y = 0,
angle = 0;
for (var i = 0; i < items.length; i++) {
items.eq(i).css({
left: markets.radius * Math.cos(angle) + 'px',
top: markets.radius * Math.sin(angle) + 'px',
display: 'list-item'
})
.addClass('animated fadeIn')
.one(animatedend, function () {
$(this).removeClass('fadeIn');
});
angle += delta;
}
}
};
HTML:
<section id="markets">
<div class="container">
<h3 class="text-center">KEY SECTORS</h3>
<div class="row text-center" id="markets-wrap">
<ul class="markets-container">
<li class="markets-item">
<a href="#">
<img src="images/icons/food.png" class="img-responsive"><br>
Food and Drink
</a>
<div class="submarket">Hot and Cold food containers/boxes</div>
<div class="submarket">Hot and Cold drink cups</div>
<div class="submarket">Bags (paper, non-woven, fabric)</div>
<div class="submarket">Postal boxes</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Sticky labels</div>
<div class="submarket">Grease proof paper</div>
<div class="submarket">Custom retail packaging</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/fashion.png" class="img-responsive"><br>
Fashion and Jewellery
</a>
<div class="submarket">Retail boxes</div>
<div class="submarket">Luxury jewellery boxes</div>
<div class="submarket">Exclusive souvenir boxes</div>
<div class="submarket">Shopping bags</div>
<div class="submarket">Garment bags</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Tissue paper</div>
<div class="submarket">Fabric pouches</div>
<div class="submarket">Hat boxes</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/bakery.png" class="img-responsive"><br>
Bakery and Confectionery
</a>
<div class="submarket">Cake boxes</div>
<div class="submarket">Specialist cake bags </div>
<div class="submarket">Bakery goods boxes</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Cake trays</div>
<div class="submarket">Tin packaging</div>
<div class="submarket">Luxury confectionery boxes</div>
<div class="submarket">Bags</div>
<div class="submarket">Sticky labels</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/cosmetics.png" class="img-responsive"><br>
Cosmetics
</a>
<div class="submarket">Glassware</div>
<div class="submarket">Custom retail packaging</div>
<div class="submarket">Luxury boxes</div>
<div class="submarket">Bags</div>
<div class="submarket">Specialist perfume labels</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/goods.png" class="img-responsive"><br>
Place for your sector
</a>
<div class="submarket">As trendsetters and true connoisseurs of packaging we are always excited to explore new
grounds across the industry. If your sector or a product you are looking for, is not listed, please do get in touch. </div>
</li>
</ul>
</div>
</div>
</section>
It appears that even though you set $('.markets-item:not(.active):last').one(animatedend) on only one element, it is fired multiple times. That could be because animatedend represents a collection of events:
webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
If you view the console in this modified fiddle you will see that a notActivedItemsCount I've set up goes below zero. That means that $('.markets-item:not(.active):last').one(animatedend) is called more times than it should.
You do have an .animate() in the same block of code, so it is unclear if that is causing a race condition because we can't guarantee that $('.markets-item:not(.active):last') - the last element in the list - is also the last element to finish animation.
In this second modified fiddle, I've added
notActivedItems.unbind(animatedend);
inside your .one(animatedend, function() { block which will guarantee that this block of code will only be executed once.
Here is a working, modified version of your original fiddle with that one line added: demo
Related
Here is the code for my javascript carousel:
var carousel = document.getElementById("carosello");
function myMoveLeft() {
carousel.scrollTo(-50, 0);
}
function myMoveRight() {
carousel.scrollTo(+50, 0);
}
<div class="container">
<div class="arrowLeft" onclick="myMoveLeft()">
<i class="fas fa-chevron-left fa-5x"></i>
</div>
<div class="caroselloContainer">
<div id="carosello">
<div class="caroselloCard">
<img class="active first" src="..." alt="">
</div>
<div class="caroselloCard">
<img src="..." alt="">
</div>
<div class="caroselloCard">
<img class="last" src="..." alt="">
</div>
</div>
</div>
<div class="arrowRight" onclick="myMoveRight()">
<i class="fas fa-chevron-right fa-5x"></i>
</div>
</div>
This works but only on the first click. How do I make it work at all clicks?
I would like it so that every time I click, scrollTo increases by 50. Something that simulates scrolling would be even better, but the first solution would also suffice.
You can scrollPosition in a variable and then increase/decrease it.
What happens now is no matter how many times you click, your scrollPosition is set to -50 or 50, you have to keep updating that values on clicks.
Like
<script>
var carousel = document.getElementById("carosello");
var scrollPosition = 0;
function myMoveLeft() {
scrollPosition = scrollPosition - 50;
carousel.scrollTo(scrollPosition, 0);
}
function myMoveRight() {
scrollPosition = scrollPosition + 50;
carousel.scrollTo(scrollPosition, 0);
}
</script>
Before I start I want to point out that I'm not competent in coding whatsoever. I'm 100% an amateur enthusiast who learns on the go while coding and I have limited knowledge about any of this.
I want add two buttons next to the scrolling bar/window as seen here: https://drive.google.com/open?id=1vvMNKguytQc_jtaVAYpOTJwVNZs4rmZY. However as much as I try I can't make it work. My website uses jQuery v2.1.1 JavaScript Library. My question is why it doesn't it work and how I can make them work?
var step = 25;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section">
<h2 class="section-title st2 mb25">Our Products</h2>
<div class="container">
<div class="row page-services mt10">
<div class="col-sm-4 col-md-3 sm-box" id="content">
<i class="fas fa-chevron-up" id="scrollUp"></i>
<ul class="nav nav-tabs vertical">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
</ul>
<i class="fas fa-chevron-down" id="scrollDown"></i>
</div>
<div class="col-sm-8 col-md-9">
<div class="tab-content">
Here is the source of the javascript and demo: http://jsfiddle.net/s5mgX/1709/
I am using creating costume directive in angularjs. I want to scroll the window on click to data-target element. but its showing the error el.bind is not a function
in custome directive code as bellow,
'use strict';
app.directive("productfinderpage", ["$window","$document", function($window, $document) {
console.log("enter into directive");
return {
restrict: "AC",
link: function () {
// get all anchors
var anchors = angular.element(document.querySelectorAll("a[data-target]"));
angular.forEach(anchors, function (el) {
el.bind("click", function (e) {
var targetLink = e.target.dataset.target;
var targetContext = angular.element(document.querySelector("[data-name=\"" + targetLink + "\""));
var targetContextInt = targetContext.offsetTop;
// initiate scroll
scrollTo(scrollable, targetContextInt, 225);
});
});
// scroll to function
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop == to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
}
};
}]);
html code as bellow,
<div productFinderPage class="modal-body">
<div class="info" data-sticky="data-sticky">
<div class="info-inner">
<div class="lender-image">LOGO</div>
<div class="package-name"></div>
<div class="cta">
<button class="primary">Add to Favorites</button>
</div>
<nav>
<ul class="info-section">
<li>Basic Information</li>
<li>Extended Information</li>
<li>Loan Size / LVR</li>
<li>Loan Fees</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
<div class="main-details">
<div class="panel" data-name="basicInfo">
<div class="panel-header">Basic Information</div>
</div>
<div class="panel" data-name="extInfo">
<div class="panel-header">Extended Information</div>
</div>
<div class="panel" data-name="loanSize">
<div class="panel-header">Loan Size</div>
</div>
<div class="panel" data-name="loanFees">
<div class="panel-header">Loan Fees</div>
</div>
<div class="panel" data-name="services">
<div class="panel-header">Services</div>
</div>
</div>
</div>
jsfiddle is here.
If you iterate through an angular element, you get the plain document elements which need to be converted to an angular element again:
var anchors = angular.element(document.querySelectorAll("a[data-target]"));
angular.forEach(anchors, function(ele) {
var el = angular.element(ele);
el.bind("click", function(e) {
..
});
}
See this jsfiddle
I am using object-oriented javascript to show/hide 'views' on click of the nav link and also on a button that is used to go to the next view. I feel like this can definitely be simplified but I am not sure what the best way to do this is. My html is as follows:
<div id="sidebar">
<svg width="261" height="70"><use xlink:href="#logo"></use></svg>
<nav>
<ol>
<li><span>1</span>Run your business</li>
<li><span>2</span>Let us work for you</li>
<li><span>3</span>Check your books</li>
</ol>
</nav>
<a class="progress-btn main-btn visible" href="#">Start the demo</a>
<a class="progress-btn main-btn" href="#">Next</a>
<a class="progress-btn main-btn" href="#">Next</a>
<a class="progress-btn main-btn" href="#">30-day free trial</a>
</div><!--end sidebar-->
<div id="content">
<div class="page page1">
<h2>Page 1</h2>
</div><!--end page1-->
<div class="page page2">
<h2>Page 2</h2>
</div><!--end page2-->
<div class="page page3">
<h2>Page 3</h2>
</div><!--end page3-->
<div class="page page4">
<h2>Page 4</h2>
</div><!--end page4-->
</div><!--end content-->
And my object looks like this:
View = {
page: '.page',
mainLink: '#sidebar li a',
progressButton: '.progress-btn',
init: function() {
$(this.mainLink).click(this.showView.bind(this));
$(this.mainLink).click(this.activeNav.bind(this));
$(this.progressButton).click(this.sidebarButton.bind(this));
},
showView: function(e) {
e.preventDefault();
var target = $(e.target),
targetIndex = target.index(this.mainLink),
pageToTarget = targetIndex + 2;
$(this.page).removeClass("current").fadeOut('fast').promise().done(function() {
$('.page' + pageToTarget).fadeIn().addClass("current");
});
},
activeNav: function(e) {
$(this.mainLink).removeClass("active");
e.preventDefault();
$(e.target).addClass("active");
var targetIndex = $(e.target).index(this.mainLink)
$(".progress-btn").removeClass("visible");
$(".progress-btn").eq(targetIndex + 1).addClass("visible");
},
sidebarButton: function(e) {
e.preventDefault();
var target = $(e.target);
targetIndex = target.index(this.progressButton);
pageToTarget = targetIndex + 2;
if (target.text() == "30-day free trial") {
window.open("http://google.com");
} else {
target.removeClass("visible");
target.next().addClass("visible");
$(this.page).removeClass("current").fadeOut('fast').promise().done(function() {
$('.page' + pageToTarget).fadeIn().addClass("current");
});
$(this.mainLink).removeClass("active");
$("#sidebar li a").eq(targetIndex).addClass("active");
}
console.log(targetIndex);
// pageRoute(targetIndex);
}
}
View.init();
Here is a fiddle https://jsfiddle.net/rsgLbgg3/4/. How can I simplify this to work with both the nav and the button without being so repetitive.
Just learning to learn a little. Thanks in advance!
I'm new in js, I need to change several images at hover on the same imagine like this : http://www.revzilla.com/ on slider, any suggest?
thi is my html, in ct-image I have several images that move your mouse inside the container replaces with the other imgs :
<li class="product-primary clearfix">
<a href="https://validator.w3.org/nu/#textarea">
<div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">
<div class="banner-new"><span>new</span>
<p class="title-product-hidd">lorem</p>
</div>
<!--.banner-new-->
<div class="banner-acti">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--.banner-acti-->
</a>
<!--effetto all'hover-->
<div class="ct-hove">
<div class="text-pro">
<p class="text">I</p>
<p class="text">I</p>
<p class="tex">I</p>
</div>
<ul>
<li class="compare-icon"><i class="fa fa-eye"></i>
</li>
<li class="buy-icon"><i class="fa fa-heart-o"></i>
</li>
<li class="wishlist-icon"><i class="fa fa-database"></i>
</li>
</ul>
</div>
<!--.ct-hover-->
<div class="ct-descript-prod-left">
<p class="title-prod">Name</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<!--.ct-descript-pro-bt-->
<div class="ct-descript-prod-right">
<h4>€ 0.000.00</h4>
<ul>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
</ul>
</div>
<!--.ct-descript-pro-bt-->
</li>
Simplest solution I have found for you:
$(document).ready(function() {
var timeout;
var flipImages = function($container) {
var amount = $container.data("amount");
var current = $container.data("current");
if(current >= amount){
current = 1;
} else {
current = current + 1;
}
var dataAttr = "image" + current;
var image = $container.data(dataAttr);
$container.fadeOut(200, function() {
$container.css("background-image", "url(" + image + ")");
$container.fadeIn(200);
$container.data("current", current);
});
timeout = setTimeout(function() {
flipImages($container);
}, 1000)
};
$(".ct-image").hover(
function() {
var $that = $(this);
timeout = setTimeout(function() {
flipImages($that);
}, 1000)
},
function() {
if(timeout) {
clearTimeout(timeout);
}
}
);
});
.ct-image {
display: block;
height: 300px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>
Note. Solution is without flipping animation. It requires change in structure of your code.
are you looking for something like that ?
$('.carousel').mouseleave(function(){
var currentActiveImage = $('.item-show');
var nextActiveImage = currentActiveImage.next();
if(nextActiveImage.length == 0)
{
nextActiveImage = $(".carousel #item").first();
}
currentActiveImage.removeClass('item-show').addClass('item-hidden');
nextActiveImage.addClass('item-show').removeClass('item-hidden');
});
.item-show {
display: inline-block;
}
.item-hidden{
display: none;
}
.info {
position:absolute;
top: 231px;
left: 505px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="item" class="item-show">
<img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
<div class="info">
<span>some text</span>
<p>Price: 88$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
<div class="info">
<span>This is Cool</span>
<p>Price: 99$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
<div class="info">
<span>This is train</span>
<p>Price: 100$</p>
</div>
</div>