Author Topic: Help with implementing latest news scroller  (Read 11478 times)

vidi

  • Guest
Help with implementing latest news scroller
« on: August 25, 2006, 11:03:44 PM »
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?  :-P)

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
« Last Edit: September 06, 2006, 10:40:05 PM by vidi »

pcwacht

  • Guest
Re: Help with implementing latest news scroller
« Reply #1 on: August 26, 2006, 12:03:11 AM »
Change the echo:
Code: [Select]
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]
echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'";

John

vidi

  • Guest
Re: Help with implementing latest news scroller
« Reply #2 on: August 26, 2006, 11:18:14 AM »
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]
<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[]=&#39;<a href="&#39;".WB_URL."/pages/".$link.PAGE_EXTENSION.&#39;">".$title."</a><br />".$short."&#39;";

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

  • Guest
Re: Help with implementing latest news scroller
« Reply #3 on: August 27, 2006, 12:40:25 PM »
Then echo the container from php as well

try:
Code: [Select]
<?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[]=&#39;<a href="&#39;".WB_URL."/pages/".$link.PAGE_EXTENSION.&#39;">".$title."</a><br />".$short."&#39;";

}
$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 &#39;<script type="text/javascript">&#39;;
  
echo &#39;var pausecontent=new Array()&#39;;
  
echo $foo;
  echo &
#39;</script>&#39;;
} else { // some code for no info
}
?>



vidi

  • Guest
Re: Help with implementing latest news scroller
« Reply #4 on: August 28, 2006, 12:51:42 PM »
Hi again!

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

Code: [Select]
<!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>

Offline kweitzel

  • WebsiteBaker Org e.V.
  • **
  • Posts: 6983
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #5 on: August 28, 2006, 12:56:54 PM »
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

Offline kweitzel

  • WebsiteBaker Org e.V.
  • **
  • Posts: 6983
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #6 on: August 28, 2006, 02:17:22 PM »
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]
echo "pausecontent[]='<a href="'".WB_URL."/pages/".$link.PAGE_EXTENSION.'">".$title."</a><br />".$short."'"
the Error is:
Quote
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]
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

pcwacht

  • Guest
Re: Help with implementing latest news scroller
« Reply #7 on: August 28, 2006, 03:22:59 PM »
I think there are some quotes mixed up ( ' ) and ( " )

Try this:
Code: [Select]
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

vidi

  • Guest
Re: Help with implementing latest news scroller
« Reply #8 on: August 28, 2006, 04:07:29 PM »
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]
<?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"]=&#39;<a href=&#39;";
echo 
WB_URL.&#39;/pages/&#39;.$link.PAGE_EXTENSION.&#39;">&#39;.$title.&#39;</a><br />&#39;.$short;
echo "&#39;";
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 &#39;<script type="text/javascript">&#39;;
  echo &#39;var pausecontent=new Array()&#39;;
  echo $foo;
  echo &#39;</script>&#39;;
} 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

Offline kweitzel

  • WebsiteBaker Org e.V.
  • **
  • Posts: 6983
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #9 on: August 28, 2006, 05:35:28 PM »
try to change this line:

Code: [Select]
echo "pausecontent['$counter']='<a href='";
the doublequuotes are changed to single quotes and it outputs the variable.

cheers

Klaus

vidi

  • Guest
Re: Help with implementing latest news scroller
« Reply #10 on: August 28, 2006, 10:17:12 PM »
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]
<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("&#39;""\&#39;",$short);

$title str_replace("\n"""$title);
$title str_replace("\r"""$title);
$title str_replace("&#39;""\&#39;",$title);

echo 
"pausecontent[".$i."]=&#39;<a href=\"".WB_URL.&#39;/pages/&#39;.$link.PAGE_EXTENSION.&#39;">&#39;.$title.&#39;</a><br />&#39;.$short."&#39;"."\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 &#39;<script type="text/javascript">&#39;."\n";
  echo &#39;var pausecontent=new Array()&#39;."\n";
  echo $foo;
  echo &#39;</script>&#39;;
} 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]
<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


Offline bgg

  • Posts: 103
Re: Help with implementing latest news scroller
« Reply #11 on: September 05, 2008, 12:58:54 PM »
Thanks. This works well.

How do display just the TITLE .. (in case of no short description required)?
« Last Edit: September 06, 2008, 07:36:43 AM by bgg »

Offline crnogorac081

  • Posts: 1974
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #12 on: April 06, 2009, 07:14:08 PM »
can you make a module/snipet of this ?
UI / UX Designer

Offline ghost06

  • Posts: 53
Re: Help with implementing latest news scroller
« Reply #13 on: February 02, 2010, 08:12:28 PM »
Hello everyone,
You can choose only one group of news? :-D

Offline webslaav

  • Posts: 4
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #14 on: January 12, 2011, 05:19:08 PM »
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
For a moment, nothing happened. Then, after a second or so, nothing continued to happen.

Offline iradj

  • Posts: 353
  • Gender: Male
Re: Help with implementing latest news scroller
« Reply #15 on: January 13, 2011, 12:43:20 PM »
Hi Vidar,

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

Iradj

Offline PurpleEdge

  • Posts: 231
  • Gender: Male
    • the northern beaches
Re: Help with implementing latest news scroller
« Reply #16 on: January 14, 2011, 12:26:44 AM »
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?