jquery - Convert external CSS to Inline on button press with javascript -


i developing page needs displayed on screen sent out html email.

i have created style in separate (external) css file do.

this page has multiple different templates, sharing same classes styled using css, makes quite long , tedious job go , manually inline css.

i wonder if there's way automatically css , convert inline.

i have done reseach , code test well.

this how far got:

  • i can css using request
  • i have html of page cleaned (removed unwanted parts)

and i'd automatically inline properties when class found in css , html.

i have made attempt here https://codepen.io/nickhg/pen/wqyzgj?editors=1010

var classmatches, cls, css, cssrule, el, html, i, j, k, l, len, len1, len2, len3, len4, len5, listofclasses, m, n, o, parsedcss, parsedhtml, parser, ref, res, v;  css = ".inside1{background:red;}.inside2{background:purple;}";  parser = new cssjs();  parsedcss = parser.parsecss(css);  html = $('.outside').html();  parsedhtml = $.parsehtml(html);  listofclasses = [];  (k = = 0, len = parsedhtml.length; < len; k = ++i) {   v = parsedhtml[k];   listofclasses.push(v.classname); }  classmatches = [];  (k = j = 0, len1 = parsedcss.length; j < len1; k = ++j) {   v = parsedcss[k];   (l = 0, len2 = listofclasses.length; l < len2; l++) {     cls = listofclasses[l];     if ("." + cls === v.selector) {       console.log("matching class - ", v.selector);       ref = v.rules;       (m = 0, len3 = ref.length; m < len3; m++) {         cssrule = ref[m];         res = cssrule.directive + ':' + cssrule.value + ';';         classmatches.push({           "class": cls,           css: res         });       }     }   } }  console.log(classmatches);  (k = n = 0, len4 = parsedhtml.length; n < len4; k = ++n) {   v = parsedhtml[k];   debugger;   (o = 0, len5 = classmatches.length; o < len5; o++) {     el = classmatches[o];     if (v.classname === el["class"]) {       if (v.attributes['style'] != null) {         v.attributes['style'].value = el.css;       }     }   } }  $('.outside').html(parsedhtml);

(the code above compiled version of coffeescript)

but it's not working correctly , should recursive have nested elements well, prefer use library exists (if exists) rather having write own.

any ideas/suggestions?

thanks

at end, if interested, changed template bit used 1 , show/hide required/not required parts.

this made slimmer , easier edit. used ng-style (yes, i'm using angular) apply style inline.

basically created style in scope object , used way in template:

$scope.style = {    class1: {background:"red"},    class2: {background:"yellow"} }  <div ng-style="style.class1">...</div> <div ng-style="style.class2">...</div>

i don't approach, works , @ least let me keep style in 1 place if have need edit/change it.


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more