Posted by Mauro218 | 4 comments

Save space with a jQuery accordion

jQuery Accordion

Accordion is a very helpful tool that will help you save space and also organize better contents in several blocks. These are some characteristics:

Normally, the menu is displayed vertically
Click on an item, it will expand its submenu and hide other submenu
Usually, an Accordion has indicators to show the state of the menu

NOTE: If you want multiple sections open at once, don't use an accordion

Barcelona Information

Slogan

FC Barcelona is “more than a club” in Catalonia because it is the sports club that most represents the country and is also one of its greatest ambassadors.

The slogan “more than a club” is open-ended in meaning. It is perhaps this flexibility that makes it so appropriate for defining the complexities of FC Barcelona’s identity, a club that competes in a sporting sense on the field of play, but that also beats, every day, to the rhythm of its people’s concerns.

Anthem

El Cant del Barça is the name given to the official anthem of the Futbol Club Barcelona. It was first played in 1974 at Camp Nou as part of the club’s 75th anniversary celebration. The words were written by Jaume Picas and Josep Maria Espinàs and the music was composed by Manuel Valls i Gorina.

Club in figures

CAMP NOU
Capacity: 99.354
Dimensions: 105x68 m.
Opened: 24th Setember 1957

PROFESSIONAL FOOTBALL
3 teams: First team, Barça B, and Under 18 A

MEMBERS(177.246 members)
By gender:

Male 134.099
Female 43.147

Geographic Distribution:

Barcelona 63.361
Rest of Catalunya 87.890
Out of Catalunya 25.995

The Crest

Since 1910, the changes made to the design have been minimal, generally just modifying the aesthetics and the patterns used for the outline.

Javascript source Code

<script>
$(function() {
   $( "#accordion" ).accordion();
});
</script>

For more jQuery documentation and options about Accordions please visit http://docs.jquery.com/UI/Accordion#option-animated

FC Barcelona. "Identity" http://www.fcbarcelona.com/club/identity

Posted by Mauro218 | 4 comments

Barcelona jQuery Photo Gallery

A great way to display photos online is definitely by using a Photo Gallery.

jQuery and CCS can make your life easier and save you a lot of repetitive coding by using plugins.

Here we are going to show you how a jQuery plugin can help you create a simple but elegant Photo Gallery to display some of the best pictures in Barcelona's lifetime.

GalleryView is a plugin that provide an extensive set of options. It will allow you to adjust photos, thumbnail sizes, control not only speeds, but also element positions and transition styles.

Requirements

1. Install jQuery in Blogger
Add this code before </head> tag in your template

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

2. Install GalleryView plugin for jQuery
For an easy GalleryView installation in your blogger. Add the following code before </head> tag in your template

<!-- InstanceBeginEditable name="head" -->
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.timers-1.2.js' type='text/javascript'/>
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.galleryview-3.0-dev.js' type='text/javascript'/>
<link href='http://spaceforaname.com/galleryview/galleryview/css/jquery.galleryview-3.0-dev.css' rel='stylesheet' type='text/css'/>
<!-- InstanceEndEditable -->

Implementation

Create an unordered list of images and add the following function call to your JavaScript code:

$('#gallery').galleryView();

Demostration

Javascript source Code

<script>
$(function(){
   $('#myGallery').galleryView({
      panel_width: 550,
      panel_height: 300,
      autoplay: true
   });
});
</script>

For full development of this plugin please visit http://spaceforaname.com/galleryview/

Posted by Mauro218 | 2 comments

Improve your Blog with HTML5

What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

HTML 5 introduces new elements to HTML for the first time since the last millennium. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

How Did HTML5 Get Started?

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

The HTML5 <!DOCTYPE>

In HTML5 there is only one declaration, and it is very simple:

<!DOCTYPE html>

HTML5 Document

HTML5 introduces new tags that can help the blog development. Even well-formed HTML pages are harder to process than they should be because of the lack of structure. You have to figure out where the section breaks go by analyzing header levels. Sidebars, footers, headers, navigation menus, main content sections, and individual stories are marked up by the catch-all div element.

The following tags have been introduced for better structure:

section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside: This tag represents a piece of content that is only slightly related to the rest of the page.
header: This tag represents the header of a section.
footer: This tag represents a footer for a section and can contain information about the author, copyright information, etc.
nav: This tag represents a section of the document intended for navigation.
dialog: This tag can be used to mark up a conversation.
figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

Source Code Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>
    Barcelona World's Champions
  </title>
</head>
<body>
  <header>
    <h1>Clubs World cup</h1>
  </header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>
    <p>Copyright 2012 Mauro218</p>
  </footer>
</body>

For more information
W3Schools. "HTML5 Introduction".
http://www.w3schools.com/html5/html5_intro.asp

Tutorials Point. "HTML5-Quick Guide".
http://www.tutorialspoint.com/html5/html5_quick_guide.htm

Posted by Mauro218 | 1 comments

The new CSS3 background property option

CSS Background Property

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.

The new Background Option

CSS3 has introduced a new option that can apply to the background property. This option is background-size.

background-size

A new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera.

Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.

background-size: auto;

background-size: 275px 125px;

Source Code

#example1 {
   background-size: auto;
}

#example2 {
   background-size: 275px 125px;
}

For more information
WEBFLUX. "Background-size" http://www.css3.info/preview/background-size/

Posted by Mauro218 | 0 comments

Barcelona coaches jQuery UI Widgets

jQuery is a new kind of JavaScript Library.

Barcelona introduces the basics in jquery UI widgets

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery is free, open source software, designed to make it easier to navigate a document, select DOM elements, create animations, and handle events. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

jQuery Widgets.

jQuery offers a big variety of widgets. Here, the Barcelona team will show how to use the basic ones:

BUTTON

Source Code

<script>
$(function() {
  $("input.jbutton").button();
});
</script>
<div>
  <input type="submit" class="jbutton" value="Like Barcelona Link" />
</div>

DATEPICKER

Next Barcelona Match:

Source Code

<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>
<div>
  <p>Next Barcelona Match: <input id="datepicker" type="text"></p>
</div>

DIALOG

This is an animated dialog which is useful for displaying any Barcelona information.

Source Code

<script>
$(function() {

$("#opener").button();

$("#dialog").dialog({
  autoOpen: false,
  show: "blind",
  hide: "explode"
});

$("#opener").click(function() {
  $("#dialog").dialog( "open" );
    return false;
  });
});
</script>
<div>
  <div id="dialog" title="Welcome to FC Barcelona">
    <p>This is an animated dialog which is useful for displaying any Barcelona information.</p>
  </div>  
  <button id="opener">Open Barcelona Dialog</button>
</div>

SLIDER

Leonel Messi price tag: (Millions)

Source Code

<script>
$(function() {
$( "#slider-range" ).slider({
 range: true,
 min: 0,
 max: 400,
 values: [ 220, 280 ],
 slide: function( event, ui ) {
  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
 }
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
 " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<div>
  <p>
   <label for="amount">Leonel Messi price tag: (Millions)</label>
   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>
  <div id="slider-range"></div>
</div>

PROGRESSBAR

Source Code

<script>
$(function() {
  $( "#progressbar" ).progressbar({
   value: 59
  });
});
</script>
<div>
  <div id="progressbar"></div>
</div>

jQuery FC Barcelona

Barcelona jQuery Photo Gallery

Barcelona coaches jQuery UI Widgets