Thread: Javascript Help With Scroller

Results 1 to 3 of 3
  1. #1 Javascript Help With Scroller 
    Registered Member rebewlabs's Avatar
    Join Date
    Jan 2008
    Age
    31
    Posts
    133
    Thanks given
    0
    Thanks received
    0
    Rep Power
    54
    I'm working on this shoutbox located on my home page
    The shoutbox div is split up into 2 iframes, one for the messages, one for the input form.. It works fine.

    The Iframe source for the messaging(scrolling part) is here:
    http://www.rebewlabs.com/Shoutbox/index2.php

    I'm trying to get it so that when it hit the bottom it stops(currently it repeats).. But I cant.. I'm fairly new to javascript, But i'm trying to learn it.


    Will rep, Here's my source code for the page

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style type="text/css">
        #daddy-shoutbox {
          padding: 5px;
          background:#000;
          color: white;
          width: 600px;
          font-family: Arial,Helvetica,sans-serif;
          font-size: 11px;0
        }
        .shoutbox-list {
          border-bottom: 1px solid  #666;
          
          padding: 5px;
          display: none;
        }
        #daddy-shoutbox-list {
          text-align: left;
          margin: 0px auto;
        }
        #daddy-shoutbox-form {
          text-align: left;
          
        }
        .shoutbox-list-time {
          color: #666;
        }
        .shoutbox-list-nick {
          margin-left: 5px;
          font-weight: bold;
        }
        .shoutbox-list-message {
          margin-left: 5px;
        }
        
      </style>
      <script type="text/javascript" src="javascript/jquery.js"></script>
      <script type="text/javascript" src="javascript/jquery.form.js"></script>
    </head>
      <body>
    
    <div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">
    
    <!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
     <center>
       <div id="daddy-shoutbox">
        <div id="daddy-shoutbox-list"></div>
      </div>
      </center>  
      <script type="text/javascript">
            var count = 0;
            var files = '';
            var lastTime = 0;
            
            function prepare(response) {
              var d = new Date();
              count++;
              d.setTime(response.time*1000);
              var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
              var string = '<div class="shoutbox-list" id="list-'+count+'">'
                  + '<span class="shoutbox-list-time">'+mytime+'</span>'
                  + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
                  + '<span class="shoutbox-list-message">'+response.message+'</span>'
                  +'</div>';
              
              return string;
            }
            
            function success(response, status)  { 
              if(status == 'success') {
                lastTime = response.time;
                $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />');
                $('#daddy-shoutbox-list').append(prepare(response));
                $('input[@name=message]').attr('value', '').focus();
                $('#list-'+count).fadeIn('slow');
                timeoutID = setTimeout(refresh, 3000);
              }
            }
            
            function validate(formData, jqForm, options) {
              for (var i=0; i < formData.length; i++) { 
                  if (!formData[i].value) {
                      alert('Please fill in all the fields'); 
                      $('input[@name='+formData[i].name+']').css('background', 'red');
                      return false; 
                  } 
              } 
              $('#daddy-shoutbox-response').html('<img src="'+files+'images/loader.gif" />');
              clearTimeout(timeoutID);
            }
    
            function refresh() {
              $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
                if(json.length) {
                  for(i=0; i < json.length; i++) {
                    $('#daddy-shoutbox-list').append(prepare(json[i]));
                    $('#list-' + count).fadeIn('slow');
                  }
                  var j = i-1;
                  lastTime = json[j].time;
                }
                //alert(lastTime);
              });
              timeoutID = setTimeout(refresh, 3000);
            }
            
            // wait for the DOM to be loaded 
            $(document).ready(function() { 
                var options = { 
                  dataType:       'json',
                  beforeSubmit:   validate,
                  success:        success
                }; 
                $('#daddy-shoutbox-form').ajaxForm(options);
                timeoutID = setTimeout(refresh, 100);
            });
      </script>
    
    <!-- END SCROLLER CONTENT -->
    
    </div>
    
    <script type="text/javascript">
    
    /***********************************************
    * IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Specify speed of scroll. Larger=faster (ie: 5)
    var scrollspeed=cache=2
    
    //Specify intial delay before scroller starts scrolling (in miliseconds):
    var initialdelay=500
    
    function initializeScroller(){
    dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
    dataobj.style.top="5px"
    setTimeout("getdataheight()", initialdelay)
    }
    
    function getdataheight(){
    thelength=dataobj.offsetHeight
    if (thelength==0)
    setTimeout("getdataheight()",10)
    else
    scrollDiv()
    }
    
    function scrollDiv(){
    dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
    if (parseInt(dataobj.style.top)<thelength*(-1))
    dataobj.style.top="5px"
    setTimeout("scrollDiv()",40)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializeScroller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializeScroller)
    else
    window.onload=initializeScroller
    
    </script>
    </body>
    </html>
    Reply With Quote  
     

  2. #2  
    Registered Member
    Freezia's Avatar
    Join Date
    Feb 2011
    Posts
    6,013
    Thanks given
    1,147
    Thanks received
    758
    Rep Power
    1311
    ur link dosent work and im still not familiar with what ur trying to do!


    Host your RUNESCAPE PRIVATE SERVER on the cheapest and flagship provider on Rune-Server! Now equipped with DDOS Protection!.


    Reply With Quote  
     

  3. #3  
    Registered Member rebewlabs's Avatar
    Join Date
    Jan 2008
    Age
    31
    Posts
    133
    Thanks given
    0
    Thanks received
    0
    Rep Power
    54
    Links fixed, Sorry lol.. Linux..
    I'm trying to get it that so when it scroll's through my shoutbox messages it stops at the bottom, rather then repeating nd scrolling again.
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. New project; Side scroller. Check it out (:
    By blackaddiction in forum Application Development
    Replies: 21
    Last Post: 02-24-2012, 04:20 PM
  2. scroller
    By abdul100 in forum Help
    Replies: 2
    Last Post: 06-12-2011, 06:48 PM
  3. Scroller
    By SWAT in forum Requests
    Replies: 4
    Last Post: 07-15-2010, 02:32 AM
  4. Non-renamed; New runescape scroller.
    By Java got me Stoned in forum Tutorials
    Replies: 48
    Last Post: 08-04-2008, 01:09 AM
  5. new scroller
    By Java got me Stoned in forum RS2 Client
    Replies: 7
    Last Post: 05-20-2008, 06:40 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •