22 users online (0 members and 22 guests)  


  Results 1 to 6 of 6

Related

  1. Cycling Review WebSite For Sale    Forum: Websites For Sale
    Replies: 4
  2. Cycling Banner Fade In Effect    Forum: Javascript Forum
    Replies: 3
  1. #1
    MaestroHubert's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    3

    Cycling through texts

    Hello,
    I have a simple problem but i can't seem to find the solution. I've tried many times but i always end up with the wrong results. This is what it's about:

    I'm trying to change the text in a <div> when i click a button without changing the page. The div element contains text that i want changed when i click on 2 buttons - next and back. The point is to present several texts and go thru each of them by clicking next or back. I think a good way to do this is to change the innerHTML but i want it done in a way so that the user can cycle thru the texts. Example:

    A div element saying:

    "Today we're going to have a birthday party for Wil"

    And right below it are two buttons: next and back.

    When you click on next you proceed to the next text saying:

    "We have an emergency situation in the marketing department. All managers must attend an emergency meeting tomorrow morning at 8AM.

    Then you click the next button and a new text message appears (the only thing that changes is the text, everything else stays the same).

    If the user clicks the back button then they should be able to view the previous text message.

    Get where i'm going with this? Is this possible with Java?
    I think it is, i just don't know how to do it.
    If possible i would like to have an unlimited number of text messages available for cycling thru for future updates. Once the last message has been reached i don't want it to loop back to the first, but stay there. And also as soon as you reach the first (and oldest) message the user should not be able to go to the last (the newest) by pressing the back button, but by pressing the next button until he gets there. And also, when loading the page would it be possible for me to control which text is displayed first?
    I hope i've made myself clear, if not please ask away. Thank you so much for your time

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Cycling through texts

    You might find this basic example useful:
    HTML Code:
    <script type="text/javascript">
    var ray=
    {
    	texts:[
    	'Today we\'re going to have a birthday party for Wil',
    	'We have an emergency situation in the marketing department. All managers must attend an emergency meeting tomorrow morning at 8AM',
    	'Another message' // Ensure the last message don't have a comma
    	], // Place in this array the messages you want to iterate through
    	
    	iterate:0,
    	
    	cycle:function(el,action)
    		{
    		if(action=='back')
    			{
    			if(this.iterate<1)
    				{
    				alert('No more text to show.');
    				this.iterate=1;
    				return false;
    				}
    			else
    				this.setNode(el,this.texts[this.iterate-1]);
    			this.iterate--;
    			}
    		else if(action=='next')
    			{
    			if(this.iterate>this.texts.length-1)
    				{
    				alert('No more text to show');
    				this.iterate=this.texts.length-1;
    				return false;
    				}
    			else
    				{
    				if(this.iterate==0)
    					this.setNode(el,this.texts[this.iterate]);
    				else this.setNode(el,this.texts[this.iterate]);
    				}
    			this.iterate++;
    			}
    		else
    			this.setNode(el,this.texts[action]);
    		},
    		
    	setNode:function(el,val)
    		{
    		return document.getElementById(el).firstChild.nodeValue=val;
    		}
    }
    </script>
    <style type="text/css">
    #message{
    border:3px double #999;padding:10px;
    margin:10px 0px;
    }
    </style>
    <div id="message">
    This is the default message seen when page loads and when users has JS disabled
    </div>
    <input type="button" value="Back" onclick="ray.cycle('message','back')">
    <input type="button" value="Next" onclick="ray.cycle('message','next')">
    If you want to set a "default" message, you can define it and call the cycle method:
    Code:
    ray.cycle('id_of_the_message_box',index_of_the_array); // The first parameter is "message", the second should be a number, if 0, the first index in the array.
    Hope that helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    MaestroHubert's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    3

    Re: Cycling through texts

    Yes Thank you very much rangana This is exactly what i needed. Just two more things:

    There are a total of 10 messages and i want the last message to display by default on page loadup, having in mind that the user has JS enabled. I want that last text in the array (in my case index array 9) being displayed on load up regardless of what the text in the 'message' div is.
    Where do i place this:
    Code:
    ray.cycle('message',9); // The first parameter is "message", the second should be a number, if 0, the first index in the array.
    I've tried placing it in the script, but it doesn't work. Should i place it as a script of it's own?

    Also, when going back and forth through the messages, if i decide to go from let's say message 5 to message 6 (and there is a total of 10 messages), i press next and go to message 6 from message 5. But, if i want to go back to message 5 i need to press the back button -twice- cause pressing it once does nothing. Also if i go from message 9 to message 10 and then want to go back to message 9, i have to press the back button twice. But if i go from message 10 to message 11 (there is on message 11) the alert box pops up, i close it, and then if i want to go back to message 9 i have to press the back button only -once-.

    I've noticed this in some other cycle scripts as well so i was wondering why that is so... Not a problem, just personal curiosity

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Cycling through texts

    You need to place it in an onload event:
    Code:
    window.onnload=function()
    {
    ray.cycle('message',9); // The first parameter is "message", the second should be a number, if 0, the first index in the array.
    }
    Additionally, you might find this link useful:
    http://dynamicdrive.com/dynamicindex...tentslider.htm
    http://dynamicdrive.com/dynamicindex...tentglider.htm

    ...as I'm fixing the "double click" bug.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    MaestroHubert's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    3

    Re: Cycling through texts

    Exactly what i needed. Thank you for helping me out

  6. #6
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Cycling through texts

    No problem, glad I could help.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.



Tags for this Thread