Add StyleSheet from Drop Down Menu with jQuery and PHP

Posted By: Ian on Nov 19, 2013 in JQuery, PHP, Snippets
Last modified on January 29th, 2015 at 9:31 pm,

Following on from the Snippet add and remove stylesheets with jquery I now show you how to list all the stylesheets from a folder into a drop down menu and append the selected one to the head.
 

Demo

 

<?php
echo "<select name='stylesheet' id='styleSwitcher'>";
echo "<option value='0'> Please select a stylesheet </option>";
foreach (glob('*.css') as $stylesheet) {
echo "<option value='" . $stylesheet . "'>" . $stylesheet . "</option>";
}
echo "</select>";
?>
<script>
/**
* Wait until DOM has loaded
*/
$(document).ready(function () {
/**
* Bind event handler to #styleSwitcher when it's value changes
*/
$('#styleSwitcher').change(function () {
/**
* Define variable for selected value
*/
var selectedSheet = $('#styleSwitcher :selected').val();
/**
* Append selected stylesheet to <head> placing our variable (selected sheet) as the href
*/
$('head').append('<link href="' + selectedSheet + '" rel="stylesheet" id="styleSheetChanged" />');
});
});
</script>

Yea but i don’t want to use a different folder?

No problem simply add your folder path like

foreach (glob('./wp-content/themes/Paradise1/stylesheets/*.css') as $stylesheet) {

I just want the filename to show not the path to it!

No problem
Use PHP http://php.net/basename

echo "<option value='" .$stylesheet . "'>" . basename($stylesheet) . "</option>";

Of course in order for this to be useful your need a way to get the computer to remember the selected stylesheet and for that i’d use HTML5’s local storage feature

With local storage and using basename

<?php
echo "<select name='stylesheet' id='styleSwitcher'>";
echo "<option value='0'> Please select a stylesheet </option>";
foreach (glob('/stylesheets/*.css') as $stylesheet) {
echo "<option value='" .$stylesheet . "'>" . basename($stylesheet) . "</option>";
}
echo "</select>";
?>
<script>
/**
* Check if localStorage is supported and alert user if it's not
* Check if the key stylsheetLocal has been set and has a value
* if so store value in variable stylsheetLocal and using jQuery
* append add to <head> tag
*/
if (typeof (localStorage) == 'undefined') {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
if (localStorage.getItem("stylsheetLocal") != null) {
stylsheetLocal = localStorage.stylsheetLocal;
$('head').append('<link href="' + stylsheetLocal + '" rel="stylesheet" id="styleSheetChanged" />');
}
}
/**
* Wait until DOM has loaded
*/
$(document).ready(function () {
/**
* Bind event handler to #styleSwitcher when it's value changes
*/
$('#styleSwitcher').change(function () {
/**
* Define variable for selected value
*/
var selectedSheet = $('#styleSwitcher :selected').val();
/**
* Remove item (key and value) from localStorage if set
*/
if (localStorage.getItem("stylsheetLocal") != null) {
localStorage.removeItem('stylsheetLocal');
}
/**
* Add item (key) stylsheetLocal and selectedSheet (value) to localStorage
*/
localStorage.setItem("stylsheetLocal", selectedSheet);
/**
* Append selected stylesheet to <head> tag placing our variable (selectedsheet) as the href
*/
$('head').append('<link href="' + selectedSheet + '" rel="stylesheet" id="styleSheetChanged" />');
});
});
</script>

Demo

AnonymousIan.J.Gough

Did this help you? Please Let me know by commenting below even if it’s just to say “Thanks”

leave a comment

About This Site

Dreams are built from lines of code well it's true!
If you can dream it you can usually code it.

I have learned so much from other people on the Internet and this site is for me to give back some of what i have learned and hope people can now learn from me.
Have fun and surf safely,
Ian.J.Gough

protected by copyscape duplicate content check

Categories


Powered by Banner Bar 125