3 Replies Latest reply on Apr 12, 2017 6:50 AM by Quinni

    Widget Load / Script run  issue on responsive page

    Quinni Level 1

      On the website https://blurrybox.com i have 2 counters running.

      My issue is - if you scale responsive and you start below 1440px width you see at the beginning a countdown in 4 lines.

       

      Now when you go to full page width you should see a different counter, one in line with animated circles.

      The Problem is that they are not shown until you reload the page.

       

      So the main issue is that the script is not running propperly at breakpoints

       

      I already have with " !important " overwritten the CSS as the page also is not loading the CSS correct inside the Widget.

      Question: Is there a solution that on page with > 1440 px the scripts of Circle reloads?

       

      Nachricht geändert durch Markus Quintus: Formatting text

        • 1. Re: Widget Load / Script run  issue on responsive page
          Quinni Level 1

          I created a really dirty trick. DONT TAKE THAT AS SOLUTION but for anyone having similar issues: in the <head> add:

           

          <script type="text/javascript">

           

            var oldBrowserWidth = -1;

           

            function getWidth() {

             if (self.innerWidth) {

            return self.innerWidth;

             }

             if (document.documentElement && document.documentElement.clientWidth) {

            return document.documentElement.clientWidth;

             }

             if (document.body) {

            return document.body.clientWidth;

             }

                return 0;

            }

             function checkBrowserWidth()

            {

            var browserWidth = getWidth();

            if (browserWidth == 0) {

            return;

            }

            if (oldBrowserWidth > 0 && oldBrowserWidth < 1440 && browserWidth >= 1440) {

            window.RT = setTimeout(function()

            {

            window.location.reload(false);

            }, 1);

            }

            oldBrowserWidth = browserWidth;

            }     </script>

           

           

          now how to add the onresize to the <body> tag? Muse doesnt allow. And when editing this file with Dreamweaver i get the message afterwads that content is out of cahce bla bla.. and it wont work.

           

          So create and add for upload the doit.php and endit.php.

           

          doit.php

           

          <?php

          $return = array('changed' => false);

          //INSERT_POINT

          include 'endit.php';

          function endswith($string, $test) {

              $strlen = strlen($string);

              $testlen = strlen($test);

              if ($testlen > $strlen) return false;

              return substr_compare($string, $test, $strlen - $testlen, $testlen) === 0;

          }

          function isSite($fileName) {

              return endsWith($fileName, '.html');

          }

          $files = scandir('../');

          if ($files === false) {

              echo json_encode($return);

              exit();

          }

          $sites = array_filter($files,"isSite");

          foreach ($sites as $fileName) {

          if ($fileName==="index.html"){

            $filecontent = str_replace('<body', '<body onresize="checkBrowserWidth()"', $filecontent);

            }

            file_put_contents('../' . $fileName, $filecontent);

          }

          $return['changed'] = true;

          finish();

          echo json_encode($return);

          exit();

          ?>

           

          endit.php

           

          <?php

          function finish() {

              $filecontent = file_get_contents('doit.php');

              $filecontent = str_replace('//INSERT_POINT', '//INSERT_POINT' . "\n" . 'echo json_encode($return); exit(); // delete me for next replace', $filecontent);

              file_put_contents('doit.php', $filecontent);

          }

          ?>

           

           

          so when done uplaod all stuff and call domain.com/assets/doit.php which add in plaintext the onresize.

           

          I wish Muse would give the option to add stuff to the <body> tag.

          • 2. Re: Widget Load / Script run  issue on responsive page
            Quinni Level 1

            A litte ADD: RATHER Creating a php file and rewrite, simply modify the

            sript once more:

                                          }

            • 3. Re: Widget Load / Script run  issue on responsive page
              Quinni Level 1

              NOW:

               

              <script type="text/javascript">

                var oldBrowserWidth = -1;

                function getWidth() {

                 if (self.innerWidth) {

                return self.innerWidth;

                 }

                 if (document.documentElement && document.documentElement.clientWidth) {

                return document.documentElement.clientWidth;

                 }

                 if (document.body) {

                return document.body.clientWidth;

                 } 

                 return 0;

                }

                function checkBrowserWidth()

                {

                var browserWidth = getWidth();

                if (browserWidth == 0) {

                return;

                }

                if (oldBrowserWidth > 0 && oldBrowserWidth < 1440 && browserWidth >= 1440) {

                window.RT = setTimeout(function()

                {

                window.location.reload(false);

                }, 1);

                }

                oldBrowserWidth = browserWidth;

                }

              window.onload = function() {

                                                             document.getElementsByTagName("body")[0].onresize = checkBrowserWidth;

                                             }

                  </script>

                                             }

              1 person found this helpful