How do I add a news scroller?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I want to put a news scroller on my homepage to highlight new content, so it would have to be one that is capable of containing links. Ideally I want to be able to customise how it looks. Does anyone know how to do this? I've been looking for free options without any success, but I'm happy to pay for something as long as it does the job.
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
  • frustrated

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Anne,

Dynamic Drive are usually good for things like these.

Hold on and I'l try to find one for you.

Connor
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Anne,

Here are two I have found:

http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

Are any of these what you are looking for?

Connor
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Hi Connor,

Thanks for your reply. That's exactly the sort of thing I want! The only problem is that I can't work out how to add it to my Yola site. How do you add code to the 'Head' section of a page? When I try and paste the code into an HTML box it's telling me there's an error. I'm sure I'm doing something wrong, but I don't know what!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Anne

We don't have access to the head of the document. What you need to do is paste the "head" script into an HTML and then the "body" script into another HTML widget directly below. Can you share with us which code you are using and we can go from there/
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
I'm using the code here: http://www.dynamicdrive.com/dynamicin...

I tried adding the 'Step 1' code into one HTML box and 'Step 2' into another box directly below it, but it just displays the box with one line of text and doesn't scroll.
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
This is what it looks like:
http://www.annewitton.org.uk/test.php
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I believe that inside box #2, you need to add your content. As there is presently only one line, it does not need to scroll. Try adding some content and then it should scroll.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You beat me to it Littleus, Well done!
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Your test is fab. How do I add extra lines and links and stuff? (Sorry, I'm just learning HTML so I'm not very good at the moment!). Thanks for all your help.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Let's see here:

For links.. you'll need to add an a href tag.
<a href="YOUR LINK URL">YOUR TEXT GOES HERE</a>

For a line:
<hr>

Font type, size, & color:
<font face="Verdana" size="5" color="#5dc4d3">YOUR TEXT</font>

I hope that gives you a few basics to start with.
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Those tips are really helpful - thanks! I seem to be able to format it as I would like, but I still can't get it to scroll. I think this is to do with the part but I'm still not sure what I'm doing wrong. I don't seem to be able to get it to appear the same as it does on the DD website.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Anne,

I noticed the first piece of code is all on "one line" on your site.
I've seen this problem once before when trying to help Alex out.

On selecting the first portion of code and placing it into an HTML widget you need
to ensure it appears the same as on the DD site. (place it near the top of your page)

Place the second portion of code in a second HTML widget, where you would like the scroller to appear on your site.

The HTML scroll content needs to be wrapped in <div> </div>
You will need some basic HTML knowledge to do this.

Give me an example piece of text and a link and I will try and assist you.
I've used this particular piece of script before and it works quite well.

You can have a look at my site to see a similar one.
http://helderberg.cc/
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Anne,

Sorry I didn't reply , I had to go away for awhile, luckily Boomer and Littleus stepped in! Here is a working example of the script:

http://testingsite2.synthasite.com
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Thanks guys. I had a look at the source code, but - as I'm a novice - I still don't really know which bits of code I need to put in which boxes to make it scroll. Any ideas?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Anne

You should have two html boxes. The first box is your "head" code. The second box is your "body" code. Try to copy this for your body code. Then, you can play around with the text.

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <div id="vmarquee" style="position: absolute; width: 98%;"> <!--YOUR SCROLL CONTENT HERE--> <h4>Your scroller contents</h4> Let's try this and see how it works blah blah blah blah blah blah <h5>ticker number 2</h5> does this work? i hope so let's see <hr> <h4>FONT COLOR</h4> <font face="Verdana" size="5" color="#5dc4d3">YOUR TEXT</font> <!--YOUR SCROLL CONTENT HERE--> </div> </div>
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Anne,

Here is a step by step guide:

Ok first add a html widget. In that widget paste this code<!-- and --!>) :

<!-- <style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script> --!>

Then add another html widget to where you want the scroller and add this code:

<!-- <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

Your scroller contents



<!--YOUR SCROLL CONTENT HERE-->

--!>

Hope this solves it!

Connor
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Hi Connor,
Thanks for the instructions. The good news is that I've finally managed to get the box to scroll! The bad news is that it seems to have done something undesirable to the rest of the page: http://annewitton.org.uk/test2.php. Not quite sure what's going on!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
That's strange Anne. That did not occur to me. Can you try something? Try changing your template and then go back to your original one and see if that makes any difference.
Photo of Anne Witton

Anne Witton

  • 45 Posts
  • 0 Reply Likes
Hello again. I think it's sorted! I put the same code on a different page and it didn't mess up the template. http://www.annewitton.org.uk/. Thank you everyone for your excellent advice!