We Keep Coding

Show a div only once per visit / set cookie

I'm trying to set an element so it's being shown only once per visit. It's a scroll down arrow on my homepage and so once the user gets it it won't be necessary to keep it anymore. So I don't want it to be shown while the user is surfing on my website however, when he visits it again in the future it's there again. I'm a newbie and can't quite solve it.
My code:
setTimeout(function () {
$('.scroll_down').show()
}, 2000);
var $element = $('.scroll_down'); // fade out / in on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$element.fadeOut(1000);
}
});
I also would like the arrow to fade in but my attempts were not successful. Thanks guys

Please write cookie code as follow:
jQuery(document).ready(function($){
if($.cookie('show_div_once') != 'yes'){
your_code_for_show_div;
}
$.cookie('show_div_once', 'yes', { path: '/', expires: 365 });
});

I used localStorage
firstSiteLoad = (function() {
var checkSupport;
checkSupport = function() {
var e, error, support;
try {
support = 'localStorage' in window && (window['localStorage'] != null);
} catch (error) {
e = error;
support = false;
}
return support;
};
return function() {
if (!checkSupport()) {
return false;
}
if (localStorage.getItem("not_first_load")) {
return false;
} else {
localStorage.setItem("not_first_load", 'true');
return true;
}
};
})();
you can use it by if (firstSiteLoad()) { //your code }

not .isAfter jQuery Ajax

I am trying to show separate messages if a div exists after a certain div or does not exist based the end of an ajax function
Here is the code I came up with:
.ajaxComplete(function() {
// Pilots page code.
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function(sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function() {
if ($(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
}
if (!$(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}
});
The isafter is working, but I can't figure out how to implement a function which is the opposite (would be nice if there was a isNotAfter jQuery function).
I have also tried instead of the second if statement:
else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}

There is no method called isAfter(), you can check whether the next element of #quicktabs-tabpage-107_display-0 .view-filters is the current(this) element like
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function (sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function () {
if ($("#quicktabs-tabpage-107_display-0 .view-filters").next().is(this)) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
} else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}

Bootstrap on and off toggle switch

stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if ($(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if (!$(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}
I have a button which will load a div containing an events stream, I want it to load div-content (the stream) on page load but be able to turn it on and off which will hide or show the content respectively. This currently loads content but does not have the hide and show functionality that I need. (Hide function isn't working.) What am I missing?
dash-stream is the button.
stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
$(".stream-section-hold").show();
$('#dash-stream').click(function() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true", "true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
});
}
This works but only on every second click.

Fixed it.
loadStreamJson("true","true");
streamCheck();
$(stream).hasClass('active-dash');
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}

Saving CSS State Jquery Cookie

I've been trying to implement a way to save the CSS class that gets added on click to each item. I'm not sure how to go about it since each item has a different ID. That idea is that a user can revisit a page, and still have their items selected. I tried looking up other examples, but most only involved saving the body css and not an array of ids. I tried with Jquery Cookie but to no avail, any help would be greatly appreciated.
$('.select_it, .myState').on('click', function(e) {
var id = $(this).attr('id');
isRadio = $(this).data('status');
if(isRadio) {
if ($(this).hasClass('myState')) {
$(this).removeClass('myState');
} else {
$('.select_it').removeClass('myState');
$(this).addClass('myState');
}
$('.nextbutton').fadeTo("slow", 1.0, function() {
});
jsRoutes.controllers.Builder.selectedOption(id).ajax({
success : function(data) {
}
});
} else {
$('.nextbutton').fadeTo("slow", 1.0, function() {
});
$(this).toggleClass('myState');
jsRoutes.controllers.Builder.selectedOption(id).ajax({
success : function(data) {
}
});
}
});
Solution:
var state = {};
$('.nextbutton').click(function () {return false;});
if (localStorage.getItem("state") === null) {
//
} else {
$('.nextbutton').fadeTo("slow", 1.0, function() {
$('.nextbutton').unbind('click');
});
state = JSON.parse(localStorage["state"]);
}
$('.select_it, .myState').each(function(i, obj) {
if(state[obj.id] == 'myState') {
$(this).addClass('myState');
}
});
$('.select_it, .myState').on('click', function(e) {
var id = $(this).attr('id');
isRadio = $(this).data('status')
if(isRadio) {
$('.nextbutton').fadeTo("slow", 1.0, function() {
$('.nextbutton').unbind('click');
});
$('.myState').each(function(index, element){
$(this).removeClass('myState');
$(this).addClass('select_it');
state[element.id]='select_it';
});
$(this).addClass('myState');
state[id]='myState';
jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}});
} else {
if ($(this).hasClass('select_it')) { // TOGGLE ON
state[id]='myState';
$(this).removeClass('select_it');
$(this).addClass('myState');
} else { // TOGGLE OFF
state[id]='select_it';
$(this).removeClass('myState');
$(this).addClass('select_it');
}
jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}});
}
localStorage['state'] = JSON.stringify(state);
});

Cookie can only store a string. I would also consider using localStorage rather than cookie...and use cookie as fallback for older browsers that don't support localStorage.
If you create an object using element ID's as keys, you can use JSON.stringify to create string to store and use JSON.parse to convert string to object again.
/* example populated object, only need an empty object to start*/
var ui_state={
ID_1:'someClass',
ID_2:'inactiveClass'
}
Then within event handlers:
$('#ID_1').click(function(){
var newClass= /* logic to dtermine new class*/
$(this).addClass(newClass);
storeStateToLocal(this.id, newClass);
});
/* simplified store method*/
function storeStateToLocal(element_id, newClass){
ui_state[element_id]= newClass;/* update ui_state object*/
if(window.locaStorage != undefined){
localStorage.setItem('ui_state', JSON.stringify( ui_state) );
}else{
/* stringify to cookie*/
}
}
On page load can iterate over the object:
var ui_state= getStateFromLocal();/* if none in storage, return false*/
if(ui_state){
$.each(ui_state,function( element_id, currClass){
$('#'+element_id).addClass(currClass);
});
}else{
ui_state={};/* create empty object if none already in storage*/
}

Hmm not 100% sure, but is it something like this what you want?
$('.select_it').each(function(){
if ($(this).attr('id') != $.cookie(cookieName)) {
$(this).removeClass('myState');
} else {
$(this).addClass('myState');
}
});
Or maybe more like this:
$('.select_it, .myState').on('click', function(e) {
$('.select_it').removeClass('myState');
$(this).addClass('myState');
// more code
});

Optimizing long on click event

I have the following code which changes the text in a certain element on click depending on the text value present in the element at the time the event is fired.
http://jsfiddle.net/TNDhL/
$('#left').on('click', function (){
if ($("#textContainer:contains('something')").length) {
$('#textContainer').text('third text replacement');
$('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
$('#textContainer').text('now the next item');
$('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
$('#textContainer').text('new text here');
$('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
$('#textContainer').text('something');
$('.elsewhere').text('text here');
}
});
$('#right').on('click', function (){
if ($("#textContainer:contains('something')").length) {
$('#textContainer').text('new text here');
$('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
$('#textContainer').text('now the next item');
$('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
$('#textContainer').text('third text replacement');
$('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
$('#textContainer').text('something');
$('.elsewhere').text('text here');
}
});
Please see fiddle above for working version.
I'd like to find a way to make this more manageable in order to make extending this further easier. Is there a better way to handle this case? Condensing this into a function and using variables to store the value of #textContainer would be more ideal. Any suggestions?

Seems like a perfect case for a closure which can track your progress with a simple counter.. Could look something like this:
var myTextRotator = (function () {
var myPhraseArray = ["first phrase", "second phrase"],
counter = 0;
return {
clickLeft: function () {
counter -= 1;
return myPhraseArray[counter]; //return array item or do your processing here
},
clickRight: function () {
counter += 1;
return myPhraseArray[counter]; //return array item or do your processing here
}
};
}());
Tie the clickLeft and clickRight methods to an jQuery .on(). May have to add a conditional in there so the counter doesn't go below 0 or above the array length.
You would use this like:
$(".left").on("click", function () {
myTextRotator.clickLeft();
});
$(".right").on("click", function () {
myTextRotator.clickRight();
});