"css toolbar"
Bootstrap 3.3.0 Snippet by rayrc

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <link media="all" type="text/css" rel="stylesheet" href="http://bootsnipp.com/css/fullscreen.css"> </head> <body> <div id="toolbar"> Theme: <select class="form-control" name="bootstrap-theme" id="theme_chooser"> <option value="">Plain Bootstrap</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/amelia/bootstrap.min.css">Amelia</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cerulean/bootstrap.min.css">Cerulean</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cosmo/bootstrap.min.css">Cosmo</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cyborg/bootstrap.min.css">Cyborg</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css">Flatly</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css">Journal</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/lumen/bootstrap.min.css">Lumen</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css">Readable</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/simplex/bootstrap.min.css">Simplex</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/slate/bootstrap.min.css">Slate</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/spacelab/bootstrap.min.css">Spacelab</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/superhero/bootstrap.min.css">Superhero</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/united/bootstrap.min.css">United</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/yeti/bootstrap.min.css">Yeti</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/darkly/bootstrap.min.css">Darkly</option> </select> <select class="form-control" name="style-mods1" id="theme_chooser2"> <option value="http://192.168.1.4/css/qz-min.css">Quartz</option> <option value="http://192.168.1.4/css/trans-min.css">Trans</option> <option value="http://192.168.1.4/css/med-main.css">Medium</option> <option value="http://192.168.1.4/css/med-fonts.css">Medium Fonts</option> </select> <select class="form-control" name="style-mods2" id="style_adder"> <option value="http://192.168.1.4/css/qz-min.css">Quartz</option> <option value="http://192.168.1.4/css/trans-min.css">Trans</option> <option value="http://192.168.1.4/css/med-main.css">Medium</option> <option value="http://192.168.1.4/css/med-fonts.css">Medium Fonts</option> </select> <a href="http://bootsnipp.com/user/snippets/6ln1d" class="btn btn-default">View on Bootsnipp.com</a> <a class="btn btn-default" href="close" onclick="window.close();return false;">×</a> <button onClick="javascript:injectHTML();">Inject test</button> </div> <iframe id="snippet-preview" src="http://bootsnipp.com/iframe/6ln1d" frameborder='no' sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-top-navigation allow-forms" scrolling="auto" allowTransparency="true" allowfullscreen="true" height="100%" width="100%"></iframe> <script type="text/javascript"> function injectHTML(){ var iframe = document.getElementById('snippet-preview'); var iframedoc = iframe.document; var iframedoc = iframe.document; if (iframe.contentDocument) iframedoc = iframe.contentDocument; else if (iframe.contentWindow) iframedoc = iframe.contentWindow.document; iframedoc.append("<div><h2>iframe hacked</h2></div>"); } </script> <script type="text/javascript"> (function($) { $('#theme_chooser').change(function(){ whichCSS = $(this).val(); document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS); }); })(jQuery); (function($) { $('#theme_chooser2').change(function(){ whichCSS = $(this).val(); document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS); }); })(jQuery); (function($){ $('#style-adder').change(function(){ var sUrl=$(this).val(); if(sUrl){var s=document.createElement('link'); s.setAttribute('href',sUrl); s.setAttribute('rel','stylesheet'); s.setAttribute('type','text/css'); var myframe=document.getElementById('snippet-preview').contentWindow; myframe.document.getElementsByTagName('head')[0].appendChild(s); alert('loaded css!'); }); })(jQuery); </script> </body> </html>

Related: See More

Paper Kit 2 Angular
Text editor toolbar

Questions / Comments: