Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Feedback
  3. Add page loaded flag

Add page loaded flag

Scheduled Pinned Locked Moved Feedback
11 Posts 3 Posters 865 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    ernestobellei
    wrote on last edited by
    #1

    Hi,

    It would be useful to have a flag (es a class / meta 'is-loaded') when ajax / DOM loading ends.

    Thanks you,
    Ernesto

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @ernestobellei

      sure. I will check with Armin about that.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • arminunruhA Offline
        arminunruhA Offline
        arminunruh
        Global Moderator
        wrote on last edited by
        #3

        You mean a html class that is added?

        Maybe the body gets a html class: loading, loaded

        Do you want to style your website according to loading?

        E 1 Reply Last reply
        2
        • arminunruhA arminunruh

          You mean a html class that is added?

          Maybe the body gets a html class: loading, loaded

          Do you want to style your website according to loading?

          E Offline
          E Offline
          ernestobellei
          wrote on last edited by ernestobellei
          #4

          Hi, @arminunruh

          Sorry for the delayed answer but I missed the notification :))

          I wrote a marquee shortcode for WordPress and I would like to init it as soon as the DOM is loaded (even using Ajax). By now I’m using a mutation observer that listens on DOM add/change events and detect whether the shortcode HTML has been loaded, but checking for a class would be a lighter and cleaner solution.

          Having a .loaded class (or data-attribute) would be useful to avoid double check for mobile and desktop layout gridder too.

          Best,
          Ernesto

          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by
            #5

            Sure, good point!

            E 1 Reply Last reply
            2
            • arminunruhA arminunruh

              Sure, good point!

              E Offline
              E Offline
              ernestobellei
              wrote on last edited by
              #6

              Hi @arminunruh and @mariusjopen,

              Any chance to have this class implemented?
              p.s. thanks for the shortcode fix :))

              Best,
              Ernesto

              1 Reply Last reply
              0
              • mariusjopenM Offline
                mariusjopenM Offline
                mariusjopen
                Global Moderator
                wrote on last edited by
                #7

                Hi @ernestobellei
                I will check back with Armin.

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  Maybe because #grid has overflow:hidden; and that is why it doesn't work.

                  http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

                  in your custom css write:

                  #grid{
                  overflow: auto;
                  }
                  
                  E 1 Reply Last reply
                  0
                  • arminunruhA arminunruh

                    Maybe because #grid has overflow:hidden; and that is why it doesn't work.

                    http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

                    in your custom css write:

                    #grid{
                    overflow: auto;
                    }
                    
                    E Offline
                    E Offline
                    ernestobellei
                    wrote on last edited by
                    #9

                    Hi @arminunruh ,

                    I don't understand your answer :))
                    Is it about the loaded class?

                    Best,
                    Ernesto

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      Hi @ernestobellei
                      I will check back with Armin.

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      • arminunruhA Offline
                        arminunruhA Offline
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #11

                        Whoops,

                        Sorry.

                        I think you are looking for something like:

                        <script>
                        window.addEventListener('popstate', function(){
                        jQuery('body').removeClass('page-loaded');
                        });
                        window.laytheme.on('newpageshown', function(){
                        jQuery('body').addClass('page-loaded');
                        });
                        </script>
                        

                        Add this to lay options -> Custom <head> content

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        I also code custom websites or custom Lay features.
                        💿 Email me here: 💿
                        info@laytheme.com

                        Before you post:
                        1. When using a WordPress Cache plugin, disable it or clear your cache.
                        2. Update Lay Theme and all Lay Theme Addons
                        3. Disable all Plugins
                        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                        This often solves issues you might run into

                        When you post:
                        1. Post a link to where the problem is
                        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                        Online Users
                        dmncnD
                        dmncn
                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                        laytheme.com
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Search