• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 455
  • Last Modified:

Scrolling News Panel

I have a scrolling news panel I'm implementing on my page.

Here are the two things I'm trying to achieve, which I can't so far.

1. Right now the scrolling is positioned exactly where I want on the page. However, it scrolls all the way to the top of the window, rather than cutting off at a certain point. If I change the positioning to absolute, the scrolling doesn't stay in the proper place when the resolution changes, however when I leave it at relative, it seems to stay put, regardless of the resolution. If someone can tell me how to make the scrolling top at a certain point, rather than going to the top of the screen that would be great.

2. The second part I'm trying to acheive with this is have a border around the area, and make it look like the text is just scrolling through that box.

Hope that is somewhat clear. Any help would be great! The different code is split into 3 parts below: Javscript, HTML, and CSS. Thanks!

Javascript Code:

<!-- SCROLL BAR JAVASCRIPT START -->
<script language="JavaScript">
function getObject( obj ) {
var strObj
if ( document.all ) {
strObj = document.all.item( obj );
} else if ( document.getElementById ) {
strObj = document.getElementById( obj );
}
return strObj;
}
var theTop = 20;
var theHeight = 100;
var theWidth = 150;
var theLeft = 650;
var toClip = 55;

function scrollNews( newsDiv, toMove ) {
theDiv = getObject( newsDiv.toString() );
if ( theDiv == null ) { return; }
if ( document.layers ) {
theDiv.clip.top = toMove;
theDiv.clip.bottom = toMove + toClip;
theDiv.top = theTop - toMove;
} else {
theDiv = theDiv.style;
theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";
theDiv.top = theTop - toMove + 'px';
}
if ( ( theTop + theHeight - toMove ) < ( theTop - theHeight - 20 ) ) {
toMove = 0;
if ( document.layers ) {
theDiv.clip.top = theTop;
theDiv.clip.bottom = toClip;
theDiv.top = theTop
} else {
theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px 0px)";
theDiv.top = theTop + 'px';
}
}
toMove = (toMove + 1);
setTimeout("scrollNews('" + newsDiv + "'," + toMove + ")", 100);
}
</script>
<!--- END SCROLL BAR -->


HTML Stuff:


<body onload="scrollNews('news', 0);"
<div id="news">
<h1>This is the latest news</h1>
This is some test information!<br />
It will be scrolling<br />
</div>


CSS:

#news {
      position:relative;
      visibility: visible;
      left: 5;
      top: 43;
      height: 50px;
      width: 288px;
      padding-top: 20px;
}
0
gregca80
Asked:
gregca80
  • 5
  • 3
1 Solution
 
dakydCommented:
How about something like this?  All I did was create another div called "inner" inside of the "news" div, and make that the element that scrolls.  That way you can put a border around #news.  To make the scrolling stop at a certain point, I just changed the "theHeight" variable to something closer to the height of the #news div (80).  Depending on your content that'll need to change.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#news {
     position:relative;
     visibility: visible;
     left: 5px;
     top: 43px;
     height: 75px;
     width: 288px;
     padding-top: 20px;
     border: 1px solid black;
     overflow: hidden;
}

#inner {
    position: relative;
    height: 50px;
    width: 288px;
}
</style>
<script type="text/javascript">
function getObject( obj )
{
  var strObj;
  if ( document.all )
    strObj = document.all.item( obj );
  else if ( document.getElementById )
    strObj = document.getElementById( obj );
  return strObj;
}
var theTop = 20;
var theHeight = 80;
var theWidth = 150;
var theLeft = 650;
var toClip = 55;

function scrollNews(newsDiv, toMove )
{
  theDiv = getObject( newsDiv.toString() );
  if ( theDiv == null ) { return; }
  if ( document.layers )
  {
    theDiv.clip.top = toMove;
    theDiv.clip.bottom = toMove + toClip;
    theDiv.top = theTop - toMove;
  }
  else
  {
    theDiv = theDiv.style;
    theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px

0px)";
    theDiv.top = theTop - toMove + 'px';
  }
  if ( ( theTop + theHeight - toMove ) < ( theTop - theHeight - 20 ) )
  {
    toMove = 0;
    if ( document.layers )
    {
      theDiv.clip.top = theTop;
      theDiv.clip.bottom = toClip;
      theDiv.top = theTop
    }
    else
    {
      theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px

0px)";
      theDiv.top = theTop + 'px';
    }
  }
  toMove = (toMove + 1);
  setTimeout("scrollNews('" + newsDiv + "'," + toMove + ")", 100);
}
</script>
</head>

<body onload="scrollNews('inner', 0);"
<div id="news">
  <div id="inner">
    <h1>This is the latest news</h1>
    This is some test information!<br />
    It will be scrolling<br />
  </div>
</div>
</body>
</html>
0
 
gregca80Author Commented:
dakyd:

That seems to be working well.

Do you know what I can add to the javascript to make the scrolling stop when the mouse is over it, and resume when the mouse pointer is off the box?

Thanks!

0
 
gregca80Author Commented:
Anyone know what I can add to the javascript to make the scrolling stop when the mouse is over it, and resume when the mouse pointer is off the box?

Thanks!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dakydCommented:
Sorry I didn't respond earlier, didn't see the notification for your replies.  I think this should do what you want.  I had to make toMove a global variable in order to make the mouseover/mouseout work, but the idea is the same.  Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#news {
     position:relative;
     visibility: visible;
     left: 5px;
     top: 43px;
     height: 75px;
     width: 288px;
     padding-top: 20px;
     border: 1px solid black;
     overflow: hidden;
}

#inner {
    position: relative;
    height: 50px;
    width: 288px;
}
</style>
<script type="text/javascript">
function getObject( obj )
{
  var strObj;
  if ( document.all )
    strObj = document.all.item( obj );
  else if ( document.getElementById )
    strObj = document.getElementById( obj );
  return strObj;
}
var theTop = 20;
var theHeight = 80;
var theWidth = 150;
var theLeft = 650;
var toClip = 55;
var timer = null;
var toMove = 0;

function scrollNews(newsDiv)
{
  theDiv = getObject( newsDiv.toString() );
  if ( theDiv == null ) { return; }
  if ( document.layers )
  {
    theDiv.clip.top = toMove;
    theDiv.clip.bottom = toMove + toClip;
    theDiv.top = theTop - toMove;
  }
  else
  {
    theDiv = theDiv.style;
    theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px

0px)";
    theDiv.top = theTop - toMove + 'px';
  }
  if ( ( theTop + theHeight - toMove ) < ( theTop - theHeight - 20 ) )
  {
    toMove = 0;
    if ( document.layers )
    {
      theDiv.clip.top = theTop;
      theDiv.clip.bottom = toClip;
      theDiv.top = theTop
    }
    else
    {
      theDiv.clip = "rect(" + toMove + "px " + (theWidth + theLeft) + "px " + (toMove + toClip) + "px

0px)";
      theDiv.top = theTop + 'px';
    }
  }
  toMove = (toMove + 1);
  timer = setTimeout("scrollNews('" + newsDiv + "')", 100);
}
</script>
</head>

<body onload="scrollNews('inner', 0);"
<div id="news" onmouseover="clearTimeout(timer);" onmouseout="scrollNews('inner', toMove);">
  <div id="inner">
    <h1>This is the latest news</h1>
    This is some test information!<br />
    It will be scrolling<br />
  </div>
</div>
</body>
</html>
0
 
gregca80Author Commented:
Hi:

Thanks for the reply!

The mouseover part works great. As soon as you put the mouse over, it stops wherever the text is scrolling.

The only problem with the mouseout part is that it starts scrolling from the beginning, rather than where it left off. So basically what I wanted to do was when I mouseover it seamingly pauses the text, and then unpauses it when the mouse is off. I hope that makes sense.

Is there any adjustments that will make the mouseout do that?

Thanks!

-Greg
0
 
gregca80Author Commented:
here is an example of someone else's scroller that does what i'm trying to do:

http://javascript.internet.com/messages/len's-news-scroller.html

-greg
0
 
dakydCommented:
Hm ... when I test it, it works okay, I also uploaded a sample here: http://www.freewebs.com/dakyd/ee/scroller.html

Make sure that toMove isn't set to 0 inside of the scrollNews() function, and that you're only calling scrollNews() with a single argument.  "scrollNews('inner', 0)" should only appear in the body's onload tag.  Anywhere else, it'll do exactly what you said - start scrolling from the beginning.  Hope that helps.
0
 
gregca80Author Commented:
Okay, it's working now. I must have had a typo in the code.

Thank you for your expertise. You have been very helpful.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now