XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Modules Support forums / 
  3. Module hack reviews 
  4.  / Adapting the script dynamicdrive Pausing up-down scroller to modules
Register
1
duncan9384
Adapting the script dynamicdrive Pausing up-down scroller to modules

  • 2007/8/5 16:16

  • duncan9384

  • Just popping in

  • Posts: 2

  • Since: 2007/8/5 1


Hello everyone,
this is my first time on the main XOOPS forums (usually i go to frxoops).

I've been wondering if anyone can advise me how to adapt the script Pausing up-down scroller
to a block of XOOPS module.
In my case, it is the module XHLD with the block xhld0_block.html.
I've been trying to change the template, but so far the only thing i've reached is put the feed name. But 3 layers appaer containing each the 3 names of the feeds.
I heard i would have to get the block feeds but i dont know how to declare them properly in a javascript table.
The main problem is also the loop I have to insert:

<a href="<{$site_url|escape}>" target="_blank"><{$site_name|escape}>a><br />
<{if $image.url != ""}>
  <img src="<{$image.url|escape}>" width="<{$image.width|escape}>" height="<{$image.height|escape}>" alt="<{$image.title|escape}>" /><br />
<{/if}>

<ul>
<{section name=i loop=$items}>
  <{if $items[i].title != ""}>
  <{* <li><a href="<{$mod_url}>/index.php?id=<{$site_id}>#<{$items[i].link|escape}>"><{$items[i].title|escape}>a>li> *}>
  <li>
    <{if $items[i].pubdate != "" }>
      <script type="text/javascript">document.write(phpDate('<{$dtfmt_short|escape}>', <{$items[i].pubdate|escape}>));script>
      <noscript><{$items[i].date_short|escape}>noscript>
      &nbsp;
    <{/if}>
    <a href="<{$items[i].link|escape}>" target="_blank"><{$items[i].title|escape}>a>
  li>
  <{/if}>
<{/section}>
ul>


Here is the code i put in the template:

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

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

style>

<script type="text/javascript">
var pausecontent=new Array();

    pausecontent[0]='" target="_blank"><{$site_name|escape}>
';

/***********************************************
* Pausing up-down scroller- © Dynamic Drive (http://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('+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden">+divId+'1">'+content[0]+'
+divId+'2">'+content[1]+'
')
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=this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
this.tickerdiv.onmouseover=function(){scrollerinstance.mouseoverBol=1}
this.tickerdiv.onmouseout=function(){scrollerinstance.mouseoverBol=0}
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("")

script>


Can anyone advise me?
2
noo-b
Re: Adapting the script dynamicdrive Pausing up-down scroller to modules

  • 2007/11/15 9:29

  • noo-b

  • Just can't stay away

  • Posts: 456

  • Since: 2007/10/23


bump i would like to do the same thing
I Love Xoops
3
Will_H
Re: Adapting the script dynamicdrive Pausing up-down scroller to modules

  • 2007/11/15 12:40

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


Not too familiar with this script. However if you look at the basic script. The way it came before you edited it. Search for the "someclass" entry. Edit this to whatever you wanna name the calss. Then when you edit the template for XHLD do something along these lines.

<a href="<{$site_url|escape}>" target="_blank"><{$site_name|escape}>a><br />
<{if $image.url != ""}>
  <img src="<{$image.url|escape}>" width="<{$image.width|escape}>" height="<{$image.height|escape}>" alt="<{$image.title|escape}>" /><br />
<{/if}>

<ul class="someclass">
<{section name=i loop=$items}>
  <{if $items[i].title != ""}>
  <{* <li><a href="<{$mod_url}>/index.php?id=<{$site_id}>#<{$items[i].link|escape}>"><{$items[i].title|escape}>a>li> *}>
  <li>
    <{if $items[i].pubdate != "" }>
      <script type="text/javascript">document.write(phpDate('<{$dtfmt_short|escape}>', <{$items[i].pubdate|escape}>));script>
      <noscript><{$items[i].date_short|escape}>noscript>
      &nbsp;
    <{/if}>
    <a href="<{$items[i].link|escape}>" target="_blank"><{$items[i].title|escape}>a>
  li>
  <{/if}>
<{/section}>
ul>


Make sure the javascript is in your and edit your template like so, and it should work.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

456 user(s) are online (351 user(s) are browsing Support Forums)

Members: 0

Guests: 456

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits