5 Replies Latest reply on May 17, 2010 11:47 AM by Chorale0001

    Is it possible to enhance a script who ...

    Chorale0001 Level 1

      Hello.

       

      I was wondering if it was possible to enhance a screen detection script to make it detect the window itself, say.. if you use 2 viewscreen one in 1024x768 and another in 1920x1080 and you drag a webpage from the smaller to the biggest and increase the size of the windowed website.

       

      Is it possible for a script to detect that (both way) thus allowing someone to display thing that are normally partially outside the 1024x768 but fully visible on a 1920x1080 ? It need to be dynamic.

       

      Right now all i was able to do is to make detection script for a specific size of the viewscreen, not the window.

       

      Just for information here are all my script about that.

       

      Don't mind the alert in the script, those are there for test purpose.

       

       

      <script language="Javascript1.1" type="text/javascript">
      function detect(){
          if (screen.width>1919||screen.height>1079){
              alert("Activation de l'info bulle dans la fonction detect")
        showhide('Infobulle')
          }
          else{
              alert("Desactivation de l'info-bulle dans la fonction detect.")
        }
      }
      </script>

       

          <script language="javascript">

      var state = 'none';

      function showhide(Infobulle) {

      if (state == 'block') {
      alert("desactivation infobulle fonction showhide")
      state = 'none';
      }

      else {
      alert("activation infobulle fonction showhide")
      state = 'block';
      }
      if (document.all) { //IS IE 4 or 5 (or 6 beta)
      eval( "document.all." + Infobulle + ".style.display = state");
      }
      if (document.layers) { //IS NETSCAPE 4 or below
      document.layers[Infobulle].display = state;
      }
      if (document.getElementById &&!document.all) {
      hza = document.getElementById(Infobulle);
      hza.style.display = state;
      }
      }

      </script>

       

      So right now my "infobulle" layer is on "display=none" and it appear only if you have a viewscreen bigger than 1919x1079.

       

      My script is working perfectly for the case of somone having only 1 viewscreen, But if somone is using a laptop ( usually 1024x768 ) and plug a wide viewscreen and choose to drag his windows in the widescreen, that's where a dynamic script would be perfect...

       

      Any idea ? Thanks.

       

      Message was edited by: Chorale0001

        • 1. Re: Is it possible to enhance a script who ...
          Chorale0001 Level 1

          bump ?

           

          No idea how to make a dynamic script to always detect the size of window ?

          • 2. Re: Is it possible to enhance a script who ...
            Nancy OShea Adobe Community Professional & MVP

            AFAIK, screen detection scripts look for the screen resolution; not the actual viewport size which can be almost anything at all. Simply b/c a person has a super wide display doesn't mean they use all of it for web browsing or that they keep it one size at all times.

             

            So to answer your question, no.  I don't think this is possible.

             

            Consider building your site with a liquid or elastic layout that conforms to browser viewport instead of relying on screen sniffer scripts that may prove unreliable.

             

            Related links: 


            Google labs - Browser Size
            http://browsersize.googlelabs.com/


            Liquid Layouts

            http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s


            Elastic Layouts with Ems

            http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            1 person found this helpful
            • 3. Re: Is it possible to enhance a script who ...
              Chorale0001 Level 1

              Hello Nancy

               

              Well it is possible for i have done it, even if it only half working so far and i am stuck with a weird attitude of the script but the logic is working.

               

              I am well aware of all the liquid layout and everything and am using it for header and such. However my case is more precise, I need to make appear 1 bubble with some informative text only when the window is larger than 1024x768 because there is a lot of people using wide screen, but windowed browser, and it need to be dynamic in case people do multiple resize of their window without reloading the page.

               

              So here is my script in it's bugged state ( currently trying to fix it )

               

              function(){return A.apply(null,[this].concat($A(arguments)))}

              function(){return A.apply(null,[this].concat($A(arguments)))}

              Here is the full test file.

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>Untitled Document</title>

              <!--Script detection taille ecran -->
              <script language="Javascript1.1" type="text/javascript">
              function detect(){
                  if (window.innerWidth>1024||window.innerHeight>768){
                      showhide('layer1')
                  }
              else {
              showhide('layer1')
              }
              }
              </script>


              <script language="Javascript1.1" type="text/javascript">

              function init(){
                 window.onresize = detect;
                 detect();
                }


              </script>


              <script type="text/javascript">

              var state = 'none';

              function showhide(layer1) {

              if (state == 'block') {
              state = 'none';
              }

              else {
              state = 'block';
              }
              if (document.all) { //IS IE 4 or 5 (or 6 beta)
              eval( "document.all." + layer1 + ".style.display = state");
              }
              if (document.layers) { //IS NETSCAPE 4 or below
              document.layers[layer1].display = state;
              }
              if (document.getElementById &&!document.all) {
              hza = document.getElementById(layer1);
              hza.style.display = state;
              }
              }
              </script>

               


              </head>

              <body OnLoad="init(), detect()">
              <div id="layer1" style="display:none">I see that because i am more than 1024.</div>
              </body>
              </html>


              The script is working except for a yet unknow reason to make it work you have to reduce the window size to its minimum, then get a lag and shazam the layer appear.

               

              It is not stable yet... and currently working in reverse than what i want...

               

              Any insight ?

               

              thanks

              • 4. Re: Is it possible to enhance a script who ...
                Chorale0001 Level 1

                Probleme Solved and working perfectly.

                 

                here is the script for those who were also wondering.

                 

                function(){return A.apply(null,[this].concat($A(arguments)))}

                <script language="Javascript">

                 

                function alertSize(layer1) {
                var myWidth = 0;
                  if( typeof( window.innerWidth ) == 'number' ) {
                    //Non-IE
                    myWidth = window.innerWidth;
                }
                else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                   }
                  else if( document.body && ( document.body.clientWidth ) ) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                   }
                var state = 'none'; 

                  if (myWidth<1023){
                   state = 'none';
                 
                }
                else {
                  state = 'block';
                  }
                 

                if (document.all) { //IS IE 4 or 5 (or 6 beta)
                eval( "document.all." + layer1 + ".style.display = state");
                }
                if (document.layers) { //IS NETSCAPE 4 or below
                document.layers[layer1].display = state;
                }
                if (document.getElementById &&!document.all) {
                hza = document.getElementById(layer1);
                hza.style.display = state;
                }
                }
                </script>


                It is dynamic and perfectly working.

                • 5. Re: Is it possible to enhance a script who ...
                  Chorale0001 Level 1

                  Don't forget :

                   

                  function(){return A.apply(null,[this].concat($A(arguments)))}

                  <body onLoad="alertSize('Infobulle');" onResize="alertSize('Infobulle');">

                  The onload is there in case you are already full screen on a wide screen so it trigger the script.