Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    Calapodesti
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    displaying text in text box with previous and next buttons

    Hi again

    For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box.

    There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc..

    Has anyone a clue how I can accomplish that? Thanks.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    One of many ways to accomplish the goal ...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Twitter ??? Headlines </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=233653
    
    // messages could be supplied from a text file and read with ajax code
    // or embedded in a JS external file with a .js filename extention.
    var messages = [
    //    '1234567890123456789|'+'1234567890123456789|'+
    //    '1234567890123456789|'+'1234567890123456789|'+
    //    '1234567890123456789|'+'1234567890123456789|'+'12345678901234567890',
        'Message for <em>kindergarden</em> class',
        'Message for <em>1st grade</em>',
        'Message for <em>2nd grade</em>',
        'Message for <em>3rd grade</em>',
        'Message for <em>4th grade</em>',
        'Message for <em>5th grade</em>',
        'Message for <em>6th grade</em>'  // Note: no comma after last entry
    // can embed other HTML and/or CSS tags for display changes
    ];
    
    var msgPtr = 0;
    function nextMsg(direction) {
      msgPtr = msgPtr + direction;
      if (msgPtr < 0) { msgPtr = messages.length-1; }
      if (msgPtr > messages.length-1) { msgPtr = 0; }
      document.getElementById('msg').innerHTML = messages[msgPtr];
    }
    window.onload = function () {
      nextMsg(0);
    }
    </script>
    
    <style type="text/css">
    em { color:orange; }
    #msg { font-family:monospace; font-size:1em;  width:84em;
           border:1px solid black; overflow:hidden;
    }
    </style>
    
    </head>
    <body>
    <div id="msg"></div><br>
    <button onclick="nextMsg(-1)">&lt;&lt;</button>
    <button onclick="nextMsg(1)">&gt;&gt;</button>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    abciustin (08-01-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Location
    Calapodesti
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks a million, now a few more questions

    Thanks a lot, it looks nice but have a few more questions, maybe you can help:

    1 - about the script above which is very cool, how and I justify the text and how to change color? Being in the <head> section? Any chance on rolling the messages by itself, not only manually with the buttons (buttons will also remain active)? How to change color of button upon mouseover, from blue to green or hexadecimal ?

    2 - suppose I have text in a js file and I give the command to be loaded in a html file, how can I align the text to justify, and how to format the font and color inside that js file?? (A more general question I think).

    Thanks again, buddy.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Now I need additional information ... questions in RED below:

    Quote Originally Posted by abciustin View Post
    Thanks a lot, it looks nice but have a few more questions, maybe you can help:

    1 - about the script above which is very cool, how and I justify the text and how to change color?
    CSS
    Being in the <head> section? Any chance on rolling the messages by itself, not only manually with the buttons (buttons will also remain active)?
    Yes, with a bit more JS (like using setTimeout() function)
    How to change color of button upon mouseover, from blue to green or hexadecimal ?
    CSS, but hexadecimal is not a color (See script below)

    2 - suppose I have text in a js file and I give the command to be loaded in a html file, how can I align the text to justify,
    CSS
    and how to format the font and color inside that js file??
    CSS
    (A more general question I think).

    Thanks again, buddy.
    For the button colors:
    Code:
    <button onclick="nextMsg(-1)" onMouseOver="this.style.backgroundColor='lime'"
     onMouseOut="this.style.backgroundColor='lightblue'">
    &lt;&lt;</button>
    <button onclick="nextMsg(1)" onMouseOver="this.style.backgroundColor='lime'"
     onMouseOut="this.style.backgroundColor='lightblue'">
    &gt;&gt;</button>

    More question:
    You asked for a message display of up to 140. Was that 140 characters or pixels?
    Do you need borders? What is the font-size range to be?

    What do your messages to display contain? Give me an example using HTML tags.

    Most of what you want is possible with JS and CSS in the HTML page,
    but my mind reading skills suck and anything after post #1 it is all a guess as to what you want.

  • #5
    New Coder
    Join Date
    Aug 2011
    Location
    Calapodesti
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    details

    I uploaded a file here: http://sfantipa.ro/z_en_istoric.html .

    The reason for I was not exact was because I'm not sure what I want to use. I thought it over and i think I need a 'box' of 135 px, no borders, no background of any kind, centered. The font will be Verdana 9pt, color #3D400a, no heading, no title. I want the html to load an external txt (or .js) file, and have those buttons (same color as font, on mouse over) but also to load the next message from the text file with each page loaded (so also the button, also the auto text). In your code, you defined em = green, so some elements already em on the page turned green. I let it so but don't want no other thing coloured or emphasized. Just plain text but left-right alignement.

    PS! I don't want all the stuff in the (single) html file, because this 'box' should be on all pages, therefore if I will add more text I should be able to do it easy.

    I also asked about formating because I have another desire, to put a script on my page from another website and I cannot format the text properly. The URL is here: http://www.credo.ro/ and it is a calendar (the script is located on left, at the end of the column). I want to edit it with no background and I did manage to remove them but cannot align the text left-right. that is why I asked how to do it. And even more, the text from that widget is loaded from another website so don't think I will be able to, but that is another story.

    Thanks again.
    Last edited by abciustin; 08-01-2011 at 08:03 PM.

  • #6
    New Coder
    Join Date
    Aug 2011
    Location
    Calapodesti
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    details

    Code:
    <script language="JavaScript">
    <!--
    var r_text = new Array ();
    r_text[0] = "All the leaves are brown";
    r_text[1] = "And the sky is grey";
    r_text[2] = "I've been for a walk";
    r_text[3] = "On a winter's day";
    r_text[4] = "I'd be safe and warm";
    r_text[5] = "If I was in L.A.";
    r_text[6] = "California dreaming, On such a winter's day";
    var i = Math.floor(7*Math.random())
    
    document.write(r_text[i]);
    
    //-->
    </script>

    ok, lets take the above code for instance. If I coul put it in a div of 135 px, center it and most important format the font and alignemet, keep the 2 buttons you made (better if the buttons dont move up and down when the text is short/longer), I think I found my answer. Of course, I need to refer to it as an external file... Can you help with this? it seems easier, right? Thanks!
    Last edited by abciustin; 08-01-2011 at 09:10 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
    •