Problem with ticker

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Cainnech
    New Member
    • Nov 2007
    • 132
    #1

    Problem with ticker

    Hi guys and girls,

    I'm having trouble with a ticker that I'm making.

    I've found code on the net and I'm adjusting it to my needs.
    However though it seems to be working well I do have an issue.

    If I have a long text which exceeds the width of my div, it won't show that text anymore.

    I'm trying to fix it but it won't work.

    Code:
    <html>
<head>
<style type="text/css">

#tickercontainer
{
position: relative;
width: 300px; /* width of the DIV containing the ticker */
height: 19px; /* height of the DIV containing the ticker */
background-color: white;
background-image: url("bg.jpg");
overflow: hidden;
border: 0px solid black;
padding: 2px;
padding-left: 4px;
}

#ticker
{
font-family: Tahoma;
color: #ffffff;
font-weight: bold;
background-color: red;
}

</style>

<script type="text/javascript">

var delay=0 //Specify the time (in milliseconds) you want to wait before the ticker starts (1000 = 1 seconds)
var marqueespeed=1 //Specify the speed at which the ticker scrolls by (1:slow / 10:fast)
var freeze=0 //Upon mouse over do you want to freeze the ticker so the user can click a link? (0:no / 1:yes)

var copyspeed=marqueespeed
var pausespeed=(freeze==0)? copyspeed: 0
var actualwidth=''

function scroll()
{

if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
    {
        cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
    }
else
    {
        cross_marquee.style.left=parseInt(tickerwidth)+8+"px"
    }
}

function startticker()
{

cross_marquee=document.getElementById("ticker")
tickerwidth=document.getElementById("tickercontainer").offsetWidth
cross_marquee.style.left= tickerwidth;
actualwidth=cross_marquee.offsetWidth;

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("scroll()",30)', delay)

}

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


</script>

</head>
<body>

<div id="tickercontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="ticker" style="position: absolute; width: 98%;">

<!--SCROLL CONTENT HERE-->

Test 1 &nbsp;&nbsp;&nbsp; Test 2 &nbsp;&nbsp;&nbsp; Test 3 &nbsp;&nbsp;&nbsp; Test 4 &nbsp;&nbsp;&nbsp; 

<!--SCROLL CONTENT HERE-->

</div>
</div>
</body>
</html>
    If you run this, you'll see that it works fine.
    But if you adjust the width of "tickercontaine r" (in the style at the top of the page) so for example 150px, you'll see that the text isn't being scrolled completely.

    So I would like to have my text scrolled entirely. Who can help me with this?

    Thanks,
    Cainnech
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Hi cainnech,
      I checked with your code. I can say why this problem occurs. The div with the id 'ticker' is given width: 98%. which takes the width from it parent div. It's parent Div is 'tickercontaine r' which has a width 150px. So the child div (ticker) take 98% of the 150px width, thats why you get half content. Inorder to overcome this problem specify the width of the div 'ticker' to the content. Ex: for this text specify the width as '300px' you will be able to see the full content ticking in the div. Depending upon the content you are going to use set the width of the div 'ticker'.

      Thanks and Regards
      Ramanan Kalirajan

        Comment

        • Cainnech
          New Member
          • Nov 2007
          • 132
          #3
          Thanks RamananKaliraja n for your reply.

          However I can't specify the width of the text in de Ticker div because the text is being filled in dynamically.

          I ended up writing the entire ticker myself. So now it works :-)

          Greets,
          Cainnech

            Comment

            Previous template Next
            Working...