We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
To Responive 馃憤
Add this :
Add To Line 12 $(this).css({ width:($this.width()/($this.parent().width()/100))+"%", height:($this.height()/($this.parent().height()/100))+"%",
})
Edit : 1)-------------------- image.onload = function () { var width = image.width, height = image.height; cb(width, height);
data.imageWidth=width // add width to data data.imageHeight=height // add height to data };
2)----------------------
settings: $.extend({ width: $this.width(), height: $this.height(), imageWidth:"", //add imageHeight:"",//add totalFrames: false, columns: false, fps: 12,
complete: function () {}, loop: false, autoplay: true }, options),
3)------------------------
var frame = function (frameNumber) { // frame: number of the frame to be displayed return this.each(function () { if ($(this).data('animateSprite') !== undefined) { var $this = $(this), data = $this.data('animateSprite'), row = Math.floor(frameNumber / data.settings.columns), column = frameNumber % data.settings.columns; var x_percentage_width = (( data.imageWidth / data.settings.width) * 100) var y_percentage_height = ((data.imageHeight / data.settings.height) * 100) var xPosition=((data.settings.width * column)/(data.imageWidth-data.settings.width))*100 var yPosition=((data.settings.height * row)/(data.imageHeight-data.settings.height))*100 $this.css('background-size', (x_percentage_width) + '% ' + (y_percentage_height)+ '%'); $this.css('background-position', (xPosition) + '% ' + (yPosition) + '%'); } }); };
The text was updated successfully, but these errors were encountered:
Hi @alghraibeh , I tried another way. To get the width and height for the element when the page is resized.
data = $this.data('animateSprite'), row = Math.floor(frameNumber / data.settings.columns), column = frameNumber % data.settings.columns; // Get width and height when its resized - NEW CODE. $(window).resize(function() { data.settings.width = $this.width(); data.settings.height = $this.height(); });
And by using some CSS to set position to absolute for the element and maybe use max-width for container.
Sorry, something went wrong.
No branches or pull requests
To Responive 馃憤
Add this :
Add To Line 12
$(this).css({
width:($this.width()/($this.parent().width()/100))+"%",
height:($this.height()/($this.parent().height()/100))+"%",
Edit :
1)--------------------
image.onload = function () {
var width = image.width,
height = image.height;
cb(width, height);
2)----------------------
settings: $.extend({
width: $this.width(),
height: $this.height(),
imageWidth:"", //add
imageHeight:"",//add
totalFrames: false,
columns: false,
fps: 12,
3)------------------------
The text was updated successfully, but these errors were encountered: