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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Text Scroll with Next, Pause, Previous Button

    Dear
    Its my first post in the forum, I request you to please help me in this...

    I want to make JS code to display the news titles of 10 sec each. It should have Next, Pause, Previous button. It will auto load when the page start. Every different title have different background.

    One line of 980 Px width and 13 px height. The buttons should be totally on the right side and the text is on the left side.

    Please spend some of u r time to solve my request..

    Thanks...

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    What have you got so far? The html/css at lest I hope. Show it to use please or a link to your site. Also the javascript you have already finished.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    What have you got so far? The html/css at lest I hope. Show it to use please or a link to your site. Also the javascript you have already finished.
    Dear, I dont know the codes i have not done. Please Click Here for my site. You will see the marquee, i want to change it to js text as mentioned above.

    Thanks...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank u

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok
    nice

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Post #3 got stuck in the moderation queue. I’ve approved it, maybe it’ll clear things up.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    haleemfp making a 980 Px width and 13 px height area to display information and put 3 buttons to the right of it is no big problem. What do you want displayed in that 980x13 area? What do you mean by news titles? Are they the titles you now have like:
    Code:
    Saudis own 300 private jets worth SR 20 bn
    KSA consulate in Hyderabad soon
    Saudi Citizen is on death row
    And all the rest on the site?
    Also need to know where this 980x13 area should go(where to place it on screen)

    If your given the code can you install it? (This to me is the biggest question. No since working on something that will not be used).

    I just measured your display area and it's only 1000px wide. Can't put buttons to the right of a 980px <input> area. This has to be cut down or the buttons put somewhere else.

  • #9
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks sunfighter and time to review the site...

    If you open my site, you will see the marquee on the top header moving like (*****Earn Money From FEDRi by Converting your Points*****). I want to remove this and place the new JS instead of this.

    Yes your correct, I want to display the news titles which I will add manually in the code. Cant we place small three icon or buttons for Like < || > on the same line of the text ????

    I am also working for this from yesterday, I found the code from this website and I modify it. But its not working. It will be easy for you if you can edit the below code....

    Thanks.. .

    Code:
    <!DOC html>
    <html>
    <head>
    <script type="text/javascript">
    	var messages = [
        'Messages 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>'
    ];
    
    var msgPtr = 0;
    var player;
    function nextMsg(direction, loop) {
        msgPtr = msgPtr + direction;
        if (msgPtr < 0) { msgPtr = messages.length-1; }
        if (msgPtr > messages.length-1) { msgPtr = 0; }
        document.getElementById('msg').innerHTML = messages[msgPtr];
        if(loop){
            player = setTimeout(function(){ nextMsg(1, true); }, 1000);
        }
    }
    function toggleMsg()
    {
        clearTimeout(player);
    }
    nextMsg(0, true);
    
    $(function(){
        $('.prev').click(function(){
           clearTimeout(player);
            nextMsg(-1, false);
            $('.playpause').removeClass('playing').addClass('stopped').text('play');
        });
        $('.next').click(function(){
            clearTimeout(player);
            nextMsg(1, false);
            $('.playpause').removeClass('playing').addClass('stopped').text('play');
        });
        $('.playpause').click(function(){
           if($(this).hasClass('stopped'))
           {
               nextMsg(0, true);
               $(this).removeClass('stopped').addClass('playing').text('pause');
           }
            else
            {
                clearTimeout(player);
                $(this).removeClass('playing').addClass('stopped').text('play');
            }
        });
    });
    </script>
    
    <style type="text/css">
            em { color:orange; }
            #msg { 
                font-family:monospace; 
                background-color:yellow;
                font-size:1.45em; 
    			width:890px;
                border:1px dotted red; 
                overflow:hidden;
    			float: left;
            }
            #buttons { float: right; }
    </style>
    
    </head>
    <body>
        <div id="msg"></div>
        <div id="buttons">
            <button class="prev">&lt;</button>
            <button class="playpause playing">pause</button>
            <button class="next">&gt;</button>
        </div>
    </body>
    </html>
    I want to replace the buttons with image. I will add three images for it...

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Think I commented on all the changes I made. Play with this and see if it holds together. When you hit plat button the text advances automatically now.
    Code:
    <!DOC html>
    <html>
    <head>
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    	var messages = [
        'Messages 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>'
    ];
    
    var msgPtr = 0;
    var player;
    function nextMsg(direction, loop) {
        msgPtr = msgPtr + direction;
        if (msgPtr < 0) { msgPtr = messages.length-1; }
        if (msgPtr > messages.length-1) { msgPtr = 0; }
        document.getElementById('msg').innerHTML = messages[msgPtr];
        if(loop){
            player = setTimeout(function(){ nextMsg(1, true); }, 2500);
        }
    }
    /*   this function toggleMsg() is not used, maybe removed   */
    function toggleMsg()
    {
        clearTimeout(player);
    }
    $(function(){
        $('.prev').click(function(){
           clearTimeout(player);
            nextMsg(-1, true);
            $('.playpause').removeClass('playing').addClass('stopped');
    		$("#playpause").removeClass('stopped').addClass('playing').text('pause'); /*  Added this   */
        });
        $('.next').click(function(){
            clearTimeout(player);
            nextMsg(1, true);
            $('.playpause').removeClass('playing').addClass('stopped');
    		$("#playpause").removeClass('stopped').addClass('playing').text('pause'); /*  Added this   */
        });
        $('#playpause').click(function(){   /*    Made some changes this function   */
           if($(this).hasClass('stopped'))
           {
                clearTimeout(player);
    			nextMsg(1, true);
    			$(this).removeClass('stopped').addClass('playing').text('pause');
           }
            else
            {
                clearTimeout(player);
    			nextMsg(0, false);  // added
                $(this).removeClass('playing').addClass('stopped').text('play');
            }
        });
    });
    </script>
    
    <style type="text/css">
    em { color:orange; }   // don't know what this is
    #msg {
        font-family:monospace;
        background-color:yellow;
        font-size:1.45em;
    	width:840px;
    height: 1.40em;  // Added this to let us read the marquee
        border:1px dotted red;
        overflow:hidden;
    	float: left;
    }
    #buttons {float: right;}
    #mark{width: 980px;}  // this does not need to be here when you add to the page. It should already be there.
    </style>
    
    </head>
    <body>
    	<div id="mark">
    	    <div id="msg"></div>
    	    <div id="buttons">
    	        <button class="prev">&lt;</button>
    	        <button id="playpause" class="playing">pause</button> <!--  Made a change here    -->
    	        <button class="next">&gt;</button>
    	    </div>
    	</div>
    <!--   Placed JS here so it starts after the page loads   -->
    <script type="text/javascript">
    nextMsg(0, true);
    </script>
    </body>
    </html>

  • #11
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Sunfighter,

    I paste your code in a text file and saved it as html and then I open this..

    Its working the loop but buttons are not working. I cannot take to next, previous or pause.

    Is it working to you in this way ???

    Before I try on my real site, I used to try in a trial way.

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    This line:
    <script type='text/javascript' src='javascript/jquery.js'></script>
    Calls my jquery.
    Replace it with a call to retrieve your jquery or get it from google with
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
    BTW jquery ver is now 1.9.0, but things work in the link I gave you so why fight it.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by sunfighter View Post
    Replace it with a call to retrieve your jquery or get it from google with
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
    That’s a reference to prototype, though, not jQuery.

  • #14
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    This line:
    <script type='text/javascript' src='javascript/jquery.js'></script>
    Calls my jquery.
    Replace it with a call to retrieve your jquery or get it from google with
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
    BTW jquery ver is now 1.9.0, but things work in the link I gave you so why fight it.
    Thanks dear for your support.
    Its working now...
    I really appreciate your help...

  • #15
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Glad to hear everything is good haleemfp.
    Also glad you didn't get caught in my mistake. Nice catch VIPStephan.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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