Apply temporary css stylesheet on all pages using php javascript

Question

I have to create a website for disable users, where I can change the page contrast css one user selects different colour, so far I have the javascript to do so, but when I click on another page, as in the page reloads/refresh the CSS style goes back to the default one. I understand there must be a way to save it as a cookie, But I am very new to PHP and JavaScript:

Here is my HTML:

<body runat="server" id="Body" style="zoom: 100%">
<div id="container">

    <div id="highvis">   
        <ul>
        <li class="highviss"> <a href="#" onclick="swapStyleSheet('css/webcss2.css');return false;">high vis</a>
        <li> <a href="#" onclick="swapStyleSheet('css/webcss3.css');return false;">Dark</a>
        <li> <a href="#" onclick="swapStyleSheet('css/webcss.css');return false;">Default</a>

        <li><a href="#" onclick="zoomIn();return false;">Zoom In ++</a></li>
        <li><a href="#" onclick="zoomOut();return false;">Zoom Out -</a></li>           
        </ul>
        </div>

Here is my Javascript:

function swapStyleSheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);

}


function zoomIn()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) + 10 +'%'
Page.style.zoom = zoom;
return false;
}

function zoomOut()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) - 10 +'%'
Page.style.zoom = zoom;
return false;
}

Can anyone please help me do this, if not any Ideas, or how can I go by it.

You don't use any PHP in this script. Only Javascript and HTML. — Ivotje50, Apr 06 '14 at 19:20

Patrick · Answer 1 · 2014-04-06T19:31:16.600

1

You can use javascript to create cookies which can later be passed over.

It's W3school so read with caution :

http://www.w3schools.com/js/js_cookies.asp

edit : A link to MDN as I tend to agree with the comment posted : https://developer.mozilla.org/en-US/docs/Web/API/document.cookie

edited Apr 06 '14 at 19:31

answered Apr 06 '14 at 19:20

Patrick

3,289
2
18
31

[this question](http://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript) also has some info about setting cookies with js , MDN usually has better info than w3schools for Javascript. – Bor691 Apr 06 '14 at 19:22

score 1 · Accepted Answer · answered Apr 06 '14 at 19:31

this is a JS only solution similar to yours but it remembers . so on the swap stylesheet we want to make a cookie with stylesheet name:

function swapStyleSheet(sheet) {
    createCookie('sheet2load',sheet,365);//save sheet name in cookie
    document.getElementById('pagestyle').setAttribute('href', sheet);
}

and to load the style sheet on refresh , somewhere (if using jquery in .ready event , on pure JS somwhere bottom of body in an script tag) we need this :

var s=readCookie('sheet2load')
if(s!==null)document.getElementById('pagestyle').setAttribute('href', s);

we also need these two functions which i've borrowed from http://www.quirksmode.org/js/cookies.html

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

this should do it , although the code is untested so if it didn't work post a comment and i'll check it , but either way it should give you some hints on how to do it

score 0 · Answer 3 · answered Apr 06 '14 at 19:32

0

the easiest way by create a cookie you can use JQuery Cookie plugin to do that

see documentation

answered Apr 06 '14 at 19:32

Mohamed Melouk

182
2
11

Apply temporary css stylesheet on all pages using php javascript

3 Answers3