Title: JQuery/JS generated CSS error Last modified: August 21, 2016 --- # JQuery/JS generated CSS error * Resolved [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 10 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/) * Hi, * Just installed your plugin but a couple of images are appearing as broken. * The code for the images use JS, JQuery and the CSS is created within the the js code as follows: * ``` if(!has_filmstrip) { //Add navigation buttons $('').addClass('nav-next').attr('src',img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({ 'position':'absolute', 'zIndex':'1100', 'cursor':'pointer', 'top':((opts.panel_height-22)/2)+'px', 'right':'10px', 'display':'none' }).click(showNextItem); $('').addClass('nav-prev').attr('src',img_path+opts.nav_theme+'/prev.png').appendTo(j_gallery).css({ 'position':'absolute', 'zIndex':'1100', 'cursor':'pointer', 'top':((opts.panel_height-22)/2)+'px', 'left':'10px', 'display':'none' }).click(showPrevItem); $('').addClass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-next.png').appendTo(j_gallery).css({ 'position':'absolute', 'zIndex':'1099', 'top':((opts.panel_height-22)/2)-10+'px', 'right':'0', 'display':'none' }); $('').addClass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-prev.png').appendTo(j_gallery).css({ 'position':'absolute', 'zIndex':'1099', 'top':((opts.panel_height-22)/2)-10+'px', 'left':'0', 'display':'none' }); ``` * The next.png and prev.png appear as broken images and when you inspect the element: * ``` ``` * and * ``` ``` * So the CSS is not being translated correctly by the plugin. * When I de-activate the plugin I get the correct CSS for these images: * ``` ``` * ``` ``` * Please can you provide a fix for this asap. Otherwise I cannot use your excellent plugin. * Many Thanks Indy * [http://wordpress.org/plugins/dependency-minification/](http://wordpress.org/plugins/dependency-minification/) Viewing 13 replies - 1 through 13 (of 13 total) * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 10 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063406) * Please share a URL for where the issue can be seen. * It seems the `img_path` variable is not getting set when the plugin is enabled; it is supposed to be `http://www.mysite.com/wp-content/themes/hybrid-theme/library/ js/themes/` but is `undefined` when the plugin is enabled. So I need to see the script which defines this variable to see why it is not getting set. * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 10 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063421) * Hi Weston, * Thanks for your reply. * Is there an email I can contact you on? I can then send you the script and URL to the site. * Many Thanks Indy * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 10 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063471) * Hi Weston, * Still awaiting a reply… * Indy * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 10 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063473) * Um, I’m sorry but it’s only been 12 hours since your last message, not to mention that today is Sunday. Remember this is a free plugin that we’re donating back to the community, so there is no guaranteed turnaround time for bug fixes. You can send any private details to [wordpress-plugins@x-team.com](https://wordpress.org/support/topic/jqueryjs-generated-css-error/wordpress-plugins@x-team.com?output_format=md) * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063528) * Hi Weston, * I appreciate your reply and time to help out on this. * I will send you an email with the script and url. * Regards, Indy * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063572) * [@indyparker](https://wordpress.org/support/users/indyparker/), I think that your issue may have been reported here: [https://github.com/x-team/wp-dependency-minification/issues/28](https://github.com/x-team/wp-dependency-minification/issues/28) * And fixed in [https://github.com/x-team/wp-dependency-minification/pull/29](https://github.com/x-team/wp-dependency-minification/pull/29) * Would you be able to check out the fix from [@lkraav](https://wordpress.org/support/users/lkraav/) and see if it resolves your issue? Here’s the direct link to his fork: [https://github.com/lkraav/wp-dependency-minification/archive/master.zip](https://github.com/lkraav/wp-dependency-minification/archive/master.zip) * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063590) * Hi Weston, * Thanks for your reply. I have tried the above code from @Ikraav but it did not fix the issue. Please see my email reply with screen shots. * Thanks Indy * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063620) * Hi Weston, * Is there a fix to this please? * Regards, Indi * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063621) * [@indyparker](https://wordpress.org/support/users/indyparker/) I just released version 0.9.5, which includes the fix for `wp_localize_script`, that [@lkraav](https://wordpress.org/support/users/lkraav/) reported. You said this wasn’t the problem, although it still fixes an important bug. * To help debug your specific problem, you can drop the following code into your theme’s functions.php or in a new mu-plugin: * ``` add_filter( 'dependency_minification_disabled', isset( $_GET['dependency_minification_enabled'] ) ? '__return_false' : '__return_true' ); ``` * Once you have done so, you can activate the plugin but it will not have any effect on the frontend of the site unless you request the URL with `?dependency_minification_enabled =1`. I’ll then be able to append this query string to the URL you shared via email. * Please also upgrade to 0.9.5 before getting back to me with the note the above code has been added to your site. * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063625) * Hi Weston, * The plugin has been enabled in fact as 0.9.6 and I have added the code to functions. php * I tried the append and it gave the broken images on the slider at the top which is the issue. * Thanks Indi * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063626) * OK, thanks. I see the problem. As you quoted above, the JS code that sets the image srcs is: * ``` $('').addClass('nav-next').attr('src',img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({ 'position':'absolute', 'zIndex':'1100', 'cursor':'pointer', 'top':((opts.panel_height-22)/2)+'px', 'right':'10px', 'display':'none' }).click(showNextItem); ``` * And three more instances like it. * You can see that it is attempting to set the image src to: `img_path+opts.nav_theme +'/next.png'`. Where is the `img_path` being set? As I suspected, then the JS initializes it looks at the DOM to find the script’s own location: * ``` $('script').each(function(i){ var s = $(this); if(s.attr('src') && s.attr('src').match(/jquery\.galleryview/)){ img_path = s.attr('src').split('jquery.galleryview')[0]+'themes/'; } }); ``` * Since the `jquery.galleryview-1.1.js` file no longer loaded by itself but is concatenated with other JS files, the above logic to find the `img_path` fails. * So the quick solution is to exclude the script from getting minified. I believe you are registering the script with the handle `galleryscript2`, so you can add the following code to your functions.php to prevent that script from being included in a minified dependency bundle: * ``` function _exlude_galleryscript2_from_depmin( $is_excluded, $handle, $src ) { if ( 'galleryscript2' === $handle ) { $is_excluded = true; } return $is_excluded; } add_filter( 'dependency_minification_excluded', '_exlude_galleryscript2_from_depmin' , 10, 3); ``` * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063627) * We have an open issue to make a nice UI in an admin page for adding these exclusion rules: [https://github.com/x-team/wp-dependency-minification/issues/4](https://github.com/x-team/wp-dependency-minification/issues/4) * Thread Starter [indyparker](https://wordpress.org/support/users/indyparker/) * (@indyparker) * [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063628) * Hi Weston, * Thanks for the fix to this and your patience to find out the cause. I have implemented the changes and all working! * And yes, it will be good to have a UI for excluding scripts. * Good job! * Indy Viewing 13 replies - 1 through 13 (of 13 total) The topic ‘JQuery/JS generated CSS error’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/dependency-minification.svg) * [Dependency Minification](https://wordpress.org/plugins/dependency-minification/) * [Support Threads](https://wordpress.org/support/plugin/dependency-minification/) * [Active Topics](https://wordpress.org/support/plugin/dependency-minification/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/dependency-minification/unresolved/) * [Reviews](https://wordpress.org/support/plugin/dependency-minification/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [images](https://wordpress.org/support/topic-tag/images/) * [javascript](https://wordpress.org/support/topic-tag/javascript/) * 13 replies * 2 participants * Last reply from: [indyparker](https://wordpress.org/support/users/indyparker/) * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/jqueryjs-generated-css-error/#post-4063628) * Status: resolved