Dynamically change page width

    image

    Many argue about what should be the width of the page - fixed or stretched (rubber). Some like a fixed size, others the other way around. Let's try to please both types, because any user of a commercial site has a potential client who can stay on this page or leave (a question of site usability). I tried to solve this problem at once, having left the choice of page width to the user.



    There are two solutions to this problem. The first is to create 2 site templates and add a switch between them on the site pages (in my opinion, it’s not very convenient). The second way is to implement an animated change in the page width without reloading it, and when you go to the next page on the site, the page width remains unchanged, since the width data is stored in a cookie. This method is described below.

    The script is fully validated (if you take into account that there are 7 div blocks and nothing more).

    The jquery library itself and the jquery.cookie plugin are needed .

    The css file contains hacks for ie6, 7, I did not separately export them to a file for brevity.

    Checks for disabled cookies were not taken into account, since in practice it is better to implement saving screen settings in conjunction with sessions on the server side. All code is commented in detail.

    I hope this information is useful, I have not seen any examples of such an implementation.

    $ (document) .ready (function () {
     
            / * check the cookie page resolution data to view it * /
            if ($ .cookie ("screen") == 'full') {/ * If the previous view was on wide on the screen * /
              / * Add a wide site style class for the main blocks * /
              $ ('# conteiner, # conteiner_2, # conteiner_3, #footer'). addClass ('tip_full'); 
              window.sreen_1 = 'fix'; / * write the initial value for the button that changes the page width * /
              window.sreen_2 = 'full'; / * the secondary value * /                  
            } else {/ * in all other cases (including the default) will display a narrow view of the page * /
              / * Add a narrow page style class to display the site page for the main blocks * /
              $ ('# conteiner, # conteiner_2, # conteiner_3, #footer'). AddClass ('tip_fix');
              window.sreen_1 = 'full'; / * primary value * /
              window.sreen_2 = 'fix'; / * secondary value * /
            }
     
            / * Function to change the screen width depending on the parameters passed to it * /
            function size_screen (size_type_1, size_type_2) {
     
              $ ('# start'). css ('display', 'none'); / * Protection from the "fool",
     


                window.size_width = '100%'; / * page width value * /
              } else {
                window.size_width = '800px';                    
              }
     
              / * Jquery animation function. In this case, a smooth change in the width of the image of the site page * /
              $ ('# conteiner, # conteiner_2, # conteiner_3, # footer'). Animate ({
                'width': window.size_width / * Gently change the width in accordance with the page display setting * /
                }, 
                500, / * Animation time * / 
                function () {/ * The function that is
                called after the animation is completed * / / * Delete the previous page display styles from the blocks * /
                $ (this) .removeClass ('tip _' + size_type_2);
                / * Add a new style class for the new screen width * /
                $ (this) .addClass ('tip _' + size_type_1);
                / * To clear the html code from garbage, remove the style attribute (created by jquery) * /
                / * This action is not necessary, it carries an aesthetic function * /
                $ (this) .removeAttr ('style');
     
                / * Protection from the "fool": repeatedly pressing the button // show the button * /
                $ ('# start'). Css ('display', 'block');
              });
              / * We write the cookie to display the site after reloading or changing the page * /
              $ .cookie ("screen",
     
            }
     
            $ ('# start'). toggle (/ * The troggle function repeatedly presses an element (button) repeatedly * /
              function () {size_screen (window.sreen_1, window.sreen_2);}, / * first press * /
              function ( ) {size_screen (window.sreen_2, window.sreen_1);} / * second press * /
            );
          })
     


    You can download this creation at the following link: jquery size , and see here (the red garbage in the upper right corner is a button).

    PS The author of this article is Alexander (balancev on gmail.com), if someone wants to share an invite, then this is the time.

    PPS “Ahh, he asked for an invite !!! 111” - go through the woods, send your invites better for your “birthday to a friend” or for copy-paste in the sandbox.

    Also popular now: