Oracle Diaries

Thursday, March 8, 2012

Show and hide paragraphs using JQuery

Below is the JQuery code I used to show and hide paragraphs when user clicks on the hyperlink - paragraph title:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
     <title>Test
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){  
   $('p').hide();
   
   //toggle the componenet with class msg_body  
   $('a.title').click(function()  {  
    var res = this.id.substr(1); 
   $('#p' + res).slideToggle(500);

   });
  });
 </script>  
</head>
<body>

   <a href="#" class="title" id="t1">Topic 1</a>
 <p id="p1">Testing 1
  </p>

 

  <a href="#" class="title" id="t2">Topic 2</a>
 <p id="p2">Testing 2

 

 

  <a href="#" class="title" id="t3">Topic 3</a>
 <p id="p3">Testing 3

 </p>

 

  <a href="#" class="title" id="t4">Topic 4</a>
 <p id="p4">Testing 4

</body>
</html>

Tuesday, March 6, 2012

7 CSS3 properties one must know

border-radius with that one you can create rounded corners

-webkit-border-radius: 4px;   
-moz-border-radius: 4px;   
border-radius: 4px;

and even circles:

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

box-shadow allows you to immediately apply depth to your elements

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;

box-shadow accepts four parameters: x-offset y-offset blur color of shadow

text-shadow same as box-shadow but applied to text
```
.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}
```
In the case above, first background is placed in the top left position (0 0) and second - the top right position (100% 0)

background-size

background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;

text-overflow text-overflow property can accept two values:
- clip
- ellipsis
This property can be used to cut off text that exceeds its container, while still providing a bit of feedback for the user, like an ellipsis.
```
.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}
```
Resize allows us to specify how a textarea is resized. Possible values: both: Resize vertically and horizontally horizontal: Limit resizing to horizontally vertical: Limit resizing to vertically none: Disable resizing
```
textarea {   
   -moz-resize: vertical;   
   -webkit-resize: vertical;   
   resize: vertical;   
}  
```

Tuesday, January 24, 2012

Multi-column layout

CSS3 has new properties with which one can create a multi-column layout (sort of like in a newspaper). So far it's only supported in Firefox and Safari 3 but not in IE.
Below is the code for both Safari 3 and Firefox that creates 3 columns with a 1em space between them

/*IE - not supported yet*/

column-count: 3;

column-width: 13em;

column-gap: 1em;




/*Mozilla*/

-moz-column-count: 3;

-moz-column-width: 13em;

-moz-column-gap: 1em;




/*Safari*/

-webkit-column-count: 3;

-webkit-column-width: 13em;

-webkit-column-gap: 1em;

Attribute selectors

element[foo="bar"]

•attribute beginning matches exactly

element[foo^="bar"]

The element has an attribute called foo that begins with "bar" e.g.

element[foo$="bar"]

•attribute ending matches exactly
The element has an attribute called foo that ends with "bar" e.g.

element[foo*="bar"]

•attribute contains the match
The element has an attribute called foo that contains the string "bar" e.g. Examples:

a[href^="ftp:"] { ... }

a[href$=".edu"] { ... }

img[src*="photos"] { ... }

What's new in CSS3

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin and background-clip
background-size
multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors
attribute selectors

Basic box model
overflow-x, overflow-y

Other modules
media queries
multi-column layout
Web fonts
speech

Monday, January 23, 2012

HTML5: fieldset and legend elements

fieldset element - is used to group a batch of controls together. Also it draws a box around the grouped elements. The title of such a group of controls is given by the first element of the fieldset - legend element. Example of grouped controls could be a question for multiple-choice test - collection of radiobuttons:

<form>
 <fieldset>
  <legend> Question 1 </legend>
   <input type="radio" name="answer"> A 
   <input type="radio" name="answer"> B 
   <input type="radio" name="answer"> C 
   <input type="radio" name="answer"> D 
 </fieldset>
</form>

To make sure the radiobuttons work together, they are given the same name. Fieldset element can be located ouside of a form but still be part of that form by specifying form attribute:

<fieldset form="form_id">

But the form attribute so far only supported in Opera browser. The HTML legend tag is used for providing a title or explanatory caption for the rest of the contents of the legend element's parent elements, in particular fieldset, figure, and details elements. Helpful links: HTML5 Forms What's different in HTML5?

Thursday, January 19, 2012

HTML5: Difference between article and section tags

An article is an independent, stand-alone piece of discrete content, sort of like a blogpost or a news item, a self-contained composition. It should be able to stand on its own as if it was independent of its surroundings and that can be independently distributable or reusable.

Section, on the other hand, is either a way of sectioning a page into different areas, or sectioning an article into sections. basically it is a thematic grouping of content, usually with a heading.

Section can be used to group related articles together. It helps to think of a web page as a newspaper that has different sections: sports, real estate, etc. with a number of articles in each section.

Each section should have a heading to identify that secion's content. If you don't use a heading in your section element, you most likely should not use the section element. In that case a div might be more appropriate.