i have some code like
var innerPage = {
/* declare vars, cache selectors */
leftWidth : $("#episodes-nav").width(),
right : $("#episodes-right"),
theWindow : $(window),
heroImageHolder : $("#hero-image-holder"),
heroImage : $("#hero-image"),
whiteOverlay : $("#white-overlay"),
tilesContainer : $("#tiles-container"),
heroPercentToShow : 0.6,
// heroHolderWidth : this.heroImageHolder.width(),
// heroHolderHeight : this.heroImageHolder.height(),
heroImgRealW : null,
heroImgRealH : null,
/* init */
init : function(){
var that = this;
this.heroImage.on('load', function(){
// image loaded .. do something
that.heroImgRealW = this.naturalWidth;
that.heroImgRealH = this.naturalHeight;
that.fitHeroImage();
that.buildInnerBlocks();
});
},
fitHeroImage : function(){
var desiredWidthToFit = this.heroPercentToShow * this.heroNaturalW;
var scaleRatio = this.heroViewportWidth / desiredWidthToFit;
//trace(scaleRatio);
this.heroImage.width( this.heroImage.width() * scaleRatio );
var offsetSides = (600 -this.heroImage.width() ) / 2;
var offsetTop = (containerHeight -this.heroImage.height() ) / 2;
//trace("top"+offsetTop);
this.heroImage.css("left", offsetSides);
this.heroImage.css("top", offsetTop);
this.heroImage.height( this.heroImage.height() * scaleRatio );
},
/* destroy */
destroy : function(){
},
/* sizeChildren */
sizeChildren : function(){
this.right.width( this.theWindow.width() - this.leftWidth );
this.whiteOverlay.width( this.right.width() - this.heroImageHolder.width() +2000 );
this.tilesContainer.width( this.whiteOverlay.width() );
this.fitHeroImage();
//$("#tiles-container").empty();
}
}
when i set breakpoints on functions or inside of them, they don't get triggered (testing in chrome). How do i go around that?