staticboy
16 Aug 2007, 6:39 AM
I have a <div> as follows on my page:
<div id="djcs-view-article" style="visibility:hidden;">
...
</div>
Elsewhere on the page is a Grid upon which I have set a rowclick listener (the grid is a list of news headlines). The handler is set to populate a second data.Store with the results of a JSON response and to fadeIn() the above <div> (which has been populated with the contents of a news article). The <div> then has a click handler which re-hides it by calling fadeOut().
This all works perfectly in Firefox, but for some reason the fade-in and fade-out effect only accur once in Internet Explorer 7, the first time a headline is clicked and when that article is then closed. Subsequent article views result in the <div> popping in and out of existence instantly with no fade effect?
No errors are being generated in either FireBug or IE. Has anyone else come across this?
init : function() {
// ...
viewArticle = Ext.get('djcs-view-article');
viewArticle.on('click', this.hideArticle, this);
// ...
});
getArticle : function(grid, rowIndex, e) {
// ...
// Align and resize article popup with resizeable grid
viewArticle.alignTo('djcs-article-grid', 'tl-tl', [10, 10]);
var viewArticle_w = Ext.get('djcs-article-grid').getWidth();
var viewArticle_h = Ext.get('djcs-article-grid').getHeight();
viewArticle.setWidth(viewArticle_w);
viewArticle.setHeight(viewArticle_h);
viewArticle.fadeIn({
duration: .250,
useDisplay: false
});
var refs = //... REMOVED FOR SECURITY
ds_article.load({
params: {references: refs}
});
},
hideArticle : function() {
viewArticle.fadeOut({
duration: .500,
useDisplay: false
});
}
<div id="djcs-view-article" style="visibility:hidden;">
...
</div>
Elsewhere on the page is a Grid upon which I have set a rowclick listener (the grid is a list of news headlines). The handler is set to populate a second data.Store with the results of a JSON response and to fadeIn() the above <div> (which has been populated with the contents of a news article). The <div> then has a click handler which re-hides it by calling fadeOut().
This all works perfectly in Firefox, but for some reason the fade-in and fade-out effect only accur once in Internet Explorer 7, the first time a headline is clicked and when that article is then closed. Subsequent article views result in the <div> popping in and out of existence instantly with no fade effect?
No errors are being generated in either FireBug or IE. Has anyone else come across this?
init : function() {
// ...
viewArticle = Ext.get('djcs-view-article');
viewArticle.on('click', this.hideArticle, this);
// ...
});
getArticle : function(grid, rowIndex, e) {
// ...
// Align and resize article popup with resizeable grid
viewArticle.alignTo('djcs-article-grid', 'tl-tl', [10, 10]);
var viewArticle_w = Ext.get('djcs-article-grid').getWidth();
var viewArticle_h = Ext.get('djcs-article-grid').getHeight();
viewArticle.setWidth(viewArticle_w);
viewArticle.setHeight(viewArticle_h);
viewArticle.fadeIn({
duration: .250,
useDisplay: false
});
var refs = //... REMOVED FOR SECURITY
ds_article.load({
params: {references: refs}
});
},
hideArticle : function() {
viewArticle.fadeOut({
duration: .500,
useDisplay: false
});
}