Results 1 to 6 of 6

Thread: ProHTML selectables

  1. #1
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Question ProHTML selectables

    1) Script Title:
    ProHTML Ticker

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...htmlticker.htm

    3) Describe problem:
    Say I have 6 div tags to scroll thru, I want to add 6 links underneath each one would take you to the equivalent div tag, I dont know how to add this function to the script so I can jump to the selected div and then let it continue scrolling from that point, any help with this would be much appreciated.

    I am guessing it would possibly be some way of setting the inc var manually with some sort of if statement.
    Last edited by dragon_sa; 02-19-2012 at 10:36 AM. Reason: Problem solved

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    #dropcontentsubject{
    width: 250px;
    font-weight: bold;
    }
    
    .dropcontent{
    width: 250px;
    height: 200px;
    border: 1px solid black;
    background-color: #DFDFFF;
    padding: 3px;
    display:block;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * ProHTML Ticker script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
    var enablesubject=1 //enable scroller subject? Set to 0 to hide
    
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.dropcontent{display:none;}\n')
    document.write('</style>\n')
    }
    
    var selectedDiv=0
    var totalDivs=0
    
    function contractall(){
     var inc=0;
     while (document.getElementById("dropmsg"+inc)){
      document.getElementById("dropmsg"+inc).style.display="none";
      inc++;
     }
    }
    
    function GoTo(nu,ms){
     if (document.getElementById("dropmsg"+nu)){
      clearTimeout(GoTo.to);
      selectedDiv=nu;
      expandone(ms||tickspeed);
     }
     return false;
    }
    
    function expandone(ms){
     var selectedDivObj=document.getElementById("dropmsg"+selectedDiv);
     contractall();
     document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject");
     selectedDivObj.style.display="block";
     selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0;
     GoTo.to=setTimeout(function(){ expandone(); },ms||tickspeed);
    }
    
    function startscroller(){
     while (document.getElementById("dropmsg"+totalDivs)!=null){
      totalDivs++;
     }
     expandone();
     if (!enablesubject){
      document.getElementById("dropcontentsubject").style.display="none";
     }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", startscroller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", startscroller)
    
    </script>
    
    </head>
    
    <body>
    <div id="dropcontentsubject"></div>
    
    <div id="dropmsg0" class="dropcontent" subject="What is JavaScript?">
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    
    <div id="dropmsg1" class="dropcontent" subject="Java & JavaScript Differences">
    Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
    </div>
    
    <div id="dropmsg2" class="dropcontent" subject="What is DHTML?">
    DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
    </div>
    <input type="button" name="" value="GoTo 0" onmouseup="GoTo(0,5000);" />
    <input type="button" name="" value="GoTo 1" onmouseup="GoTo(1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="GoTo(2,10000);" />
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    dragon_sa (02-19-2012)

  4. #3
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    Thank you very much vwphillips, that works perfectly, I am not much of a javascript programmer, so I have been trying all sorts of obscene combinations all day without success.

  5. #4
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Question Change BG of the new div manual selectors

    Hi, I created div boxes containing number for the links, to the corresponding div that displays, is it also possible to change the div style of these id's to an active style so they have a highlighted background to them current visible div?

    so if I have 6 divs and 6 div selectors, the div selectors have a white background until the corresponding div is selected (either manual or by ticker) changing the div selector background to red for example, and then back to white when the next div displays?

    Hope that makes sense.

    Div 1 showing -> Div 1 selector box red bg all others white
    Div 2 showing -> Div 2 selector box red bg all others white
    etc

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    #dropcontentsubject{
    width: 250px;
    font-weight: bold;
    }
    
    .dropcontent{
    width: 250px;
    height: 200px;
    border: 1px solid black;
    background-color: #DFDFFF;
    padding: 3px;
    display:block;
    }
    
    .page {
     background-Color:#FFCC66;
    }
    
    .pageactive {
     background-Color:red;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * ProHTML Ticker script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
    var enablesubject=1 //enable scroller subject? Set to 0 to hide
    
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.dropcontent{display:none;}\n')
    document.write('</style>\n')
    }
    
    var selectedDiv=0
    var totalDivs=0
    
    function contractall(){
     var inc=0;
     while (document.getElementById("dropmsg"+inc)){
      document.getElementById("dropmsg"+inc).style.display="none";
      if (document.getElementById("page"+inc)){
       document.getElementById("page"+inc).className=inc!=selectedDiv?'page':'pageactive';
      }
      inc++;
     }
    }
    
    function GoTo(nu,ms){
     if (document.getElementById("dropmsg"+nu)){
      clearTimeout(GoTo.to);
      selectedDiv=nu;
      expandone(ms||tickspeed);
     }
     return false;
    }
    
    function expandone(ms){
     var selectedDivObj=document.getElementById("dropmsg"+selectedDiv);
     contractall();
     document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject");
     selectedDivObj.style.display="block";
     selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0;
     GoTo.to=setTimeout(function(){ expandone(); },ms||tickspeed);
    }
    
    function startscroller(){
     while (document.getElementById("dropmsg"+totalDivs)!=null){
      totalDivs++;
     }
     expandone();
     if (!enablesubject){
      document.getElementById("dropcontentsubject").style.display="none";
     }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", startscroller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", startscroller)
    
    </script>
    
    </head>
    
    <body>
    <div id="dropcontentsubject"></div>
    
    <div id="dropmsg0" class="dropcontent" subject="What is JavaScript?">
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    
    <div id="dropmsg1" class="dropcontent" subject="Java & JavaScript Differences">
    Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
    </div>
    
    <div id="dropmsg2" class="dropcontent" subject="What is DHTML?">
    DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
    </div>
    <input id="page0" type="button" name="" value="GoTo 0" onmouseup="GoTo(0,5000);" />
    <input id="page1" type="button" name="" value="GoTo 1" onmouseup="GoTo(1);" />
    <input id="page2" type="button" name="" value="GoTo 2" onmouseup="GoTo(2,10000);" />
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. The Following User Says Thank You to vwphillips For This Useful Post:

    dragon_sa (02-21-2012)

  8. #6
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    Absolutely perfect, your a legend thank you very much

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
  •