Scrolling text

scrolling text up mouse overstop advanced and updated most used

Mar 17 2010

copy this code in <head> tab
<style type="text/css"> /*Example CSS for the two demo scrollers*/ #pscroller1{ width: 200px; height: 100px; border: 1px solid black; padding: 5px; background-color: lightyellow; } #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://scrollingtext.blogspot.com">JavaScript Kit</a> Comprehensive JavaScript tutorials and free scripts!' pausecontent[1]='<a href="http://scrollingtext.blogspot.com">HTML</a> marquee and tickers.' pausecontent[2]='<a href="http://blogging-tips-tools.blogspot.com" target="_new">bloggin tips</a> free blogging tips.' 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- © scrolling text (http://scrollingtext.blogspot.com/) * This notice MUST stay intact for legal use * Visit http://scrollingtext.blogspot.com/ for this script and many 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>

just copy this code into <body> tag

4 responses so far

scrolling text like a ticker, fades in mouse over stop

Mar 17 2010

just copy this code into <body> tag

One response so far

scrolling text with marque up mouseover stop overlapping.

Mar 17 2010

just copy this code into <body> tag

No responses yet

scrolling text with maquee up stop on mouseover/mouse hover with hyperlinks

Mar 17 2010

just copy this code in <body> Tab of your site.
please EDIT all the links to your desired stuff.

<table border=”1″ bordercolor=”#800517″ cellpadding=”5″ width=”250″ height=”250″><tbody><tr><td bgcolor=”"> <div class=”widget-content”><marquee direction=”up” onmouseover=”this.stop()” scrollamount=”2″ onmouseout=”this.start()” height=”150px”>Blogging tips, tricks, secrets and free themes.Add favicon to your website to show your trade mark.Change background image to enhance user interface.how to add page elements between blog posts and header to place ads or to place any announcement.search engine optimization tips and tricks.how to rank high in the search engine’s eye, what are the do;s and don’ts.how to create alert message or how to give warnings of specific content.this blog will be updated frequently so be connected.<a href=”http://blogging-tips-tools.blogspot.com/search/label/most%20useful%20e-books%20about%20SEO%20and%20blogging”>20 most hot SEO e-books (value $499) totally free</a> – hot<a href=”http://blogging-tips-tools.blogspot.com/search/label/seo%20mindset%20free”>seo mindset free</a> – hot<a href=”http://blogging-tips-tools.blogspot.com/search/label/free%20classic%20themes”>free blogger templates</a><a href=”http://blogging-tips-tools.blogspot.com/search/label/free%20backlinks”>free 250 high quality back links (1 way links)</a> – hot </marquee> </td></tr></tbody></table></center> </div>powered by: <a style=”color: rgb(255, 0, 0);” href=”http://scrollingtext.blogspot.com/”> scrolling text</a><!— powered by http://scrollingtext.blogspot.com–>

No responses yet

scrolling text with unique left bumb scroller

Mar 17 2010

Copy this code in HEAD tab.
 <script language=”JavaScript1.2″> //leftbump scoller- © scrollingtext http://scrollingtext.blogspot.com //For full source code, many more DHTML scripts, and TOS, //visit http://scrollingtext.blogspot.com //Configure delay between messages (4000=4 secs): var delay=2000 //Configure scroller width var scrollwidth=”200px” //Configure scroller height var scrollheight=”75px” var message=new Array() //Configure messages. Extend array as needed: var openingtag=’’ message[0]=’Message 1 here scrolling text http://scrollingtext.blogspot.com’ message[1]=’Message 2 here many more scrolling styles’ message[2]=’Message 3 herepowered by blogging-tips-tools.blogspot.com’ var closingtag=’’ //This variable specifies the initial negative offset of each msg //You may wish to increase it if your scroller is to the right of page horizontally var hoffset=-10 </script>

and this code in body tab

<ilayer width=&{scrollwidth}; height=&{scrollheight}; name=”sslide”> <layer name=”sslide2″ width=&{scrollwidth}; height=&{scrollheight};></layer> </ilayer> <script language=”JavaScript1.2″> var inc=1 var ns4=document.layers var ie5ns6=document.getElementById||document.all if (ie5ns6) document.write(openingtag+’<div id=”flyin” style=”position:relative;width:’+scrollwidth+’;height:’+scrollheight+’;”>’+message[0]+’</div>’+closingtag) function updatemsg(){ crossobj.style.left=”-2000px” crossobj.style.fontStyle=”italic” crossobj.innerHTML=message[inc] crossobj.style.left=crossobj.offsetWidth*(-1)+hoffset+”px” start=setInterval(“animatein()”,50) inc=(inc<message.length-1)? inc+1 : 0 } function animatein(){ if (parseInt(crossobj.style.left)<0) crossobj.style.left=parseInt(crossobj.style.left)+20+”px” else{ crossobj.style.left=0+”px” crossobj.style.fontStyle=”normal” clearInterval(start) } } function updatemsgns4(){ document.sslide.document.sslide2.document.write(openingtag+message[inc]+closingtag) document.sslide.document.sslide2.document.close() inc=(inc<message.length-1)? inc+1 : 0 } function initialize(){ if (ie5ns6){ crossobj=document.getElementById? document.getElementById(“flyin”) : document.all.flyin setInterval(“updatemsg()”,delay+1000) } else if (ns4){ document.sslide.document.sslide2.document.write(openingtag+message[0]+closingtag) document.sslide.document.sslide2.document.close() setInterval(“updatemsgns4()”,delay) } } window.onload=initialize </script>

No responses yet

scrolling text HTML with mouse control and manual operation

Mar 16 2010

Demo:

&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;Use Internet Explorer For Use this Service&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

if you like this then,

simply put this code into your BODY tag.

<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:movedown()">Down</a> <a href="javascript:moveup()">Up</a> <a href="javascript:stopscroll()">Stop</a> <a href="javascript:movetop()">Top</a></center> </div> <SCRIPT language="JavaScript1.2"> //Manual Scroller- © scrollingtext 2009 //For full source code, visit http://scrollingtext.blogspot.com //powered by http://blogging-tips-tools.blogspot.com //this iscopyright material, if you will remove this tag you might be banned or sued. //specify speed of scroll (greater=faster) var speed=2 iens6=document.all||document.getElementById ns4=document.layers if (iens6){ document.write('<div id="container" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">') document.write('<div id="content" style="position:absolute;width:155px;left:0px;top:0px">') } </script> <ilayer name="nscontainer" width=155 height=160 clip="0,0,155,160"> <layer name="nscontent" width=155 height=160 visibility=hidden> <!–ADD your content–> - DHTML is the combination of HTML, JavaScript, and CSS - DOM stands for Document Object Model - DHTML allows content on a page to change on the fly, without reloading the page - CSS allows for the separation between content definition and formatting - CSS stands for Cascading style sheet - <a href="http://scrollingtext.blogspot.com.com">scrolling text</a> provides free, cut and paste DHTML scripts DO not alter this statment <!–END CONTENT–> </layer> </ilayer> <script language="JavaScript1.2"> if (iens6){ document.write('</div></div>') var crossobj=document.getElementById? document.getElementById("content") : document.all.content var contentheight=crossobj.offsetHeight } else if (ns4){ var crossobj=document.nscontainer.document.nscontent var contentheight=crossobj.clip.height } function movedown(){ if (window.moveupvar) clearTimeout(moveupvar) if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100)) crossobj.style.top=parseInt(crossobj.style.top)-speed+"px" else if (ns4&&crossobj.top>=(contentheight*(-1)+100)) crossobj.top-=speed movedownvar=setTimeout("movedown()",20) } function moveup(){ if (window.movedownvar) clearTimeout(movedownvar) if (iens6&&parseInt(crossobj.style.top)<=0) crossobj.style.top=parseInt(crossobj.style.top)+speed+"px" else if (ns4&&crossobj.top<=0) crossobj.top+=speed moveupvar=setTimeout("moveup()",20) } function stopscroll(){ if (window.moveupvar) clearTimeout(moveupvar) if (window.movedownvar) clearTimeout(movedownvar) } function movetop(){ stopscroll() if (iens6) crossobj.style.top=0+"px" else if (ns4) crossobj.top=0 } function getcontent_height(){ if (iens6) contentheight=crossobj.offsetHeight else if (ns4) document.nscontainer.document.nscontent.visibility="show" } window.onload=getcontent_height </script>

No responses yet

scrolling text HTML stop on mouseover + hyperlink inserting

Mar 16 2010

Pausing the text when mouse is over the text: for reader’s convenience, when the reader hover the mouse over the text, text will stop scrolling
Here is the code to do this
<marquee behavior=”alternate” direction=”left” bgcolor=”#CCCCCC” onmouseover=”this.stop()” onmouseout=”this.start()” scrollamount=”2″ scrolldelay=”50″> your text here</marquee>
Example:
your text here

(place the mouse over the text to test it)

Adding hyperlinks:
You can also add the hyperlinks in text.
Here is the sample code:
<marquee behavior=”scroll” align=”middle” direction=”left” bgcolor=”#99FFFF” scrollamount=”4″ onmouseover=”this.stop()” onmouseout=”this.start()”><a href=”http://blogging-tips-tools.blogspot.com/”>Remove Navbar</a> # <a href=”http://netpassion4u.blogspot.com/”>Internet tips</a> # <a href=”http://blogging-tips-tools.blogspot.com/”>Add Read More tag in Blog</a></marquee>
The output will look like this:
Remove Navbar # blogging-tips-tools.blogspot.comAdding simple scrolling text:

One response so far

scrolling text with simple HTML maquee

Mar 16 2010

The output will be like:
Example:
your text here
Adding simple scrolling text:
code to add a scrolling text.

<marquee>your text here</marquee>
If you want some more attraction,then try these,
Add a background color to the text:

<marquee bgcolor=”#99CCFF”>your text here</marquee>Example 2:

your text here

No responses yet

What I say is immensely important than who I am. Let the search be for the meaning and substance in my words rather than the intricacies of my existence.

Go to the theme admin page to edit/remove this text.
Recent Posts
Recent Comments
- nikhil on scrolling text HTML stop on mouseover + hyperlink inserting
- Stela James on scrolling text up mouse overstop advanced and updated most used
- Beth on scrolling text up mouse overstop advanced and updated most used
- Stela James on scrolling text up mouse overstop advanced and updated most used
- Stela James on scrolling text up mouse overstop advanced and updated most used
Archives
- March 2010
Categories
Meta

Recent Posts

Recent Comments

Archives

Categories

Meta