Thursday, May 27, 2010
iTunes lyrics tool
I was trying to find a good iTunes tool that can download lyrics automatically today, but didn't get any one. nLyrics always crashed, GimmeSomeTune cannot find most of my song, Get Lyrics cannot get any lyrics either. anyone know a good tool?
Wednesday, May 26, 2010
Text Replacement Pattern
I’m reading a book “Pro.CSS.and.HTML.Design.Patterns
”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.
Usage
Text Replacement pattern is a combination of Absolute pattern and Background pattern, it’s used to display an image, if the image fails to download, the text will be shown.
Implement
To implement Text Replacement pattern, we need three HTML elements, one is the container, one is used to show image, and another displays text(also you can combine the container and text together to reduce the tags). the following is the code:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
#h2 { position:relative; width:500px; height:100px; overflow:hidden; }
#h2 span { position:absolute; width:500px; height:100px; left:0; top:0;
background:url("500x100.png") no-repeat; }
</style>
</head>
<body>
<h1>Text Replacement</h1>
<h2 id="h2">Heading 2<span></span></h2>
</body>
this is the picture in browser:
and after the change the background image to a nonexistent image, then it looks like this:
Alternate
Yes, I know that you can use Alt attribute of img tag, like this:
<img src="500x100.png" alt="Heading 2"/>
It almost has the same effect with Text Replacement pattern, except that you can not control the text style. With Text Replacement pattern, you can decide how to display the text.
Note
This is not a complex pattern, but I think the most important part is “Combination”, you may know many CSS
properties, but can you combine them together to get a new style?
”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Usage
Text Replacement pattern is a combination of Absolute pattern and Background pattern, it’s used to display an image, if the image fails to download, the text will be shown.
Implement
To implement Text Replacement pattern, we need three HTML elements, one is the container, one is used to show image, and another displays text(also you can combine the container and text together to reduce the tags). the following is the code:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
#h2 { position:relative; width:500px; height:100px; overflow:hidden; }
#h2 span { position:absolute; width:500px; height:100px; left:0; top:0;
background:url("500x100.png") no-repeat; }
</style>
</head>
<body>
<h1>Text Replacement</h1>
<h2 id="h2">Heading 2<span></span></h2>
</body>
this is the picture in browser:
and after the change the background image to a nonexistent image, then it looks like this:
Alternate
Yes, I know that you can use Alt attribute of img tag, like this:
<img src="500x100.png" alt="Heading 2"/>
It almost has the same effect with Text Replacement pattern, except that you can not control the text style. With Text Replacement pattern, you can decide how to display the text.
Note
This is not a complex pattern, but I think the most important part is “Combination”, you may know many CSS
properties, but can you combine them together to get a new style?
Tuesday, May 25, 2010
Absolute pattern
I’m reading a book “Pro.CSS.and.HTML.Design.Patterns”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.
Absolute pattern
Like background pattern, it’s a simple CSS built in property, position:absolute. using absolute pattern
, you can position a HTML element at a specified position in its ancestor’s area, and the HTML
element will not be in the HTML tag flow(placed one by one).
here is the code(I added the border in CSS, so that you can find where each HTML tag is):
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Absolute</title>
<style type="text/css">
.positioned { position : relative; border : 1px solid #000000;}
.absolute {
position : absolute;
top : 10px;
left : 10px;
border : 1px solid #000000;
}
</style>
</head>
<body>
<h1>Absolute</h1>
<div class="positioned">
<span class="absolute">Sized Absolute</span>
</div>
</body>
Note
One thing to mention, in the book, the above code displays like this
but in my firefox
3.6, it looks like this
I think you already find the difference, the <div/> in my firefox looks like just one black line, does not wrap the <span/>, I think that’s because <span/> used Absolute pattern, it’s not a child of <div/> when shown in browser, although it is physically(in code). but from firebug, if you disable <span/>’s ‘position:absolute’, then everything looks like image in the book.
”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Absolute pattern
Like background pattern, it’s a simple CSS
built in property, position:absolute. using absolute pattern, you can position a HTML element at a specified position in its ancestor’s area, and the HTML element will not be in the HTML tag flow(placed one by one).here is the code(I added the border in CSS, so that you can find where each HTML tag is):
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Absolute</title>
<style type="text/css">
.positioned { position : relative; border : 1px solid #000000;}
.absolute {
position : absolute;
top : 10px;
left : 10px;
border : 1px solid #000000;
}
</style>
</head>
<body>
<h1>Absolute</h1>
<div class="positioned">
<span class="absolute">Sized Absolute</span>
</div>
</body>
Note
One thing to mention, in the book, the above code displays like this
but in my firefox
3.6, it looks like this
I think you already find the difference, the <div/> in my firefox looks like just one black line, does not wrap the <span/>, I think that’s because <span/> used Absolute pattern, it’s not a child of <div/> when shown in browser, although it is physically(in code). but from firebug, if you disable <span/>’s ‘position:absolute’, then everything looks like image in the book.
Monday, May 24, 2010
Jquery UI web site down?
When I visit JQuery UI website http://jqueryui.com/, it only show me “Welcome to nginx!”, the website is down? anyone knows why?
Background pattern
I’m reading a book “Pro.CSS.and.HTML.Design.Patterns”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.
Background pattern
In fact this is a built in property of CSS, which is used to set the background image of an HTML element.
for example:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
div {
background : url(corner.jpg) no-repeat;
width : 220px;
height : 220px;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<div></div>
</body>
it’s very simple, and most of coders known it.
Related CSS Properties
I just want to introduce several CSS properties that related to background.
background is a shorthand of a list of ordered properties, they are:
”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Background pattern
In fact this is a built in property of CSS
, which is used to set the background image of an HTML element.for example:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
div {
background : url(corner.jpg) no-repeat;
width : 220px;
height : 220px;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<div></div>
</body>
it’s very simple, and most of coders known it.
Related CSS Properties
I just want to introduce several CSS properties that related to background.
background is a shorthand of a list of ordered properties, they are:
- background-color : set the color of background
- background-image : set background image, which is used in this pattern
- background-repeat : by default, the background image is repeated to fill the whole HTML element, but you can control how to repeat or do not repeat, it has three values: repeat-x(horizontal), repeat-y(vertical), no-repeat
- background-attachment : sets whether a background image is fixed or scrolls with the rest of the page. so if you set it to scroll, then the background image may be not shown when you scroll down the page, but if it’s fixed, then the image always shown at the original place, no matter how to scroll
- background-position : the starting position of background image, you may use keywords(left, right, center, top, bottom) or integer or % to specify the position.
- it’s recommended to test the every pattern in the book, and you can use firebug
(firefox
Tuesday, May 18, 2010
clear:both
As I’m a newbie in coding CSS, so I use this blog to record any problem I’ve encountered, and most of time, the title is how I resolved it.
Problem:
now I want to create a form-like div:
<style type="text/css">
.test{
display : block;
}
.left {
float : left;
}
.right {
float : right;
}
#test {
width : 300px;
}
</style>
<div id="test">
<div class="test">
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
<div class="test">
<label class="left">Test2</label>
<textarea type="text" class="right"></textarea>
</div>
<div class="test">
<label class="left">Test3</label>
<input type="text" class="right"/>
</div>
</div>
what I want is each pair of label and input stay in one line. but using the above code, I got a ugly view. all the labels and inputs are in one line, other than in three lines. but I’ve already used display:block, that’s what I know used to clear the whole line, apparently, it doesn’t work here.
JQuery UI
:
then I remeber that jquery ui provides a CSS class ‘ui-help-clearfix’, so I add it to my code like this:
<div class="test ui-help-clearfix”>
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
this really works, why!
from firebug(firefox add-on), I found that ui-help-clearfix is the same as my CSS class ‘test’:
.ui-help-clearfix{
display : block;
}
then I checked the jquery ui code, found the following code:
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
I think what makes it work is the persudo-class ‘:after’. so I comment ‘.ui-helper-clearfix:after’, then the view got ugly again. the pesudo-class ‘:after’ is used to add content after the given selector. then I deleted ‘visibility: hidden;’ from ‘.ui-helper-clearfix:after’, and change height to 10px, so that I can see what added. I think you already know what added, just a dot ‘.’, :). and jquery ui hide the dot. after several test by deleting each CSS property, you can find that ‘clear:both’ helps to eliminate other tags shown in the same line, so I add ‘clear:both’ to my CSS class ‘test’, then everything works fine.
others:
another point is firebug cannot show the content added by pesudo class ‘:after’.
but why jquery ui uses ‘.ui-helper-clearfix:after’ to clear everything other than add ‘clear:both’ to ‘.ui-helper-clearfix’, emmm.... thinking.....
, so I use this blog to record any problem I’ve encountered, and most of time, the title is how I resolved it.Problem:
now I want to create a form-like div:
<style type="text/css">
.test{
display : block;
}
.left {
float : left;
}
.right {
float : right;
}
#test {
width : 300px;
}
</style>
<div id="test">
<div class="test">
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
<div class="test">
<label class="left">Test2</label>
<textarea type="text" class="right"></textarea>
</div>
<div class="test">
<label class="left">Test3</label>
<input type="text" class="right"/>
</div>
</div>
what I want is each pair of label and input stay in one line. but using the above code, I got a ugly view. all the labels and inputs are in one line, other than in three lines. but I’ve already used display:block, that’s what I know used to clear the whole line, apparently, it doesn’t work here.
JQuery UI
:then I remeber that jquery ui provides a CSS class ‘ui-help-clearfix’, so I add it to my code like this:
<div class="test ui-help-clearfix”>
<label class="left">Test1</label>
<input type="text" class="right"/>
</div>
this really works, why!
from firebug(firefox add-on), I found that ui-help-clearfix is the same as my CSS class ‘test’:
.ui-help-clearfix{
display : block;
}
then I checked the jquery ui code, found the following code:
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
I think what makes it work is the persudo-class ‘:after’. so I comment ‘.ui-helper-clearfix:after’, then the view got ugly again. the pesudo-class ‘:after’ is used to add content after the given selector. then I deleted ‘visibility: hidden;’ from ‘.ui-helper-clearfix:after’, and change height to 10px, so that I can see what added. I think you already know what added, just a dot ‘.’, :). and jquery ui hide the dot. after several test by deleting each CSS property, you can find that ‘clear:both’ helps to eliminate other tags shown in the same line, so I add ‘clear:both’ to my CSS class ‘test’, then everything works fine.
others:
another point is firebug cannot show the content added by pesudo class ‘:after’.
but why jquery ui uses ‘.ui-helper-clearfix:after’ to clear everything other than add ‘clear:both’ to ‘.ui-helper-clearfix’, emmm.... thinking.....
Wednesday, May 12, 2010
JQuery.wrap()
This may be a trap when using JQuery.wrap().
for example, when I want to wrap a form with a new div, then I continue to use newly created as a JQuery UI dialog, then I found that the dialog is empty, the was not in it.
for example, when I want to wrap a form with a new div, then I continue to use newly created as a JQuery UI dialog, then I found that the dialog is empty, the was not in it.
Subscribe to:
Posts (Atom)
Posts
