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
Sunday, August 30, 2009
Is Carrot Oil Good For A Tan
, 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à 
Stacking , with the possibility of bringing "the face" that is under a window to another by clicking;
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 ).
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 
\u0026lt;/ div> "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> 2. CSS Properties
Let's see what are the key features to be given to block the window using CSS. The following is the CSS that I used on my site:
.
position: absolute;
width: 500px;
height: 400px; 
padding: 0 ;
color: # 000; opacity: .95; filter: alpha (opacity = 95); padding: 0 ; 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
- position: absolute and z-index . The latter we will solve the problem of 'stacking
- windows. is interesting to take advantage of advanced capabilities such as transparency and rounded edges, which greatly improve the aesthetics with minimal effort.
- Transparency is good to be minimal as not to confuse the content with the background. About the rounded edges, I mention in this post .
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;The titles of the windows are were all treated with a technique to any image replacement
display: block;
text-indent:-999em;}
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.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:
For example, clicking the second link (ID = a2) we have:
window + a2 = # # finestra2
.
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:
- \u0026lt;script src = "http://jqueryui.com/latest/ui/ui.core.js" type = "text / javascript"> \u0026lt;/ script> \u0026lt;script src = "http://jqueryui.com/latest/ ui / ui.draggable.js " type = "text / javascript"> \u0026lt;/ script>
- 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;
break;
case '#finestra2':
$(active).css({
'top' : '80px',
'left' : '80px'
});
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 ($ (.' window '). not (this). css (' z-index ', '10');}
function () {
$ (this). css (' z-index ' , '100 ');
)
});
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-indexThe solution is conceptually simple: determine from time to time what is the window z-index
, for a fixed order which is the rule in the code.
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 ...
Friday, August 28, 2009
Hypertension Bloating
+ jQuery Drupal search box hidden
What I am about to explain is a bit '
a hack, but it is very nice and comfortable.
<div><div class="container-inline"> <div class="form-item" id="edit-search-block-form-keys-wrapper"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size = "15" value = "" title = "Enter your search terms." class = "form-text" /> \u0026lt;/ div> \u0026lt;input type = "submit" name = "op" id = "edit-submit" value = "Search" class = "form-submit" / >
\u0026lt;input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="ae2b5565789a051ff48bb23e0eac3970"
/> \u0026lt;input type = "hidden" name = "form_id" id = "edit-search-block-form" value = "search_block_form" />
\u0026lt;/ div> \u0026lt;/ div>
\u0026lt;/ form> \u0026lt;/ div> \u0026lt;/ div>
The search is obviously a Drupal form, with a set of tags \u0026lt;input> that we will fully and faithfully reproduce
in our script, if we want to work. Particular attention should be given to the tag
form_token
Here's what we do: hang on the link created in step 1, a new form of research and hide, then we will create a switch to activate it at will.
3.1 Identification of form_token First thing to do: get the value
of
form_token simply by going fishing with the method
attr (name)
:
$ (document). Ready (function () {
/ * get token form * / var token = $ ('# sidebar_right # edit-search-block-form-form-token'). attr ("value");} )
This value should be taken every time you load the page, and this is the first statement that we have the script. is important to specify the section of the page that contains the original searchbox
, and not one created by jQuery. In my case it is in the right column.
3.2 Creation of the searchbox You find the link "search" (in which case the last of the
navlist
primary links) and there you create an item below
\u0026lt;form>
by ID # jquerysearch, in which we insert all the input elements as above:
$ (document). ready (function () { / * build search box * / $ ("# navlist li: last a"). after ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ("# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Please enter the search terms'. /> ") . Append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . Append ("\u0026lt;input type = 'hidden' name = 'form_token' id = 'edit-search-block-form-form-token' value =''/> ") . append (" \u0026lt;input type = 'hidden' name = 'form_id' id = 'edit-search-block-form' value = 'search_block_form' /> ")
. append (" \u0026lt;br /> \u0026lt;a id = 'AdvancedSearch' href = 'http://www.gothicnetwork .org / search '> Research Advanced \u0026lt;/ a> ")
. append (" \u0026lt;/ form> ") . hide ();} )
In general, therefore, is used after
() to create the block, and append () to fill it with two different instructions. Each tag is hung with a new feature append ()
, education and ends with a
hide ()
to hide the mask you just created (
hide () in jQuery
corresponds to a display: none; in CSS), since it must only be activated with the click on the link. Note that the attribute value
of form_token (line 7) is intentionally blank, since that parameter will be passed later. I am also a direct link to advanced search page, specifying the ID (which we will use shortly). Now we have a searchbox hidden, requiring a switch to appear.
3.3 Creating the switch
/ * search box switch * /
$ ("# navlist them: at last: not ('# AdvancedSearch')"). click (function () {
$ (" # jquerysearch). toggle (' normal '); $ ("# jquerysearch # edit-search-block-form-form-token "). attr ('value', token); return false;}
)
This time the switch not () is essential to make sure you do not also select the link for the advanced search, created earlier. Line 4 is used to pass the value of
form_token
took over with 3.1 in the corresponding element of our box.
/ * build search box * /
$ ("# navlist li: last a"). After ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ( "# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Enter your search terms.' /> ") . append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . append ("\u0026lt;input type='hidden' name='form_token' id='edit-search-block-form-form-token' value='' />") .append("<input type='hidden' name='form_id' id='edit-search-block-form' value='search_block_form' />") .append("<br /><a id='advancedsearch' href='http://www.gothicnetwork.org/search'>ricerca avanzata</a>") .append("</form>") .hide(); /* search box switch */ $("#navlist li:last a:not('#advancedsearch')").click(function() { $("#jquerysearch").toggle('normal'); $("#jquerysearch #edit-search-block-form-form-token").attr('value' , token); return false;} ) });
Now you're all set: just plug in page.tpl.php (or his) a link to the script you just created, and that's it.
You should enter some CSS to draw the searchbox on pages where you entered: you can enter directly from jQuery, as inline style of the various tags. I followed this path.
The end result can be seen in any of the pages of Gothic Network. Caveat: I said that this script is a bit ' a hack because we're going to create pairs of elements with the same ID, and this would hardly be proper behavior at the level of XHTML. However, the page passes validation, because the elements are created only charged when activating the switch, and the script is working fine.
Appendix
Select a menu item that is not the last in the list: use the method
[attribute = value]
specifying
to: href = search .
Documentation on customizing the searchbox in Drupal: http://drupal.org/node/45295 If you do not want to be tied to the use searchbox here
built only as a second mask
research is necessary to generate a unique
\u0026lt;input type = "hidden" name = "form_token" id = "a-unique -id "value =" \u0026lt;? drupal_get_token php print ('search_theme_form');?> "/>
What I am about to explain is a bit '
a hack, but it is very nice and comfortable.
<form action="/" accept-charset="UTF-8" method="post" id="search-block-form">
Drupal CMS
is my favorite today, even if the relationship is a kind of
love / hate
. For example, since the mask is looking for a
block, by default one can not have more than one instance per page.
Now, this limit is not generally a big problem. But I wanted to
Gothic Network
an entry in the main menu allowing you to search without having to go to another page, and that did not alter the existing layout. A search box was already further down the page, shaking, in the right column.
One solution was to use the function
module_invoke
to insert "by hand" locking the search form on the page, inserting a minimum of php in templates. See for example
this post (or
this) to understand how to use this simple method.
I wanted to use my favorite jQuery, as I had in mind to make the mask "hidden", that is to appear only the activation of a link.
The idea then is this: have a voice in the primary links
called "research" that acts as a switch for the appearance / disappearance of a search box (rather than pointing to the page "search").
order will set out what functions it is necessary that the block "Search" has been activated somewhere on the page.
This script was developed on an installation of Drupal version 5.
1. Creating the Link
Add an entry to the primary links
is simple, you go to
admin / build / menu
and click "add item": I called my "research," making the case that was the last the list (by placing a "burden" high). Remember to specify how to address the link "search", so that if JavaScript is not enabled, the user is properly redirected to the advanced search page. This is called
"Gracefully degrading"
.
2. Studio HTML
Before build our searchbox with jQuery, let's look at the structure of the search mask is created dal modulo "Search" di Drupal.
<div class="block block-search" id="block-search-0">
<h2 class="title">Ricerca</h2>
<div class="content">
<div><div class="container-inline"> <div class="form-item" id="edit-search-block-form-keys-wrapper"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size = "15" value = "" title = "Enter your search terms." class = "form-text" /> \u0026lt;/ div> \u0026lt;input type = "submit" name = "op" id = "edit-submit" value = "Search" class = "form-submit" / >
\u0026lt;input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="ae2b5565789a051ff48bb23e0eac3970"
/> \u0026lt;input type = "hidden" name = "form_id" id = "edit-search-block-form" value = "search_block_form" />
\u0026lt;/ div> \u0026lt;/ div>
\u0026lt;/ form> \u0026lt;/ div> \u0026lt;/ div>
The search is obviously a Drupal form, with a set of tags \u0026lt;input> that we will fully and faithfully reproduce
in our script, if we want to work. Particular attention should be given to the tag
form_token
(line 11), which contains a unique ID from which depends the smooth running of research: the data binding is the value of "value". 
3. JQuery Code Here's what we do: hang on the link created in step 1, a new form of research and hide, then we will create a switch to activate it at will.
3.1 Identification of form_token First thing to do: get the value
of
form_token simply by going fishing with the method
attr (name)
:
$ (document). Ready (function () {
/ * get token form * / var token = $ ('# sidebar_right # edit-search-block-form-form-token'). attr ("value");} )
This value should be taken every time you load the page, and this is the first statement that we have the script. is important to specify the section of the page that contains the original searchbox
, and not one created by jQuery. In my case it is in the right column.
3.2 Creation of the searchbox You find the link "search" (in which case the last of the
navlist
primary links) and there you create an item below
\u0026lt;form>
by ID # jquerysearch, in which we insert all the input elements as above:
$ (document). ready (function () { / * build search box * / $ ("# navlist li: last a"). after ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ("# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Please enter the search terms'. /> ") . Append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . Append ("\u0026lt;input type = 'hidden' name = 'form_token' id = 'edit-search-block-form-form-token' value =''/> ") . append (" \u0026lt;input type = 'hidden' name = 'form_id' id = 'edit-search-block-form' value = 'search_block_form' /> ")
. append (" \u0026lt;br /> \u0026lt;a id = 'AdvancedSearch' href = 'http://www.gothicnetwork .org / search '> Research Advanced \u0026lt;/ a> ")
. append (" \u0026lt;/ form> ") . hide ();} )
First, using the methodone you selected.
after (content) is created
element
\u0026lt;form>
and is attributed to its ID:
after () creates an element
below the selected one, while
append (content)
(which we use immediately) inserts element within
In general, therefore, is used after
() to create the block, and append () to fill it with two different instructions. Each tag is hung with a new feature append ()
, education and ends with a
hide ()
to hide the mask you just created (
hide () in jQuery
corresponds to a display: none; in CSS), since it must only be activated with the click on the link. Note that the attribute value
of form_token (line 7) is intentionally blank, since that parameter will be passed later. I am also a direct link to advanced search page, specifying the ID (which we will use shortly). Now we have a searchbox hidden, requiring a switch to appear.
3.3 Creating the switch
Affniché clicking on "search" our searchbox to appear and has not addressed the advanced search page, use the method
toggle ()
:
/ * search box switch * /
$ ("# navlist them: at last: not ('# AdvancedSearch')"). click (function () {
$ (" # jquerysearch). toggle (' normal '); $ ("# jquerysearch # edit-search-block-form-form-token "). attr ('value', token); return false;}
)
This time the switch not () is essential to make sure you do not also select the link for the advanced search, created earlier. Line 4 is used to pass the value of
form_token
took over with 3.1 in the corresponding element of our box.
token = $ ('# sidebar_right # edit-search-block-form-form- token '). attr ("value");
Education
return false;
is fundamental: to prevent the browser to load the page specified by the tag
\u0026lt;a>
selected - in essence, disables the link.
is finally complete script:
$ (document). Ready (function () {
/ * get token form * / var
/ * build search box * /
$ ("# navlist li: last a"). After ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ( "# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Enter your search terms.' /> ") . append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . append ("\u0026lt;input type='hidden' name='form_token' id='edit-search-block-form-form-token' value='' />") .append("<input type='hidden' name='form_id' id='edit-search-block-form' value='search_block_form' />") .append("<br /><a id='advancedsearch' href='http://www.gothicnetwork.org/search'>ricerca avanzata</a>") .append("</form>") .hide(); /* search box switch */ $("#navlist li:last a:not('#advancedsearch')").click(function() { $("#jquerysearch").toggle('normal'); $("#jquerysearch #edit-search-block-form-form-token").attr('value' , token); return false;} ) });
Now you're all set: just plug in page.tpl.php (or his) a link to the script you just created, and that's it.
You should enter some CSS to draw the searchbox on pages where you entered: you can enter directly from jQuery, as inline style of the various tags. I followed this path.
The end result can be seen in any of the pages of Gothic Network. Caveat: I said that this script is a bit ' a hack because we're going to create pairs of elements with the same ID, and this would hardly be proper behavior at the level of XHTML. However, the page passes validation, because the elements are created only charged when activating the switch, and the script is working fine.
Appendix
Select a menu item that is not the last in the list: use the method
[attribute = value]
specifying
to: href = search .
Documentation on customizing the searchbox in Drupal: http://drupal.org/node/45295 If you do not want to be tied to the use searchbox here
built only as a second mask
research is necessary to generate a unique
form_token
. As shown in
link
proposed in the previous paragraph, you must create a tag
\u0026lt;input>
like this:
\u0026lt;input type = "hidden" name = "form_token" id = "a-unique -id "value =" \u0026lt;? drupal_get_token php print ('search_theme_form');?> "/>
Wednesday, August 12, 2009
When Can The Irs Audit A Business
CSS + jQuery: checkout progress bar for e-commerce sites
Here is another improvement made to the shop
Treasures of the Dragon during The revamp: an indicator that makes it immediately clear to what extent the customer's buying process is. This is a progress-bar
that makes its appearance in the shopping cart page, and indicates how many steps are still needed before concluding the purchase. On each page is shown the current step.
In reality this is not only an improvement, but also a feature request in accordance with the standards of clarity and transparency that govern electronic commerce.
\u0026lt;ol>
\u0026lt;li> Cart \u0026lt; , / li> \u0026lt;li> Data Entry \u0026lt;/ li> \u0026lt;li> Order Summary \u0026lt;/ li>
\u0026lt;li> Order Complete \u0026lt;/ li> \u0026lt;/ ol> \u0026lt;/ div>
An ordered list is ideal for a logical sequence of steps.
2. Add CSS to taste
now have the style to create four blocks lined up and not typical of the rows of the lists, other more basic style to make the bar more attractive and in line with the design of the site.
# checkoutbar
{margin: 0 auto;
this article for an explanation of the nature of these statements.
Other interesting attribute is the opacity, which needs two settings: the first (adhering to the guidelines of CSS3
) is not valid for the usual IE, which wants to attribute
filter: alpha .
transparency we need to focus even more attention on the user's steps when he is present, which will be made later completely opaque ( opacity: 1
).
3. Style of the current step
At this point the choices are two, rather equivalent:
a class attribute on each page list the item on, for example with a class = "current" and create a style
only on that class.
use jQuery selectors, and create a way through them.
$ ('# checkoutbar li: eq (0)'). css ({
'opacity': '1 ', ' padding-left ' : '40px ', ' background ':' # 0081e4 url \u200b\u200b(images/checkoutbar1.png) center left no-repeat ',
' color ':' # fff ',
' border ': '3 px # abdbff double' });}
)
The image which is referenced in the background is an icon that identifies the current stage, also for each individual phase.
Here is another improvement made to the shop
Treasures of the Dragon during The revamp: an indicator that makes it immediately clear to what extent the customer's buying process is. This is a progress-bar
that makes its appearance in the shopping cart page, and indicates how many steps are still needed before concluding the purchase. On each page is shown the current step.
In reality this is not only an improvement, but also a feature request in accordance with the standards of clarity and transparency that govern electronic commerce.
\u0026lt;div id="checkoutbar">
This
progress-bar is made entirely with CSS and a bit of jQuery, plus four icons PNG (or GIF), one for each step.
You could also use only the CSS, but I also use a bit 'of jQuery to show the power of its selectors.
1. HTML markup
First you must create bar elements, placing them in valid and accessible HTML page:
\u0026lt;ol>
\u0026lt;li> Cart \u0026lt; , / li> \u0026lt;li> Data Entry \u0026lt;/ li> \u0026lt;li> Order Summary \u0026lt;/ li>
\u0026lt;li> Order Complete \u0026lt;/ li> \u0026lt;/ ol> \u0026lt;/ div>
An ordered list is ideal for a logical sequence of steps.
2. Add CSS to taste
now have the style to create four blocks lined up and not typical of the rows of the lists, other more basic style to make the bar more attractive and in line with the design of the site.
# checkoutbar
{margin: 0 auto;
- padding: 0;
- height: 50px; width: 700px;} # checkoutbar ol {list-style-type: none; margin: 0 auto; } # checkoutbar
- li {float: left; font-size: .6 em; margin: 1em; padding: 1em 2em;
- background: # Abdbff; border: 3px solid # abdbff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
opacity: .7; filter: alpha (opacity = 70);}
propertyfloat: left
-list given to the elements means that they have next to one another. The spacing is achieved with appropriate padding and margins.
Note the rounded corners (border-radius property
, CSS3) for browsers that support them (such as Firefox and Safari ... not IE, as usual!): The first statement, the one with
Firefox is the second for Safari. The third 
is the official statement as CSS3
guidelines. See is the official statement as CSS3 this article for an explanation of the nature of these statements.
Other interesting attribute is the opacity, which needs two settings: the first (adhering to the guidelines of CSS3
) is not valid for the usual IE, which wants to attribute
filter: alpha .
transparency we need to focus even more attention on the user's steps when he is present, which will be made later completely opaque ( opacity: 1 ).
3. Style of the current step
At this point the choices are two, rather equivalent:
a class attribute on each page list the item on, for example with a class = "current" and create a style
only on that class.
use jQuery selectors, and create a way through them.
Today we go to the second street, just to see a couple of selectors work.
Here's the code:
$ (document). Ready (function () {
$ ('# checkoutbar li: not (: last)'). Append ('> >') ;
$ ('# checkoutbar li: eq (0)'). css ({
'opacity': '1 ', ' padding-left ' : '40px ', ' background ':' # 0081e4 url \u200b\u200b(images/checkoutbar1.png) center left no-repeat ',
' color ':' # fff ',
' border ': '3 px # abdbff double' });}
)
: This value should be changed on each page on which the figure of our bar.
The first statement is used to attach names to all steps of the two symbols "greater than (>), to take the place of an arrow pointing to a path. I preferred using jQuery inseririli because they have no meaning in the strict sense, but I'm just a simple device design, and the markup on our list is clean. The selector
not () is a
override, that is a Logical NOT, while
last
identifies the last element of a series, in this case the number of tags
\u0026lt;li>
.
In this way, the last step, which is the end of the Route, has no associated arrow.
The rest of the current style is identified with the selector
eq (index)
: it identifies a part of a series based on its index, which starts at 0. In this case, being the first element of the current one, we
. Eq (0)
The image which is referenced in the background is an icon that identifies the current stage, also for each individual phase.
Tuesday, August 11, 2009
Thule Cylinder Casing
jQuery: discount coupon for e-commerce sites
These days I worked hard on the new version of the store Treasures of the Dragon, which primarily sells natural products for health and welfare, as well as other interesting articles.
This shop was launched in November 2008, and I was busy almost all the creative and technical. It was decided to change the graphics from "dark" to "light", and I took the opportunity to add a few enhancements.
Among the many cute little things implemented, today I want to talk about the label I created for the products on offer (a label that indicates the percentage discount applied on), because it makes it a good idea of \u200b\u200bthe potential of jQuery even at levels of nearly pure web design. The idea was to have in the home page and the article offers a fully automatic feature that creates a graphic showing the percentage discount, to match the product photos.
I used jQuery to achieve this only small improvements in design.
In practice, the discount rate is calculated using the tags that contain the value of the list price and the sale value, and then you enter that percentage in an appropriately drafted block with the CSS (which is also built with jQuery). The only thing outside of the file. Html you need is a PNG24 with the label to be used as background of the block created. The graphics must be in. Png 24bit because we need to perfect transparency, of course, since we're going to stack the coupon on different backgrounds.
HTML section that concerns us has a structure like this:
\u0026lt;div class="offerte">
Here jQuery code to calculate the percentage discount applied:
$ ('. Offer'). each (function (i) {var
lp = $ (this). children ('. list_price'). text ();
text ()
.
Then with the expression that follows it truncates the last character in the string stored in each variable. This is to delete the final of the euro, we would make the data unusable in math. Eye that the decimal separator is a symbol period (.) and not a comma (,) because jQuery in the second case would not recognize the values \u200b\u200bstored as numbers. The variable discount is calculated the percentage discount: the method round (x) object
Math
rounds the value of the discount to the nearest integer. This is very useful in terms of graphics, as one or more decimal places "squeeze" too much text in our label. At this point, building a block element \u0026lt;div>
for entering text as the value of the variable
discount for to view this page formatted as you wish: 
$ ('. Offer'). each (function (i) {var lp = $ (this). children ('. list_price'). text (); lp = lp. substr (0, lp.length - 1); var sp = $ (this). children ('. sell_price'). text ();
sp.substr sp = (0, sp.length - 1); var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $
(this). children ('. vignette'). css (dot). html (discount). ('-'). prepend append ('%');
});
In essence, it hangs
a
div the block "offers" and is attributed to the style you created earlier, using a variable (using
css (properties)
, we'll see shortly), the HTML content as you enter the variable discount (
html (val)
) and garnish with the necessary symbols "-" (as it is a discount) and "%", respectively
' height ': '50px',
'z -index ': '100', 'text-align': 'center', 'padding-top': '1 em ', ' font ',' bold italic 1em "Century Gothic", century, sans-serif ' , 'color': '# fede60',
'position': 'absolute', 'top': '70px ', ' left ': '125px' }
The position: absolute
serves to place the sticker partially superimposed on the photo of the product.
The only thing to note here is that in order to enable absolute positioning of the label within the block "offers", it is vital that it has CSS property position: relative . If not, the ranking will be compared to the first block relatively positioned ancestor, and this will almost certainly ensure that all stamps overlap. And this is not what we want, right? In the end, what you get will be something like this:
Here's the complete script self-sufficient: $ (document). Ready (function () {var label = {
'background': 'transparent url (images / bollino.png) top center no-repeat', 'width': '50px ', ' height ': '50px', 'z-index': '100 ',
' text-align ':' center ',
' padding-top ': '1 em' ,
sp.substr sp = (0, sp.length - 1);
var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $ (this). children ('. vignette'). css (dot). html (discount). prepend ('-'). ('%'); append});} ) [Added: On the issue of transparency in IE6] The issue is too old to be having always be to discuss: IE6 does not support alpha transparency of PNG24, and our stamp on this browser degrades to a size chart unpleasant. Nobody today would never surf the internet with such a program! But for those who are forced, there's always some loophole in part. One method is to use the script PNG Fix Andreas Eberhard, who generally does an excellent job in restoring the proper PNG transparency of the web page on which it is invoked. The other solution is the old method of GIF images to PNG as a replacement, since at least the single-bit GIF transparency is supported by this browser.
In this case, if used one labeled "solid" (solid color) like mine above, should create a GIF only two colors: one for the color of the label, the other for transparency, and without dithering. In this way, when the label is combined with other elements, the results are much more acceptable.
One way to implement this system in our last script without changing anything is to use jQuery to recognize the model and version of the browser interprets the page, and act accordingly.
For example, by adding at the end of the script, simply
if ($. Browser.msie & & $. Browser.version
$ ('. Vignette'). Css ('background', 'Transparent url (images / bollino.gif) top center no-repeat');}
actually use the method
$. Browser.version
is deprecated because using jQuery as regards the characteristics
These days I worked hard on the new version of the store Treasures of the Dragon, which primarily sells natural products for health and welfare, as well as other interesting articles.
This shop was launched in November 2008, and I was busy almost all the creative and technical. It was decided to change the graphics from "dark" to "light", and I took the opportunity to add a few enhancements.
Among the many cute little things implemented, today I want to talk about the label I created for the products on offer (a label that indicates the percentage discount applied on), because it makes it a good idea of \u200b\u200bthe potential of jQuery even at levels of nearly pure web design. The idea was to have in the home page and the article offers a fully automatic feature that creates a graphic showing the percentage discount, to match the product photos.
I used jQuery to achieve this only small improvements in design.
In practice, the discount rate is calculated using the tags that contain the value of the list price and the sale value, and then you enter that percentage in an appropriately drafted block with the CSS (which is also built with jQuery). The only thing outside of the file. Html you need is a PNG24 with the label to be used as background of the block created. The graphics must be in. Png 24bit because we need to perfect transparency, of course, since we're going to stack the coupon on different backgrounds.
HTML section that concerns us has a structure like this:
\u0026lt;div class="offerte">
- \u0026lt;h1> article name \u0026lt;/ h1>
- \u0026lt;p> article description \u0026lt; / p> \u0026lt;img alt = "photo article" /> \u0026lt;span class="list_price"> € 14.00 \u0026lt;/ span> \u0026lt;span class="sell_price"> € 12.60 \u0026lt;/ span>
- \u0026lt;/ div>
Here jQuery code to calculate the percentage discount applied:
$ ('. Offer'). each (function (i) {var
lp = $ (this). children ('. list_price'). text ();
lp.substr lp = (0, lp.length - 1);
var sp = $ (this). children ('. sell_price'). text ();
sp.substr sp = (0, sp.length - 1);
var discount = Math.round ((100 - ((sp / lp) * 100)));
});
method
each (callback)
used to iterate over all items of the class "offerings" on the page, because it is said that the discount rate applied is the same on all Articles.
First we store the old price and assume that each in its own variable with the method
text ()
.
Then with the expression that follows it truncates the last character in the string stored in each variable. This is to delete the final of the euro, we would make the data unusable in math. Eye that the decimal separator is a symbol period (.) and not a comma (,) because jQuery in the second case would not recognize the values \u200b\u200bstored as numbers. The variable discount is calculated the percentage discount: the method round (x) object
Math
rounds the value of the discount to the nearest integer. This is very useful in terms of graphics, as one or more decimal places "squeeze" too much text in our label. At this point, building a block element \u0026lt;div>
for entering text as the value of the variable
discount for to view this page formatted as you wish:
$ ('. Offer'). each (function (i) {var sp.substr sp = (0, sp.length - 1); var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $
(this). children ('. vignette'). css (dot). html (discount). ('-'). prepend append ('%');
});
In essence, it hangs
a
div the block "offers" and is attributed to the style you created earlier, using a variable (using css (properties)
, we'll see shortly), the HTML content as you enter the variable discount (
html (val)
) and garnish with the necessary symbols "-" (as it is a discount) and "%", respectively
first
and
after the inserted text.
For the image of the stamp I just used one of
default Photoshop shapes:
Now we just need to create the CSS to format and put our sticker.'width': '50px ',
Again using jQuery to create a variable to be passed easily to their block by the method
css (properties)
.
{var label = 'background': 'transparent url (images / bollino.png) top center no-repeat',
' height ': '50px',
'z -index ': '100', 'text-align': 'center', 'padding-top': '1 em ', ' font ',' bold italic 1em "Century Gothic", century, sans-serif ' , 'color': '# fede60',
'position': 'absolute', 'top': '70px ', ' left ': '125px' }
The position: absolute
serves to place the sticker partially superimposed on the photo of the product.
The only thing to note here is that in order to enable absolute positioning of the label within the block "offers", it is vital that it has CSS property position: relative . If not, the ranking will be compared to the first block relatively positioned ancestor, and this will almost certainly ensure that all stamps overlap. And this is not what we want, right? In the end, what you get will be something like this:
Here's the complete script self-sufficient: $ (document). Ready (function () {var label = {
'background': 'transparent url (images / bollino.png) top center no-repeat', 'width': '50px ', ' height ': '50px', 'z-index': '100 ',
' text-align ':' center ',
' padding-top ': '1 em' ,
'font', 'bold italic 1em "Century Gothic", century, sans-serif',var sp = $ (this). Children (' . sell_price '). text ();
'color': '# fede60',
'position': 'absolute',
'top': '70px ',
'left': '125px '}
$ ('. Offer '). each (function (i)
{var lp = $ (this). Children ('. List_price'). Text ();
lp.substr lp = (0, lp.length - 1);
sp.substr sp = (0, sp.length - 1);
var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $ (this). children ('. vignette'). css (dot). html (discount). prepend ('-'). ('%'); append});} ) [Added: On the issue of transparency in IE6] The issue is too old to be having always be to discuss: IE6 does not support alpha transparency of PNG24, and our stamp on this browser degrades to a size chart unpleasant. Nobody today would never surf the internet with such a program! But for those who are forced, there's always some loophole in part. One method is to use the script PNG Fix Andreas Eberhard, who generally does an excellent job in restoring the proper PNG transparency of the web page on which it is invoked. The other solution is the old method of GIF images to PNG as a replacement, since at least the single-bit GIF transparency is supported by this browser.
In this case, if used one labeled "solid" (solid color) like mine above, should create a GIF only two colors: one for the color of the label, the other for transparency, and without dithering. In this way, when the label is combined with other elements, the results are much more acceptable.
One way to implement this system in our last script without changing anything is to use jQuery to recognize the model and version of the browser interprets the page, and act accordingly.
For example, by adding at the end of the script, simply if ($. Browser.msie & & $. Browser.version
$ ('. Vignette'). Css ('background', 'Transparent url (images / bollino.gif) top center no-repeat');}
actually use the method
$. Browser.version
is deprecated because using jQuery as regards the characteristics
a browser, that his version
, as explained in the documentation page dedicated to the method
jQuery.support
.
Tuesday, August 4, 2009
Wedding Napkin Sayings
first time Holga?
here are the first published photos of those made with the '
Holga 120N: they are all made with film B / W Ilford Delta400 expired, found on Ebay, and then scanned with an Epson V500 + VueScan.
(I'm a morning to figure out what were the settings for me more effective to scan those negatives ... I finally found my configuration starting this thread
Analogue Photography group on Flickr to Italy and then customizing a bit 'and creating files. DNG with Lightroom to export. All this may change in the near future anyway ...) before everything is coming off a fairly heterogeneous set of three pictures (a fotohaiku
):
I Dreamt of Duchamp and I h in a meadow blue Our Little
whilst bodies twisted in carousel swerves
the world and then oh the world to fall down
With children's laughter Hanging from swings
Well, Hullo Angel
And the skipping rope turns
Whilst little bodies twist
In carousel swerves Well, Hullo Angel
It's the End of The World
Well, Hullo Angel
At the End of your Tether Well, Hullo Angel
Time for Sleep
Well, Hullo Angel
Time for Prayers
That which is Falling
here are the first published photos of those made with the '
Holga 120N: they are all made with film B / W Ilford Delta400 expired, found on Ebay, and then scanned with an Epson V500 + VueScan.
(I'm a morning to figure out what were the settings for me more effective to scan those negatives ... I finally found my configuration starting this thread
Analogue Photography group on Flickr to Italy and then customizing a bit 'and creating files. DNG with Lightroom to export. All this may change in the near future anyway ...) before everything is coming off a fairly heterogeneous set of three pictures (a fotohaiku
):
I Dreamt of Duchamp and I h in a meadow blue Our Little
whilst bodies twisted in carousel swerves the world and then oh the world to fall down
Leans on twisted sticks
Get the flash player here: http://www.adobe.com/flashplayer
var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "400", "450", "8", "#EEEEEE"); so.addVariable("source", "keyword"); so.addVariable("names", "holga1"); so.addVariable("userName", "LoneCamel"); so.addVariable("userId", "36203317@N04"); so.addVariable("ids", "holga1"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "on"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "EEEEEE") so.addVariable ("initialScale", "off") so.addVariable ("bgAlpha", "75"); so.write ("PictoBrowser090805003731");
evoke Duchamp as the tutelary deity of the first Holgafoto public seems least apt ... this big book is a retrospective on the production of Duchamp on one side and the other a collection of ephemerides. the blade you see is the famous readymade
which he called "in anticipation of a broken arm (
in advance of a broken arm
), and this seems very fitting.
second picture is the carousel in the Piazza della Repubblica in Florence. I had tentatively called "carousel", and this made me in mente un verso di
Hullo Angel
di Death In June, che fa:
Well, Hullo Angel
A Gift and a Smile
Well, Hullo Angel
As We walk a Crooked mile
And a Twisted Man
With children's laughter Hanging from swings
Well, Hullo Angel
And the skipping rope turns
Whilst little bodies twist
In carousel swerves Well, Hullo Angel
It's the End of The World
Well, Hullo Angel
At the End of your Tether Well, Hullo Angel
Time for Sleep
Well, Hullo Angel
Time for Prayers
That which is Falling
Should also be Pushed <="6.0"){
That Which Is Crawling
Should Also Be Crushed!
this also seemed very fitting. the last picture is a broken mirror, saw the same day in an installation in the courtyard of Palazzo Strozzi, by Yves Netzhammer called Inventories of abstraction, in the courtyard of Strozzina , you can see the Palace in broken pieces. the title is basically the version of the Anglophone Girogirotondo. and yes, this then just wore to the end ... all I get back, because, to honor the most surreal and dreamlike quality of the images that come out of a Holga, there's just nothing better than a fotohaiku that begins by evoking the Dadaism as a herald of the Anti-art and ends with none other than the end of the world. in the middle and it took us a nice song. 
mission accomplished!
and then two other, unrelated to one another mission accomplished! - zeitmaschine
- Holga viewfinder dear, I managed to hit only the glasses, the effect is not that bad.
the first train is a double exposure. The idea was to make a halo to Silvia, but then, thanks to 'useful
'double journey', however it is what is in space, the train, that what in his mind, which accompanies the first.
the last picture is a "time machine", because it seems a picture of the '70s, and not something contemporary.
and this is also very Holga.
Subscribe to:
Posts (Atom)