Title: Call inline function via JS
Last modified: November 22, 2017

---

# Call inline function via JS

 *  Resolved [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/)
 * Hi –
 * First, thanks for the great plugin!
 * Issue I have is that sometimes I can’t control the classes applied to an SVG 
   image when added via a 3rd-party plugin (Visual Composer, Ubermenu etc.)
 * I can easily add the class via jQuery but it doesn’t look like I can call your
   inlining script myself. Seems like it fires once and once only in document.ready()–
   and the classes aren’t there yet.
 * Is there a reason you couldn’t wrap your inlining function in a public function
   call so that we can call it again later via $.fn.inlineSVG or whatever?

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/call-inline-function-via-js/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/call-inline-function-via-js/page/2/?output_format=md)

 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9711218)
 * Hey,
 * Thanks for your support!
 * Honestly, I haven’t needed to do that so I haven’t written it in.
 * Feel free to have a play around with the code and see if you can get it to do
   what you want and if it works, I’ll consider putting it in the next update.
 * I’m already working on fixing some warnings and changing a few things, so I could
   possibly get it in. But personally I don’t have time to put in to writing that
   right now unfortunately.
 * I hope you understand!
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9711462)
 * Hi there- thx for the super quick reply!
 * Easiest way would be to just wrap the whole of your svgs-inline.js within an 
   IIFE. Assuming the function name chosen (like “benbodhiInlineSVGs” ) doesn’t 
   collide with another plugin, it should be fine. Should do exactly same as it 
   does today, but make the same function callable again later on via `benbodhiInlineSVGs()`
 * I’ll play around with it and let you know. (The slicker approach would be to 
   make it a very simple jQuery plugin, since it relies on jQ anyway.. but not sure
   when I’ll get time to check that approach out)
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9711723)
 * It makes sense, let me know how you go.
    When I’m working on it again I’ll have
   a look try and get it in.
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9764973)
 * Hi – sorry for the delay, been busy. Here’s a working version – I just enclosed
   your entire inline.js with a IIFE called benbodhiInlineSVGs(). Should work just
   as the current version, but with the benefit that it can be called at-will by
   the theme. Let me know what you think!
 *     ```
       jQuery(document).ready(function ($) {
   
         // Wrap in IIFE so that it can be called again later as benbodhiInlineSVGs();
         (benbodhiInlineSVGs = function() {
           // If force inline SVG option is active then add class
           if ( ForceInlineSVGActive === 'true' ) {
   
             // Find all SVG inside img and add class if it hasn't got it
             jQuery('img').each(function() {
   
               // Pick only those with the extension we want
               if ( jQuery(this).attr('src').match(/\.(svg)/) ) {
   
                 // Add our class name
                 if ( !jQuery(this).hasClass(cssTarget.ForceInlineSVG) ) {
                   jQuery(this).addClass(cssTarget.ForceInlineSVG);
                 }
               }
             });
           }
   
           // Polyfill to support all ye old browsers
           // delete when not needed in the future
           if (!String.prototype.endsWith) {
             String.prototype.endsWith = function(searchString, position) {
               var subjectString = this.toString();
               if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
                 position = subjectString.length;
               }
               position -= searchString.length;
               var lastIndex = subjectString.lastIndexOf(searchString, position);
               return lastIndex !== -1 && lastIndex === position;
             };
           } // end polyfill
   
           // Another snippet to support IE11
           String.prototype.endsWith = function(pattern) {
             var d = this.length - pattern.length;
             return d >= 0 && this.lastIndexOf(pattern) === d;
           };
           // End snippet to support IE11
   
           // Check to see if user set alternate class
           if ( ForceInlineSVGActive === 'true' ) {
             var target  = ( cssTarget.Bodhi !== 'img.' ? cssTarget.Bodhi : 'img.style-svg' );
           } else {
             var target  = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
           }
   
           $(target).each(function(index){
             var $img = jQuery(this);
             var imgID = $img.attr('id');
             var imgClass = $img.attr('class');
             var imgURL = $img.attr('src');
   
             // Set svg size to the original img size
             // var imgWidth = $img.attr('width');
             // var imgHeight = $img.attr('height');
   
             if (!imgURL.endsWith('svg')) {
               return;
             }
   
             $.get(imgURL, function(data) {
   
               // Get the SVG tag, ignore the rest
               var $svg = $(data).find('svg');
   
               var svgID = $svg.attr('id');
   
               // Add replaced image's ID to the new SVG if necessary
               if(typeof imgID === 'undefined') {
                   if(typeof svgID === 'undefined') {
                   imgID = 'svg-replaced-'+index;
                   $svg = $svg.attr('id', imgID);
                 } else {
                   imgID = svgID;
                 }
               } else {
                 $svg = $svg.attr('id', imgID);
               }
   
               // Add replaced image's classes to the new SVG
               if(typeof imgClass !== 'undefined') {
                   $svg = $svg.attr('class', imgClass+' replaced-svg svg-replaced-'+index);
               }
   
               // Remove any invalid XML tags as per http://validator.w3.org
               $svg = $svg.removeAttr('xmlns:a');
   
               // Add size attributes
               // $svg = $svg.attr('width', imgWidth);
               // $svg = $svg.attr('height', imgHeight);
   
               // Replace image with new SVG
               $img.replaceWith($svg);
   
               $(document).trigger('svg.loaded', [imgID]);
   
             }, 'xml');
           });
   
         })(); // Execute immediately
   
       });
       ```
   
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9788649)
 * This is cool. Thanks for providing it. I’ll test and see if I can get it into
   the next update.
 *  [Julie](https://wordpress.org/support/users/juliejubilee/)
 * (@juliejubilee)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-9954246)
 * +1 for this, and thanks for the working code Twig! It was exactly what I was 
   looking for.
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10033428)
 * Hopefully this will make it into the next version – I find myself needing it 
   more & more, especially with IE’s weird handling of SVGs in WP.
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10165726)
 * [@benbodhi](https://wordpress.org/support/users/benbodhi/) – Any chance of adding
   this wrapper in to a quick release?
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10166019)
 * I’ll see if I can get it in to a quicker update. I have been re-writing the whole
   plugin but it’s not ready still.
 * I should be able to release this in the next week or so.
 * Thanks for your patience!
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10166071)
 * Awesome – thanks!
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10191994)
 * Hi [@palpatine1976](https://wordpress.org/support/users/palpatine1976/) and [@juliejubilee](https://wordpress.org/support/users/juliejubilee/),
 * I have pushed out an update today that includes this new JS function wrap 🙂
 * Enjoy.
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10192004)
 * Please note the new JS function name is `bodhisvgsInlineSupport();`.
 *  Thread Starter [Palpatine1976](https://wordpress.org/support/users/palpatine1976/)
 * (@palpatine1976)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10192213)
 * Looks great – thanks so much for adding that!
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10192220)
 * My pleasure!
    It’s something that will be super useful I’m sure.
 * Thanks for your suggestion and continued support!
 * If you have a minute, maybe you can see my issue with this one 😛
    [https://wordpress.org/support/topic/illegal-string-offset-warning-for-height-and-width/](https://wordpress.org/support/topic/illegal-string-offset-warning-for-height-and-width/)
   [https://stackoverflow.com/questions/49888613/how-to-fix-illegal-string-offset-warnings-im-using-an-array-or-object-as-a-ke](https://stackoverflow.com/questions/49888613/how-to-fix-illegal-string-offset-warnings-im-using-an-array-or-object-as-a-ke)
 *  [smmangel](https://wordpress.org/support/users/smmangel/)
 * (@smmangel)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/#post-10194193)
 * Thank you SO MUCH for this update!! It is exactly what I needed.

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/call-inline-function-via-js/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/call-inline-function-via-js/page/2/?output_format=md)

The topic ‘Call inline function via JS’ is closed to new replies.

 * ![](https://ps.w.org/svg-support/assets/icon.svg?rev=1417738)
 * [SVG Support](https://wordpress.org/plugins/svg-support/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/svg-support/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/svg-support/)
 * [Active Topics](https://wordpress.org/support/plugin/svg-support/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/svg-support/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/svg-support/reviews/)

 * 17 replies
 * 4 participants
 * Last reply from: [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * Last activity: [8 years, 1 month ago](https://wordpress.org/support/topic/call-inline-function-via-js/page/2/#post-10194893)
 * Status: resolved