23242 0 true 2008-07-02T17:12:43+01:00 25129 31708 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 14 2706 resolved defect events 2010-02-09T11:13:24+00:00 22206 elado Stickman Aaron Newton http://mootools.lighthouseapp.com/projects/2706/tickets/186 MooTools-More I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6: @@@ javascript Asset.css( 'js/mocha/css/mocha.css', { onload:function() { alert('Asset loaded'); } } ); @@@ However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP). As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari. I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6: @@@ javascript Asset.css( 'js/mocha/css/mocha.css', { onload:function() { alert('Asset loaded'); } } ); @@@ However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP). As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari. <div><p> I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6: </p> <pre><code class="javascript">Asset.css( 'js/mocha/css/mocha.css', { onload:function() { alert('Asset loaded'); } } ); </code></pre> <p> However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP). </p><p> As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari. </p></div> 4325 0 I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6: @@@ javascript Asset.css( 'js/mocha/css/mocha.css', { onload:function() { alert('Asset loaded'); } } ); @@@ However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP). As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari. <div><p> I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6: </p> <pre><code class="javascript">Asset.css( 'js/mocha/css/mocha.css', { onload:function() { alert('Asset loaded'); } } ); </code></pre> <p> However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP). </p><p> As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari. </p></div> false 2008-07-02T17:12:43+01:00 25129 --- {} 1634 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 new 1.2release defect events plugins 2008-07-02T17:12:43+01:00 25129 Stickman Stickman Valerio http://mootools.lighthouseapp.com/projects/2706/tickets/186 2.0 4325 0 I've created an interim fix for this. It's not perfect because, since it uses XHR, it won't load CSS from a third-party domain. But it works for my purposes and I thought others might find it useful until a proper fix is implemented. Simply replace the Assets.css function definition with this: @@@ javascript css: function(source, properties){ // Create a style element instead of a link element var style_node = new Element('style', $merge({ 'media': 'screen', 'type': 'text/css' }, properties)).inject(document.head); // Not sure why this is needed, but it is style_node.onload = properties.onload; delete properties.onload; // Fetch CSS using XHR var request = new Request ( { method: 'get', url: source, style_node:style_node, onSuccess:function( css_text ){ // Set the CSS // From http://yuiblog.com/blog/2007/06/07/style/ if (this.styleSheet) { this.styleSheet.cssText = css_text; } else { this.appendChild(document.createTextNode(css_text)); } this.onload(); }.bind( style_node ) } ); request.send(); return style_node; }, @@@ <div><p> I've created an interim fix for this. It's not perfect because, since it uses XHR, it won't load CSS from a third-party domain. But it works for my purposes and I thought others might find it useful until a proper fix is implemented. </p><p> Simply replace the Assets.css function definition with this: </p> <pre><code class="javascript">css: function(source, properties){ // Create a style element instead of a link element var style_node = new Element('style', $merge({ 'media': 'screen', 'type': 'text/css' }, properties)).inject(document.head); // Not sure why this is needed, but it is style_node.onload = properties.onload; delete properties.onload; // Fetch CSS using XHR var request = new Request ( { method: 'get', url: source, style_node:style_node, onSuccess:function( css_text ){ // Set the CSS // From <a href="http://yuiblog.com/blog/2007/06/07/style/">http://yuiblog.com/blog/2007/06/...</a> if (this.styleSheet) { this.styleSheet.cssText = css_text; } else { this.appendChild(document.createTextNode(css_text)); } this.onload(); }.bind( style_node ) } ); request.send(); return style_node; }, </code></pre></div> false 2008-07-03T10:34:14+01:00 25129 --- {} 1634 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 new 1.2release defect events plugins 2008-07-03T10:34:14+01:00 25129 Stickman Stickman Valerio http://mootools.lighthouseapp.com/projects/2706/tickets/186 2.0 23242 0 false 2009-02-19T00:25:43+00:00 25129 --- :tag: 1.2release defect events plugins :assigned_user: 4325 :milestone: 1634 31708 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 new defect events 2009-02-19T00:25:45+00:00 23242 Aaron Newton Stickman Aaron Newton http://mootools.lighthouseapp.com/projects/2706/tickets/186 MooTools-More 23242 0 We don't currently support onLoad for Asset.css. Do we plan to? <div><p>We don't currently support onLoad for Asset.css. Do we plan to?</p></div> false 2010-02-08T15:18:53+00:00 25129 --- :state: new 31708 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 open defect events 2010-02-08T15:18:54+00:00 32379 fakedarren Stickman Aaron Newton http://mootools.lighthouseapp.com/projects/2706/tickets/186 MooTools-More 23242 0 Sorry it took so long to get to this ticket; -more tickets really belong in the dedicated MooTools More Lighthouse: https://mootools.lighthouseapp.com/projects/24057-mootoolsmore fixed for 1.2.4.4 <div><p>Sorry it took so long to get to this ticket; -more tickets really belong in the dedicated MooTools More Lighthouse: <a href= "https://mootools.lighthouseapp.com/projects/24057-mootoolsmore">https://mootools.lighthouseapp.com/projects/24057-mootoolsmore</a></p> <p>fixed for 1.2.4.4</p></div> true 2010-02-09T09:24:47+00:00 25129 --- :state: open 31708 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 resolved defect events 2010-02-09T09:24:50+00:00 23242 Aaron Newton Stickman Aaron Newton http://mootools.lighthouseapp.com/projects/2706/tickets/186 MooTools-More 23242 0 Does the fix support cross domain urls? If not, please consider using this: http://nb.io/hacks/csshttprequest <div><p>Does the fix support cross domain urls?</p> <p>If not, please consider using this:<br> <a href= "http://nb.io/hacks/csshttprequest">http://nb.io/hacks/csshttprequest</a></p></div> true 2010-02-09T11:13:24+00:00 25129 --- {} 31708 186 asset-css-onload-event-does-not-fire-in-ff3-safari-opera 0 2706 resolved defect events 2010-02-09T11:13:24+00:00 22206 elado Stickman Aaron Newton http://mootools.lighthouseapp.com/projects/2706/tickets/186 MooTools-More