Support » Plugin: Dependency Minification » JQuery/JS generated CSS error

  • Resolved indyparker

    (@indyparker)


    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
    				$('<img />').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);
    				$('<img />').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);
    
    				$('<img />').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'
    				});
    
    				$('<img />').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:

    <img class="nav-next" src="undefinedlight/next.png" style="position: absolute; cursor: pointer; top: 344px; right: 58px;">

    and

    <img class="nav-prev" src="undefinedlight/prev.png" style="position: absolute; cursor: pointer; top: 344px; left: 58px;">

    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:

    <img class="nav-prev" src="http://www.mysite.com/wp-content/themes/hybrid-theme/library/js/themes/light/prev.png" style="position: absolute; cursor: pointer; top: 344px; left: 58px;">
    <img class="nav-next" src="http://www.mysite.com/wp-content/themes/hybrid-theme/library/js/themes/light/next.png" style="position: absolute; cursor: pointer; top: 344px; right: 58px;">

    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/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    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.

    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

    Hi Weston,

    Still awaiting a reply…

    Indy

    Plugin Author Weston Ruter

    (@westonruter)

    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

    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

    (@westonruter)

    @indyparker, I think that your issue may have been reported here: https://github.com/x-team/wp-dependency-minification/issues/28

    And fixed in https://github.com/x-team/wp-dependency-minification/pull/29

    Would you be able to check out the fix from @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

    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

    Hi Weston,

    Is there a fix to this please?

    Regards,
    Indi

    Plugin Author Weston Ruter

    (@westonruter)

    @indyparker I just released version 0.9.5, which includes the fix for wp_localize_script, that @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.

    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

    (@westonruter)

    OK, thanks. I see the problem. As you quoted above, the JS code that sets the image srcs is:

    $('<img />').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

    (@westonruter)

    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

    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.