Archive for the ‘Học Javascripts’ category

Pausing up-down Scroller

April 2nd, 2009

Note: Updated March 16th, 06′. Fixed padding issue so right padding is correctly applied to the scroller.

Description: As its name suggests, this is a up-down scroller that pauses between each message! The look of the scroller is completely styled using external CSS, including the dimensions. Easily create a single line scroller just by adjusting the scroller’s height appropriately!

Demo:

Mã hóa trang web bằng Javascript

May 30th, 2008

Vừa rồi có đọc trên Xã Luận thấy bài viết mã hóa Html bằng javascript . Thấy hay và cũng sợ biết đâu lúc cần thì trên Xã Luận lại không còn nữa nên cứ post lên đây coi như thêm 1 chỗ để mọi người download nhỡ 1 source ở đâu đó bị die thì cũng có thể vào đây download được

ma-hoa-javascript

Mã nguồn được lấy từ xaluan.com 

Thay đổi kích thước font chữ trên website

March 24th, 2008

Có lần mình nhìn thấy trên website nào đó có thấy thay đổi được kích thước font chữ.Có thể phóng to chữ hoặc thu nhỏ font chữ trên website.Thấy hay hay nên mình đã tìm ra và hôm nay mang lên đây để chi sẻ cùng mọi người.
bạn click vào đây để download về xem nhé

 

 

 

 

Technorati Profile

Form field Progress Bar

March 23rd, 2008

Xin trình bày với các bạn cách giới hạn số ký tự trong <textarea>   

Trước hết mời các bạn xem DEMO cái đã.

Sau khi đã xem demo rồi bây giờ bạn muốn làm được như vậy ? Bạn làm theo 2 bước đơn giản sau đây.

Bước 1:Bạn copy hết đoạn code này vào giữa cặp thẻ <head></head> của trang web của bạn.

<style type="text/css">

.progress{
    width: 1px;
    height: 14px;
    color: white;
    font-size: 12px;
  overflow: hidden;
    background-color: navy;
    padding-left: 5px;
}

</style>

<script type="text/JavaScript">

/***********************************************
* Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/
* Modified by Dynamic Drive for minor changes
* Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/

function textCounter(field,counter,maxlimit,linecounter) {
    // text width//
    var fieldWidth =  parseInt(field.offsetWidth);
    var charcnt = field.value.length;       

    // trim the extra text
    if (charcnt > maxlimit) {
        field.value = field.value.substring(0, maxlimit);
    }

    else {
    // progress bar percentage
    var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
    document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px";
    document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
    // color correction on style from CCFFF -> CC0000
    setcolor(document.getElementById(counter),percentage,"background-color");
    }
}

function setcolor(obj,percentage,prop){
    obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}

</script>

 

Bước 2:Đây là bước sử dụng.bạn tạo ra 1 Form rồi gọi hàm textCounter(…) để giới hạn số ký tự được gõ trên texterea thôi.

<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,’progressbar1′,20)"
onKeyUp="textCounter(this,’progressbar1′,20)"
onFocus="textCounter(this,’progressbar1′,20)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>

 

–Xong–

Mike’s DHTML scroller

March 23rd, 2008

Bài này dài mình lại đang có chút việc bận nên copy nên đây trước để mọi người tham khảo.Mình sẽ dịch sau.Các bạn cố gắng đọc tiếng anh vậy.Nếu bạn đọc tốt tiếng anh thì còn dễ hiểu hơn khi dịch ra.Vì tiếng anh của mình cũng Armator lắm.Tuy nhiên mình cũng quen làm cái này nên nhiều khi chỉ cần đọc lướt qua là hiểu họ định nói gì rùi. :D

Chúc các bạn một tuần mới tràn đầy sinh lực.

Author: Mike Hall

Updated: July 22nd, 02′ By Dynamic Drive for NS6 functionality

Description: Similar to our own DHTML scroller creation (Pausing up-down scroller), Mike’s DHTML scroller features smooth pausing between messages, configurable scroll speed, color, and font. Oh yes, and the script’s cross browser functional too…

 

Step 1: Copy the below into the <body> section of your web page where you wish the scroller to appear:

<div id="tempholder"></div>
<script language="JavaScript" src="dhtmllib.js"></script>
<script language="JavaScript" src="scroller.js"></script>
<script language="JavaScript">

/*
Mike’s DHTML scroller (By Mike Hall)
Last updated July 21st, 02′ by Dynamic Drive for NS6 functionality
For this and 100’s more DHTML scripts, visit http://www.dynamicdrive.com
*/

//SET SCROLLER APPEARANCE AND MESSAGES
var myScroller1 = new Scroller(0, 0, 480, 32, 1, 5); //(xpos, ypos, width, height, border, padding)
myScroller1.setColors("#006600", "#ccffcc", "#009900"); //(fgcolor, bgcolor, bdcolor)
myScroller1.setFont("Verdana,Arial,Helvetica", 2);
myScroller1.addItem("<b>Click here for <a href=’http://dynamicdrive.com’>Dynamic Drive</a>, the net\’s #1 DHTML site!</b>");
myScroller1.addItem("<b>Visit <a href=’http://www.brainjar.com’>Brain Jar</a>, Mike\’s great coding site!</b>");
myScroller1.addItem("<b>Looking for free JavaScripts? Visit <a href=’http://javascriptkit.com’>JavaScript Kit.</a>");
myScroller1.addItem("<b>Discuss and get help on web coding, at <a href=’http://www.codingforums.com’>CodingForums.com</a></b>");

//SET SCROLLER PAUSE
myScroller1.setPause(2500); //set pause beteen msgs, in milliseconds

function runmikescroll() {

  var layer;
  var mikex, mikey;

  // Locate placeholder layer so we can use it to position the scrollers.

  layer = getLayer("placeholder");
  mikex = getPageLeft(layer);
  mikey = getPageTop(layer);

  // Create the first scroller and position it.

  myScroller1.create();
  myScroller1.hide();
  myScroller1.moveTo(mikex, mikey);
  myScroller1.setzIndex(100);
  myScroller1.show();
}

window.onload=runmikescroll
</script>
<div id="placeholder" style="position:relative; width:420px; height:32px;"> </div>

 

Step 2: The script requires two external JavaScript libraries to run, which you’ll need to download and put in your webpage directory. Download the following zip file, and extract its contents:

mikescroll.zip (download by right clicking, and selecting "Save as")

As mentioned, upload the two .js files contained inside to your webpage directory.

The scroller comes with many options, which you set through it’s methods. Some of these methods are used in the above code, while others aren’t. They are:

Scroller(x, y, width, height, border, padding) * Creates a new Scroller object positioned at (x,y) with the given width and height. The border and padding values define the size of the border around the scroller and margin between the border and the item text.
setColors(fgcolor, bgcolor, bdcolor) Sets the default text, background and border colors, respectively, for the scroller. Note that you can insert HTML tags in the item text to mix text colors. The defaults are black, white and black respectively.
setFont(face, size) Sets the default font face and size for item text. Any values allowed in a <FONT> tag can be used. Note that you can insert HTML tags in the item text to mix fonts. The defaults are "Arial,Helvetica" and 2 respectively.
setSpeed(pps) Sets the scroll speed in pixels per second. The default is 50.
setPause(ms) Sets the amount of time the scroller will pause whenever a new item scrolls into view. This pause gives the user time to read the text before it starts moving again. The time is given in milliseconds (1000ms = 1 second). The default is 2000.
addItem(str) * Use this method to create the items for a scroller. The string can contain text and HTML tags so you can use images, links, etc. You can add as many items as you want. Text is wrapped automatically to fit within the scroller but note that if an item exceeds the defined width or height of the scroller, it will be clipped.

As you can see, it’s one robust scroller Mike’s created!

Expandable ticker

March 23rd, 2008

 

Mô tả : Script này sẽ mở rộng nội dung ticker.Xem DeMo tại đây trước khi đọc code dưới đây.

Bước 1:Copy đoạn code dưới đây vào phần <head>

Code:

<style>
#listbutton{
border:1px solid #4B4B4B;
background-color:#F3F3F3;
width:50px;
height:12px;
font: normal 11px Arial;
text-align:center;
cursor:pointer;cursor:hand;
}
.expandhighlight, .expandhighlight a{
color:red;
}
</style>

Bước 2:

Paste đoạn code dưới đây vào chỗ muốn hiển thị trên trang của bạn

<script language="JavaScript1.2">

//Expandable ticker script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted)
var tickercontents=new Array()
tickercontents[0]=’See what\’s New at Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">[Read more]</a>’
tickercontents[1]=’Browse the most popular scripts on Dynamic Drive <a href="http://www.dynamicdrive.com/hot.htm">[Read more]</a>’
tickercontents[2]=’<a href="http://www.dynamicdrive.com/link.htm">Link back to Dynamic Drive!</a>’

//configure the below 2 variables to set the width/background color of the ticker
var tickerwidth=’475px’
var tickerbgcolor=’#DDDDFF’

//configure the below variable to determine the delay between ticking of messages (in miliseconds)
var tickdelay=3000

////Do not edit pass this line////////////////

var ie4=document.all
var ns6=document.getElementById
var ns4=document.layers

var currentmessage=0
var tickercontentstotal=”

function changetickercontent(){
if (ns4){
tickerobj.document.tickernssub.document.write(’<b><a href="#" onClick="return expandlist(event)">Expand</a></b> | ‘+tickercontents[currentmessage])
tickerobj.document.tickernssub.document.close()
}
else if (ie4||ns6){
tickerobj.innerHTML=tickercontents[currentmessage]
previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) : eval("expand"+currentmessage)
tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval("expand"+previousmessage)
tickerexpand_previousitem.className=""
tickerexpand_item.className="expandhighlight"
}

currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1
setTimeout("changetickercontent()",tickdelay)
}

function start_ticking(){
if (ns4) document.tickernsmain.visibility="show"
tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4? document.tickernsmain : ""
tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand") : ns4? document.expandlayer : ""

for (i=0;i<tickercontents.length;i++) //get total scroller contents
tickercontentstotal+=’<div id="expand’+i+’">- ‘+tickercontents[i]+’</div>’
if (ie4||ns6)
tickerexpandobj.innerHTML=tickercontentstotal
else{
tickerexpandobj.document.write(tickercontentstotal)
tickerexpandobj.document.close()
}
changetickercontent()
}

function expandlist(e){
if (ie4||ns6){
tickerexpand_parent=ie4? tickerexpand.parentElement : document.getElementById("tickerexpand").parentNode
tickerexpand_parent.style.display=(tickerexpand_parent.style.display=="none")? "" : "none"
}
else{
document.expandlayer.left=e.pageX-e.layerX
document.expandlayer.top= e.pageY-e.layerY+20
document.expandlayer.visibility=(document.expandlayer.visibility=="hide")? "show" : "hide"
return false
}
}

if (ie4||ns6)
document.write(’<table border="0" style="width:’+tickerwidth+’;border:1px solid black;text-indent:2px" bgcolor="’+tickerbgcolor+’" cellspacing="0" cellpadding="0"><tr><td width="90%" id="tickerlist" bgcolor="’+tickerbgcolor+’"></td><td width="10%" bgcolor="’+tickerbgcolor+’"><div id="listbutton" onClick="expandlist()">Expand</div></td></tr><tr style="display:none"><td id="tickerexpand" width="90%" bgcolor="’+tickerbgcolor+’"> </td><td width="10%"></td></tr></table>’)

window.onload=start_ticking
</script>

<ilayer id="tickernsmain" width=&{tickerwidth}; bgColor=&{tickerbgcolor}; visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer></ilayer>
<layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide></layer>

 

 

Translucent scroller

March 23rd, 2008

Thêm một cái nữa về Scroller nào.Cái này gọi là scroller mờ ảo nhé.Mình gọi nó thế vì trông nó cứ mờ mờ ảo ảo.Mà cái câu translucent dịch ra cũng có nghĩa đó thì phải.Mình ngại dịch nên cứ đoán vậy.

Nào cùng xem DEMO nhé

 

Hướng dẫn:

Thực ra cũng chẳng gọi là hướng dẫn đâu. Mình chỉ paste cái code ra đây và bảo bạn cách chỉnh sửa chút thôi.

Code:

<script language="JavaScript1.2">

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width=’150px’
var scroller_height=’115px’
var bgcolor=’#E0EFD1′
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]=’Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!’
scrollercontent[1]=’Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.’
scrollercontent[2]=’Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.’

////NO need to edit beyond here/////////////

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write(’<div style="position:relative;width:’+scroller_width+’;height:’+scroller_height+’;overflow:hidden"><div id="canvas0" style="position:absolute;background-color:’+bgcolor+’;width:’+scroller_width+’;height:’+scroller_height+’;top:’+scroller_height+’;filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:’+bgcolor+’;width:’+scroller_width+’;height:’+scroller_height+’;top:’+scroller_height+’;filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>’)
else if (document.layers){
document.write(’<ilayer id=tickernsmain visibility=hide width=’+scroller_width+’ height=’+scroller_height+’ bgColor=’+bgcolor+’><layer id=tickernssub width=’+scroller_width+’ height=’+scroller_height+’ left=0 top=0>’+scrollercontent[0]+’</layer></ilayer>’)
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp=’setInterval("moveslide()",50)’
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility=’show’
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>

 

Bạn paste đoạn code trên vào chỗ bạn muốn hiện thị trên website của bạn.Chỉnh sửa nội dung Scroll cho phù hợp .Chỉ có vậy thôi,thật quá đơn giản nhỉ ? :D

Fading scroller

March 23rd, 2008

Dưới đây mình xin giới thiệu đến các bạn cách làm một Scroll updown tự động show ra các message như ví dụ ở dưới đậy Ví dụ:

>>  Xem Demo tại đây

 Cách làm như sau Bước 1 Trước hết bạn copy toàn bộ code dưới đây vào phần <head> của trang web.

Code:

<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]=’<a href="http://www.mangraovat.net">Mangraovat.net</a><br />Ket noi ban voi ca the gioi!’
pausecontent[1]=’<a href="http://www.hrvn.net">hrvn.net</a>’

pausecontent[2]=’<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.’

var pausecontent2=new Array()
pausecontent2[0]=’<a href="http://www.news.com">News.com: Technology and business reports</a>’
pausecontent2[1]=’<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>’
pausecontent2[2]=’<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>’

</script>

<script type="text/javascript">

/***********************************************

***********************************************/

function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write(’<div id="’+divId+’" class="’+divClass+’" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="’+divId+’1">’+content[0]+’</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="’+divId+’2">’+content[1]+’</div></div>’)
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// ——————————————————————-
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// ——————————————————————-

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV’s width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

// ——————————————————————-
// animateup()- Move the two inner divs of the scroller up and in sync
// ——————————————————————-

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// ——————————————————————-
// swapdivs()- Swap between which is the visible and which is the hidden div
// ——————————————————————-

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// ——————————————————————-
// setmessage()- Populate the hidden div with the next message before it’s visible
// ——————————————————————-

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>

Bước 2: Bạn copy đoạn mã sau vào chỗ muốn hiển thị pausing up-down scroller.

Code:

<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
</script>

 

Các nội dung trên mình để Demo. Bạn thay đổi lại cho phù hợp với trang web của ban.
                                                                        

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

Pausing up-down Scroller

March 22nd, 2008

Dưới đây mình xin giới thiệu đến các bạn cách làm một Scroll updown tự động show ra các message như ví dụ ở dưới đậy Ví dụ:

>>  Xem Demo tại đây

 Cách làm như sau Bước 1 Trước hết bạn copy toàn bộ code dưới đây vào phần <head> của trang web.

Code:

<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}
#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>

<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]=’<a href="http://www.mangraovat.net">Mangraovat.net</a><br />Ket noi ban voi ca the gioi!’
pausecontent[1]=’<a href="http://www.hrvn.net">hrvn.net</a>’

pausecontent[2]=’<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.’
var pausecontent2=new Array()
pausecontent2[0]=’<a href="http://www.news.com">News.com: Technology and business reports</a>’
pausecontent2[1]=’<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>’
pausecontent2[2]=’<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>’

</script>
<script type="text/javascript">
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write(’<div id="’+divId+’" class="’+divClass+’" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="’+divId+’1">’+content[0]+’</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="’+divId+’2">’+content[1]+’</div></div>’)
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// ——————————————————————-
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// ——————————————————————-

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV’s width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

// ——————————————————————-
// animateup()- Move the two inner divs of the scroller up and in sync
// ——————————————————————-

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// ——————————————————————-
// swapdivs()- Swap between which is the visible and which is the hidden div
// ——————————————————————-

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// ——————————————————————-
// setmessage()- Populate the hidden div with the next message before it’s visible
// ——————————————————————-

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>

Bước 2: Bạn copy đoạn mã sau vào chỗ muốn hiển thị pausing up-down scroller.

Code:

<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
</script>


Các nội dung trên mình để Demo. Bạn thay đổi lại cho phù hợp với trang web của ban.
                                                                       

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

Đồng hồ bằng javascript

March 22nd, 2008
 
 

1. Chèn đoạn code sau vào tệp tài liệu HTML

<script type="text/javascript">
function showtime(){
if (!document.all& &!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style=’font-size:14;color:blue;’>"+ctime+"</b>"
setTimeout("showtime()",1000)
}
window.onload=showtime
</script>

2. Chèn vào trong thẻ này

<span id=tick2></span>

3. Để thay đồi màu của đồng hồ

thelement.innerHTML="<b style=’font-size:14;color:blue;’>"+ctime+"</b>"

Bạn có thể đổi màu "color:blue;" (xanh) thành "color:red;" (đỏ) hoặc "color:black;" (đen)…..