jPutty for layout, jQuery plugin

Task

With this design I had to develop a site, the main page is divided into two bands - dark and light. Thin lines and some key elements are located strictly according to the principle of the golden section. And here I was covered ...

Again to do simple things difficult html + css code? Again, each browser will display the page in its own way? Again messing with cross-browser compatibility? Write hacks?

And why are there no such problems in desktop programming? Resize the element according to the formula - please. Move the button to the left by 17 pixels - please. Arrange a fundamentally different arrangement of elements in strict dependence on the size of the window - no problem! And only in html + css with this can arise similar difficulties. Once I almost lost the customer when I delayed the task of “pushing the block a little higher and to the left” ... I had to thoroughly remake the whole layout, because the old structure was not designed for such movements of the block. This work was not appreciated, and rightly so, because as a result I just pushed the block.

')
That's enough, now I decided to make the most of JavaScript in the layout. Yes, I know that js is not enabled for everyone. Yes, I know that now very few people do that. According to statistics , JavaScript is turned off in less than 1% of users! Is it a lot or a little?

jPutty

The idea was implemented in a new plugin under jQuery. For those who have javascript disabled, we implement the most simple layout in the connected conventional css-style (aren't such users striving for maximum simplicity?). For those with JavaScript enabled, a script will be launched that implements a special event:

$(window).readyresize(function(width, height) { // using jPutty }); 

The “readyresize” event is triggered once the page is loaded, and each subsequent time when the browser window is resized.

Details on the site of the plugin - jputty.ru/getting-started .

What does the solution look like?

Once - a fragment of the html-code of the upper (dark) half of the page.
Each element is a separate div. No wrappers, dividing blocks, and other tricks are needed.

 <!--  ()   --> <div id="dark"> <!-- Sliderman Endegor's Degustation --> <div id="DegustationNavigation"></div> <div id="Degustation"> <img src="./img/Degustation/cognac.png" width="383" height="600" alt="Degustation cognac" /> <img src="./img/Degustation/riesling.png" width="383" height="600" alt="Degustation riesling" /> <img src="./img/Degustation/bourgogne.png" width="383" height="600" alt="Degustation bourgogne" /> <img src="./img/Degustation/bordeaux.png" width="383" height="600" alt="Degustation bordeaux" /> <img src="./img/Degustation/champagne.png" width="383" height="600" alt="Degustation champagne" /> <img src="./img/Degustation/martini.png" width="383" height="600" alt="Degustation martini" /> </div> <!-- /Sliderman Endegor's Degustation --> <div class="delivery_text">  </div> <a href="#"> <div class="shop_wine"></div> <div class="shop_wine_text"></div> </a> <a href="#"> <div class="shop_cognac"></div> <div class="shop_cognac_text"></div> </a> <a href="#"> <div class="shop_armagnac"></div> <div class="shop_armagnac_text"></div> </a> <div class="JJB"></div> <div class="line"></div> </div> <!-- / ()   --> 

Two - the corresponding fragment of the CSS code.
For text blocks, set the font, for picture blocks, set the background.

 #dark { background-color: #000; color: #f0f0f0; z-index: -10; } #dark .delivery_text { text-align: right; font-size: 12pt; } #dark .shop_wine { background-image: url(../img/shop/wine.png); } #dark .shop_wine_text { text-align: center; } #dark .shop_cognac { background-image: url(../img/shop/cognac.png); } #dark .shop_cognac_text { text-align: center; } #dark .shop_armagnac { background-image: url(../img/shop/armagnac.png); } #dark .shop_armagnac_text { text-align: center; } #dark .JJB { background-image: url("../img/Jean Jacques Brissot.png"); } #dark .line { background-color: #fff; z-index: -10; } 

And three! Fragment of js code.
Specify the location of each block, depending on the size (width and height) of the browser.

 $(window).readyresize(function(width, height) { ... var dy = (height - 600) / 1.618 + 35; $('#dark').putty('xysize', 0, 0, width, height); $('#dark #Degustation').putty('xysize', 0, dy - 35 - 1, 383, 600); $('#dark #DegustationNavigation').putty('xysize', 0, dy - 35, 20, 600); $("#dark #DegustationNavigation a").each(function (i) { $(this).putty('xysize', 25, 10 + 25 * i, 11, 11); }); $('#dark .delivery_text').putty('xysize', 0, 5, width - 50, 30); $('#dark .shop_wine').putty('xysize', (width - width / 1.618) - 48 / 2, dy, 48, 174); $('#dark .shop_wine_text').putty('xysize', (width - width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_cognac').putty('xysize', (width / 1.618) - 68 / 2, dy + 174 - 139, 68, 139); $('#dark .shop_cognac_text').putty('xysize', (width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_armagnac').putty('xysize', (3*width / 1.618 - width) - 36 / 2, dy + 174 - 172, 36, 172); $('#dark .shop_armagnac_text').putty('xysize', (3*width / 1.618 - width) - 100, dy + 174, 200, 36); $('#dark .JJB').putty('xysize', 383, height / 1.618 - 76, 768, 76); $('#dark .line').putty('xysize', 0, height / 1.618, width, 1); ... }); 

The function putty () takes the x, y, width and height parameters and sets them to the block via the css properties. Thus, the position of the blocks can be set dynamically using all the features of the JavaScript language.

Links and sources

Site plugin jPutty - jputty.ru
Demo: brissot.biz
Demo site sources: data.brissot.biz/jjb.rar