Toggle image based on cookie value - javascript

Im using a couple of JS functions to set a cookie named 'visible' with the value of either yes or no.
Essentially Im using these values to decide if a <div> is visible or hidden.
I've only just added the cookie, previously I had been using two images 1. Show 2. Hide as a button to hide and show the <div> like this:
HTML:
<img class="show" title="Show" alt="Show" src="images/show.png" />
<img class="hide" title="Hide" alt="Hide" src="images/hide.png" />
JQUERY:
$("#tool").click(function() {
$(".help").slideToggle();
$("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
$("#tool img").toggle();
});
});
However I have now added the Cookie into the mix:
$("#tool").click(function() {
if(get_cookie('visible')== null) {
set_cookie('visible','no');
} else {
delete_cookie('visible');
}
$(".help").slideToggle();
$("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
$("#slider img").toggle();
});
});
So the .toggle() no longer matches the state of the <div>
When the cookie value = no the show.png should be visible
When the cookie value = yes then the hide.png should be visible
Can anyone suggest how i can ammend this?

To make things easier I just didn't delete the cookie. And simply set it every time.
$("#tool").click(function () {
var cookie = get_cookie('visible');
if (cookie == null) {
set_cookie('visible', 'no');
cookie = get_cookie('visible');
}
if (cookie.value == 'yes') {
set_cookie('visible', 'yes');
$(".help").slideDown();
$("#wrapper").animate({
opacity: 1.0
}, 200).slideDown(200, function () {
$("#tool img").show();
});
} else {
set_cookie('visible', 'no');
$(".help").slideUp();
$("#wrapper").animate({
opacity: 1.0
}, 200).slideUp(200, function () {
$("#tool img").hide();
}
}
};

document.getElementsByClassName('show')[0].src = get_cookie('visible') ? 'images/hide.png' : 'images/show.png';

Related

How to Fade Out an element using Javascript

I have a loading page that I used javascript to make. I would like to be able to fade-out the loading page as the index.html fades in. I understand this can easily be done with jQuery, but would like to not use jQuery since I have yet to use it on this site. I understand this may be a common question, but I have not been able to tailor other answers to my solution since most use jQuery.
I am thinking to edit the opacity of the loading element onReady. Or could I do this with simple CSS?
Javascript:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
HTML:
<div id="loading">
<div class="logo">
Logo
</div>
<span class="loading-center-cross"></span>
<h3>Loading...</h3>
</div>
<div id="page">
.....
</div>
I expect for the loading screen to fade to the index.html as previously described. Thanks for all the help!
You can do this with CSS, using something like the following:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).classList.toggle('fade-in-out', value);
}
onReady(function () {
show('page', true);
show('loading', false);
});
And have the following CSS:
#page,
#loading {
transition: opacity 1s;
}
.fade-in-out {
opacity: 0;
pointer-events: none;
}
That way, the show() function will toggle a class of fade-in-out based on value, and there will be a transition to 'fade' the div in and out, with an addition of pointer-events: none to make the div non-interactive whist transitioning.

Clear local storage for div on radio selection

I'm trying to get local storage to clear for all fields in one specific div when the user selects the No radio button:
Slightly incomplete jsfiddle but should do the trick
I'm obviously not doing something right here (.hide-show-yes is where I want all fields inside that div to clear):
$(document).ready(function(){
$('input[name="for_person"]').on('click', function () {
if ($('#personNo').prop('checked')) {
// ??
$('.hide-show-yes').localStorage.removeItem('fname');
} else {
// do nothing
}
});
});
localStorage is not a jQuery method . Also
$(document).ready([function() {
if (localStorage["dontclear"]) {
$('#dontclear').val(localStorage["dontclear"]);
}
if (localStorage["fname"]) {
$('#fname').val(localStorage["fname"]);
}
if (localStorage["lname"]) {
$('#lname').val(localStorage["lname"]);
}
console.log(localStorage)
}, function() {
$('.stored').change(function() {
localStorage[$(this).attr('name')] = $(this).val();
console.log(localStorage)
});
$('input[name="for_person"]').on('click', function() {
if ($('#personNo').prop('checked')) {
// ??
localStorage.removeItem('fname');
} else {
// do nothing
}
});
}]);
plnkr http://plnkr.co/edit/LPw3zbpgrhJkSh1hdKXG?p=info

setInterval + image src changes when clicked on button

I want to give blink effect(dark and light) when clicked on the button.I have written the following code but it does not work.So please help me.
$(document).ready(function () {
$(".search").click(function () {
setInterval(function () {
var curSrc = $("#red").attr('src');
if (curSrc === '../images/lightred.jpg') {
$(curSrc).attr("src", "../images/Darkred.jpg");
}
if (curSrc === '../images/Darkred.jpg') {
$(curSrc).attr("src", "../images/lightred.jpg");
}
}, 2000);
});
});
curSrc is your source attribute, yet you are trying to wrap it in jQuery, that won't make it an object. You'll have to target #red again and then set the source:
if (curSrc === '../images/lightred.jpg') {
$("#red").attr("src", "../images/Darkred.jpg");
}
if (curSrc === '../images/Darkred.jpg') {
$("#red").attr("src", "../images/lightred.jpg");
}
It seems the question might be how to make the button blink. This can be done with the css background-color property. CSS is a better fit, assuming lightRed and darkRed are solid colors. If the images are required you can use the background-image property.
<input type="button" class="search lightRed" value="Search"/>
<style>
.lightRed { background-color: lightcoral }
.darkRed { background-color: darkRed }
</style>
<script>
$(document).ready(function(){
$(".search").click(function(){
setInterval(function(){
var isLightRed = $(".search").hasClass("lightRed");
if (isLightRed) {
$(".search").removeClass("lightRed").addClass("darkRed");
} else {
$(".search").removeClass("darkRed").addClass("lightRed");
}
},2000);
});
});
</script>

How to SlideUp div when clicked in jQuery

I have the following simple demo here: https://tinker.io/8e585/1. I have attached code below.
Initially, the contents of both 'Test 1' & 'Test 2' are closed.
However, when clicked, they open. I would like it, if when one is open and then clicked it closes. So, if open AND clicked = close. Is this possible?
Many thanks for any helpers with this :-)
..
HTML
<div class="grid_4">
<h2 style="margin-bottom:4px">Test 1</h2>
<div class="newboxes2" id="newboxes6">
<p>bla 1</p>
</div>
</div>
<div class="grid_4">
<h2 style="margin-bottom:4px">Test 2</h2>
<div class="newboxes2" id="newboxes7">
<p>bla 2</p>
</div>
</div>
CSS
.newboxes2 {display:none}
jQuery
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if ($(this).attr("id") == thechosenone) {
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
$(this).slideDown(200);
}
else {
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
$(this).slideUp(600);
}
});
}
You can simply use a class to do it:
https://tinker.io/8e585/12
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if (this.id == thechosenone) {
if($(this).is('.active') )
$(this).removeClass('active').slideUp(600);
else
$(this).addClass('active').slideDown(200);
}
else
$(this).removeClass('active').slideUp(600);
if($(this).is('.active') )
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
else
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
});
}
everything should be a lot easier then you think. you should remove your inline javascript event-handler. and use the jquery-toggle-mechanism:
then your javascript code could become as short as this:
$('.grid_4').bind('click', function () {
$(this).find('.newboxes2').slideToggle(200);
});
see the updated tinker for an example: https://tinker.io/8e585/4
if you want your slideDown to be faster (200) than your slideUp (600), you could lookup the current display property:
var duration, $newboxes2;
$('.grid_4').bind('click', function () {
$newboxes2 = $(this).find('.newboxes2');
duration = $newboxes2.css('display') === 'none' ? 200 : 600;
$(this).find('.newboxes2').slideToggle(duration);
});
tinker thats working here: https://tinker.io/8e585/5
code with your imageswap. this code could even be 1 or 2 lines shorter (the if-else), but i leave it like that, to make it easier to read for you:
var duration, $newboxes2, imgSrc, imgBase = '/wp-content/themes/boilerplate/images/';
$('.grid_4').bind('click', function () {
$newboxes2 = $(this).find('.newboxes2');
if ($newboxes2.css('display') === 'none') {
duration = 200;
imgSrc = imgBase + 'image_corner_btn_onstate.png';
} else {
duration = 600;
imgSrc = imgBase + 'image_corner_btn_offstate.png';
}
$(this).find('img.small').attr('src', imgSrc);
$(this).find('.newboxes2').slideToggle(duration);
});
see tinker: https://tinker.io/8e585/13
Sounds like you want an accordion: http://jqueryui.com/accordion/ alternatively, you could use the Javascript below (remove the inline Javascript you have in your HTML and just use '#'):
(function($) {
$(function() {
var links = $('.grid_4 h2:first-child a');
links.addClass('closed');
links.click(function() {
var $this = $(this);
links.each(function() {
var curLink = $(this);
if(curLink !== $this) {
curLink.parents('.grid_4').find('.newboxes2').slideUp(600, function({curLink.addClass('closed');});
curLink.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
}
});
if($this.hasClass('closed')) {
$this.parents('.grid_4').find('.newboxes2').slideDown(200, function() {$this.removeClass('closed');});
$this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
} else {
$this.parents('.grid_4').find('.newboxes2').slideUp(600, function() {$this.addClass('closed');});
$this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
}
});
});
})(jQuery);

Why is my JavaScript for suspending and unsuspending a user not working correctly?

I'm building a site for someone and on the Admin side there is a "Manage Users" page to manage the website's users. Here is my two functions to suspend and unsuspend (and for the alert):
var admin = {
alert: (function(msg,dur) {
if(!dur || dur == null) {
dur = 1500;
}
$('#alert_box2').remove();
$('body').append('<div id="alert_box2" style="width: 100%; height: 9px; top: -17px; left: 0; position: absolute; text-align: center; z-index: 5;"><div id="alert_box_inner2"></div></div>');
$('#alert_box2').show(0, function() {
if(dur!=='none') {
$('#alert_box_inner2').html(msg).stop(true, true).fadeIn(800).delay(dur).fadeOut(800, function() {
$('#alert_box2').remove();
});
}
else {
$('#alert_box_inner').html(msg).show();
}
});
}),
suspendUser: (function(id) {
admin.alert('Please wait...',20000);
$.get('user_more_actions.php?action=suspend&nolightbox=1&id='+id, function(data,textStatus) {
setTimeout(function() {
if(textStatus=='success') {
if(data.indexOf('suspended') > -1) {
name = data.replace('suspended ','');
admin.alert(name+' is now suspended.',2500);
$('#status_'+id).html('<strong style="color: red;">Suspended</strong>');
$('#suspend_'+id).attr('id','unsuspend_'+id).text('Unsuspend').removeClass('suspend').addClass('unsuspend');
}
else {
admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
}
}
else {
admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
}
}, 500);
});
}),
unsuspendUser: (function(id) {
admin.alert('Please wait...',20000);
$.get('user_more_actions.php?action=unsuspend&nolightbox=1&id='+id, function(data,textStatus) {
setTimeout(function() {
if(textStatus=='success') {
if(data.indexOf('unsuspended') > -1) {
name = data.replace('unsuspended ','');
admin.alert(name+' is no longer suspended.',2500);
$('#status_'+id).html('<strong style="color: green;">Active</strong>');
$('#unsuspend_'+id).attr('id','suspend_'+id).text('Suspend').removeClass('unsuspend').addClass('suspend');
}
else {
admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
}
}
else {
admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
}
}, 500);
});
})
};
And the code that triggers the functions when a Suspend or Unsuspend link is clicked:
$('.suspend').each(function() {
$(this).live('click', function(e) {
e.preventDefault();
var id = $(this).attr('id').replace('suspend_', '');
admin.suspendUser(id);
});
});
$('.unsuspend').each(function() {
$(this).live('click', function(e) {
e.preventDefault();
var id = $(this).attr('id').replace('unsuspend_', '');
admin.unsuspendUser(id);
});
});
Everything is working ok, except when I click again it messes up. When a Suspend link is clicked, it changes to Unsuspend (and changes the ID). But then if I click Unsuspend it doesn't work, and it is calling the admin.suspend() function instead of admin.unsuspend() (and the ID isn't being passed so the name isn't displayed):
When the class and the ID is changed it should call either the admin.suspend(id_here) or admin.unsuspend(id_here); but it isn't.
Does anyone know why this is happening? Thanks in advance and I'm sorry that this post is long.
I've fiddled with it. Hope this helps:http://jsfiddle.net/wKGKu/
Update: After reading your concerns for .each, I've updated the code to demonstrate it isn't needed: http://jsfiddle.net/wKGKu/2/
I believe the way you wrote your live bindings is incorrect, they should have been bound like this:
$('.suspend').live('click', function(e) {
e.preventDefault();
var id = $(this).attr('id').replace('suspend_', '');
admin.suspendUser(id);
});
$('.unsuspend').live('click', function(e) {
e.preventDefault();
var id = $(this).attr('id').replace('unsuspend_', '');
admin.unsuspendUser(id);
});
I simplified fiddle showing the working code at: jsFiddle
You are attaching events to suspend/unsuspend classes, but your AJAX callback is modifying id attribute. Also you are horribly misusing live(). In the end your handler is already attached to the link and doesn't change after your AJAX calls.
Solution is to
1) leave ID's alone - you are only confusing yourself by modifying them
2) rewrite event handler to either not do each() or not use live - put together completely defeats purpose behind live()
$('.suspend').live('click', function(){
var id = $(this).attr('id').replace('suspend_', '');
admin.suspendUser(id);
return false;
});
$('.unsuspend').live('click', function(e){
var id = $(this).attr('id').replace('suspend_', '');
admin.unsuspendUser(id);
return false;
});

Categories