If/else statement not working for page load

Question

Trying to get the portfolio section of the page to display a data-filter on page load while still maintaining the menu functionality.

Tried this if/else statement it's not working. Where am I going wrong?

if(document.getElementById("portfolio")){
 var $grid = $(".grid").isotope ({
  if(document.ready){
   filter = ".all"
  } else {
      itemSelector: ".all",
      percentPosition: true,
      masonry: {
      columnWidth: ".all"
   }
 })
};

I am editing a template. This is the original JS:

 $('.filters ul li').click(function(){
    $('.filters ul li').removeClass('active');
    $(this).addClass('active');

    var data = $(this).attr('data-filter');
    $grid.isotope({
      filter: data
    })
  });

  if(document.getElementById("portfolio")){
        var $grid = $(".grid").isotope({
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
        })
  };

And the section of html

                   <div class="filters">
                    <ul>
                        <li class="active" data- 
                        filter=".all">All</li>
                        <li data-filter=".web">Web</li>
                        <li data-filter=".print">Print</li>
                        <li data- 
                     filter=".interactive">Interactive</li>
                    </ul>
                </div>
                <div class="filters-content grid">
                    <div class="row print all portfolio">

                         <div class="col-lg-7 col-md-7 col-sm-12 col- 
                          xs-12">
                            <img src="img/Portfolio/SP_ads.jpg" 
                            style="width:100%;">
                            </div>
                        <div class="col-lg-5 col-md-5 col-sm-12 col- 
                         xs-12 portfolio-text textright order-md- 
                          first">
                            <h3>Print Advertisements</h3>
                            <p>InDesign</p>
                            <h6>Full&nbsp;page magazine 
                             advertisements for a luxury petite 
                           athletic fashion&nbsp;scompany.</h6>
                            </div>
                    </div>

Answer 1

Discovered the solution for the data-filter page load:

if(document.getElementById("portfolio")){
        var $grid = $(".grid").isotope({
          itemSelector: ".all",
            **filter: ".web",**
          percentPosition: true,
          masonry: {
            columnWidth: ".all",
          }
        })
  };

Answer 2

document.ready isn't a thing. Try if(document.readyState === "complete"){...} instead.

see: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Or, if you want to use jQuery's ready function, you can leave your code as is and add this line somewhere:

$(()=>document.ready = true)

https://learn.jquery.com/using-jquery-core/document-ready/

edit: I just realized what you were doing after seeing someone point it out in the comments.. You need to create the options object before instantiating the plugin.

if(document.getElementById("portfolio")){
   var options = {};
   if(document.readyState === "complete"){
      options.filter = '.all';
   }else{
      options.itemSelector = ".all";
      options.percentPosition = true;
      options.masonry = {columnWidth: ".all"};
   }
   var $grid = $(".grid").isotope(options);
};

Answer 3

Please use document.readywith complete. Please follow this code

        if (document.getElementById("portfolio")) {
            var $grid = $(".grid").isotope({

                if(event.target.readyState === 'interactive') {
                    itemSelector: ".all",
                    percentPosition: true,
                    masonry: {
                        columnWidth: ".all"
        }
                }else if (event.target.readyState === 'complete') {
                    filter = ".all"
                }
        });
        }