Welcome, Guest. Please login or register.

ShoutBox!

 

Skhilled

2024-08-09, 18:19:29
Awww! Poor thing! LOL
 

Ken

2024-08-09, 09:20:52
 

Skhilled

2024-07-06, 10:33:18
 :D
 

Ken

2024-07-06, 06:40:47
Happy Saturday after the 4th of July!
 :fireworks:
 

Skhilled

2024-07-04, 20:27:02
Happy Day Off From Work!  :D
 

Ken

2024-06-25, 06:23:12
84... who knew?  laughing7
...2013 was my *magic* year
 

Skhilled

2024-06-14, 22:09:12
I hope so! LOL
 

Ken

2024-06-14, 21:41:30
My B-Day is forthcoming and maybe it will be far enough along so that I can be a regular Dancing Fool for that day!!! :banana: :2funny:
 

Ken

2024-06-14, 21:38:38
Happy Friday everyone! I'm  SOOO glad to see Friday and not just because it's the weekend, but because it marks one more day in the recovery of my foot!  laughing7

Scrubmeister

2024-04-19, 10:32:40
Good to see the site back faster than ever. :)

Recent Topics

TP Articles


Search in titles
Search in article texts

Author Topic: Scrolling block  (Read 3331 times)

0 Members and 1 Guest are viewing this topic.

Offline Lesmond (OP)

Scrolling block
« on: April 29, 2009, 02:53:30 PM »
Code: [Select]
<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 150px;
height: 50px;
border: none;
padding: 5px;

}



.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]='<p align="center"><a href="http://www.lesmonds.co.uk/forum/index.php" target="_blank"><img border="0" src="http://www.img-host.lesmonds.com/users/lesmond/lesmonds.png" /></a></p>'

pausecontent[1]='<p align="center"><a href="http://www.ourfamilyforum.org/FamilyForum/index.php" target="_blank"><img border="0" src="http://www.img-host.lesmonds.com/users/lesmond/ourfamilyforum.jpg" /></a></p>'

pausecontent[2]='<p align="center"><a href="http://www.skhilled.com/docs" target="_blank"><img border="0" src="http://www.img-host.lesmonds.com/users/lesmond/skhilled-logo.jpg" /></a></p>'

pausecontent[3]='<p align="center"><a href="http://www.rebelrosenetworks.com/" target="_blank"><img border="0" src="http://adminscorner.info/tp-images/Image/rebelrose.jpg" /></a></p>'

pausecontent[4]='<p align="center"><a href="http://www.tinyportal.net" target="_blank"><img border="0" src="http://www.img-host.lesmonds.com/users/lesmond/tp-logo.jpg" /></a></p>'



</script>

<script type="text/javascript">

/***********************************************
* Pausing up-down scroller- ? Dynamic Drive ([url=http://www.dynamicdrive.com]www.dynamicdrive.com[/url])
* 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>


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

Offline Lesmond (OP)

Re: Scrolling block
« Reply #1 on: April 29, 2009, 04:09:06 PM »
umm dont seem to be working now, it was before though

Offline Ken

  • Vietnam Era Veteran
  • Administrator
  • *
  • Posts: 11943
  • Gender: Male
  • View Gallery
Re: Scrolling block
« Reply #2 on: April 29, 2009, 05:28:21 PM »
Bec
umm dont seem to be working now, it was before though

Because I screwed it up!
I added the extra images and links and broke it.  :cry2:
"Not all who wander are lost."-Tolkien
Yesterday When I was Young.