Develop Reference

Use cookies to toggle body class

I've being bashing my head around finding a working solution for this.
Goal is to create a text size switcher for people with poor eyesight.
I have created three span elements with classes small, medium and large.
And I have a piece of code that almost gets the job done but it needs that cookie part.
$(function() {
$(".font-toggle span").click(function() {
var size = $(this).attr('class');
$("body").attr("id", size);
return false;
});
});
How can i use cookies to save my selection and add it after page refresh ?
Have been reading many stackoverflow posts about setting cookies but all of them feature only one toggle. Here I have three.
JSFIDDLE HERE
Many thanks!

$(document).ready(function(){
$(".font-toggle span").click(function() {
var size = $(this).attr('class');
$("body").attr("id", size);
if($.cookie('mycookie') == 'valueOfCookie'){
$.cookie('mycookie', '');
}
else{
$.cookie('mycookie', 'valueOfCookie');
}
return false;
});
if($.cookie('mycookie') == 'valueOfCookie'){
$("body").attr("id", 'big-font');
}
else{
$("body").removeAttr("id");
}
});
#big-font{
font-size: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>
<div class="font-toggle">
<span class="big-font">
Button
</span>
</div>
<div>
Text To Show
</div>

Maybe this will work for you.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>
<script>
"use strict";
$(document).ready(function() {
let eyesight = $.cookie('eyesight');
if (eyesight != undefined) {
$("body").addClass(eyesight);
} else
setEyesight('medium'); // Default size
$(".font-toggle span").click(function() {
setEyesight($(this).attr('class'));
});
});
function setEyesight(size) {
let eyesight = $.cookie('eyesight');
if (eyesight != undefined) {
$("body").removeClass(eyesight);
$.removeCookie('eyesight');
}
$("body").addClass(size);
$.cookie('eyesight', size);
}
</script>

What about this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>
<script>
"use strict";
$(document).ready(function() {
let eyesight = new Eyesight();
eyesight.initialize();
$(".font-toggle span").click(function() {
eyesight.set($(this).attr('class'));
});
});
function Eyesight() {
let self = this;
let name = "eyesight";
let current = null;
let _default = "medium";
let data = $.cookie(name);
// initialzie
this.initialize = function() {
if (data!= undefined) {
$("body").addClass(data);
current = data;
} else
self.set(_default); // Default size
// init cookie listener
self.listener();
};
// set eyesight function
this.set = function(size) {
if (data != undefined) {
$("body").removeClass(data);
$.removeCookie(name);
}
$("body").addClass(size);
$.cookie(name, size);
current = size;
};
// eyesight cookie listener function
this.listener = function() {
setTimeout(function() {
let cookie = $.cookie(name);
if (cookie != undefined && cookie != current)
self.set(cookie);
self.listener();
}, 100);
};
}
</script>

content narration in web page, on tab press not going to speak anything if current task(speak anything) not completed

I am using articulate.js(http://www.jqueryscript.net/demo/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js/) to read content from page and speak it. It is working fine, just not works if it is speaking something and I have press tab then it stops but not reads tab selected content.
some pre-define functions
<script>
function speak(obj) {
$(obj).articulate('speak');
};
function pause() {
$().articulate('pause');
};
function resume() {
$().articulate('resume');
};
function stop() {
$().articulate('stop');
};
</script>
what I have tried
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
$().articulate('stop');
if (e.which == 9) { // on tab press start speaking selected element
var i=document.activeElement.id;
$('#'+i).articulate('pause').articulate('stop').articulate('speak');
}
else{ // trying to speak what key has been pressed except tab, but not working
var i=document.activeElement.id;
$('#'+i).val().articulate('speak');
}
});
});
</script>
I am also trying to make it audible(to speak keypress) on text box, which is not working

I have make some changes now it is working, but it has certain limitation like it not reads backspace, ctrl, space etc but speak a to z,1 to 0, very well. please improve it
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
var speaking = $().articulate('isSpeaking');
var paused = $().articulate('isPaused');
// $().articulate('stop');
if (e.which == 9) {
if (speaking) {
$().articulate('pause');
$().articulate('stop');
}
var check =0;
setTimeout(function(){
check +=1;
if (check == 1){
comeback();
}
},1000);
function comeback() {
var i=document.activeElement.id;
$('#'+i).articulate('speak');
}
}
else{
var i=document.activeElement.id;
var m=0;
setTimeout(function () {
m+=1;
if(m==1){
magic();
}
},500);
function magic() {
var tempval=$('#'+i).val();
var lastChar = tempval.substr(tempval.length - 1);
var ht ='<div>'+lastChar+'</div>';
$(ht).articulate('speak');
}
}
});
});
</script>

Combining two script in jquery/javascript

I have two script in javascript/jquery. How i will combine in one. On body load this function run
<script type="text/javascript">
window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},250);
</script>
<script>
var status = navigator.onLine;
if (status) {
$("#link1").removeClass('diconnected').addClass('connected');
$("#link1").data('disabled',true);
} else {
$("#link1").removeClass('connected').addClass('diconnected');
}
}
</script>

$(document).ready(function(){
var status = navigator.onLine;
if (status) {
$("#link1").removeClass('diconnected').addClass('connected');
$("#link1").data('disabled',true);
} else {
$("#link1").removeClass('connected').addClass('diconnected');
}window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},250);
}});
try this

Your first script is missing a closing bracket }
If you add in a } you can remove the closing and opening script tags.
Additionally, you may want the second bit of code within the window.onload function, which would mean you could put the closing bracket } after the 2nd scripts code

My signs aren't changing

I am new to JS just playing around to understand how it works.
Why isn't my sign (+,-) changing?
When the div expand it remains with a + sigh never goes to -
Thanks
$(document).ready(function(){
$(".expanderHead").click(function(){
$(this).next(".expanderContent").slideToggle();
if ($(".expanderSign").text() == "+"){
$(".expanderSign").html("−")
}
else {
$(".expanderSign").text("+")
}
});
});

Just guessing at the relationship, since you haven't shown your HTML, but you probably need something like this:
$(document).ready(function () {
$(".expanderHead:visible").click(function () {
var content = $(this).next(".expanderContent");
var sign = $(this).find(".expanderSign");
if (content.is(":visible")) {
content.slideUp();
sign.text("+");
} else {
var expanded = $(".expanderContent:visible");
if (expanded.length > 0) {
expanded.slideUp();
expanded.prev(".expanderHead").find(".expanderSign").text("+");
}
content.slideDown();
sign.text("-");
}
});
});
FIDDLE

jquery load new vars

It´s posible , if i have one var , use jquery for load news vars and change these
For example if i have :
var activate_auto="yes";
$("#play").click(function() {
/// load vars
activate_auto="yes";
});
$("#stop").click(function() {
/// load vars
activate_auto="no";
});
COMPLETE CODE
<script>
var w_ac="900";
var h_ac="295";
var w_ac_col="64";
var n_cols="5";
var margin="3";
var time_ac_change=5000;
var time_ac_effects=2000;
var time_ac_hide_effects=1000;
var ac_activate_auto="si";
var ac_activate_auto_random="no";
var margin=margin*n_cols;
var result=w_ac_col*n_cols+margin;
var final=w_ac-result;
$(function(){
$("#ac_play").click(function()
{
ac_activate_auto="si";
ac_activate_auto_random="no";
time_ac_change=2000;
});
$("#ac_stop").click(function()
{
ac_activate_auto="no";
ac_activate_auto_random="no";
time_ac_change=2000000;
});
for (i=1;i<=n_cols;i++)
{
$(".ac_"+i+"").css("width",""+w_ac_col);
}
});
function acordeon(id)
{
$(function(){
for (i=1;i<=n_cols;i++)
{
if (+id==i)
{}
else
{
$(".ac_"+i+"_inf").hide(time_ac_hide_effects);
}
}
$(".ac_"+id+"_inf").css("width",""+final);
$(".ac_"+id+"_inf").show(time_ac_effects).fadeIn(time_ac_effects);
$(".ac_im").css("width",""+final);
$(".ac_im").css("height",""+h_ac);
});
}
</script>
<script>
var starting_slide = n_cols;
function setSlide(i)
{
acordeon(i);
if (i > 0) {
i--;
setTimeout( function(){setSlide(i)}, time_ac_change);
}
else
{
setTimeout( function(){setSlide(starting_slide)}, 1000);
}
}
if (ac_activate_auto=="si")
{
setSlide(starting_slide);
}
if (ac_activate_auto_random=="si")
{
$(document).ready(function(){
acordeon(1);
var refreshId = setInterval(function(){
var r=Math.floor(Math.random()*n_cols)
if (r==0)
{
acordeon(1)
}
else
{
acordeon(+r)
}
}, time_ac_change);
});
}
</script>
In this case works always when i push over pay or stop but only one time , if i push over play works play but no works before stop and the same when the first i push it´s play
I want push stop load new var and play and other time load the other var , i don´t know if it´s possible , thank´s !

You should only create your var and don't set a value to it, and then, only set its values inside your functions. Ex.:
var activate_auto; // this is outside your click functions
Ok, now I'm not sure what you want to do... will edit it later if necessary =\