› › ›

Script doesn't run smoothly when several scripts embedded in html page.

coraliediatkinecoraliediatkine
edited August 2014 in JavaScript Mode

Hi

I have a web page with three scripts, one for large, one for medium and one for small devices that people can choose. The rendering is very jittery. The same page with only one script is perfect. Does anyone know if it can be improved or if the way the html code is written is just the problem?

You can check the result here : coraliediatkine.eu/VisualProcessing1.html and here coraliediatkine.eu/VisualProcessing1.html

I'm pasting the code of the page that has the 3 scripts. Thanks!

 <!DOCTYPE html>
    <html class="no-js" lang="en">
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />




<link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/overrides.css" />
<link rel= "stylesheet" href= "fonts/stylesheet.css"  type="text/css">

    <script src="js/vendor/modernizr.js"></script>



        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Coralie Diatkine | Visuals </title>

        <meta name="Generator" content="Processing" />
        <!-- - - - - - - - - - - - - - - - - - - - - 
        +
        +    Wondering how this works? 
        +
        +    Go to: http://processing.org/
        +    and: http://processingjs.org/
        +
        + - - - - - - - - - - - - - - - - - - - - -->
        <style type="text/css">
    a img { 
        border: 0px solid transparent;
    }

    }
    canvas { 
        display: block; 
        outline: 0px; 
        margin: 0em; 
        padding:0em;
    }
    #content1 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 342px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        #content2 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 634px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        #content3 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 950px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        </style>
        <!--[if lt IE 9]>
            <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
        <![endif]-->
        <script src="SiteWeb/Processing/ChangeTest_large/web-export/processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestlarge'; }
</script>

        <script src="SiteWeb/Processing/ChangeTest_medium/web-export/processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestmedium'; }
</script>
        <script src="SiteWeb/Processing/ChangeTest_small/web-export/processing.js" type="text/javascript"></script>
    <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestsmall'; }
</script>

    </head>
    <body>

       <nav class="top-bar" data-topbar>
    <ul class="title-area">

      <li class="name"> 
        <h1>
          <a class= "menubaraller" href="#">
            Coralie Diatkine
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
    </ul>

     <section class="top-bar-section"> 
     <ul class="left">

        <li><a class="menubaraller" href="/Biography.html" >About</a></li>
            <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
           <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
 <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
           <li><a class="menubaraller" href="/Music.html" >Music</a></li>
  <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
             <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
       <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>

                   </ul>
   </section>
</nav>



 <div class="row">
     <div class="large-12 columns">
        <div class="panel">


         <h5 class= "new">A Processing Study</h5> 


         <h6 class="worktitle">Change &nbsp; <a id="action1" href="javascript:void(0)" > <img src="/SiteWeb/icons/ico_square.svg" height="8" width="10"></a> &nbsp; <a id="action2" href="javascript:void(0)"> <img src="/SiteWeb/icons/ico_square.svg" height="10" width="12"></a>&nbsp; <a id="action3" href="javascript:void(0)" > <img src="/SiteWeb/icons/ico_square.svg" height="12" width="18"></a></h6>


        <div id= "showOrHideDiv1" style="display: none;">
<div id="content1">


                <canvas id="ChangeTestsmall" data-processing-sources="/SiteWeb/Processing/ChangeTest_small/web-export/ChangeTest.pde" width="342" height="211" >
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>
        <!--    <p id="description"></p>
            <p id="sources">Source code: <a class="contacts" href="ChangeTest.pde">ChangeTest</a> </p>
            <p>
            Built with <a class="contacts" href="http://processing.org" title="Processing">Processing</a>
            and <a class= "contacts" href="http://processingjs.org" title="Processing.js">Processing.js</a>
            </p>-->


<div id= "showOrHideDiv2"  style="display: none;">
<div id="content2">

<canvas id="ChangeTestmedium" data-processing-sources="/SiteWeb/Processing/ChangeTest_medium/web-export/ChangeTest.pde" width="634" height="391" >
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>


    <div id= "showOrHideDiv3" style="display: none;">
        <div id="content3">
            <canvas id="ChangeTestlarge" data-processing-sources="/SiteWeb/Processing/ChangeTest_large/web-export/ChangeTest.pde" width="950" height="587">
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>


  </div>  </div>  </div>

        <footer class="row">
<div class="large-12 columns">
<div class="footerpanel">

<div class="row">

<div class="large-3 columns">
<div class="subpanel">
<p class="NeueLite text-justify"> Coralie Diatkine <br> Musician, Sound Artist & Designer </p>

       </div>
        </div>

<div class="large-3 columns">
<div class="subpanel">


       <p class="NeueLite text-justify"> info [@] coraliediatkine [dot] eu <br> <a href="/ContactForm.html" class= "contacts">Write to me!</a>

       </div>
        </div>

<div class="large-3 columns">
<div class="subpanel">


       <p class="NeueLite text-justify"> 72 rue des Orteaux <br> 75020 Paris France </p>

       </div>
        </div>
        <div class="large-3 columns">
<div class="subpanel">


     <p class="NeueLite text-justify"> Copyright © 2014 Coralie Diatkine <br><a href="/Legal Notices.html" class= "contacts" target="_blank">Legal Notices & Credits </a>
 </p>

       </div>
        </div>
        </div>
        </div>
        </div>


  </footer>



    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

<script>
function generateFader(elem) {
    var t = null, goal, current = 0, inProgress = 0;
    if (!elem || elem.nodeType !== 1) throw new TypeError('Expecting input of Element');
    function visible(e) {
        var s = window.getComputedStyle(e);
        return +!(s.display === 'none' || s.opacity === '0');
    }
    function fader(duration) {
        var step, aStep, fn, thisID = ++current, vis = visible(elem);
        window.clearTimeout(t);
        if (inProgress) goal = 1 - goal; // reverse direction if there is one running
        else goal = 1 - vis;             // else decide direction
        if (goal) {                      // make sure visibility settings correct if hidden
            if (!vis) elem.style.opacity = '0';
            elem.style.display = 'block';
        }
        step = goal - +window.getComputedStyle(elem).opacity;
        step = 20 * step / duration;     // calculate how much to change by every 20ms
        if (step >= 0) {                 // prevent rounding issues
            if (step < 0.0001) step = 0.0001;
        } else if (step > -0.0001) step = -0.0001;
        aStep = Math.abs(step);          // cache
        fn = function () {
            // console.log(step, goal, thisID, current); // debug here
            var o = +window.getComputedStyle(elem).opacity;
            if (thisID !== current) return;
            if (Math.abs(goal - o) < aStep) {            // finished
                elem.style.opacity = goal;
                if (!goal) elem.style.display = 'none';
                inProgress = 0;
                return;
            }
            elem.style.opacity = (o + step).toFixed(5);
            t = window.setTimeout(fn, 20);
        }
        inProgress = 1; // mark started
        fn();           // start
    }
    return fader;
}
window.addEventListener(
    'load',
    function () {
        var fader1 = generateFader(document.getElementById('showOrHideDiv1')); 
        var fader2 = generateFader(document.getElementById('showOrHideDiv2'));
        var fader3 = generateFader(document.getElementById('showOrHideDiv3'));
                document.getElementById('action1').addEventListener(
            'click',
            function () {
                fader1(1000);
            }
        );
        document.getElementById('action2').addEventListener(
            'click',
            function () {
                fader2(1000);
                 }
        );

                document.getElementById('action3').addEventListener(
            'click',
            function () {
                fader3(1000);
            }
        );


         }
        );


</script>
    </body>
</html>
Tagged:

Answers

  • GoToLoopGoToLoop

    I guess if you posted the ".pde" files instead of the ".html" 1s, you'd get more responses! O:-)

  • coraliediatkinecoraliediatkine

    Thanks. Well the pde has nothing wrong in itself. I think it's only a matter of RAM, video card.. because it seems that even if the page will only display the selected sketch, it has to process the three of them. When I embed only one sketch, it's really fine.

Sign In or Register to comment.