PDA

View Full Version : want to add classes in the Pausing up-down Scroller script.



nisha
10-15-2008, 08:31 AM
1) Script Title:
changes in Pausing up-down Scroller

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

3) Describe problem:

hello everbody,

I have used the the Pausing up-down Scroller script from this site.
It works fine, but now i want to customize it as per my website design.
so i tried to modify it and add some 2 class for for my heading text and the
other class for the main text content. hence i add the class in the style tag
and also added the class names in the below code :



<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "text_coments", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "text_coments", 2000)

</script>


till i add only one class to the script it works fine but when i add another class to the code then the scroller moves continuously in fast speed with out
pausing.

so please suggest me how to modify the code so i can add one or more no of class in the scroller.

Also i would like to know that will the code work if i add this id and class to some external styleSheet instead of writing it on each page where i need the scroller.

Hope it is clear ultimately should be able to add more class to stylize my contents of the scrollbar and also the scroller pause up- down functionality
should also work as it is working now.

Help Appreciated.

ddadmin
10-15-2008, 09:20 PM
Try passing in the multiple classes as one string, each separated by a space. So something like:


new pausescroller(pausecontent, "pscroller1", "someclass someclass2", 3000)

nisha
10-16-2008, 05:45 AM
thanks for the suggestion,

i tried addig multiple classes as suggested by u, but it is not working as required. the script takes only one class instead of both of them.

Help Appreciated.

ddadmin
10-16-2008, 07:32 AM
Are you sure? I tested the above by defining "someclass" and "someclass2" in my CSS, and both get applied to the scroller in my demo. Please post a link to the page on your site that contains the problematic script so we can check it out.

nisha
10-16-2008, 11:44 AM
yes i have tried the same way u suggested by adding 2 class in the new pausescroller code, but i added some different class name instead of someclass, someclass2, but in the output it showed the property of only one class and the class property worked for the content of the scroller and the heading remained unchanged. then i post u that u r suggestion doesn't work
and when u said u have tested it at u r end i again tried it and this time i gave the same names to the class that where given by u.

So actually i want to give the heading text( the one which is underlined in blue color) and the content below it some different font style and font size and color, instead of the current defualt one.

Also i am sorry i can't give u the link to the page as it is not live and i have just made a demo page for it and have not added the script in my real page. demo page has such problem. how can i integrate it in my web pages.

so here is the code of my page below :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 200px;
height: 150px;
/*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 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2E3B86;
font-weight: bold;
padding-top: 0px;
padding-left: 5px;
padding-right: 0px;
padding-bottom: 0px;
}
.someclass2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #3F3F3F;
padding-top: 5px;
padding-left: 8px;
padding-right: 0px;
/*font-style: italic;*/
line-height: 18px;
padding-bottom: 5px;
text-align: justify;
}
.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="#">Mr Christopher Fussner,<br>President, Transtechnology</a><br /><br>&quot;I have met all my old clients and many potential new clients, and I will definitely be coming back next year.&quot;'
pausecontent[1]='<a href="#">Mr Christopher Fussner,<br>President, Transtechnology</a><br /><br>&quot;I have met all my old clients and many potential new clients, and I will definitely be coming back next year.&quot;'
pausecontent[2]='<a href="#">Mr Christopher Fussner,<br>President, Transtechnology</a><br /><br>&quot;I have met all my old clients and many potential new clients, and I will definitely be coming back next year.&quot;'

/*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">

/***********************************************
* Pausing up-down scroller- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

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>
</head>

<body>
<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass someclass2", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass someclass2", 2000)

</script>
</body>
</html>


also i would like to say that i am not much well versed with javascript. so if i have to make some changes in it. then suggest me those in details.

Hope everything is clear.

Help Appreciated.

ddadmin
10-16-2008, 06:49 PM
Actually, running your example above, both classes are applied for me. I verified this by tweaking the "color" property in "someclass2", and it gets reflected in the output. The body of the scroller appear red as a result:


.someclass {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2E3B86;
font-weight: bold;
padding-top: 0px;
padding-left: 5px;
padding-right: 0px;
padding-bottom: 0px;
}
.someclass2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: red;
padding-top: 5px;
padding-left: 8px;
padding-right: 0px;
/*font-style: italic;*/
line-height: 18px;
padding-bottom: 5px;
text-align: justify;
}
.someclass{ /*//class to apply to your scroller(s) if desired*/
}