funkhaus / fittoparent Goto Github PK

View Code? Open in Web Editor NEW

11.0 11.0 1.0 75 KB

A tool that will resize a DOM element to fit its parent container while maintaining original aspect ratio.

License: MIT License

JavaScript 100.00%

fittoparent's People

Contributors

Stargazers

Watchers

Forkers

devsubhani

fittoparent's Issues

Is jspm needed?

Hey @selfagency , thought you could help with this. I've rolled the PR you made into the latest version, but not sure if we need the jspm declarations now that it's a registered module (I've never used jspm.)

Can you offer any insight here?

Error: fitToParent is not a function

I use this script for YouTube videos in Blogspot posts. I have used it in the past and it works fine.

However, using it now, I get the error.

Existing Old Usage that works:

jQuery 1.6
fitToParent.js version, unknown

Old Initialization Script

 jQuery('.post-body iframe').fitToParent();
 jQuery(window).resize(function(){ jQuery('.post-body iframe').fitToParent(); });

New Usage that does not work(error):

jQuery 3.3.1
fitToParent.js version, latest here on Github
CSS flexbox used
CSS width: calc() used on parent container

New Initialization Script

 jQuery('.youtube-video').fitToParent();
jQuery(window).resize(function(){ jQuery('.youtube-video').fitToParent(); });

If I use the old fitToParent.js with the new usage, it partially works. The iframe is resized, larger, but not 100% width of parent.

I can post the old fitToParent.js at request, it wasn't included to save space.

Iframes with the class "youtube-video" exists, and is visible in the DOM.

Code has `...ops` bugs now

This new version has introduced bugs, for some reason there are a few ...ops in here.

    const settings = {
        heightOffset: 0,
        widthOffset: 0,
        parentHeight: sizeParent.offsetHeight,
        parentWidth: sizeParent.offsetWidth,
        callback: null,
        ratio: null,
        upres: true,
        elHeight,
        elWidth,
        ...ops
    }

and:

            this.each(function(){
                fitToParent({ element: this, ...ops })
                return this
            })

Accidental console.log in dist version?

Hey, thanks so much for this useful plugin.

Really small issue - there's a stray console.log("new-version") possibly snuck into the dist version, but it's not in the src version.

Thanks! ❤️

Not enough info for fitToParent to calculate.

Using this code bellow

$('#iviFrame1').fitToParent();
$('#iviFrame2').fitToParent();
$(window).on('resize', function(){
	$('#iviFrame1').fitToParent();
	$('#iviFrame2').fitToParent();
});

Produce some error, here are the console log

fitToParent.min.js:1 Uncaught Error: Not enough info for fitToParent to calculate.
    at r (fitToParent.min.js:1)
    at HTMLIFrameElement.<anonymous> (fitToParent.min.js:1)
    at Function.each (jquery-2.1.4.js:2)
    at n.fn.init.each (jquery-2.1.4.js:2)
    at n.fn.init.a.fn.fitToParent (fitToParent.min.js:1)
    at HTMLDocument.<anonymous> (?p=8&o={7f377407-04cc-464e-ac78-17738486e94a}&v=1.7.5.8:554)
    at j (jquery-2.1.4.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.4.js:2)
    at Function.ready (jquery-2.1.4.js:2)
    at HTMLDocument.I (jquery-2.1.4.js:2)

Whats wrong?

funkhaus / fittoparent Goto Github PK

fittoparent's People

Contributors

Stargazers

Watchers

Forkers

fittoparent's Issues

Is jspm needed?

Error: fitToParent is not a function

Code has `...ops` bugs now

Accidental console.log in dist version?

Not enough info for fitToParent to calculate.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent