Dynamic change of page width

Many argue about whether the page width should be fixed or stretched (rubber). One likes a fixed size, the other way around. Let's try to please both types, because any user of a commercial site is a potential client who can stay on this page or leave (question of site usability). I tried to solve this problem at once by giving the user the choice of the page width.


')
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, not very convenient). The second way is to implement an animated change in the width of the page without reloading it, and when you go to the next page of the site, the width of the page remains the same, since the width data is stored in the cookie. This method is described below.

The script is fully validated (even if we consider that there are 7 div blocks and only).

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

The css file contains hacks for ie6, 7, I did not separate them into a file for the sake of brevity.

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

I hope this information will be useful, I have not seen any examples of such implementation.

$ ( document ) . ready ( function ( ) {

/ * check in the cookie the resolution of the page to view it * /
if ( $. cookie ( "screen" ) == 'full' ) { / * If the previous viewing was on a wide screen then * /
/ * 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 changing the width of the page * /
window. sreen_2 = 'full' ; / * secondary value * /
} else { / * in all other cases (including the default) will display a narrow page view * /
/ * Add a style class to a narrow display of 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 * /
}

/ * The function of changing the width of the screen depending on the parameters passed to it * /
function size_screen ( size_type_1 , size_type_2 ) {

$ ( '#start' ) . css ( 'display' , 'none' ) ; / * Protection against "fool", repeatedly pressing the button // remove the button * /

/ * Assign values ​​to variables depending on the passed parameter (screen width) * /
if ( size_type_1 == 'full' ) {
window. size_width = '100%' ; / * page width * /
} else {
window. size_width = '800px' ;
}

/ * Jquery animation function. In this case, smoothly changing the width of the image of the site page *
$ ( '#conteiner, # conteiner_2, # conteiner_3, # footer' ) . animate ( {
'width' : window. size_width / * Smoothly change the width in accordance with the page display parameter * /
} ,
500 , / * Animation time * /
function ( ) { / * Function called when animation ends * /
/ * Remove previous page display styles from blocks * /
$ ( this ) . removeClass ( 'tip_' + size_type_2 ) ;
/ * Adding a new style class for a 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 has an aesthetic function * /
$ ( this ) . removeAttr ( 'style' ) ;

/ * Protection against "fool": repeatedly pressing the button // showing the button * /
$ ( '#start' ) . css ( 'display' , 'block' ) ;
} ) ;
/ * Write the cookie to display the site after reloading or changing the page * /
$. cookie ( "screen" , size_type_1 , { path : '/' } ) ;

}

$ ( '#start' ) . toggle ( / * The troggle function performs a sequential repeated pressing of an element (button) * /
function ( ) { size_screen ( window. sreen_1 , window. sreen_2 ) ; } , / * first press * /
function ( ) { size_screen ( window. sreen_2 , window. sreen_1 ) ; } / * second press * /
) ;
} )

Download this creation can be on the following link: jquery size , and look here (red garbage in the upper right corner and there 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 “Aaa, he asked for an invite !!! 111” - go to the forest, send your invites to the “birthday of a friend” or for copy-paste in the sandbox better.