Welcome To My

Welcome To My
Filled Under:
, , ,

How to add Pausing up-down Scroller in blogger's blog,CSS codes

Posted By: Unknown on 11:31 PM
This scroller is made like this that it pauses between each message.The looking of the scroller is designed by CSS code,including the dimensions.

 For add Scroller in blogspot then follow these two steps.

  1. Insert this below code in the <head> portion of the page.
<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://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'

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>
     2.    Then,inside insde the BODY section of your page,simply paste it.

<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 />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

</script>




9 comments:

  1. hằng hằngOctober 5, 2018 at 7:05 AM

    It would be nice if a lot of people discuss this article together, it has a lot of different aspects and I think everyone will have a new way of approaching it.
    Discount master
    Product discount master

    ReplyDelete
  2. hằng hằngOctober 9, 2018 at 8:54 PM

    This post really attracts me from the first minute I know it, share it extensively so that more people know it, I think it is very necessary for all of us, thanks for reading it. this comment of mine.
    https://autoketing.com/project/sale-pop-master, https://apps.shopify.com/sales-pop-master, https://autoketing.com

    ReplyDelete
  3. HẰNGOctober 19, 2018 at 6:52 AM

    It is a good source of information, people should know more about this site, share it with others, I would like to discuss it too, thank you for posting this post. This really helps a lot.
    Shopify free shipping bar app, Shipping Bar for Shopify, autoketing

    ReplyDelete
  4. HuyenOctober 20, 2018 at 6:15 PM

    This is great, this post gives me a lot of information and opens up my knowledge, let's discuss this issue, I'm very excited, thanks so much for posting it.
    autoketing
    currency converter box
    currency converter box app

    ReplyDelete
  5. HẰNGOctober 31, 2018 at 9:58 AM

    This is really a great and useful article for me, I think it is also very necessary for many people, we should visit it regularly.
    facebook chat box, facebook chat support, best autoketing

    ReplyDelete
  6. hằng THVNovember 16, 2018 at 11:42 PM

    I am very interested in the post, it helps me gather a lot of necessary information, I think they will help my life, thanks for posting it, hope that people will visit it often , thank you
    email with love free app, email app download for marketing, best autoketing app

    ReplyDelete
  7. hằng hằngNovember 27, 2018 at 11:47 PM

    It's great to be able to read the author's shared lines, wish you always success, and have more great postings.
    abcya club games to play, friv 4 school 2017 play now, friv 2018 games for school

    ReplyDelete
  8. hằng vũDecember 13, 2018 at 6:55 AM

    I am very interested in this post, everyone should know it more, wish you success.
    Decorating For Christmas games online, Super World Adventure free online games, Gold Diggers Adventure games for kids

    ReplyDelete
  9. boymaichoi16April 9, 2019 at 5:59 AM



    food games
    basketball games 2019
    soccer free games
    he author of this post is admirable, it brings a lot of emotion to everyone reading it, let's share it more widely.

    ReplyDelete

Subscribe to: Post Comments (Atom)