SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Feb 2002
    Location
    NZ
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any help combining 2 scripts ?

    I have been trying to hack these 2 scripts all nite, I know little about js.

    I want to incorporate the effects of the 2nd script into the 1st script.
    I do have a preference of applying the scrolling effect into script one rather than putting the text effects into script 2

    Any help appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
      <head>
    	<title> 404 error </title>
    	<meta http-equiv="Content-Type" content="
    	text/html; charset=iso-8859-1">
    <style type="text/css">
    body,textarea { 
     font-family: "Courier New",Courier,mono;
     background-color: black;
     color: rgb(160, 160, 160);
     border: 0;
    }
    span.cursor { 
     text-decoration: blink ;
    }
    div.content { 
     width: 75%;
     margin-left: 15%;
     margin-top: 5em;
    }
    a { 
     color: white ;
     text-decoration: none ;
    }
    a:hover { 
     color: red ;
    }
    																			 
    </style>
      </head>
      <body onLoad="type_text()">
      <!-- No the password is NOT real just some random **** i typed in -->
    <div class="content"><pre>
    <!- Dont forget, theres a comma on every line accept the last ->
    <script language="Javascript"><!--
    var tl=new Array(
    "Do you have a password",
    "Give me your password!",
    "This aint some game you know",
    "I have work to do",
    "So come back when you have a password"
     
    
    );
    var speed=60;
    var index=0; text_pos=0;
    var str_length=tl[0].length;
    var contents, row;
    function type_text()
    {
      contents='';
      row=Math.max(0,index-18);
      while(row<index)
    	contents += tl[row++] + '\r\n';
      document.forms[0].elements[0].value = contents +
    tl[index].substring(0,text_pos) + "_";
      if(text_pos++==str_length)
      {
    	text_pos=0;
    	index++;
    	if(index != tl.length)
    	{
    	  str_length=tl[index].length;
    	  setTimeout("type_text()",1500);
    	}
      } else
    	setTimeout("type_text()",speed);
     
    }
    // -->
    </script>
    
    <form>
    <textarea rows="20" cols="60" wrap="soft" style="overflow: auto"></textarea>
    </form>
    <noscript><i>Sorry</i>
    <br clear>
    <font size="+2">
    <p>
    </p>
    </font></noscript>
      </body>
    </html>
    Code:
    <html>
    <head>
    <title>Pausing up-down Scroller</title>
    <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>
    <script type="text/javascript">
    /*Example message arrays for the two demo scrollers*/
    var pausecontent=new Array()
    pausecontent[0]='JavaScript Kit<br />Comprehensive<br /> JavaScript tutorials and over 400+ free scripts!'
    pausecontent[1]='<a href="<A href="http://www.codingforums.com">Coding">http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
    pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
    var pausecontent2=new Array()
    pausecontent2[0]='<a href="<A href="http://www.news.com">News.com">http://www.news.com">News.com: Technology and business reports</a>'
    pausecontent2[1]='<a href="<A href="http://www.cnn.com">CNN">http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
    pausecontent2[2]='<a href="<A href="http://news.bbc.co.uk">BBC">http://news.bbc.co.uk">BBC News: UK and international news</a>'
    </script>
    <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>
    </head>
    <body>
    <script type="text/javascript">
    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
    new pausescroller(pausecontent, "pscroller1", "someclass", 10000)
    
    </script>
    <!----
    </body>
    </html>
     
    
    //dont need this, its for a 2nd small scroller I edited out on next lines
    //document.write("<br />")
    //new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
    
    The code of Step 2 illustrates how to invoke a scroller instance:
    new pausescroller(pausecontent, "pscroller1", "someclass", 3000)Where "pausecontent" is the name of the array defined earlier that contains your scroller messages, and "pscroller1", an arbitrary but unique CSS ID for that scroller. "someclass" is simply an random CSS classname you can pass to add additional style to the scroller, and "3000" points to the pause time between messages, in milliseconds.
    As mentioned, all styling to the scroller is simply done via external CSS, such as:
    #pscroller1{
    width: 200px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: lightyellow;
    }To display a single lined scroller like in the 2nd example above for example, you'd simply change the "height" property to a small number such as 25px.
    Pause then scroll- that's the way to do it!
    --->

  2. #2
    SitePoint Guru
    Join Date
    Feb 2002
    Location
    NZ
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must have been almost asleep when I wrote that post, didnt really explain myself very well. Hard days at work and long nites learning.

    The 1st script creates a typing text effect.
    The 2nd script is a rolling text pausecontent[0],pausecontent[1], etc . With a pause between each element.

    I'm not interested in a rolling effect. I just want the 1st script to be able to move on to the next element after a preset amount of time.

    I'll keep trying to figure out how to combine the two scripts but any help would be appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •