We Keep Coding

Fullpage JS and input infinite animation

I'm using Fullpage JS and i'm trying to enable an infinite animation on a specific section.
HTML
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<input type="text" class="form-animate-input">
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
JS
$(document).ready(function(enabled) {
$('#fullpage').fullpage({
onLeave: function (index, nextIndex, direction) {
if (nextIndex == 2) {
animateForm(true);
} else {
animateForm(false);
}
}
});
var timeOut;
var index;
var delay = 70;
function animateForm() {
text1 = 'Text to animate';
index = 0;
$('.form-animate-input').val('');
clearTimeout(timeOut);
if (!enabled) {
return false;
}
while (index < text1.length) {
timeOut = setTimeout(appendLetter, index * delay, text1, index);
index++;
}
setTimeout(animateForm, timeOut + text1.length * delay + 3000, true);
}
function appendLetter(text1, index) {
$('.form-animate-input').val($('.form-animate-input').val() + text1[index]);
}
});
The problem is, when i quit this section and come back to it, there is a text merging issue, any idea?
Working JSFIDDLE

You've cleared the timeout that sets the individual letter animation, but not the timeout that restarts the animateForm.
i'd also break out the start and stop into separate functions for when you enter and leave the slide.
JS
$(document).ready(function(enabled) {
$('#fullpage').fullpage({
onLeave: function (index, nextIndex, direction) {
if (nextIndex == 2) {
startAnimation();
}
if (index == 2) {
stopAnimation();
}
}
});
var timeOut1;
var timeOut2;
var index;
var delay = 70;
function stopAnimation() {
clearTimeout(timeOut1);
clearTimeout(timeOut2);
}
function startAnimation() {
$('.form-animate-input').val('');
text1 = 'Text to animate';
index = 0;
while (index < text1.length) {
timeOut1 = setTimeout(appendLetter, index * delay, text1, index);
index++;
}
timeOut2 = setTimeout(startAnimation, timeOut1 + text1.length * delay + 3000, true);
}
function appendLetter(text1, index) {
$('.form-animate-input').val($('.form-animate-input').val() + text1[index]);
}
});

jQuery $(document).on( eventName, selector, function(){} ) not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I had a click function which functioned when I had this elements hidden on page load, and then showed them later. Now I am appending those elements on click after the page has loaded, and the function of course doesn't work. I thought I would fixed the problem with load() function but it still doesn't work. This is the html I append on click:
$('#magazine-detail')[0].innerHTML = '<section id="magazine-detail" class="magazine-detail"><div class="large-6 medium-6 small-12 columns"><div class="magazine-hero"><img id="image" src="/imagecache/cover/' + magazineImage + '" alt="' + name + '" /><div class="magazine-preview-nav"><div class="right-arrow" id="forward"><img src="/img/right-arrow-black.svg" /><p>Neste utgivelse</p></div><div class="left-arrow" id="back"><img src="/img/left-arrow-black.svg" /><p>Forrige utgivelse</p></div></div></div></div><div class="large-6 medium-6 small-12 columns"><div class="row"><div class="small-6 columns magazine-title"><h1 id="name"></h1></div></div><p id="summary"></p><img id="issueImage" src="" alt="" /><p></p><button class="button primary expand">Kjøp abonnement - 1 måned gratis</button><button class="button secondary expand">Bla igjennom arkivet</button></div></section>';
There I create #forward and #back elements, for which I have functions on click in my script:
$(document).ready(function () {
var imagesIndex = 0;
nextImage = 0;
loadedImages = new Array();
function preload() {
for (i = 0; i < 2; i++) {
if (nextImage < images.length) {
var img = new Image();
img.src = '/imagecache/cover/' + images[nextImage];
loadedImages[nextImage] = img;
++nextImage;
}
}
}
$('#forward').load('click', function() {
imagesIndex++;
preload();
if (imagesIndex > (loadedImages.length - 1)) {
imagesIndex = loadedImages.length - 1;
}
$('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
});
$('#back').load('click', function() {
imagesIndex--;
if (imagesIndex < 0) {
imagesIndex = 0;
}
$('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
});
});
I have tried with:
$(document).on('click','#forward', function() {
console.log('entered');
imagesIndex++;
preload();
if (imagesIndex > (loadedImages.length - 1)) {
imagesIndex = loadedImages.length - 1;
}
$('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
});
$(document).on('click','#forward', function() {
imagesIndex--;
if (imagesIndex < 0) {
imagesIndex = 0;
}
$('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
});
But nothing gets logged when I click on the element.

$("#existingParent").on("click", ".child", function() {
// do stuff
});

write like this
$(document).on('click','#forward', function() {

Jquery tab is not working

I have one problem with click function. I have created this demo from jsfiddle.net.
In this demo you can see there are smile buttons. When you click those buttons then a tab will be opening on that time. If you click the red button from tab area then the tab is not working there are something went wrong.
Anyone can help me here what is the problem and what is the solution?
The tab is normalize like this working demo
var response = '<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active"> TAB1</li>
<li class="tab"> TAB2</li>
<li class="tab"> TAB3<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive"> a </div>
<div id="lannisters-panel1" class="panel"> b </div>
<div id="targaryens-panel1" class="panel"> c </div>
</div>
</div>
</div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.emoticon').addClass('eactive');
});
}
});
}
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
$(this).on( "click", function() {
$(this).find('.user-container').html("");
});
var componentHandler = function() {
'use strict';
var registeredComponents_ = [];
var createdComponents_ = [];
function findRegisteredClass_(name, opt_replace) {
for (var i = 0; i < registeredComponents_.length; i++) {
if (registeredComponents_[i].className === name) {
if (opt_replace !== undefined) {
registeredComponents_[i] = opt_replace;
}
return registeredComponents_[i];
}
}
return false;
}
function upgradeDomInternal(jsClass, cssClass) {
if (cssClass === undefined) {
var registeredClass = findRegisteredClass_(jsClass);
if (registeredClass) {
cssClass = registeredClass.cssClass;
}
}
var elements = document.querySelectorAll('.' + cssClass);
for (var n = 0; n < elements.length; n++) {
upgradeElementInternal(elements[n], jsClass);
}
}
function upgradeElementInternal(element, jsClass) {
if (element.getAttribute('data-upgraded') === null) {
element.setAttribute('data-upgraded', '');
var registeredClass = findRegisteredClass_(jsClass);
if (registeredClass) {
createdComponents_.push(new registeredClass.classConstructor(element));
} else {
createdComponents_.push(new window[jsClass](element));
}
}
}
function registerInternal(config) {
var newConfig = {
'classConstructor': config.constructor,
'className': config.classAsString,
'cssClass': config.cssClass
};
var found = findRegisteredClass_(config.classAsString, newConfig);
if (!found) {
registeredComponents_.push(newConfig);
}
upgradeDomInternal(config.classAsString);
}
return {
upgradeDom: upgradeDomInternal,
upgradeElement: upgradeElementInternal,
register: registerInternal
};
}();
function MaterialTabs(element) {
'use strict';
this.element_ = element;
this.init();
}
MaterialTabs.prototype.Constant_ = {
MEANING_OF_LIFE: '42',
SPECIAL_WORD: 'HTML5',
ACTIVE_CLASS: 'pactive'
};
MaterialTabs.prototype.CssClasses_ = {
SHOW: 'materialShow',
HIDE: 'materialHidden'
};
MaterialTabs.prototype.initTabs_ = function(e) {
'use strict';
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
for (var i=0; i < this.tabs_.length; i++) {
new MaterialTab(this.tabs_[i], this);
}
};
MaterialTabs.prototype.resetTabState_ = function() {
for (var k=0; k < this.tabs_.length; k++) {
this.tabs_[k].classList.remove('pactive');
}
};
MaterialTabs.prototype.resetPanelState_ = function() {
for (var j=0; j < this.panels_.length; j++) {
this.panels_[j].classList.remove('pactive');
}
};
function MaterialTab (tab, ctx) {
if (tab) {
var link = tab.querySelector('a');
link.addEventListener('click', function(e){
e.preventDefault();
var href = link.href.split('#')[1];
var panel = document.querySelector('#' + href);
ctx.resetTabState_();
ctx.resetPanelState_();
tab.classList.add('pactive');
panel.classList.add('pactive');
});
}
};
MaterialTabs.prototype.init = function() {
if (this.element_) {
this.initTabs_();
}
}
window.addEventListener('load', function() {
componentHandler.register({
constructor: MaterialTabs,
classAsString: 'MaterialTabs',
cssClass: 'MaterialTabs'
});
});
});

There is updated and working version.
What we have to do, is to move the target on the same level as the icon is (almost like tab and content). Instead of this:
<div class="emoticon">
<div class="emoticon_click" data-id="1">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
<div class="user-container" data-upgraded></div>
</div>
</div>
We need this
<div class="emoticon">
<div class="emoticon_click" data-id="1">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
// not a child
<!--<div class="user-container" data-upgraded></div>-->
</div>
// but sibling
<div class="user-container" data-upgraded></div>
</div>
And if this is new HTML configuration, we can change the handlers
to target click on div "emoticon_click"
change the content of the sibling (not child) div "user-container"
The old code to be replaced
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
$(this).on( "click", function() {
$(this).find('.user-container').html("");
});
will now be replaced with this:
//$('body').on('click', '.emoticon', function(e) {
$('body').on('click', '.emoticon_click', function(e) {
// clear all user container at the begining of this click event
$('body').find('.user-container').html("");
// find id
var id = $(this).attr('data-id');
// find the parent, which also contains sibling
// user-container
var parent = $(this).parent()
// let the target be initiated
showProfileTooltip($(parent), id);
});
$(this).on( "click", function() {
//$(this).find('.user-container').html("");
});
Check it in action here
NOTE: the really interesting note was in this Answer by pinturic

If we want to extend the first and complete answer with a feature:
close all tabs if clicked outside of the area of tabs or icons
we just have to
add some event e.g. to body
and do check if the click was not on ".emoticon" class elements
There is a working example, containing this hook:
$('body').on( "click", function(e) {
// if clicked in the EMOTICON world...
var isParentEmotion = $(e.toElement).parents(".emoticon").length > 0 ;
if(isParentEmotion){
return; // get out
}
// else hide them
$('body').find('.user-container').html("");
});

I have been debugging your code and this is the result:
you are adding the "tab" under ; any time you click within that div this code is intercepting it:
$('body').on('click', '.emoticon', function(e) {
var id = $(this).find('.emoticon_click').attr('data-id');
showProfileTooltip($(this), id);
});
and thus the "tab" are built again from scratch.

how to limit the click event in jquery loop?

I would like to limit click event loop in jquery. I have categories list which will have in the following format and also after 5 click in the loop i have to disable click event.
<div class="col-md-2 col-sm-4 col-xs-6 home_s">
<a class="get_category" id="36" href="javascript:void(0)">
<img class="img-responsive img-center" src="">
<span>xxxxx</span>
</a>
<input type="hidden" value="36" id="categories36" name="categories[]">
</div>
$(document).ready(function() {
$(".get_category").on('click', function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
})
});

You can use off() to unbind event handler
$(document).ready(function() {
// variable for counting clicks
var i = 1;
var fun = function() {
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
// checking and increment click count
if (i++ == 5)
// unbinding click handler from element
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
Example :
$(document).ready(function() {
var i = 1;
var fun = function() {
alert('clicked'+i);
if (i++ == 5)
$(".get_category").off('click', fun);
};
$(".get_category").on('click', fun);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="get_category">click</button>

If you have multiple .get_category in your html the solution from Pranav C Balan won't work.
$(document).ready(function() {
function clickFunc() {
var click_count = $(this).data('click-count') || 0;
var cat_id = $(this).attr('id');
var cat_value = $("#categories" + cat_id).val('');
if ($("#categories" + cat_id).val() == '') {
$("#categories" + cat_id).val(cat_id);
} else {
alert("hi");
$("#categories" + cat_id).val('');
}
if (++click_count >= 5)
$(this).off('click', clickFunc);
$(this).data('click-count', click_count);
});
$(".get_category").on('click', clickFunc);
});
This way you store the click count on the data-click-count attribute of each .get_category

how to check which image has opacity of 1 in image slider for numbering?

i am working on an image slider here. I am trying to display the current number of image being displayed which has the opacity of 1 which is shown in front.
how can I check for opacity of an image and how an i check it again and again so that when the next image opacity is 1 the image number in Dom is displayed.
here is my code
html
<div id="Fader" class="fader">
<img class="slide" src="images/lounge/full/1.jpg" alt="bgImg" />
<img class="slide" src="images/lounge/full/2.jpg" alt="bgImg" />
<img class="slide" src="images/lounge/full/3.jpg" alt="bgImg" />
</div>
Now suppose I have 2.jpg with opacity 1 after some time how can i check which one has opacity of 1 that's being displayed on top?Thanks.
And here is the js Code
(function ($) {
function prefix(el) {
var prefixes = ["Webkit", "Moz", "O", "ms"];
for (var i = 0; i < prefixes.length; i++) {
if (prefixes[i] + "Transition" in el.style) {
return '-' + prefixes[i].toLowerCase() + '-';
};
};
return "transition" in el.style ? "" : false;
};
var methods = {
init: function (settings) {
return this.each(function () {
var config = {
slideDur: 3000,
fadeDur: 900
};
if (settings) {
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = '.slide',
fading = false,
slideTimer,
activeSlide,
newSlide,
$slides = $container.find(slideSelector),
totalSlides = $slides.length,
$pagerList = $container.find('.pager_list');
prefix = prefix($container[0]);
function animateSlides(activeNdx, newNdx) {
function cleanUp() {
$slides.eq(activeNdx).removeAttr('style');
activeSlide = newNdx;
fading = false;
waitForNext();
};
if (fading || activeNdx == newNdx) {
return false;
};
fading = true;
$pagers.removeClass('active').eq(newSlide).addClass('active');
$slides.eq(activeNdx).css('z-index', 3);
$slides.eq(newNdx).css({
'z-index': 2,
'opacity': 1
});
if (!prefix) {
$slides.eq(activeNdx).animate({ 'opacity': 0 }, config.fadeDur,
function () {
cleanUp();
});
} else {
var styles = {};
styles[prefix + 'transition'] = 'opacity ' + config.fadeDur + 'ms';
styles['opacity'] = 0;
$slides.eq(activeNdx).css(styles);
var fadeTimer = setTimeout(function () {
cleanUp();
}, config.fadeDur);
};
};
function changeSlides(target) {
if (target == 'next') {
newSlide = activeSlide + 1;
if (newSlide > totalSlides - 1) {
newSlide = 0;
}
} else if (target == 'prev') {
newSlide = activeSlide - 1;
if (newSlide < 0) {
newSlide = totalSlides - 1;
};
} else {
newSlide = target;
};
animateSlides(activeSlide, newSlide);
};
function waitForNext() {
slideTimer = setTimeout(function () {
changeSlides('next');
}, config.slideDur);
};
for (var i = 0; i < totalSlides; i++) {
$pagerList
.append('<li class="page" data-target="' + i + '">' + i + '</li>');
};
$container.find('.page').bind('click', function () {
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('.page');
$slides.eq(0).css('opacity', 1);
$pagers.eq(0).addClass('active');
activeSlide = 0;
waitForNext();
});
}
};
$.fn.easyFader = function (settings) {
return methods.init.apply(this, arguments);
};
})(jQuery);
$(function () {
$('#Fader').easyFader({
slideDur: 6000,
fadeDur: 1000
});
});

The easiest way would be to have a CSS class that has a opacity: 1.0 property, and then determining which slide currently has this class.
Let's say the class is .displayed, then you can find the active slide using $slides.find('.displayed').
And when moving to a new slide, just remove the class property after doing any necessary animations:
$slides.find('.displayed').animate({opacity: 0}).removeClass('.displayed');