Test

From OfWindsor

(Difference between revisions)
Jump to: navigation, search
Line 4: Line 4:
<body>
<body>
-
 
+
<!-- BEGINNING OF THE CODE FOR THE STRETCH-TICKER -->
-
<!-- BEGINNING OF THE CODE FOR THE CSS3 Message Propeller-->
+
<!----------------------------------------->
<!----------------------------------------->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!----------------------------------------->
-
<!-- Set the box-style within ".boxstyle" -->
 
-
<!-- Set the text-style within "a.linkstyle" -->
 
-
<!-- Set the hover-style (rollover-effect) within "a.linkstyle:hover" -->
 
-
<!-- Set the shadow-style for Internet Explorer within "shodowboxie" -->
 
-
<!-- "-moz-" is required for Firefox. "-webkit-" is required for Safari and Chrome -->
 
-
 
<style>
<style>
-
.boxstyle {  
+
#stage  {
-
text-align:center;
+
/* #stage should contain all style-attributes that remain unchanged during the animation */
 +
/* Do not change the name of #stage!!! */
 +
font-family:Arial;
 +
font-size:14pt;
 +
background:#ff0000;
 +
width:400px;
 +
text-align: center;
vertical-align:middle;
vertical-align:middle;
-
border-width:2px;
+
border: 2px solid #ffdddd;
-
border-color:#EEEEEE;
+
overflow:hidden;
-
border-style:solid;
+
padding:5px;
-
background-color:#DDDDDD;
+
cursor: pointer;
-
+
 
/* shadow for Firefox */
/* shadow for Firefox */
-
-moz-box-shadow: 5px 5px 5px #CCCCCC;
+
-moz-box-shadow: 5px 5px 5px #ffaaaa;
/* shadow for Chrome and Safari */
/* shadow for Chrome and Safari */
-
-webkit-box-shadow: 5px 5px 5px #CCCCCC;
+
-webkit-box-shadow: 5px 5px 5px #ffaaaa;
/* shadow for Opera */
/* shadow for Opera */
-
box-shadow: 5px 5px 5px #CCCCCC;
+
box-shadow: 5px 5px 5px #ffaaaa;
 +
/* shadow for Internet Explorer */
 +
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#ffaaaa');
/* rounded corners for Firefox */
/* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomright: 15px;
 +
/* rounded corners for Chrome and Safari */
/* rounded corners for Chrome and Safari */
-webkit-border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
 +
/* rounded corners for Opera */
/* rounded corners for Opera */
border-top-left-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
-
}
 
-
 
-
a.linkstyle {
 
-
font-family:Arial;
 
-
font-size:11pt;
 
-
font-weight:bold;
 
-
color:black;
 
-
text-decoration:none;
 
-
}
 
-
 
-
a.linkstyle:hover {
 
-
/* change of color on mouseover */
 
-
color:blue;
 
-
}
 
-
 
-
.shodowboxie {
 
-
/* Shadow for Internet Explorer 5.5+ */
 
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#CCCCCC');
 
}
}
-
.rotatebox {  
+
/* Below are the classes describing the changes of style-attributes during the animation */
-
float:left;
+
/* Each class acts like a frame in a movie */
-
position:absolute;
+
/* You may add as many classes as you like */
-
top:0px;
+
/* You may name the classes as you like. In this samplae I named them a, b, c ... and so on */
-
left:0px;
+
/* In this sample I changed 2 attributes: the width between the letters and the color */
-
display:block;  
+
/* You may change other attributes. It's up to you! */
-
-webkit-transform: rotate(0deg);  
+
.a {
-
-moz-transform: rotate(0deg);
+
  color:#ff2222;
-
-o-transform: rotate(0deg);
+
  letter-spacing:40px;
-
}  
+
}
 +
.b {
 +
  color:#ff2222;
 +
  letter-spacing:38px;
 +
}
 +
.c {
 +
  color:#ff2222;
 +
  letter-spacing:36px;
 +
}
 +
.d {
 +
  color:#ff3333;
 +
  letter-spacing:34px;
 +
}
 +
.e {
 +
  color:#ff4444;
 +
  letter-spacing:32px;
 +
}
 +
.f {
 +
  color:#ff5555;
 +
  letter-spacing:30px;
 +
}
 +
.g {
 +
  color:#ff6666;
 +
  letter-spacing:28px;
 +
}
 +
.h {
 +
  color:#ff7777;
 +
  letter-spacing:26px;
 +
}
 +
.i {
 +
  color:#ff8888;
 +
  letter-spacing:24px;
 +
}
 +
.k {
 +
  color:#ff9999;
 +
  letter-spacing:22px;
 +
}
 +
.l {
 +
  color:#ffaaaa;
 +
  letter-spacing:20px;
 +
}
 +
.m {
 +
  color:#ffbbbb;
 +
  letter-spacing:17px;
 +
}
 +
.n {
 +
  color:#ffcccc;
 +
  letter-spacing:14px;
 +
}
 +
.o {
 +
  color:#ffdddd;
 +
  letter-spacing:10px;
 +
}
 +
.p {
 +
  color:#ffeeee;
 +
  letter-spacing:5px;
 +
}
 +
.q {
 +
  color:#ffffff;
 +
  letter-spacing:0px;
 +
}
</style>
</style>
<!----------------------------------------->
<!----------------------------------------->
Line 77: Line 122:
<script>
<script>
-
 
// CREDITS:
// CREDITS:
-
// CSS3 Message Propeller
+
// CSS-controlled stretch ticker
// by Peter Gehrig  
// by Peter Gehrig  
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// Additional scripts can be found at http://www.fabulant.com
-
// 08/17/2010
+
// 09/02/2010
// IMPORTANT:  
// IMPORTANT:  
Line 94: Line 138:
// Go to http://www.fabulant.com and get the original code  
// Go to http://www.fabulant.com and get the original code  
// with step-by-step instructions and copy-and-paste installation.
// with step-by-step instructions and copy-and-paste installation.
-
 
/////////////////////////////////////////////////
/////////////////////////////////////////////////
Line 100: Line 143:
/////////////////////////////////////////////////
/////////////////////////////////////////////////
-
// Set the elements of your ticker. Each block below contains the messages and links. Just follow the rules below:
+
// The array 'classes_pull_together_animation' contains the 'frames' required for the pull-together-animation
 +
// Enter the class-names. The order is up to you
 +
// In this sample class 'a' will be played first, then class 'b', then class 'c' an so on
 +
var classes_pull_together_animation=new Array("a","b","c","d","e","f","g","h","i","k","l","m","n","o","p","q")
-
// { Each block starts with this brackets
+
// The array 'classes_stretch_animation' contains the 'frames' required for the stretch-animation
-
// message : "enter your message followed by a comma", This line ends with a comma
+
// Enter the class-names. The order is up to you
-
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
+
// In this sample class 'q' will be played first, then class 'p', then class 'n' an so on
-
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!
+
var classes_stretch_animation=new Array("q","p","n","m","l","k","i","h","g","f","f","e","e","d","c","b","a")
-
var ticker= [
+
// Set the messages. You may add as many messages as you like
 +
var message=new Array()
 +
message[0]="Hello Friends!"
 +
message[1]="What's up today?"
 +
message[2]="Ready to get it all?"
-
// the 1st message-block starts here
+
// Set a link for each message. You may add as many messages as you like
-
{
+
// If you don't want to add a link enter a "#" instead of the URL. See sample below
-
message : "Yesterday, all my troubles seemed so far away", // comma required
+
var messagelink=new Array()
-
linkto : "http://www.fabulant.com" // NO comma required
+
messagelink[0]="http://www.hotscripts.com"
-
}, // comma required
+
messagelink[1]="#"
-
// the 1st message-block ends here
+
messagelink[2]="http://www.hotscripts.com"
-
// the 2nd message-block starts here
+
// Set the speed of the animation from class to class (frame to frame). High values = slow speed
-
{
+
var speed=40
-
message : "Now it looks as though they're here to stay", // comma required
+
-
linkto : "http://www.fabulant.com" // NO comma required
+
-
}, // comma required
+
-
// the 2nd message-block ends here
+
-
// the 3th message-block starts here
+
// Set the standstill-time of message (seconds)
-
{
+
-
message : "Oh I believe in yesterday", // comma required
+
-
linkto : "http://www.fabulant.com" // NO comma required
+
-
}, // comma required!!!!!!!!!!!!!!!!!!
+
-
// the 3th message-block ends here
+
-
 
+
-
// the 4th message-block starts here
+
-
{
+
-
message : "Suddenly, I'm not half the man I used to be", // comma required
+
-
linkto : "http://www.fabulant.com" // NO comma required
+
-
} // NO comma required!!!!!!!!!!!!!!!!!!
+
-
// the 4th message-block ends here
+
-
 
+
-
]
+
-
 
+
-
// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
+
-
var target_url="_blank"
+
-
 
+
-
// Set the width and height of your images (pixels)
+
-
var tickerwidth=400
+
-
var tickerheight=40
+
-
 
+
-
// Set the pause (standstill) between the rotations (seconds)
+
var pause=2
var pause=2
/////////////////////////////////////////////////
/////////////////////////////////////////////////
-
// SCRIPT-CONFIGURATION STOPS HERE
+
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////
/////////////////////////////////////////////////
// do not edit below this line
// do not edit below this line
-
var maxrotations=2
+
var i_classnames=0
-
var step=36
+
var i_message=0;
-
var i_tickerwidth=0
+
var i_messagelink=0;
-
var i_mssg=0
+
-
var i=0
+
var tmr
var tmr
-
var maxdegree=maxrotations*360
 
pause*=1000
pause*=1000
 +
var spc="\&"+"nbsp;"
-
function enlarge() {
+
for (i=0;i<message.length;i++) {
-
i+=step
+
message[i]=message[i].replace(/[" "]/g,spc)
-
i_tickerwidth+=tickerwidth/(360*maxrotations/step)
+
}
-
if (i_tickerwidth>tickerwidth) {
+
 
-
i_tickerwidth=tickerwidth
+
function setcontent() {
 +
i_messagelink=i_message
 +
if (i_message>=message.length) {
 +
i_message=0
}
}
-
if (i<=maxdegree && !document.all) {
+
if (i_messagelink>=message.length) {
-
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+tickerwidth+" height="+tickerheight+"><tr><td class='boxstyle'><a href='"+ticker[i_mssg].linkto+"' target='"+target_url+"' class='linkstyle'>"+ticker[i_mssg].message+"</a></td></tr></table>"
+
i_messagelink=0
 +
}
 +
document.getElementById("stage").innerHTML=message[i_message]
 +
i_message++
 +
i_classnames=0
 +
pull_together()
 +
}
-
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
+
function pull_together() {
-
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
+
if (i_classnames<=classes_pull_together_animation.length-1) {
-
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
+
document.getElementById("stage").className=classes_pull_together_animation[i_classnames]
-
+
i_classnames++
-
tmr=setTimeout("enlarge()",20)
+
tmr=setTimeout("pull_together()",speed)
}
}
else {
else {
-
document.getElementById("dt").style.MozTransform="rotate(0deg)"
+
clearTimeout(tmr);
-
document.getElementById("dt").style.WebkitTransform="rotate(0deg)"
+
i_classnames=0
-
document.getElementById("dt").style.OTransform="rotate(360deg)"
+
setTimeout("stretch()",pause)
-
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+tickerwidth+" height="+tickerheight+"><tr><td class='boxstyle'><a href='"+ticker[i_mssg].linkto+"' target='"+target_url+"' class='linkstyle'>"+ticker[i_mssg].message+"</a></td></tr></table>"
+
-
+
-
clearTimeout(tmr)
+
-
i=0
+
-
i_tickerwidth=0
+
-
i_mssg++
+
-
if (i_mssg>ticker.length-1) {
+
-
i_mssg=0
+
-
}
+
-
tmr=setTimeout("enlarge()",pause)
+
}
}
}
}
-
document.write("<div id='roof' style='position:relative;width:"+tickerwidth+"px;height:"+tickerheight+"px;'>")
+
function stretch() {
-
if (document.all) {
+
if (i_classnames<=classes_stretch_animation.length-1) {
-
document.write("<div class='shodowboxie' id='dt' style='width:"+tickerwidth+"px;height:"+tickerheight+"px;background-color:white;'></div>")
+
document.getElementById("stage").className=classes_stretch_animation[i_classnames]
 +
i_classnames++
 +
tmr=setTimeout("stretch()",speed)
 +
}
 +
else {
 +
clearTimeout(tmr);
 +
i_classnames=0
 +
setTimeout("setcontent()",500)
 +
}
}
}
-
else {
+
 
-
document.write("<div class='rotatebox' id='dt' style='width:"+tickerwidth+"px;height:"+tickerheight+"px;background-color:white;'></div>")
+
function gotourl() {
 +
document.location.href=messagelink[i_messagelink]
}
}
-
document.write("</div>")
 
-
window.onload=enlarge
+
window.onload=setcontent
 +
 
</script>
</script>
-
<!-- END OF THE CODE FOR THE CSS3 Message Propeller-->
+
 
 +
<div id="stage" onclick="gotourl()"></div>
 +
 
 +
<!-- END OF THE CODE FOR THE STRETCH-TICKER -->
</body>
</body>
</html>
</html>

Revision as of 03:50, 2 February 2013

Personal tools
Project URLs