CODEWITHSUNDEEP
jquerycsspageload
Steven Thate
Steven Thate

Reputation: 193

Retrieve and update CSS value after pageload

I feel like this deserves a straightforward answer, but I have not been able to find it, so I apologize if I have overlooked or have been unable to find any previous answers.

What I'm trying to accomplish: update an element's height relative to its fluid width.

What I have tried to do is grab the element's width, multiply it by my desired ratio to come up with the correct height for the element. I pass this to both (window).load and (window).resize so that the height is calculated after the page loads and as the window and element width changes (the elment has 100% width) the height of that element recalculates.

Here is my code:

var fn = ( function() {

    var player = $( '.rem_video_wrapper iframe[style]' ),
        w = player.css('width').slice(0,-2), // strip 'px'
        h = w * 0.6;

    player.css( 'height', h );

    // the following is for updating a <p> with current values
    // for troubleshooting purposes.
    var paragraph = $( '#var' );
    paragraph.text( w + ' (' + h + ')' );

});

$( window ).load( fn );
$( window ).resize( fn );

The problem I am running into is that when the page loads, w seems to have no initial value, so the element's height is not set to what it should be. However, when I resize the page it kicks in and the element begins to behave correctly.

How do I get my function to correctly fire after my page has completely loaded? I'm assuming my script is trying to run before it can even correctly get the target element's width.

I have tried $(document).ready(fn) and that doesn't work either.

I have only recently been throwing myself into jQuery, so I am comlpetely open to the possibility that I am either going about my code the entirely wrong way, or I may be asking the wrong question to begin with. Please enlighten me!

Thank you

EDIT:

Here is my relevant markup.

Note: This markup is generated by Embedder (Craft CMS plugin) and reEmbed by using the following line in my Craft CMS template file: {{ craft.embedder.embed (entry.youtube) }} where youtube is a field containing the url for the desired YouTube playlist.

<div id="rem_playlist0" class="rem_playlist rem_inline_list rem_playlist_default" style="width: 459px; height: 399px;">

    <div class="rem_playlist_toolbar" style="display: block;">
        <span class="rem_playlist_title"></span>
        <span class="rem_playlist_actions">
            <span class="rem_playlist_skip_control previous disabled"></span>
            <span class="rem_playlist_info">
                <span class="rem_playlist_current">1</span>
                <span class="rem_playlist_divider">/</span>
                <span class="rem_playlist_total">27</span>
            </span>
            <span class="rem_playlist_skip_control next"></span>
            <a class="rem_toggle_inline_playlist" href="#">PLAYLIST</a>
        </span>
    </div>

    <div class="rem_video_wrapper">
        <iframe style="position: relative; width: 459px; height: 275.4px;" src="" allowfullscreen="" frameborder="0" data-rem-id="0"></iframe>
    </div>

    <ul class="rem_playlist_ul" style="margin-top: 25px; z-index: 10; display: none;">
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
    </ul>

</div>

Upvotes: 3

Views: 84

Answers (1)

Todd
Todd

Reputation: 768

You can fix this issue by removing the inline styling of your iframe. This will allow you to retrieve the height and width and set them dynamically with the function you have created.

Try this JSFiddle

JQuery

// A function to rezise the height of <iframe> based on its width
function sizeIt() {
  var player = $('.rem_video_wrapper > iframe'),
  w = player.width(),
  h = w * 0.6;

  player.height(h);
}

//Remove inline styling and call sizeIt() for inital sizing
$(function (){
    $('.rem_video_wrapper > iframe').removeAttr('style');
    sizeIt();
});

//call sizeIt() on page resize
$(window).on('resize', function() {
  sizeIt();
});

Upvotes: 2

Related Questions