Sunday, August 30, 2009

Is Carrot Oil Good For A Tan

jQuery: windows system style windows

For the latest version of Nada
-Design, I wanted to keep the approach to a single page, but this time making it very succinctly. There is a
Ouroboros (which in this case, omitting some of its traditional symbolism, is to depict the Creativity
, which always reborn and renewed) from which arise the three main links dedicated to the three main areas of creative I'm involved, plus a link for information. This time, not wandering!
The links do not open other pages, but the windows in the style of those operating systems that are used to explore the contents of your computer.
features to play on the internet of these windows are:
Trascinabilità
through the classic click + drag mouse; Stacking
, with the possibility of bringing "the face" that is under a window to another by clicking;
Ridimensionabilità
by dragging an edge or a corner. the remainder of the windows are blocks of content
\u0026lt;div>
absolutely positioned, each with its own z-index , and initially hidden ( display: none ).

Let's see in detail the XHTML markup, CSS and jQuery code needed to implement this project.
1. Code XHTML

Each window will have a structure like this: \u0026lt;div class="window" id="finestra1">
\u0026lt;span class="close"> X \u0026lt;/ span>
\u0026lt; h2> title \u0026lt;/ h2> \u0026lt;p> content \u0026lt;/ p> \u0026lt;/ div>
class window is used to specify the essential attributes common to every window, while the unique ID for the characteristics variables, such as background and position. The span
"close" is nothing but the close button of the window, che realizzeremo interamente con jQuery. Per lanciare le finestre abbiamo bisogno di un elenco di link, ad esempio:

<ul> <li><a id="a1" class="btn" href="#">finestra1</a></li> <li><a id="a2" class="btn" href="#">finestra2</a></li> <li><a id="a3" class="btn" href="#">finestra3</a></li>
</ul>
Let's see what are the key features to be given to block the window using CSS.
2. CSS Properties
The following is the CSS that I used on my site:
.
window {z-index: 10;
position: absolute;
width: 500px;
height: 400px; padding: 0 ;
color: # 000; opacity: .95; filter: alpha (opacity = 95);
border: 3px solid # 555; -moz-border-radius-TopRight: 12px; -webkit-border-top -right-radius: 12px; border-top-right-radius: 12px; -moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;}


    of all this, the only really fundamental properties are
  1. position: absolute and z-index
    2. . The latter we will solve the problem of 'stacking
  2. windows. is interesting to take advantage of advanced capabilities such as transparency and rounded edges, which greatly improve the aesthetics with minimal effort.
  3. Transparency is good to be minimal as not to confuse the content with the background. About the rounded edges, I mention in this post .
Each window will also have personal characteristics such as initial position opening, the background, size, and so on, for example: # Window1 {background: # fff url (images/bg1.gif) bottom right no-repeat; width: 400px;
top : 120px;
left: 40px;}
For an elegant arrangement of the windows relative to each other, I climbed to 40px at a time the position of each window:
#
Window1 {top: 120px;
left: 40px;} # finestra2
{top: 80px;
left: 80px;}

# finestra3 
 {top: 40px; 
 left: 120px;} 
 
 
 
 I went "up" to reduce the risk of appearance of scrollbars with small size of the browser window.

For the close button of windows, I used the image of an "X", with this CSS:
.
close {cursor: pointer;
position: absolute;
top: 3px; right: 3px;
background: transparent url (images / close.png) center center no-repeat; 
 height: 25px; width: 25px; 
 display: block; 
 text-indent:-999em;}
The titles of the windows are were all treated with a technique to any image replacement


to conform to the overall style of the page.
Now you should spread the jQuery code to allow the operation of the window, and give all the features of interactivity you want.


3. JQuery Code 
 
 
 
 3.0 Preliminaries: hide and button closure 
 
 Upstream of all, you have to hide windows 
 
 
 $ (. 'Window'.) Hide (); 
 
 Then, let the function button Closed 
 
 
 $ (. 'close'). click (
 function () {
 $ (this). parent (. 'window'). hide ('normal');} 
 
)

3.1 Activation and function of the windows "on top" The idea is this: by clicking on a link opens the corresponding window, but if it is already visible, is closed (the links of the switches are, in essence). As a result we will make the windows draggable, their final position will be different from the initial one, but I want them to open in the same place decided on by CSS. Additionally, the last active window has to go on top of all others.

The first thing to do is figure out which window you want to activate and save the ID in a variable to identify the window "active". / * window * launch popups / $ ('. Btn'). Click (function () {var active
= '# Window' + $ (this). Attr ("id");}
) 

 Each time you click on a link will be active in the variable to store the ID of the corresponding window, complete with of "#", because now we will use this variable for selection purposes. 
 
 For example, clicking the second link (ID = a2) we have: 
 window + a2 = # # finestra2 
.
Now, we check whether the window is already visible. If it is, we hide, and we end up there. Otherwise there are two things to do before you show: 


 reset its position to the initial 
 
 
 give it a z-index 
 greater than all the other windows to make it go "on top". 
 
 
 Here's how: 
 
 
 / * window * launch popups / 
 $ ('. Btn'). Click (function () {var 
 active = '# window' + $ (this). Attr (" id ");

if ($ (active). is (': visible')) {$
(active). hide ('normal');} else {

switch (active)
{case '# Window1 ': $ 
 (active). css ({
' top ': '120px', 
 'left': '40px '
}); 
 break; 
 
 case' # finestra2 ': $ 
 (active). css (
 {'top': '80px ', 
 'Left': '80px '
});
break; case' # finestra3 ': $ (active). Css ({' top ': '40px',
'left': '120px '}
)
break;}
$ (. 'window'). not (active). css ('z-index', '10 ');
$ (active). css (' z-index ',' 100 '). show (' normal ');
}});

cycle
switch - case 
 used to assign different instructions depending on the window and it is here that is reset to initial conditions (which may also involve several properties over the position). The last two

instructions are to send in the top window click and view. It attributes the

z-index 
 default to all windows that are not clicked, then gives a maximum data rate of the active and finally appears. 
 
 To send in a top window that is already visible in the other, just switch the values \u200b\u200bof z-index 
 
 between windows when you press the mouse button

/ * on top * windows / $ (' . window '). mousedown ( function () {
$ (this). css (' z-index ', '100');
$ (. 'window'). not (this). css ('z- index ', '10');}

) 


 The event is a good thing 
 
 mousedown 
 
 (yes, without the 'on "!) Because it will be useful in conjunction with the effect of trascinabilità we implement immediately.


3.2 Trascinabilità Here we are lucky, because trascinabilità effect is already included in jQuery UI library
: Just add two files in
\u0026lt;head>
web page:
  1. \u0026lt;script src = "http://jqueryui.com/latest/ui/ui.core.js" type = "text / javascript"> \u0026lt;/ script>
    2. \u0026lt;script src = "http://jqueryui.com/latest/ ui / ui.draggable.js " type = "text / javascript"> \u0026lt;/ script>
  2. Then, to make the windows draggable, just this statement:

$ (. 'window'). draggable (); 

 
 3.3 Ridimensionabilità 
 
 ridimensionabilità I have not implemented on my site, because in my case, unnecessary and in need of a different approach to design. But even for this property is a short step: simply attach the necessary files, and declare the windows resizable. 
 
 files to add in this case are: 
 
 
 \u0026lt;link type = "text / css" href = "http://jqueryui.com/latest/themes/base/ui.all.css" rel = "stylesheet" /> 
 src="http://jqueryui.com/latest/ui/ui.core.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script> \u0026lt;! - have seen above -> 
 src="http://jqueryui.com/latest/ui/ui.resizable.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script> 
 
 
 At this point, you should combine all three statements in one, and declare the very beginning of the script: 
 
 
 $ (. 'window'). draggable (). resizable (). hide (); 
 
 
 Now you can drag the window borders to resize them, and appear (Lower right) drag a small icon which will resize the window along the two axes X and Y at the same time - like any window operating system. 
 
 
 4. Complete script 
 
 
 
 $ (document). Ready (function () {$ 
 
 (. 'Window'). Draggable (). Resizable (). Hide (); 
 
 / * close button * / 
 $ ( . 'close'). click (
 function () {
 $ (this). parent (. 'window'). hide ('normal');}
)
/ popups launch window * * / $ ('. btn'). click (function () {var

active = '# window' + $ (this). attr ("id");
if($(active).is(':visible')){ $(active).hide('normal');
} else {
switch(active){ case '#finestra1': $(active).css({
'top' : '120px',
'left' : '40px' 
    }); 
    break; 
     
    case '#finestra2': 
    $(active).css({ 
     'top' : '80px', 
     'left' : '80px' 
    });
break;
case '#finestra3': $(active).css({ 'top' : '40px', 'left' : '120px' }); break;
}
$ (. 'Window'). Not (active). Css ('z-index', '10 '); $ (active). Css (' z-index ', '100'). Show ('normal ');
}});

/ * on top * windows / 
 $ (.' window '). mousedown (
 function () {
 $ (this). css (' z-index ' , '100 ');
$ (.' window '). not (this). css (' z-index ', '10');}

) 
});

Note 'stacking


The simple method proposed to bring "on top" window has the merit of extreme brevity: two very brief statements and we in place regardless of the number of windows. But this simplicity

miss a detail: the order of the windows in the background. In fact, it does not remain unchanged, but reverts to the default cascade of HTML code: in essence, between the windows in the background, the last in order of their inclusion in the page code will be one that will stand above all, directly under that "on top". 
 This is because we give to all second floor windows in the same z-index 
 
, for a fixed order which is the rule in the code.
The solution is conceptually simple: determine from time to time what is the window z-index

higher and give that to send "on top" a 
 z-index increased by one unit, leaving all else unchanged. 
 But this requires a little 'more than scripting, so you must loop through the attributes of the windows and perform the necessary tasks.

Maybe I will in the coming days ...

Posted by admin at 8:21 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)