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

vidi · « **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?

)

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

pcwacht · « **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 · « **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 · « **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 · « **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>

kweitzel · « **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

kweitzel · « **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 · « **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 · « **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

kweitzel · « **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 · « **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

bgg · « **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)?

crnogorac081 · « **Reply #12 on:** April 06, 2009, 07:14:08 PM »

can you make a module/snipet of this ?

ghost06 · « **Reply #13 on:** February 02, 2010, 08:12:28 PM »

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

webslaav · « **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

iradj · « **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

PurpleEdge · « **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?

News

Support WebsiteBaker

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

vidi

Help with implementing latest news scroller

pcwacht

Re: Help with implementing latest news scroller

vidi

Re: Help with implementing latest news scroller

pcwacht

Re: Help with implementing latest news scroller

vidi

Re: Help with implementing latest news scroller

kweitzel

Re: Help with implementing latest news scroller

kweitzel

Re: Help with implementing latest news scroller

pcwacht

Re: Help with implementing latest news scroller

vidi

Re: Help with implementing latest news scroller

kweitzel

Re: Help with implementing latest news scroller

vidi

Re: Help with implementing latest news scroller

bgg

Re: Help with implementing latest news scroller

crnogorac081

Re: Help with implementing latest news scroller

ghost06

Re: Help with implementing latest news scroller

webslaav

Re: Help with implementing latest news scroller

iradj

Re: Help with implementing latest news scroller

PurpleEdge

Re: Help with implementing latest news scroller