Help with implementing latest news scroller

[PurpleEdge]

There is also a jquery vertical scroller with similar functionality...

http://www.jugbit.com/jquery-vticker-vertical-news-ticker/

I only mention it because I believe in having as few sets of technology as possible to maintain and wb seems to be a predominately jquery user?

[iradj]

Hi Vidar,

How can I post that only the last 5 or 10 news will be shown?

Iradj

[webslaav]

Thanx Vidar, you're info was very helpful! One question remains for me though.. how can ik show for instance 3  newsitems at the same time, scrolling through the next 3 items?
Regards,
Alex

[ghost06]

Hello everyone,
You can choose only one group of news?

[crnogorac081]

can you make a module/snipet of this ?

[bgg]

Thanks. This works well.

How do display just the TITLE .. (in case of no short description required)?

[vidi]

Okay folks!
I have a working script, thaks to you and some very helpful people on http://www.dynamicdrive.com!
The code goes like this:

Put this in your header section:

Code Select Expand


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

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

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

</style>

<?php 
ob_start();     // start output buffer
global $database;
$query = "SELECT post_id,title,content_short,group_id,link FROM ".TABLE_PREFIX."mod_news_posts ORDER BY position DESC LIMIT 0, 5;";
$error = mysql_error();
if (!$result = mysql_query($query)) {
print "$error";
exit;
}
$i = 0;
while($data = mysql_fetch_object($result)){
$title = $data->title;
$id = $data->post_id;
$link = $data->link;
$short = $data->content_short;
$short = str_replace("\n", "", $short);
$short = str_replace("\r", "", $short);
$short = str_replace("'", "\'",$short);

$title = str_replace("\n", "", $title);
$title = str_replace("\r", "", $title);
$title = str_replace("'", "\'",$title);

echo "pausecontent[".$i."]='<a href=\"".WB_URL.'/pages/'.$link.PAGE_EXTENSION.'">'.$title.'</a><br />'.$short."'"."\n";
$i++;
}
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block
  echo '<script type="text/javascript">'."\n";
  echo 'var pausecontent=new Array()'."\n";
  echo $foo;
  echo '</script>';
} else { // some code for no info
}
?>

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

And this where you want the news scroller to appear (i.e in your body section):

Code Select Expand


<script type="text/javascript">

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

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
</script>

Regards Vidar

[kweitzel]

try to change this line:

Code Select Expand

echo "pausecontent['$counter']='<a href='";

the doublequuotes are changed to single quotes and it outputs the variable.

cheers

Klaus

[vidi]

Hi John and Claus!
Thank you very much for your effort helping me solve this problem!
I've used Johns Code in my temlate (I do not use a WYSIWYG or CODE page to implement this, the code is written directly in the index.php file).
And Johns code seems to work, almost. The problem is that it is echoing pausecontent[] without any number in the braces. I tried to add $counter=0; and counter++; like this

Code Select Expand

<?php 
ob_start();     // start output buffer
global $database;
$query = "SELECT post_id,title,content_short,group_id,link FROM ".TABLE_PREFIX."mod_news_posts ORDER BY position DESC LIMIT 0, 5;";
$error = mysql_error();
if (!$result = mysql_query($query)) {
print "$error";
exit;
}
while($data = mysql_fetch_object($result)){
$counter = 0;
$title = $data->title;
$id = $data->post_id;
$link = $data->link;
$short = $data->content_short;
echo "pausecontent["counter"]='<a href='";
echo WB_URL.'/pages/'.$link.PAGE_EXTENSION.'">'.$title.'</a><br />'.$short;
echo "'";
counter++;

}
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block
  echo '<script type="text/javascript">';
  echo 'var pausecontent=new Array()';
  echo $foo;
  echo '</script>';
} else { // some code for no info
}
?>
but then again the website goes blank (I guess im doing someting wrong when I'm adding the $counter).

I've set up a demo site at http://test.hallais.no, if that would help.

Regards Vidar

[pcwacht]

I think there are some quotes mixed up ( ' ) and ( " )

Try this:

Code Select Expand


echo "pausecontent[]='<a href='";
echo WB_URL.'/pages/'.$link.PAGE_EXTENSION.'">'.$title.'</a><br />'.$short;
echo "'";

instead of one line, this way debugging goes faster.

Good luck,
John

[kweitzel]

Ok ... I also experimented a bit with the code. I copied it into my template (within the Javacode, the area where it defines the "news").

I get parsing errors related to this line here:

Code Select Expand

echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'"

the Error is:

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ';' in C:\xampp\xampp\htdocs\wb\templates\simplex_wb_hobbystrategen\index.php on line 67

Obviously, the Line 67 is in my template. It is the line of above code.

Could you check if this line works:

Code Select Expand


echo 'pausecontent[]=<a href="'.WB_URL.'/pages/'.$link.PAGE_EXTENSION.'">'.$title.'</a><br />'.$short.''


At the end, i am not a coder, please bear this in mind.

cheers

Klaus

[kweitzel]

how did you try the code? Did you paste it into your template, did you try it on a WYSIWYG or code page? I think this info will help debugging the whole issue.

I would put it directly into the template (that's what the code is designed for). Putting it into a WYSIWYG page I think won't work and for a code page you need to get rid of the PHP start/end tag.

cheers

klaus

[vidi]

Hi again!

I tried the code above, resulting in a completely blank page, nothing displayed.
View Source:

Code Select Expand

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"></HEAD>
<BODY></BODY></HTML>


[pcwacht]

Then echo the container from php as well

try:

Code Select Expand


<?php 
ob_start();     // start output buffer
global $database;
$query = "SELECT post_id,title,content_short,group_id,link FROM ".TABLE_PREFIX."mod_news_posts ORDER BY position DESC LIMIT 0, 5;";
$error = mysql_error();
if (!$result = mysql_query($query)) {
print "$error";
exit;
}
while($data = mysql_fetch_object($result)){
$title = $data->title;
$id = $data->post_id;
$link = $data->link;
$short = $data->content_short;
echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'";

}
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block
  echo '<script type="text/javascript">';
  echo 'var pausecontent=new Array()';
  echo $foo;
  echo '</script>';
} else { // some code for no info
}
?>


[vidi]

Hello John!

I have tried that, the problem seems that I am adding PHP content in a Javascript "container", and therefore the php commands does not parse.
Looking at the output from the page (View Source"), gives me this:

Code Select Expand

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
<?php ob_start();     // start output buffer
global $database;
$query = "SELECT post_id,title,content_short,group_id,link FROM ".TABLE_PREFIX."mod_news_posts ORDER BY position DESC LIMIT 0, 5;";
$error = mysql_error();
if (!$result = mysql_query($query)) {
print "$error";
exit;
}
while($data = mysql_fetch_object($result)){
$title = $data->title;
$id = $data->post_id;
$link = $data->link;
$short = $data->content_short;
echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'";

}
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block


echo $foo;

} else { // some code for no info
}
?>
</script>

As you can see, the php code are not executed.


regards Vidar

[pcwacht]

Change the echo:

Code Select Expand

echo '<p><a href="'.WB_URL.'/pages/'.$link.PAGE_EXTENSION.'">'.$title.'</a><br />'.$short.'<span class="hide"></span></p>';
to something like this: (NOT TESTED!!)

Code Select Expand

echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'";


John

[vidi]

Hi!

I'm trying to modify the existing vertical news scroller (http://forum.websitebaker.org/index.php/topic,3132.0.html) to fit into this script
http://www.dynamicdrive.com/dynamicindex2/crosstick.htm, because this script stops between every news, not just scrolling forever.

The problem I can't seem to solve, is to modify the code written by movitz to fit the mentioned code, because in this script, you must run the php code inside the script (get it?  )

Could anybody help me out? (This would be a very nice snippet or add-on by the way, if somebody would take the time.)

Regards Vidar