News or Menu – Dynamic

[Total: 0    Average: 0/5]

This example shows how to have a “text-box” like news or menu which can minimize or maximize.

Head Code:

<SCRIPT type=text/javascript>
if (document.images){
_g = "http://www.js-examples.com/data/ex_223/";
down = new Image();   down.src          = _g+"m_controlsleftdown.gif";
up = new Image();    up.src            = _g+"m_controlsleftup.gif";
scrollupon = new Image();   scrollupon.src    = _g+"m_scrollupon.gif";
scrollupoff = new Image();   scrollupoff.src   = _g+"m_scrollupoff.gif";
scrolldownon = new Image();  scrolldownon.src  = _g+"m_scrolldownon.gif";
scrolldownoff = new Image(); scrolldownoff.src = _g+"m_scrolldownoff.gif";
ceramicson = new Image();    ceramicson.src    = _g+"m_ceramicson.jpg";
ceramicsoff = new Image();   ceramicsoff.src   = _g+"m_ceramicsoff.jpg";
mainsiteon = new Image();    mainsiteon.src    = _g+"m_mainsiteon.jpg";
mainsiteoff = new Image();   mainsiteoff.src   = _g+"m_mainsiteoff.jpg";
emailmeon = new Image();     emailmeon.src     = _g+"m_emailmeon.jpg";
emailmeoff = new Image();    emailmeoff.src    = _g+"m_emailmeoff.jpg"
}
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
var moving = false;
var scrollingspeed = 8;
var scrollingdir;
function doit() {
window.defaultStatus='defaultStatus';
if(ns4) news = document.content.document.whatsnew.document.scrltxt;
if(ie4) news = document.all['scrltxt'].style;
news.ypos = parseInt(news.top);
if (ns4) {document.layers.loading.visibility='hidden';}
else if(ie4) {document.all.loading.style.visibility='hidden';}
}
function ScrollUp(tf) {
if (tf){scrollingdir="down"}
if ((news.ypos < 10) && (scrollingdir=="down")) {
news.ypos += 4;
news.top = news.ypos;
setTimeout("ScrollUp()",10);
}
}
function ScrollDown(tf) {
if (tf) {scrollingdir = "up"}
if (ns4) hght = news.document.height;
if (ie4) hght = document.all["scrltxt"].offsetHeight;
BottomOfNews = news.ypos+hght;
if ((BottomOfNews > 180) && (scrollingdir == "up")) {
news.ypos -= 4;
news.top = news.ypos;
setTimeout("ScrollDown()",10);
}
}
function StopMoving(){scrollingdir = false;}
function ToTop(){
if (news.ypos != 10){
news.ypos = 10;
news.top = news.ypos;
}
}

function gettinpersonal(){
if (ns4) eak = document.layers.content;
if (ie4) eak = document.all['content'].style;
eak.ypos = parseInt(eak.top);
if (!moving){
eak.top = eak.ypos;
moving = true;
if (eak.ypos != 40){ slideup(); }
else if (eak.ypos != 280){ slidedown(); }
}
}

function slideup(){
if (ns4){document.controls.document.arrows.src=down.src;}
if (ie4){document.arrows.src=down.src;}
eak.top = eak.ypos;
if (eak.ypos != 40){
eak.ypos -= 20;
setTimeout("slideup()",10)}
else if (eak.ypos < 40){eak.ypos = 40;}
else if(eak.ypos == 40){moving = false;}
}

function slidedown(){
if (ns4){document.controls.document.arrows.src=up.src;}
if (ie4){document.arrows.src=up.src;}
eak.top = eak.ypos
if (eak.ypos != 280){
eak.ypos += 20;
setTimeout("slidedown()",10);}
else if (eak.ypos > 280){ eak.ypos = 280; }
else if(eak.ypos == 280){moving=false;}
}
function switchon(name){
if(ns4){document.content.document.menu.document[name].src = eval(name + "on.src");}
else if(ie4){document[name].src = eval(name + "on.src");}
}
function switchoff(name){
if(ns4){document.content.document.menu.document[name].src = eval(name + "off.src");}
else if(ie4){document[name].src = eval(name + "off.src");}
}
function switchonscrollsup(name){
if(ns4){document.content.document.scrollcontrolsup.document[name].src = eval(name + "on.src");}
else if(ie4){document[name].src = eval(name + "on.src");}
}
function switchoffscrollsup(name){
if(ns4){document.content.document.scrollcontrolsup.document[name].src = eval(name + "off.src");}
else if(ie4){document[name].src = eval(name + "off.src");}
}
function switchonscrollsdown(name){
if(ns4){document.content.document.scrollcontrolsdown.document[name].src = eval(name + "on.src");}
else if(ie4){document[name].src = eval(name + "on.src");}
}
function switchoffscrollsdown(name){
if(ns4){document.content.document.scrollcontrolsdown.document[name].src = eval(name + "off.src");}
else if(ie4){document[name].src = eval(name + "off.src");}
}
var MainSite= null;

function MainSiteWindow(mypage,myname, t, l, s){
  var WinWidth = screen.width-12;
  var WinHeight = screen.height-75;
  MainSite=window.open(mypage,myname,'height='+WinHeight+',width='+WinWidth+',top='+t+',left='+l+',scrollbars='+s+',toolbar=no,location=no,status=yes,menubar=no,resizable=yes,dependent=no')
  if(parseInt(navigator.appVersion) >= 4){MainSite.window.focus();}
}

var win= null;
function NewWindow(mypage,myname,w,h,scroll){
  var winl = (screen.width-w)/2;
  var wint = (screen.height-h)/2;
  settings='height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
  win=window.open(mypage,myname,settings);
  if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
</SCRIPT>

Body Code:

<!-- 
This MUST appear in the BODY tag:
onload=doit();gettinpersonal() onresize=window.location.reload()
-->
<DIV id=loading><DIV id=loadingimg>Loading...</DIV></DIV>
<DIV id=controls style="BACKGROUND-COLOR: #ffffff; CLIP: rect(0px 250px 250px 0px); HEIGHT: 250px; LEFT: 399px; POSITION: absolute; TOP: 280px; WIDTH: 250px; Z-INDEX: 10; layer-background-color: #ffffff"><NOBR><A href="javascript:gettinpersonal()" id=question onclick="window.status='onclick';return true" onfocus=this.blur() onmousedown="window.status='onmousedown';return true" onmouseout="window.status='';return true" onmouseover="window.status='onmouseover';return true">[<IMG alt="" border=0 height=20 name=arrows src="http://www.js-examples.com/data/ex_223/m_controlsleftup.gif" width=18>]</A></NOBR></DIV>
<DIV id=content style="BACKGROUND-COLOR: #ff8000; CLIP: rect(0px 250px 250px 0px); HEIGHT: 250px; LEFT: 399px; POSITION: absolute; TOP: 280px; WIDTH: 250px; Z-INDEX: 5; layer-background-color: #FF8000">
<DIV id=horzlinetop></DIV>
<DIV id=vertlineleft></DIV>
<DIV id=vertlineright></DIV>
<DIV id=menu><NOBR>TOP MENU</NOBR>
</DIV>
<DIV id=scrollcontrolsup style="LEFT: 210px; POSITION: absolute; TOP: 25px; Z-INDEX: 200">
  <A href="#" id=question onfocus=this.blur(); onmouseout="StopMoving();switchoffscrollsup('scrollup')" onmouseover="ScrollUp('true');switchonscrollsup('scrollup')"><IMG alt="Scroll Up" border=0 height=15 hspace=0 name=scrollup src="http://www.js-examples.com/data/ex_223/m_scrollupoff.gif" width=15></A>
</DIV>
<DIV id=scrollcontrolsdown style="LEFT: 210px; POSITION: absolute; TOP: 210px; Z-INDEX: 200">
  <A href="#" id=question onfocus=this.blur(); onmouseout="StopMoving();switchoffscrollsdown('scrolldown')" onmouseover="ScrollDown('true');switchonscrollsdown('scrolldown')"><IMG alt="Scroll Down" border=0 height=15 hspace=0 name=scrolldown src="http://www.js-examples.com/data/ex_223/m_scrolldownoff.gif" width=15></A>
</DIV>
<DIV id=whatsnew         style="BACKGROUND-COLOR: #e0e0e0; CLIP: rect(0px 200px 200px 0px); HEIGHT: 200px; LEFT: 25px; POSITION: absolute; TOP: 25px; WIDTH: 200px; Z-INDEX: 100; layer-background-color: #e0e0e0">
<DIV id=txtbordertop     style="BACKGROUND-COLOR: #000000; CLIP: rect(0px 100% 1px 0px); HEIGHT: 1px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 100%; Z-INDEX: 100; layer-background-color: #000000"></DIV>
<DIV id=txtborderleft    style="BACKGROUND-COLOR: #000000; CLIP: rect(0px 1px 100% 0px); HEIGHT: 100%; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1px; Z-INDEX: 100; layer-background-color: #000000"></DIV>
<DIV id=txtborderrightbg style="BACKGROUND-COLOR: #808080; CLIP: rect(0px 14px 100% 0px); HEIGHT: 100%; LEFT: 185px; POSITION: absolute; TOP: 0px; WIDTH: 14px; Z-INDEX: 1; layer-background-color: #808080"></DIV>
<DIV id=txtborderright2  style="BACKGROUND-COLOR: #000000; CLIP: rect(0px 1px 100% 0px); HEIGHT: 100%; LEFT: 185px; POSITION: absolute; TOP: 0px; WIDTH: 1px; Z-INDEX: 100; layer-background-color: #000000"></DIV>
<DIV id=txtborderright   style="BACKGROUND-COLOR: #000000; CLIP: rect(0px 1px 100% 0px); HEIGHT: 100%; LEFT: 199px; POSITION: absolute; TOP: 0px; WIDTH: 1px; Z-INDEX: 100; layer-background-color: #000000"></DIV>
<DIV id=txtborderbottom  style="BACKGROUND-COLOR: #000000; CLIP: rect(0px 100% 1px 0px); HEIGHT: 1px; LEFT: 0px; POSITION: absolute; TOP: 199px; WIDTH: 100%; Z-INDEX: 100; layer-background-color: #000000"></DIV>
<DIV id=scrltxt style="BACKGROUND-COLOR: #e0e0e0; LEFT: 10px; POSITION: absolute; TOP: 10px; WIDTH: 160px; Z-INDEX: 1; layer-background-color: #e0e0e0">
  <DIV style="LEFT: 10px; POSITION: relative">NEWS HEADER</DIV><BR>
  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>  NORMAL NEWS
  <BR>
  <CENTER><A href="javascript:ToTop()">Back to top</A></CENTER>
</DIV>
</DIV>
</DIV>

Times Viewed: 10

Leave a Reply

Your email address will not be published. Required fields are marked *