I stumbled upon an interesting solution for changing background color and storing it in a cookie by utilizing jquery.cookie. After making a few tweaks, it worked smoothly:
$(document).ready(function () {
$("body").css("background-image",$.cookie("<?php echo $_SESSION['username_login']; ?>"));
$("#background-change").change(function (event) {
var img = $(this).val();
$("body").css("background-image",img);
$.cookie("<?php echo $_SESSION['username_login']; ?>",img, {path: '/', secure: true});
});
});
Building on this, I attempted to create a theme color switcher with the default class of .w3-blue-grey. Here's what I came up with:
$(document).ready(function () {
$(".w3-blue-grey").toggleClass($.cookie("<?php echo $_SESSION['username_login']; ?>col"));
$("#color-change").change(function (event) {
var col = $(this).val();
$(".w3-blue-grey").toggleClass(col);
$.cookie("<?php echo $_SESSION['username_login']; ?>col",col, {path: '/', secure: true});
});
});
Although I tried to avoid naming conflicts by using different cookie names, this code doesn't seem to function as intended. I've encountered various issues – sometimes it changes colors incorrectly, refuses to revert to the default, or even renders the element transparent. I'm at a loss...
Switching to switchClass instead of toggle didn't yield favorable results either.
I suspect the problem may stem from the order of selection in the code. Sharing my HTML snippets for context:
<select name="wall" id="background-change" class="w3-padding">
<option>...</option>
<option value='url("img/wall6.png")'>Main</option>
<option value='url("img/wall2.png")'>Option 1</option>
<option value='url("img/wall3.png")'>Option 2</option>
</select>
My background changer select works fine. Here's the snippet for my theme switcher:
<select name="color" id="color-change" class="w3-padding">
<option >...</option>
<option value='w3-blue-grey'>Light grey</option>
<option value='w3-indigo'>Indigo</option>
<option value='w3-blue'>Light blue</option>
</select>
After spending hours troubleshooting this issue, I'm open to any suggestions or alternative solutions. Your input is greatly appreciated.
Update: I managed to resolve the issue. Are there any better approaches you can recommend?
<script type="text/javascript">
$(document).ready(function () {
$(".w3-blue-grey").css('cssText',$.cookie("<?php echo $_SESSION['username_login']; ?>col"));
$("#color-change").change(function (event) {
var col = $(this).val();
$(".w3-blue-grey").css('cssText',col);
$.cookie("<?php echo $_SESSION['username_login']; ?>col",col, {path: '/', secure: true});
});
});
</script>