زینب فاطمی
سه شنبه 03 مرداد 1391, 20:03 عصر
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="richhtmlticker.js">
/***********************************************
* Rich HTML Ticker- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<style type="text/css">
.tickerstyle{width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;}
.messagediv{display: none;background:lightyellow}
</style>
</head>
<body>
<div id="myhtmlticker" class="tickerstyle">
<div class="messagediv">
<b><a href="http://www.javascriptkit.com/jsref/ajax.shtml">Ajax (XMLHttpRequest) reference</a></b><br />
A comprehensive, one page section on Ajax (XMLHttpRequest object) has just been added to the JavaScript Reference.
</div>
<div class="messagediv">
<b><a href="http://www.javascriptkit.com/dhtmltutors/ajaxgetpost.shtml">Performing GET and POST requests using Ajax</a></b><br />
This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax.
</div>
</div>
</body>
اینم فایل js با نام richhtmlticker.js
/*
* Rich HTML Ticker- by JavaScript Kit (http://www.javascriptkit.com)
* Freeware. Created Sept 13th, 08'
* This credit must stay intact for use
*/
var richhtmlticker={
loadingtext: '<em>Fetching Ticker Contents. Please wait...</em>', //Loading text if content is being fetched via Ajax
getajaxcontent:function($, config){
config.$ticker.html(this.loadingtext)
$.ajax({
url: config.msgsource,
error:function(ajaxrequest){
config.$ticker.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$ticker.html(content)
richhtmlticker.setupticker(config)
}
})
},
rotate:function(config){
if (config.$ticker.get(0)._hoverstate=="over"){
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
}
else{
config.$messages.eq(config.currentmsg).fadeOut(con fig.animateduration, function(){
config.currentmsg=(config.currentmsg<config.$messages.length-1)? config.currentmsg+1 : 0
config.$messages.eq(config.currentmsg).fadeIn(conf ig.animateduration, function(){
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
})
})
}
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
setupticker:function(config){
config.$messages=config.$ticker.find('div.'+config .msgclass).hide()
config.currentmsg=Math.min(parseInt(richhtmlticker .getCookie(config.id) || 0), config.$messages.length-1)
config.$messages.hide().eq(config.currentmsg).fade In(config.animateduration)
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
$(window).bind('unload', function(){richhtmlticker.cleanup(config)})
},
define:function(config){
jQuery(document).ready(function($){
config.$ticker=$('#'+config.id)
if (config.$ticker.length==0)
return
config.$ticker.css({overflow:'hidden'}).hover(
function(){this._hoverstate="over"},
function(){this._hoverstate="out"}
)
if (config.msgsource=="inline"){
richhtmlticker.setupticker(config)
}
else{
richhtmlticker.getajaxcontent($,config)
}
})
},
cleanup:function(config){
this.setCookie(config.id, config.currentmsg)
}
} //end richhtmlticker object
//////////// Declare instance of Rich HTML Ticker (invoked when page has loaded): ///////////////////////////
richhtmlticker.define({
id: "myhtmlticker", //main ticker DIV id
msgclass: "messagediv", //CSS class of DIVs containing each ticker message
msgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"
rotatespeed: 3000, //pause in milliseconds between rotation
animateduration: 1000 //duration of fade animation in milliseconds
})
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="richhtmlticker.js">
/***********************************************
* Rich HTML Ticker- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<style type="text/css">
.tickerstyle{width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;}
.messagediv{display: none;background:lightyellow}
</style>
</head>
<body>
<div id="myhtmlticker" class="tickerstyle">
<div class="messagediv">
<b><a href="http://www.javascriptkit.com/jsref/ajax.shtml">Ajax (XMLHttpRequest) reference</a></b><br />
A comprehensive, one page section on Ajax (XMLHttpRequest object) has just been added to the JavaScript Reference.
</div>
<div class="messagediv">
<b><a href="http://www.javascriptkit.com/dhtmltutors/ajaxgetpost.shtml">Performing GET and POST requests using Ajax</a></b><br />
This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax.
</div>
</div>
</body>
اینم فایل js با نام richhtmlticker.js
/*
* Rich HTML Ticker- by JavaScript Kit (http://www.javascriptkit.com)
* Freeware. Created Sept 13th, 08'
* This credit must stay intact for use
*/
var richhtmlticker={
loadingtext: '<em>Fetching Ticker Contents. Please wait...</em>', //Loading text if content is being fetched via Ajax
getajaxcontent:function($, config){
config.$ticker.html(this.loadingtext)
$.ajax({
url: config.msgsource,
error:function(ajaxrequest){
config.$ticker.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$ticker.html(content)
richhtmlticker.setupticker(config)
}
})
},
rotate:function(config){
if (config.$ticker.get(0)._hoverstate=="over"){
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
}
else{
config.$messages.eq(config.currentmsg).fadeOut(con fig.animateduration, function(){
config.currentmsg=(config.currentmsg<config.$messages.length-1)? config.currentmsg+1 : 0
config.$messages.eq(config.currentmsg).fadeIn(conf ig.animateduration, function(){
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
})
})
}
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
setupticker:function(config){
config.$messages=config.$ticker.find('div.'+config .msgclass).hide()
config.currentmsg=Math.min(parseInt(richhtmlticker .getCookie(config.id) || 0), config.$messages.length-1)
config.$messages.hide().eq(config.currentmsg).fade In(config.animateduration)
setTimeout(function(){richhtmlticker.rotate(config )}, config.rotatespeed)
$(window).bind('unload', function(){richhtmlticker.cleanup(config)})
},
define:function(config){
jQuery(document).ready(function($){
config.$ticker=$('#'+config.id)
if (config.$ticker.length==0)
return
config.$ticker.css({overflow:'hidden'}).hover(
function(){this._hoverstate="over"},
function(){this._hoverstate="out"}
)
if (config.msgsource=="inline"){
richhtmlticker.setupticker(config)
}
else{
richhtmlticker.getajaxcontent($,config)
}
})
},
cleanup:function(config){
this.setCookie(config.id, config.currentmsg)
}
} //end richhtmlticker object
//////////// Declare instance of Rich HTML Ticker (invoked when page has loaded): ///////////////////////////
richhtmlticker.define({
id: "myhtmlticker", //main ticker DIV id
msgclass: "messagediv", //CSS class of DIVs containing each ticker message
msgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"
rotatespeed: 3000, //pause in milliseconds between rotation
animateduration: 1000 //duration of fade animation in milliseconds
})