Text change automatically after some time

  • 1
  • Question
  • Updated 8 years ago
  • Answered
could any one tell me the way to add text in such a way that my text change automatically after some time and appear next text in the queue
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
  • anxious

Posted 8 years ago

  • 1
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hello Moeen,

I'm not sure I understand what you're looking for and I hope you can provide more information. Could you give an example of how you would like the text to change and when? If you have a link to another website that you've seen that has this feature, could you post it here so that we can take a look?
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
Yes Off course i am adding the picture of the website and the area is marked in RED COLOR CIRCLE so you can easily found the selected area



In this the text is automatically changes after some time so could you able to tell me the html code for this

THANKS !!!
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
http://www.whitesmoke.com/free-online...

url of that website u can find it here
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Moeen,
Thank you for your patience. Marije is currently offline and I am referring your request to another colleague who will be online in a few hours.
Cheers!
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Moeen,

DynamicDrive have a vertical scroller with an adjustable timer that I think is what you are after.

Pausing Up DownScroller

The demo on that page shows two instances but that's purely to illustrate that you may have as many as you like. Just remove the second instance and it will be fine.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Moeen

I have a widget on my site which changes it's quotes after each page refresh. I'm not sure if that's what you're looking for? This code can be found here: http://www.codelifter.com/main/javasc...

You do not need to use "quotes" but just simply add any body of text.

I hope this information is helpful to you. If you have any further questions, please let me know.
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
:@ Sanja

THANKS ALOT SANJA

but that not the thing i actually want but the thing that petercsea recommend me is near about the thing that i want but its difficult for me to add code to my site its not working actually when i put the code to the site
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Moeen,

I have set it up on a demo page. http://collapsingdivs.yolasite.com/ri...

You may like to see it as it is. I haven't changed any of the original styling which would allow a difference in size. font colour and background colour etc.

The messages are placed into the first piece of code as in dynamicdrive. I'm happy to assist you along with this.

I guess first of all is it what you want?

Let me know and we'll develop it as you need it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks petercsea for helping Moeen on this.

Moeen - you are in good hands with petercsea :)
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
Petercsea

THANKS man !!! for the help

Yes that's the same thing i want......but i am not able to put the code correctly in to my website, it is not working properly means the text is not scrolling up as you do in your website....could you tell how to do it correctly....and also tell me how to customize the background and font color too..

I am really thankful to you :-)

Sanja

Yeah i feel too. :-)
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Moeen,

If you can copy and paste this code into the top of your page and leave out the protecting code at the first line and last line.

<!-- (Don't copy this line. This is only to prevent Get Satisfaction from attempting to render the code)

<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 210px;
height: 100px;
border: 3px solid silver;
padding: 5px;
background: #feffff; /* old browsers */background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#d2ebf9)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* ie */

}

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='<a href="http://www.whitesmoke.com/online-writ... am learning ESL and WhiteSmoke really helps. My writing improves daily, and the corrections it makes help me learn English writing</a><br />Kim Sung Mo, Korea'
pausecontent[1]='<a href="http://www.whitesmoke.com/online-writ... program is a breeze to use! I like the writing style suggestions and the grammar checker</a><br />Afonso Da Costa, Portugal.'
pausecontent[2]='<a href="http://www.whitesmoke.com/online-writ... communicate with people daily on the Internet, and it is a lot easier when my grammar and spelling is correct. Thanks for a great program</a><br />Luigi Del Rotti, Italy.'
pausecontent[3]='<a href="http://www.whitesmoke.com/online-writ... have a blog in English, and WhiteSmoke catches all my grammar and spelling errors before I publish. My writing is more confident, and my readers love the content</a><br />Hans Spielberg, Germany'
pausecontent[4]='<a href="http://www.whitesmoke.com/online-writ... English is quite good, but I still manage to catch a lot of errors with WhiteSmoke, so it is a big help</a><br />Bjorn Nillson, Sweden'
pausecontent[5]='<a href="http://www.whitesmoke.com/online-writ... program is a breeze to use! I like the writing style suggestions and the grammar checker</a><br />Afonso Da Costa, Portugal'
pausecontent[6]='<a href="http://www.whitesmoke.com/online-writ... study international business and I need to improve my English. WhiteSmoke proofreads my writing and gives me tips for improving</a><br />Ahmad Hussein, Egypt'
pausecontent[7]='<a href="http://www.whitesmoke.com/online-writ... work as a freelance programmer, and WhiteSmoke helps me communicate better with clients around the world. Thanks!</a><br />Pavel Bogroshov, Russia'

var pausecontent2=new Array()
pausecontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>'
pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'

</script>

<script type="text/javascript">

/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}

</script>

(Don't copy this final line either)-->

Next copy the following code and paste it at the level of your page you wish to see it displayed. You can place this within a two column widget on the Right Hand Side if you wish to move it across your page somewhere.

<!-- (Don't copy this line. This is only to prevent Get Satisfaction from attempting to render the code)

<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")

</script>

(Don't copy this final line either)-->

The changes can be made within the first bit of code. I think you can see where the description mentions such things as size etc. You will probably be able to add some font parameters also. Once again i'm happy to help you with any aspects that you would like help with.

(I've added a gradient background for the insert to give it a little bit of life. This can also be removed and just use a standard color.)

The content or the messages are added/changed where it's mentioned also.
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
THANKS Petercsea :-))))))

Now its working correctly but i will contact you if i need any further assistance regarding this i hope you don't mind it :S

Once again Thanks for your help dear really really appreciated :-)
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
Hi Petercsea

i want to ask some question regarding the code, could you please tell me about some of the thing like

How to change...

1- Font color
2- Font -family
3- Font size

in it because i am not able to customize it according to my wish, i can manage to change the background but not all the 3 things that i mention above

so please help me again please

Thanks :-)
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Moeen,

font-family: use a font name shown in Yola font selections; Verdana, Times New Roman, etc.
font-size: 12 px; (as an example)
color:#xxxxxx;

Add it to the section where indicated below:

<!--
#pscroller1{
width: 210px;
height: 100px;
border: 3px solid silver;
padding: 5px;
background: #d2ebf9; /* old browsers */background: -moz-linear-gradient(top, #d2ebf9 0%, #feffff 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ebf9), color-stop(100%,#feffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ebf9', endColorstr='#feffff',GradientType=0 ); /* ie */

(insert those elements here)

}
-->
You will have to take out the from each occurence for this to work. I don't know enough about CSS to know why this happens.

Good luck with this Moeen and please get back to me if there's a problem or if you want to go even further.

Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
I'm using http://www.w3schools.com/css/default.asp as my reference for syntax.
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
Hi Petercsea

Thanks for your time......Now thing is that i added the font family, size and color but color is not changed for all the text I'm adding a image so you can more clearly understand my problem i add black color for all but is not working for all the text here under the image



u can see the image half of the text appearing in blue and the other in black so could you help me in it i tried my level best but I'm successful in doing it

Thanks :-)
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Moeen,

I can think of a few possible reasons but will keep it to the mkost likely that I would find would cause it :)

Did you remove the (a href) under what is now the blue text?
I think that is one of those hidden (h) tags whereas what we are doing is defaulting to the body text. There is a CSS style sheet aready set up on the template that you're using and this can direct a lot of the style into these kinds of applications. It's easily worked over by just stating what the CSS requirements are for the application. It's sort of like the last set of CSS over-rides the previous.

have a look under the blue text to see if you can see:
or any part of it including single or double quotation marks. This is where some of this mark up is quite merciless. The syntax has to be 100% correct. Sometimes I have to read it in reverse order just so I don't run the risk of jumping over these issues.

The other thing is that it's much easier to debug these issues if you can publish your page and give me the URL. It's easy to unpublish after the corrections and no-one is going to see it in that short time.

Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
You're welcome to send it to me via a contact form to keep it private
Contact Form
Photo of Moeen

Moeen

  • 31 Posts
  • 2 Reply Likes
Hi petercsea

Thanks petercsea for your help i have solved my problem now every thing properly thanks to you

It's such a nice talking with you.

Thanks for the support

Take care

Regards
Moeen