Develop Reference

How to hide button after 5 clicks jQuery?

In short I have multiple posts and each post have download button with unique data-click attribute,
For example data-click="1" for post 1 download button , data-click="2" for post 2 download button and so on. I want that if download button click 5 times for post 1 then after 5 clicks it hides , also it keeps hidden if refresh the page , I have written some code but it doesn't hide the button
<script>//this script is responsible for adding a unique data-click= 0,1,2,3,4.....n to each resume post respectively.
$(document).ready(function() {
var PostId = 2;
var i = 1;
$('.gotocls').each(function() {
jQuery(this).attr('data-click', i);
var ClickId = $(this).attr('data-click');
var LocalKey = PostId + '+' + ClickId;
if(localStorage.getItem(LocalKey)){
if(localStorage.getItem(LocalKey) == '5'){
$(this).hide();
// alert('im m new here');
}
}
else{
localStorage.setItem(LocalKey,0);
alert('im game');
}
i++
});
});
</script>
the above code add unique data click attribute to each downlaod button and check if localstorage value is 5
<script type="text/javascript">
$(document).ready(function(){
$(".gotocls").click(function() {
var PostId = 2;
var ClickId = $(this).attr("data-click");
var LocalKey = PostId + '+' + ClickId;
count = localStorage.getItem(LocalKey);
count ++;
if(count > 5){
alert(count);
localStorage.setItem(LocalKey, 5);
$(this).hide();
}
else{
alert(count);
alert('imnot here');
localStorage.setItem(LocalKey, count);
}
});
});
</script>
and my html code
<a class="dkpdf-button gotocls" href="javascript:return false;">Download Now</a>

For a better understanding, I set the simple code
HTML
<div>
<button id="gotocls" class="gotocls">Download</button>
</div>
Sctipt
<script type="text/javascript">
$(document).ready(function () {
var LocalKey = "Click_Count"; // set key paramater
count = localStorage.getItem(LocalKey); // get data from local storage
if (count >= 5) //condition - if click count equal or greater than 5
{
$(".gotocls").hide(); // button hide
}
$(".gotocls").click(function () {
//var PostId = 2;
//var ClickId = $(this).attr("data-click");
count++;
if (count >= 5) {
alert(count);
localStorage.setItem(LocalKey, 5);
$(this).hide();
}
else {
alert(count);
alert('imnot here');
localStorage.setItem(LocalKey, count);
}
});
});
</script>
you can change javascript as per your requirements, this will work on client-side

How can I use localStorage for storing clicks

I am trying to save the amount of clicks on a button in a textbox with localStorage, but whenever I reload the page, all the data is cleared. Here is my code:
var i = 0; // i is the number of clicks. the number of clicks is set to 0
when page is
// loaded.
function countClick() { // The next 3 lines of code are executed when the
Kill a cat // button is clicked
i++;
alert("You have clicked " + i + " cats so far"); // Make message box
localStorage.setItem("count", "i")
document.getElementById("count").value = i ; // Edits the 'clicks clicked'
text box
// Saves number of clicks, so when you close // or open the page, your
progress still exists.
}
function clear() {
document.getElementById("count").value = 0 ;
}
window.onload = function(){
var val = localStorage.getItem('value'); // or localStorage.value
if(val === null)
val = "i";
document.getElementById("myData").value = val;
}
window.onbeforeunload = function(){
localStorage.setItem('value', document.getElementById("myData").value);
localStorage.value = document.getElementById("myData").value
}
Please help.
Thanks to all the other examples from the other people, used in here.

In this function, you reset your localStorage item before page load...
window.onbeforeunload = function(){
localStorage.setItem('value', document.getElementById("myData").value);
localStorage.value = document.getElementById("myData").value
}
It's normal there is no data when you refresh.
Just try somethink more simple like this without other function :
var i = 0;
function countClick() {
i++;
localStorage.setItem("count", i)
document.getElementById("count").value = i ;
}
window.onload = function(){
var val = localStorage.getItem('count');
document.getElementById("count").value = val;
}

clearTimeout doesn't work in slideshow

I have a full width slideshow. So I have a few problems with it.
One is that clearTimeout won't work. If I call the function by a click, it should clear the Timeout.
Does someone know why this won't work? Please explain and show where exactly the problem is.
Thank you and sorry for my bad English.
var index = 0;
var slideSpeed = 1000;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
$(document).on('click', '.main_slider_menu_link',function(){
var linkIndex = $(this).index();
mainSlider(linkIndex);
});
function countContentImg(index){
$('#main_slider_selected_img').html('');
var sliderIndex = $('.main_slider_content').length;
for(var i = 0; i < sliderIndex; i++) {
if(i === index)
$('#main_slider_selected_img').append('<li class="main_slider_menu_link main_slider_menu_link_slected"></li>');
else
$('#main_slider_selected_img').append('<li class="main_slider_menu_link"></li>');
}
}
$(document).ready(function(){
countContentImg(index);
mainSlider(false);
});

This looks like a scope issue. You're trying to clear a timeout from a variable that doesn't contain a timeout reference yet. Each call to mainSlider creates a new, locally scoped timeout reference, long after you've tried to clear it.
function mainSlider(menuLink){
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Now the timeout exists, but only in the scope of this current call
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
Change it to:
var slide;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Remove var
slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}

How can I prevent the text from truncating when different tabs are clicked in succession?

So I have a type writer effect, that responds to the click of the tab. Once the tab is clicked the content box changes and begins the typing effect and the corresponding tab changes as well. However if I were to click on a tab, say tab 1 then tab 2, then back to tab 1 in rapid succession or even moderate succession, the text of the content box ends abruptly and the type effect doesn't print out all the text.
$(document).ready(function () {
$('div#tab-wrapper div.myTabs').click(function () {
var tab_id = $(this).attr('data-tab');
$('div.content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
typeWriterEffect(tab_id, document.getElementById(tab_id).innerHTML, 50);
});
});
var timer;
function typeWriterEffect(id, sentence, speed) {
var index = 0; //reset index
clearInterval(timer); //clear old timer
document.getElementById(id).innerHTML = ""; //clear it immediately to prevent flicker on click
timer = setInterval(function () {
var char = sentence.charAt(index);
if (char === '<') index = sentence.indexOf('>', index);
document.getElementById(id).innerHTML = sentence.substr(0, index);
index++;
if (index === sentence.length) {
clearInterval(timer);
}
}, speed);
}
I figured I could store the innerHTML text into the data() method, but that didn't seem to work or maybe I did it wrong, same results.
So anyway, here is a JSFiddle of everything I just talked about.

That maybe because you clear the global timer every time typeWriterEffect() is called. Try to use it as a local variable, declared inside the funtion.
$(document).ready(function () {
$('div#tab-wrapper div.myTabs').click(function () {
var tab_id = $(this).attr('data-tab');
$('div.content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
typeWriterEffect(tab_id, document.getElementById(tab_id).innerHTML, 50);
});
});
var timer;
function typeWriterEffect(id, sentence, speed) {
var self = this;
var index = 0; //reset index
self.timer = setInterval(function () {
var char = sentence.charAt(index);
if (char === '<') index = sentence.indexOf('>', index);
document.getElementById(id).innerHTML = sentence.substr(0, index);
index++;
if (index === sentence.length) {
clearInterval(self.timer);
}
}, speed);
clearInterval(self.timer); //clear old timer
document.getElementById(id).innerHTML = ""; //clear it immediately to prevent flicker on click
}
http://jsfiddle.net/7V4NA/34/

Delay fadeIn() in a for-loop

I created a menu with Jquery FadeIn animation, i want to open the menu when my mouse is hover but i also want to fadein the previous tab content.
This should works like this :
My mouse is one the third tab, the first tab popin, then the second one, then the third with a little delay between each animation.
I tried to do this with Jquery :
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
var tab = $(this).attr('id');
var numTab = tab.substring(2);
//Fade in the navigation submenu
for ( var i = 0; i <= numTab ; i++ ) {
var domElt = '#Et' + i + ' ul';
$(domElt).fadeIn(300); // fadeIn will show the sub cat menu
console.log(domElt);
}
},
// When mouse leaves the .navigation element
function () {
var tab = $(this).attr('id');
var numTab = tab.substring(2);
//Fade out the navigation submenu
for ( var i = 0; i <= numTab ; i++ ) {
var domElt = '#Et' + i + ' ul';
$(domElt).fadeOut(); // fadeIn will show the sub cat menu
}
}
);
As you see on the live version of it, it don't really works, all the tabs are fadein together, or seems to. How can i add a delay to get the "one-after-one fadein effect"?

Add dynamic delay like this -
$(domElt).delay(i*100).fadeOut();
Demo ---> http://jsfiddle.net/abJkD/2/

You can chain the fades:
function () {
var tab = this.id;
var numTab = +(tab.substring(2));
//Fade in the navigation submenu
var i = 0;
function doFade() {
if (i === numTab) return;
// In the fiddle provided, the element id values
// start at 1, not zero
var domElt = '#Et' + (i + 1) + ' ul';
i = i + 1;
$(domElt).fadeIn(300, doFade);
}
doFade();
},
(and similarly for the fade out)