Archive for November 2010
CSS Adjoining Element Properties
Fundamentals of CSS2 – Part 5
Introduction
This is portion 5 of my series, Principles of CSS2. In this part of the series I discuss about the padding, border and margin of an element. In the past portion I talked about the CSS Box, exactly where these adjoining capabilities exactly where released. You really should read that part ahead of reading this 1.
Appear at the Body component of a common web page critically you would understand that it has margin locations. It may possibly also have borders, if the web web site designer gave it borders (nonetheless, this is hardly done for the System element). DIV aspects, Paragraph elements, inline aspects (e.g. SPAN) all have padding, border and margin locations. With several of the factors, in the default predicament, the padding and/or border and/or margin may possibly not be current.
The Padding House
You can figure out the width of the padding region of an component. The following instance illustrates this for the Entire body and a DIV element:
<?xml model=”one.” encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML one. Stringent//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-stringent.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<style type=”text/css”>
physique padding:100px
div padding:75px width:fifty% border:reliable 2px blue
</design>
</head>
<body>
This is the Entire body component with 100px padding.
<div>
This is the DIV aspect with 75px padding.
</div>
</entire body>
</html>
Check out the over code. The padding width of the Physique aspect is 100px that for the DIV is 75px. I chose huge quantities for emphasis. Proper now, do not be concerned about the other issues you see in the DIV’s CSS rule. The unit of pixel has been utilized. If we had used the Proportion for the DIV, it would have been relative (measured with respect to) the width of the that contains element, Entire body. Notice: the Physique element does not actually have a containing element, even though the other factors (DIV, Paragraph, SPAN, etc.) do.
So to give padding to an factor, use the home name “padding”, adopted by a colon, and then value and unit, in the CSS rule. If you do not give an element a padding price, the browser chooses one particular for you. What the browser chooses is typically Okay. The difficulty is that different browsers may possibly choose different values, for the identical residence and for the exact same element.
The Border House
To give the border residence, you need to have the home title, border, adopted by a colon and then a a few-in-a single value. The a few-in-one value is composed of the border-style, the width of the border and the shade of the border. The individual values of the 3-in-1 are separated by areas.
The previously mentioned code illustrates this. The DIV aspect has a blue border. In the three-in-a single, the border-fashion is sound, the border-width is 2px and the border-colour is blue.
Border-types and their values as offered in the CSS2 specification are as follows:
none
No border. This price forces the computed value of ‘border-width’ to be ’0′.
hidden
Same as ‘none’, besides in terms of border conflict resolution for table elements (see afterwards).
dotted
The border is a collection of dots.
dashed
The border is a sequence of quick line segments.
solid
The border is a single line section.
double
The border is two sound lines. The sum of the two lines and the space among them equals the price of ‘border-width’.
groove
The border seems to be as although it had been carved into the canvas (floor).
ridge
The opposite of ‘grove’: the border seems as though it ended up coming out of the canvas.
inset
The border helps make the total box look as although it had been embedded in the canvas.
outset
The opposite of ‘inset’: the border tends to make the whole box look as although it ended up coming out of the canvas.
Observe: if you do not want a border, you will not use the 3-in-a single price. You will use possibly the fashion value by yourself set to “none”, or the width price by yourself, set to 0px.
The Margin Residence
The margin is given in a comparable way like padding. It could be something like
margin:3px
or
margin:0px
You use 0px when you do not want any margin. The following code shows a margin-width of 10px for the Entire body aspect. Check out the code and in this circumstance do not fear if the end result is not the way you predicted browser interpretation in this scenario is not quite great.
<?xml model=”1.” encoding=”UTF-eight”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML one. Stringent//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-rigorous.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<style kind=”text/css”>
system margin:10px border: strong 2px black
</type>
</head>
<body>
This is the System element with a margin-width of 10px.
</body>
</html>
Properties and their values decided on by Browsers
If you do not give a padding and/or border and/or margin worth, for any component, the browser chooses one for you. The difficulty is that the worth picked for a specific property and component differs with browsers.
That is it, for this part of the series. We keep on in the following component.
Chrys
To arrive at any of the elements of this sequence, just kind the corresponding title below in the Lookup Box of this page and click on Lookup (use menu if available):
Obtaining Commenced with CSS2
Style Sheet
CSS Backgrounds and Hues
CSS Box
CSS Bordering Aspect Properties
CSS Listing
CSS Text
CSS Classification
CSS Dimensions and Resolutions
Positioning HTML Factors with CSS and Layering
Principles of CSS Fonts
Pseudo-Elements
Pseudo-Classes
Principles of CSS Selectors
Written by Chrys
A lot more Css Articles
Introduction:
This is 1 of the very good instance on how we can load a ThickBox (Example: ThickBox related picture galleries and so forth.,) in our jQuery AJAX Tabs. Typically, if you consider to load a ThickBox straight into jQuery AJAX Tabs, the operation will not work effectively, in purchase to make this function we have to re-initiate tb_init() perform accordingly following the request is accomplishment. Just have a glance down below on how we going to solve this one.
Solution:
Re-Initiate tb_init() the moment the request is achievement.
1
tb_init(‘a.thickbox, area.thickbox, input.thickbox’)
Stay Preview / Obtain:
If you want to have a look at the jQuery AJAX Tabs, make sure you click right here to watch the exact same.
To obtain the snippet, click here
Case in point:
Beneath is an case in point on how we can do this in practice. I have number of Tab Panels, in one of the Tab Panel there are handful of photographs for which I require ThickBox functionality, that is when I click on the respective thumbnail picture it really should open up a popup with real picture.
jQuery Code:
one
2
three
four
five
six
seven
8
9
10
11
12
thirteen
14
fifteen
sixteen
17
18
19
twenty
21
22
23
24
twenty five
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
forty five
46
var reqPageUrl = new Array()
reqPageUrl[one] = “contentpage1.html”
reqPageUrl[2] = “contentpage2.html”
reqPageUrl[3] = “contentpage3.html”
reqPageUrl[4] = “contentpage4.html”
operate loadTab(id)
if (reqPageUrl[id].duration > )
$ (“#preloader”).demonstrate()
$ .ajax(
url: reqPageUrl[id],
cache: fake,
error: purpose(XMLHttpRequest, textStatus, errorThrown)
$ (‘#tabmenu a’).removeClass(‘active’) //get rid of all class=’active’ for all anchors
$ (“#material_tab”+id).toggleClass(‘active’) //include class to the present a single
$ (“#content”).empty().append(‘ Error in Loading page, please do examine with the path’)//if there is any error in the request
$ (“#preloader”).cover()//hide the preloader
,
good results: function(message)
$ (‘#tabmenu a’).removeClass(‘active’) //take away all course=’active’ for all anchors
$ (“#content_tab”+id).toggleClass(‘active’) //include course to the existing a single
$ (“#subject material”).empty().append(message)//first empty the subject material, then append subject material
$ (“#preloader”).hide()//cover the preloader
tb_init(‘a.thickbox, area.thickbox, input.thickbox’) //contact tb_init function to initiate ThichBox into your respective tab panels
)
$ (document).ready(purpose()
loadTab(two) //Following page loading, energetic tab 1
$ (“#preloader”).conceal()
$ (“#subject material_tab1″).click(operate(e)e.preventDefault() loadTab(one)) //Right here e.preventDefault() is to prevent the respective href from going the person off the link, that is the href url ‘#’ which is appending to the URL will heading off
$ (“#material_tab2″).click on(purpose(e)e.preventDefault() loadTab(2))
$ (“#content_tab3″).click(function(e)e.preventDefault() loadTab(three))
$ (“#content_tab4″).click on(function(e)e.preventDefault() loadTab(four))
)
Complete Code with HTML:
one
two
three
4
5
6
seven
eight
9
10
eleven
12
thirteen
14
fifteen
sixteen
17
18
19
20
21
22
23
24
twenty five
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
forty five
46
47
forty eight
49
50
51
fifty two
fifty three
54
55
56
57
58
59
60
61
62
63
64
sixty five
66
67
68
69
70
71
seventy two
73
74
75
76
77
78
79
eighty
81
82
eighty three
84
85
jQuery Ajax Tabs with ThichBox enabled – By http://www.developersnippets.com
var reqPageUrl = new Array()
reqPageUrl[1] = “contentpage1.html”
reqPageUrl[two] = “contentpage2.html”
reqPageUrl[3] = “contentpage3.html”
reqPageUrl[4] = “contentpage4.html”
purpose loadTab(id)
if (reqPageUrl[id].length > )
$ (“#preloader”).demonstrate()
$ .ajax(
url: reqPageUrl[id],
cache: bogus,
error: operate(XMLHttpRequest, textStatus, errorThrown)
$ (‘#tabmenu a’).removeClass(‘active’) //eliminate all class=’active’ for all anchors
$ (“#content_tab”+id).toggleClass(‘active’) //include class to the latest a single
$ (“#content”).empty().append(‘ Error in Loading web page, please do examine with the path’)//if there is any error in the request
$ (“#preloader”).cover()//hide the preloader
,
achievement: perform(message)
$ (‘#tabmenu a’).removeClass(‘active’) //get rid of all class=’active’ for all anchors
$ (“#content_tab”+id).toggleClass(‘active’) //add class to the latest one
$ (“#material”).empty().append(message)//1st empty the content material, then append content
$ (“#preloader”).hide()//hide the preloader
tb_init(‘a.thickbox, place.thickbox, input.thickbox’) //contact tb_init purpose to initiate ThichBox into your respective tab panels
)
$ (document).all set(function()
loadTab(2) //Soon after web page loading, lively tab 1
$ (“#preloader”).conceal()
$ (“#content_tab1″).click(function(e)e.preventDefault() loadTab(1)) //Here e.preventDefault() is to prevent the respective href from likely the user off the hyperlink, that is the href url ‘#’ which is appending to the URL will going off
$ (“#content material_tab2″).click(operate(e)e.preventDefault() loadTab(two))
$ (“#material_tab3″).click(purpose(e)e.preventDefault() loadTab(3))
$ (“#content material_tab4″).click on(operate(e)e.preventDefault() loadTab(four))
)
jQuery AJAX Tabs
Picture Gallery
Answer
Error Message
Loading Subject material Make sure you Wait around…
Live Preview / Download:
If you want to have a look at the jQuery AJAX Tabs, please click right here to watch the exact same.
To obtain the snippet, click on right here
Posts which you would like to go through:
How To: Make Tabs Reload and Consider Scripts making use of ExtJS
Bookmark: fifty+ beautiful jQuery apps
We the Team won in Truveo Developer Problem Contest – TechVideoBytes
Relevant Jquery Content