jQuery code snippet not working on page load

Question

A jQuery code snippet isn't working upon page load. It should replace 'frame--layout-vertical' with 'frame--layout-horizontal' and padding-bottom: 56.25% with padding-bottom: 100% when the screen width is greater than 641. By default, its frame--layout-vertical and padding-bottom: 56.25% (given the html below).

Its working perfectly when I resize the screen a bit after page-load. 'load' isn't working.

Here is the jQuery:

<script type="text/javascript">


        $(window).on('load, resize', function frame() {
            var viewportWidth = $(window).width();
            if (viewportWidth < 641) {
                $(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
                $(".image").css({'padding-bottom' : ''});
                $(".image").css({'padding-bottom' : '56.25%'});
            } else {
                $(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
                $(".image").css({'padding-bottom' : ''});
                $(".image").css({'padding-bottom': '100%'}); 
            }
        });



</script>


<div class="frame frame--policy frame--layout-vertical">
    <div class="frame__hover-area">
        <div class="frame__main-content">
            <div class="frame__image-wrapper">
                <div class="image image--placeholder frame__image wow fadeIn animated" data-wow-duration="1s" data-wow-delay="0s" style="padding-bottom: 56.25%; visibility: visible; animation-duration: 1s; animation-delay: 0s; animation-name: fadeIn;">
                    <img class="image__inner" src="http://redspark/upload/content/1/2017/03/11-58bd7aaf35385_thumbnail.jpg" role="presentation">
                    </div>
                </div>
                <div class="frame__content">
                    <span>
                        <a class="section-button section-button--policy" href="/content/blog/category/9/" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Sex</a>
                        <a class="article-component__link" href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html">
                            <h2 class="headline headline--article">7 Vegetarian Recipes That Are Better in a Bowl</h2>
                        </a>
                        <div class="byline">
                            <a class="author-link" href="">author</a>
                            <time class="byline__date" datetime="2017-03-11T04:31:06.000Z" title="2017-03-11 04:31">15 days ago</time>
                        </div>
                    </span>
                </div>
                <a href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html" class="frame__main-content__cover-link"></a>
            </div>
            <div class="frame__border"></div>
            <div class="frame__border frame__border--hover"></div>
        </div>
    </div>

EDIT: When I am using a auto load pagination. The my jQuery code isn't working since the browser isn't loaded. Can you please give me a suggestion? How can I call jQuery code with auto pagination?

Here is the autoloading snippet.

<script language="Javascript" type="text/javascript">

    $(function () {

        $('div.sponsor-articles.sponsor-section').infinitescroll({
            debug: true,
            navSelector: 'div.appPaginatorContainer', // selector for the paged navigation
            nextSelector: 'div.appPaginatorContainer span.next a', // selector for the NEXT link (to page 2)
            itemSelector: 'div.sponsor-articles div.frame', // selector for all items you'll retrieve
            bufferPx: 40,
            debug:true,
                    columnWidth: function (containerWidth) {
                        return containerWidth / 5;
                    },
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/6RMhx.gif',
                msgText: 'Loading more posts'
            }

        });


    });

</script>

Did you ever look into media queries? - You may achieve your goal in a much simpler way: developer.mozilla.org/en-US/docs/Web/CSS/%40media — LcSalazar
– LcSalazar, Commented Mar 22, 2017 at 14:00

Fan Yer · Accepted Answer · 2017-03-22 13:59:09Z

3

You write wrong

$(window).on('load resize', function frame() {})

there should be no ,

answered Mar 22, 2017 at 13:59

Fan Yer

3914 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anay Bose Over a year ago

I have added some extra info in my edits. Please take a look.

spirift · Accepted Answer · 2017-03-22 14:00:45Z

0

You can use the document ready pattern. EDIT: Added an initial call for page loaded.

function frame() {
  var viewportWidth = $(window).width();
  if (viewportWidth < 641) {
      $(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
      $(".image").css({'padding-bottom' : ''});
      $(".image").css({'padding-bottom' : '56.25%'});
  } else {
      $(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
      $(".image").css({'padding-bottom' : ''});
      $(".image").css({'padding-bottom': '100%'}); 
  }

$( document ).ready(function() {
  frame();
  $(window).on('resize', frame);
});

edited Mar 22, 2017 at 14:00

answered Mar 22, 2017 at 13:58

spirift

3,0721 gold badge16 silver badges20 bronze badges

1 Comment

spirift Over a year ago

@Satpal Just being polite

Collectives™ on Stack Overflow

jQuery code snippet not working on page load

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related