javascript - How do I switch external CSS files? -
i've got couple books i'm reading on ajax, still quite new. tutorials , these books have ubiquitous examples of: auto-populating search bar , asynchronous form validator. both great, not i'm looking for. specifically, want click button , switch external css file in header include. possible? well... know it's possible, how do it?
ps: have jquery in project, if there built in there, better!
pps: i'm realizing have not included important information (don't shoot me!):
the final goal of have user settings section user can click radio button , decide color scheme want use our app. have 8 different css styles choose from. not sure if alter best method achieve this.
the user logging account , changing setting there. want changes 'stick' until decide change stylesheet again. can manually in mysql have table called stylesheets various user stylesheets numbered... in actuality, i'm needing change mysql value asynchronously css loaded.
stylesheet switcher in jquery.
in response 'newbie followup' comment, try make little more instructional.
the page playing test on while writing can found here.
page display
you're going want have current stylesheet displayed in <link> tag in <head> of each of pages. <link> tag need id reference later in javascript. like:
<?php // somewhere in server side code, $current_stylesheet read user's // "preferences" - database / session object $current_stylesheet = $user->stylesheet; ?> <link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' /> changing preference
once displaying users stylesheet, need way change it. create <form> send request server when user changes stylesheet:
<form method="get" id="style_form" > <select name="stylesheet" id="styleswitch"> <option value="css1.css">black & white</option> <option value="css2.css" selected="selected">shades of grey</option> </select> <input value='save' type='submit' /> </form> server side
now, without jquery, submitting form should (you change post if like) stylesheet={new stylesheet} on current page. somewhere in bootstrap / sitewide include file, check it, php sample:
$styles = array( 'css1.css' => 'black & white', 'css2.css' => 'shades of grey', ); if (!empty($_get["sytlesheet"]) { // validate valid stylesheet - important // $styles array of styles: if (array_key_exists($_get["stylesheet"], $styles)) { $user->stylesheet = $_get["stylesheet"]; $user->save(); } } live preview
at point, have functioning styleswitcher lame people without javascript. can add jquery make happen little more elegantly. you'll want use jquery form plugin make nice ajaxform() function, handle submitting form. add jquery , jquery form library page:
<script type='text/javascript' src='/js/jquery.js'></script> <script type='text/javascript' src='/js/jquery.form.js'></script> now have libraries included -
$(function() { // when has loaded - function execute: $("#style_form").ajaxform(function() { // style form submitted using ajax, when succeeds: // function called: $("#thediv").text('now using: '+$('#styleswitch').val()); }); $("#styleswitch").change(function() { // when styleswitch option changes, switch style's href preview $("#stylelink").attr('href', $(this).val()); // want submit form server (will use our ajax) $(this).closest('form').submit(); }); // have made changing select option submit form, // lets rid of submit button $("#style_form input[type=submit]").remove(); });
Comments
Post a Comment