CODEWITHSUNDEEP
javascriptphphtmlcss
user3443701
user3443701

Reputation: 41

Apply temporary css stylesheet on all pages using php javascript

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.

Upvotes: 0

Views: 393

Answers (3)

Mohamed Melouk
Mohamed Melouk

Reputation: 192

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

see documentation

Upvotes: 0

Bor691
Bor691

Reputation: 605

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

Upvotes: 1

Patrick
Patrick

Reputation: 3367

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

Upvotes: 1

Related Questions