javascript - Use list instead of option for dropdown select -
i need able change style of page based on dropdown list. have dropdown form option list, , using js selecting css on page. needs apply separate stylesheet (style1.css, style2.css, etc) on click/change of dropdown based on dropdown list item, instead of option select.
html
option select
<div class="et-select-wrapper"> <div class="et-select-wrapper" style="margin:0"> <select id="styleswitcher"> <option value="default">default</option> <option value="option2">option2</option> </select> </div> </div> list items - needs work list item (below) instead of above option
list items
<button class="et-icon-down-arrow" data-toggle="dropdown"><span class="caret"> </span> page style</button> <ul class="dropdown-menu" role="menu" id="styleswitcher"> <li><a href="#" value="default">default</a></li> <li><a href="#" value="wcag">wcag</a></li> </ul> javascript
window.onload = function() { function addevent(obj, type, fn) { if (obj.attachevent) { obj['e' + type + fn] = fn; obj[type + fn] = function() { obj['e' + type + fn](window.event); } obj.attachevent('on' + type, obj[type + fn]); } else obj.addeventlistener(type, fn, false); } function switchstyles() { var selectedoption = this.options[this.selectedindex], classname = selectedoption.value; document.body.classname = classname; } var styleswitcher = document.getelementbyid("styleswitcher"); addevent(styleswitcher, "change", switchstyles); } ===========================================================================
solution
i found solution needed here: http://test.unintentionallyblank.co.uk/switcher.html
by applying function setstylesheet li item in dropdown so:
<a data-toggle="dropdown"><button class="et-icon-eye"> style selector</button> <ul class="dropdown-menu" role="menu"> <li><a href="javascript:setstylesheet('arial')">arial</a></li> <li><a href="javascript:setstylesheet('open-sans')">open sans</a></li> </ul> and using javascript here: http://test.unintentionallyblank.co.uk/switcherpart1.js
which selects list of external stylesheets on page, i'm able change pages style on select li list.
your style switcher (ul) doesn't have "change" event, doesn't change when click things - it's list, not form control. it's static element on page, text or something. bind switchstyle() on "click" event of li-s, instead.
also, consider jquery. saves lot of work around events:
$("li").on("click",switchstyles); update
i've created minimal demo of how can react on li clicks:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <html> <body> <ul> <li><a href="#" data-value="1"> style 1 </a></li> <li><a href="#" data-value="2"> style 2 </a></li> <li><a href="#" data-value="3"> style 3 </a></li> <li><a href="#" data-value="4"> style 4 </a></li> <li><a href="#" data-value="5"> style 5 </a></li> </ul> <div class="colorme"> <br><br><br> </div> <script> function styleswitcher(x) { var colors = ["blue","green","red","purple","orange"]; $(".colorme").css("background-color",colors[--x]); } $("li > a").on("click",function() { var n = $(this).data("value"); styleswitcher(n); }); </script> </body> </html> (also fiddle this)
can apply own method of switching styles.
update ii
here's version changing stylesheets:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <html> <link id="customstyle" rel="stylesheet" href="theme.peace.css"> <body> <ul> <li><a href="#" data-value="ocean"> ocean blue theme </a></li> <li><a href="#" data-value="darko"> dark theme </a></li> <li><a href="#" data-value="flame"> flaming red theme </a></li> <li><a href="#" data-value="peace"> peaceful nature theme </a></li> <li><a href="#" data-value="steam"> steampunk theme </a></li> </ul> <div class="colorme"> <br><br><br> </div> <script> function styleswitcher(t) { var cssname = "theme."+t+".css"; document.getelementbyid("customstyle").setattribute("href",cssname); } $("li > a").on("click",function() { var theme = $(this).data("value"); styleswitcher(theme); }); </script> </body> </html> make sure have named css files (like theme.ocean.css) in proper directory - or update name composition part if have them somewhere else.
Comments
Post a Comment