Showing posts with label Java. Show all posts
Showing posts with label Java. Show all posts

Thursday, 8 October 2009

Top Tools and Sites to backup Twitter

If you are an active twitterer biggrin tweeting n times on twitter , chances are high that someone may try to hack account or report as spam or anything worse twisted .


But losing all that amount of tweets , friends , @replies , direct messages can be quite shocking !
Thus to again find your ex - friends and ex - followers will be quite hectic and boring mad !

And no !
Twitter does not have backup solution !

But yes !
Many several services and tools are available that will allow you to backup your twitter profile
,
here the big list !
mrgreen


It's easy, just authorize TweetBackup !

Features :
  • Runs Over The Internet
  • Backup
  • Installation Required
  • To Use
  • Twitter-Password Required

2 http://tweetake.com


This service allows you to take the backup of any of your Twitter Profile , like Followers, Friends, Favorites, Your Tweets, Direct Messages or you can choose to backup everything in one go at any point of time, just by providing your Twitter username and password in CSV format.


3. http://backupmytweets.com

Twitter only lets you see your most recent 3,200 tweets ! eek
Take control of your Twitter account and make it permanent. Get started as soon as you can so you don't lose any tweets!
See all your tweets on one web page, or download in HTML , XML or JSON

4. Friendbackup
A Java Application razz

  1. Click on the launch button.
  2. Save and open the file then wait for it to download.
  3. After running the file, a small window will open up.
  4. Click on the backup tab and enter your Twitter username and password.
  5. Then you can select what you’d like to backup (following, followers, DMs, tweets, and/or favorites).
  6. You can also view your stats and export your backup file.

Note : [You need Java 6 to run it.]

5. TwitterBackup
TwitterBackup is a tool that downloads all your tweets and stores them in XML format. The document type is identical to Twitter’s API.
A Java application idea ,
Download it and enter user name and password

In the ‘file name’ field you’ll need to enter name of the file where your tweets will be stored after they have been downloaded.
If the file exists, TwitterBackup will read it and add only newer tweets to it. This is an incremental backup and faster than a full backup.

If any one or more Tools or Websites are left , comment here !
rolleyes
read more...

Friday, 31 July 2009

1 Sript đổi màu background khá hay

[FD's BlOg] - Bài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước.
Xem demo : LIVE DEMO


Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.

Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>

<script type="text/javascript">
var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 16)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

- Các code màu xanh : 16 là số phần tử của mảng, 300 là thời gian delay giữa các lần đổi màu
- Chú ý đoạn code này : col_val = "#56" + c[x] +"00"; : đây là code tạo trị màu nền theo các phần tử trong mảng c , ví dụ khi x = 2 ta sẽ có màu nền là #562200.
- Ngoài ra bạn có thể chỉnh đoạn code trên lại như thế này : col_val = "#5600" + c[x] ; tức là trị màu sẽ thay đổi ở 2 bit cuối. ví dụ khi x=2 ta sẽ có màu nền là #560022

- Nếu muốn màu thay đổi nhiều hơn nưa thì các bạn cứ việc thêm phần tử vào mảng c. Ví dụ ta có 20 màu sẽ được thay đổi như bên dưới:

<script type="text/javascript">
var c = new Array("00", "10", "15", "20", "25", "30",
"35", "40", "45", "50","55", "60", "65", "70", "75", "80", "85", "90", "95", "AA");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 20)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

- Hãy tạo cho mình 1 list màu để việc thay đổi trong cho đẹp mắt.

Chúc các bạn thành công.
read more...

Friday, 19 June 2009

Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll


Cập nhật ngày 20/06/2009
[FD's BlOg] - Để tiện cho việc người khác lướt blog(web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó.

Để cho sinh động, ta nên tạo nút bằng hình ảnh.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.

Các bước thực hiện: (ở đây mình giới thiệu cho blogspot)
1. Đăng nhập vào blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code CSS bên dưới vào trước đọan code ]]></b:skin>

#top-buttom_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>

<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh}'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh}'/></a>
</div>

- Thay code {Link ảnh} thành địa chỉ URL của ảnh mà bạn muốn hiển thị.

Chú ý: trong lệnh javascript:scroll(0,9999999) số 9999999 đặt càng lớn càn tốt, nếu đặt nhỏ quá, đối với những trang dài, nó sẽ không nhảy đến cuối trang được.

Update (20/06/2009) - button nhảy vào giữa trang
- Ngoài việc cập nhật button nhảy vào giữa trang, mình còn giới thiệu cho các bạn 1 phương thức khác giúp nhảy xuống trang 1 cách chính xác hơn.
- Các bước thực hiện hoàn toàn tương tự như trên, chỉ thay đổi code ở bước 4 thành đoạn code bên dưới:

<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>

<div id='top-buttom_image'>
<a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh1}'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='{link ảnh2}'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh3}'/></a>
</div>

Chúc các bạn thành công.
read more...

Saturday, 9 May 2009

Menu sidebar (Main Menu and Submenu) hiệu ứng cực cool - Mootools effect

[FD's BlOg] - Thêm một hiệu ứng nữa của mootools, lần này ứng dụng để tạo menu sidebar, có kết hợp sổ dọc menu các menu con. Hiệu ứng trông rất bắt mắt, thích hợp cho những ai thích tạo menu ở sidebar. Ngòai ra mở rộng thêm có thể áp dụng cho các widget ở side, khi đó blog sẽ trông rất đẹp và gọn. Nhưng ở đây mình sẽ giới thiệu trước thủ thuật này cho menu.


Xem demo trực tiếp tại đây :http://fandung.110mb.com/sidebar-Moomenu/index.html

Hình minh họa:


Đầu tiên các bạn chèn code Java code CSS vào template:
1. Đăng nhập blog
2. Vào bố cục (Lauyout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Chèn code java vào dưới thẻ <head> hoặc trên thẻ </head>

<script type="text/javascript" src="http://fandung.110mb.com/sidebar-Moomenu/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var accordion = new Accordion('h3.menusection', 'div.menusection', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#333333');
toggler.setStyle('background', '#FFFFCC');

},

onBackground: function(toggler, element){
toggler.setStyle('color', '#FFFFFF');
toggler.setStyle('background', '#999999');

}
}, $('accordion'));
});
</script>

- Chú ý:

+ nên up file java http://fandung.110mb.com/sidebar-Moomenu/mootools.svn.js lên host riêng để tránh trường hợp hết bandwidth.
+ có thể sửa các code màu xanh trong code Java trên.(thay các trị màu theo ý bạn)


5. Tiếp tục tìm đến dòng ]]></b:skin> chèn trên nó đọan code CSS bên dưới :

}
ul, li, h3 {
border:0;
padding:0;
margin:0;
list-style:none;
}
h3{
background:#CCCCCC;
padding:4px;
font-size:12px;
color:#999999;
border-bottom:solid 2px #999999;
}

#main-moo{
width:200px;
margin:10px auto;
}
#accordion li{
border-bottom:solid 1px #DEDEDE;
}
#accordion li a{
padding:3px 6px; display:block;
text-decoration:none;
}
#accordion li a:hover{
background:#EFEFEF;}

- Thay các code màu theo ý của bạn.
6. Save template

7. Vào phần tử trang, tạo widget HTML/Javascript, chèn đọan code HTML bên dưới vào :

<div id="main-moo">
<div id="accordion">
<h3 class="toggler menusection">Home</h3>
<div class="element menusection">
<ul>
<li><a href="#1">About FD</a></li>
<li><a href="2">Contact</a></li>
<li><a href="3">RSS</a></li>
<li><a href="4">Help</a></li>
</ul>
</div>

<h3 class="toggler menusection">Blog Tips</h3>
<div class="element menusection">
<ul>
<li><a href="#1">Tips</a></li>
<li><a href="2">Design</a></li>
<li><a href="3">Hack</a></li>
<li><a href="4">Blogger</a></li>
</ul>
</div>


<h3 class="toggler menusection">Web Design</h3>
<div class="element menusection">
<ul>
<li><a href="#1">HTML</a></li>
<li><a href="2">CSS</a></li>
<li><a href="3">Javascript</a></li>
<li><a href="4">Flash</a></li>
</ul>
</div>

</div>
</div>


8. Save lại là xong.

Chúc các bạn thành công.
read more...

Friday, 8 May 2009

Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio

[FD's BlOg] - Một ứng dụng cho phép bạn hiển thị một field nào đó khi nhấp chọn vào một buttom radio đã được định sẵn. Dùng nhiều trong thiết kế contact form.

Xem demo ở đây : http://fandung.110mb.com/hide-show-email-field/show-radio.html

Dưới đây là minh họa về khung xác nhận mail

Hình minh họa:

Nhấp vào nút Yes thì field điền mail sẽ hiển thị, như hình bên dưới:


Code HTML:

<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" checked="checked" /><label for="newsletter-2">No</label>

<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>


Code Javascript:

<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>

read more...

Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)

[FD's BlOg] - Bài viết hôm nay mình xin được giới thiệu một style khác trong menu dạng phân cấp. Đó là menu sổ 1 hàng ngang, kèm theo hiệu ứng đóng mở menu con khi click chuột.

Xem trực tiếp demo ở đây : http://fandung.110mb.com/FD-glassNav/index.html


Xem hình minh họa:


Như các menu khác, menu này cũng gồm 3 phần : Code Java, code CSS, và code HTML
Trước tiên bạn download gói hình ảnh này về : FD-img.rar rồi up lên host lấy link để dùng cho code CSS.

Bây giờ ta bắt đầu chèn code java code CSS vào template:
1. Đăng nhập blog
2. Vào Bố cục(Layout)
3. Vào Chỉnh sửa code HTML (Edit code HTML)
4. Chèn code Javascript vào dưới dòng <head> (hoặc trên dòng </head>)

<script type="text/javascript" src="http://fandung.110mb.com/FD-glassNav/mootools.svn.js"></script>


<script type="text/javascript">
window.addEvent('load', function(){

$('sublinks').getElements('ul').setStyle('display', 'none');
$('s1_m').setStyle('display', 'block');

$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){
var layer = subLinkId+"_m";
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)
);
});

// --------------------------------------- //
// SHOW and HIDE Submenu with animation

var mySlide = new Fx.Slide('sublinks');

$('op1').addEvent('click', function(e){

var textLink = $('op1').innerHTML;

if(textLink=='Hide submenu'){
$('op1').innerHTML='Display submenu';
} else {
$('op1').innerHTML='Hide submenu';
}
e = new Event(e);
mySlide.toggle();
e.stop();

});
});
</script>

- Chú ý: nên down file http://fandung.110mb.com/FD-glassNav/mootools.svn.js về host riêng của mình, để tránh hết bandwidth.

5. Tiếp tục tìm đến dòng ]]></b:skin> và chèn code CSS bên dưới lên trên nó:

/* ----------- NAVIGATION----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation .right_link{
float:right;
font-size:11px;
line-height:32px;
margin:0 10px;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#000000;
font-weight:bold;
}
#navigation ul li a:hover{
color:#FFFFFF;
background:#A5A5A5;
}
/* ----------- SUBLINKS ----------- */
#sublinks{

width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}

- Chú ý: Thay các link ảnh màu xanh bằng link ảnh của bạn.

6. Save template.

7. Vào phần tử trang, tạo 1 widget HTML/Javascript và dán code HTML bên dưới vào:

<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Blog Tips</a></li>
<li id="s3"><a href="#">Web Design</a></li>
<li id="s4"><a href="#">FanDung</a></li>

</ul>
</div>
<div id="sublinks">
<ul id="s1_m">
<li><a href="#">Blog Tips</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Javascript</a></li>
</ul>
<ul id="s2_m">

<li><a href="#">Blogger</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Code HTML</a></li>
<li><a href="#">Scrpit</a></li>

</ul>
<ul id="s3_m">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javacsript</a></li>
</ul>
<ul id="s4_m">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>

</ul>

</div>
- Chú ý : các id=s1, s2, s3, s4 sẽ liên kết theo tứ tự với các id=s1_m, s2_m, s3_m, s4_m, và các id=s1_m, s2_m... là các Sub Menu

8. Save lại. Như vậy đã xong.

Chúc các bạn thành công.
read more...

Tuesday, 5 May 2009

Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools

[FD's BlOg] - Thủ thuật có thể áp dụng cho các widget của Sidebar có nội dung dài. Có kèm theo nút Star/Resume.

Các bạn có thể xem trực tiếp demo trên blog của mình (Widget sidebar : ☼ BlOg Tips) hoặc tại đây.




☼Bây giờ ta bắt đầu :

1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code javascript này vào sau dòng <head>

<script language="javascript" src="http://cnetjavascript.googlecode.com/files/mootools.svn.js" type="text/javascript"></script>


5. Tiếp tục xuống dưới, chèn tiếp đọan code CSS bên dưới ngay trên dòng ]]></b:skin>

#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:364px;
margin:0 auto;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width: 300px;
height: 300px;
display: block;
overflow: hidden;
position: relative;
}
#controller{
padding:6px;
font-size:11px;
color:#666;
}
#play_scroll_cont{display:none;}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width: 300px;
height: 330px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
width: 288px;
color: #333333;
text-align: left;
font-size: 11px;
margin: 0;
padding: 6px;
float: left;
}
#TickerVertical li .NewsTitle{
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}

#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display: block;
color: #000000;
font-size: 10px;
margin:6px 0 14px 0;
}

- Lưu ý: Hãy thay đổi các thuộc tính : màu chữ(color), màu nền(background), độ rộng(width, height), ... theo ý bạn.

6. Save template lại.
7. Tạo 1 widget HTML/Javascript, rồi dán code HTML bên dưới vào:

<div id="NewsTicker">
<h1>FD's BlOg - NewsTicker</h1>
<div id="controller">

<div id="stop_scroll_cont"><a id="stop_scroll"><img src="http://woorktuts.110mb.com/newsticker/pic/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop news scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="http://woorktuts.110mb.com/newsticker/pic/play.png" width="14" height="14" border="0" align="absmiddle"/></a> Play news scroll</div>
</div>
<div id="NewsVertical">
<ul id="TickerVertical">
<li>
TEXT 1
</li>

<li>
TEXT 2
</li>
</ul>

</div>
</div>
<script language="javascript" type="text/javascript" src="http://woorktuts.110mb.com/newsticker/newsticker.js">
</script>


- Lưu ý: nội dung sẽ trượt lần lượt theo thẻ <li>{nội dung}</li> , do đó bạn cần đặt thẻ <li> cho đúng vị trí để khi trượt trông hợp lý nhất.
+ Code màu cam chính là code tạo nút : Play/Stop

Chúc các bạn thành công.

read more...

Sunday, 26 April 2009

Thay đổi tốc độ chạy chữ (ảnh) bằng cách rê chuột (Javascript)

[FD's BlOg] - Hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật của lệnh marquee. Với thủ thuật này, ảnh (chữ) sẽ di chuyển 1 cách liên tục, không bị ngắt quảng giữa ảnh cuối cũng và ảnh đầu tiên. Và thứ 2 nữa là ta có thể thay đổi chiều dịch chuyển cũng như tốc độ dịch chuyển của ảnh (chữ) bằng cách rê chuột.

Đây là một ứng dụng thiêng về java nhiều hơn. Và với thủ thuật rất thích hợp cho việc trình diễn ảnh, hoặc 1 list bài viết nổi bật.

Với việc di chuyển chuột sang trái, ảnh sẽ chuyển động sang phải & ngược lại. Khi chuột đi vào giữa vùng hiển thị nội dung thì sự di chuyển ngừng lại.

Có thể xem demo ở đây: http://fandung-test.blogspot.com

☼Sau đây là cách thực hiện:

1. Tạo 1 widget HTML.
2. Sau đó dán code này vào:

///////// Code của javascript - DO NOT EDIT///////////////////
<script type="text/javascript">

function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}

(function(){

if(!document.createElement) return;

marqueeInit.ar = [];

document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}</style>');
var c = 0, tTRE = [new RegExp('^\s*$'), new RegExp('^\s*'), new RegExp('\s*$')],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;

/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (d+.d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = new RegExp('(-(.))');
String.prototype.encamel = function(s, m){
s = this;
while((m = s.match(dash)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/

if(!ie5){
dash = new RegExp('-(.)', 'g');
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}

if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}

function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};

marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}

function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}

function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse == 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete == 'boolean' && ims[i].complete && !window.opera)
ic++;
else {
ims[i].onload = function(){
if(++ic == ims.length)
cObj.setup();
};
}
if(ic == ims.length)
this.setup();
}
}
else this.setup()
}

Marq.prototype.setup = function(){
if(this.mq.setup) return;
this.mq.setup = this;
var s, cObj = this;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse == 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection == 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s)
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
this.c.style.visibility = 'visible';
this.runit();
}

Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}

Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}

Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}

Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
while ((c = c.parentNode)) if(c == this.c) return true;}
return false;
}

function resize(){
for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s)
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}

if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);

})();
</script>

///////// Nội dung hiển thị ///////////////////

<div class="marquee" id="fd-test1">

ĐOẠN TEXT MUỐN HIỂN THỊ

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'fd-test1',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //tốc độ mặc đinh khi không có rê chuột lên
mouse: 'cursor driven', //cho phép tác động chuột lên
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

<div class="marquee" id="fd-test2">
<img src="LINK ẢNH 1" />
<img src="LINK ẢNH 2" />
<img src="LINK ẢNH 3" />
<img src="LINK ẢNH 4" />
<img src="LINK ẢNH 5" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'fd-test2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //tốc độ mặc đinh khi không có rê chuột lên
mouse: 'cursor driven', //cho phép tác động chuột lên
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>

Thay đổi code màu xanh theo yêu cầu hiển thị của bạn, thay code link ảnh bằng ảnh của bạn.

3. Save lại là xong.

Chúc các bạn thành công.
Nguồn : tham khảo từ internet.
read more...

Saturday, 25 April 2009

Ảnh rõ hơn khi rê chuột vào, một ứng dụng của Javascript

[FĐ's BlOg] - Hôm nay mình xin giới thiệu 1 đọan code nhỏ để tạo hiệu ứng cho ảnh khi rê chuột vào. Thích hợp cho việc tạo các icon liên kết dạng ảnh.

Với thủ thủ thuật nhỏ này, ban đầu ảnh sẽ được làm mờ đi, khi ta rê chuột vào thì ảnh sẽ rõ lên (hoặc có thể ngược lại, tùy bạn hiệu chỉnh code)

Dưới đây sẽ là ví dụ cho bạn thấy:
☼Code:

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh" />

- Nếu bạn muốn làm mờ ảnh hơn thì thay số 40 (0.4) nhỏ lại. (ví dụ 30 (0.3) )
- Nêu muốn tạo liên kết khi nhấp chuột vào thì thêm lệnh bên dưới vào trong thẻ:
onclick="window.location.href='link liên kết'"

- Như vậy code sẽ trông như thế này:

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh" onclick="window.location.href='link liên kết'"/>

- Hoặc có thể làm theo cách cơ bản sau:

<a href="link liên kết">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" style="opacity:0.4;filter:alpha(opacity=40)" src="Link ảnh"/>
</a>


☼ Demo:



Chúc các bạn thành công.
read more...

Monday, 13 April 2009

Tạo các Tab nội dung

[FD's BlOg] - Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.


Ở đây mình giới thiệu 3 lọai tab:
A. Lọai 1:
Hình minh họa:


Code:

<style type="text/css">
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{
position: relative;
top: 1px;
}

.shadetabs li a.selected{
background-image: url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


B. Lọai 2:
Hình minh họa:


Code:

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul div id="flowertabs" class="modernbricksmenu2">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("flowertabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


C. Loại 3:
Hình minh họa:


Code:

<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<div id="pettabs" class="indentmenu">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("pettabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>


Chúc các bạn thành công.
read more...

Tuesday, 7 April 2009

JS : 1 ví dụ về lệnh OnMouseMove (phần 2)

JavaScript Events - OnMouseMove

[FD's BlOg] - Sự kiện OnMouseMove là sự kiện được kích hoạt khi người dùng di chuyển chuột lên một vùng cụ thể nào đó.Trong những ví dụ dưới đây, mình sử dụng sự kiên nàt để thay đổi hình ảnh.Khi người dùng di chuyển chuột vào dòng chữ "Di chuyển chuột vào đây để thay đổi hình ảnh" thì hình ảnh sẽ được thay đổi.

(Lưu ý: Đối với điều này để làm việc trong trình duyệt của bạn, bạn phải thật sự trỏ chuột đến hình ảnh đó).

<html>
<body>

<img src="{LINK Hình ảnh 1}" name="mouseover" width="300" height="150">

<p onmousemove="document.images['mouseover']
.src='{LINK Hình ảnh 2}'">Di chuyển chuột vào đây để thay đổi hình ảnh.</p>


</body>
</html>


Ngòai ra OnMouseDown còn có thể sử dụng để nhắc nhở người xem đây là hình ảnh có bản quyền (cấm sao chép) : (dòng lệnh này tương tự dòng thông báo khi rê chuột (đã post ở phần 1))

<html>
<body>

<img src="{LINK Hình ảnh của bạn}"
onmousemove="alert('Hình ảnh có bản quyền')" />

</body>
</html>
read more...

JS : Tạo 1 pop-up khi load trang web

[FD's BlOg] - Bài viết này mình xin giới thiệu về lệnh Onload trong Javascript. Cụ thể trong ví dụ dưới đây là tạo 1 pop-up khi load xong trang web.

Code:

<html>
<head>

<script type="text/javascript">

function pageloads()
{
alert ('Thông báo cần hiển thị ở pop-up')
}

</script>

</head>

<body onload="pageloads()">

</body>
</html>

Chúc các bạn thành công.
read more...

Monday, 6 April 2009

JS : 1 ví dụ về lệnh onmouseover trong JavaScript

JavaScript onmouseover Event

[FD's BlOg] - Bài viết này mình giới thiệu 1 ứng dụng nhỏ của lệnh onmouseover trong Java. Lệnh này sẽ tạo ra biến cố khi ta rê chuột vào 1 vùng được chỉ định sẵn.



Cấu trúc lệnh :
onmouseover="SomeJavaScriptCode"
Ví dụ : đọan code dưới sẽ tạo ta 1 cảnh báo nho nhỏ khi ta rê chuột vào hình, cụ thể trong ví dụ này sẽ là lời chào :"Chào mừng các bạn đến với BlOg FD!"

Code:
<img src="http://vinaanh.com/images0/41529/f/49b78835c1ce2_f.jpg" alt="FD's BlOg" onmouseover="alert('Chào mừng các bạn đến với BlOg FD!')" />


Kết quả:
FD's BlOg

read more...