+ Post New Thread
Results 1 to 5 of 5
Web Development Thread, Javascript Scroller in Coding and Web Development; Hi. Can anyone see anything wrong immediately about the following code? I can't seem to get it to hide behind ...
  1. #1
    ljlbray's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Thank Post
    37
    Thanked 21 Times in 13 Posts
    Rep Power
    14

    Javascript Scroller

    Hi.
    Can anyone see anything wrong immediately about the following code?
    I can't seem to get it to hide behind the global navigation dropdown menus on my sharepoint site :-(

    <html>
    <head>
    <style type="text/css">

    #pscroller1{
    width: auto;
    height: 160px;
    border: 0px solid #9AC6FF;
    padding: 5px;
    background-color: white;
    z-index:0;
    }

    img {
    border: 0px solid #FFFFFF;
    }

    </style>

    <script type="text/javascript">
    var pausecontent=new Array()
    pausecontent[1]='<a href="http://www.schoolsfl.com"><img src="https://portal.schoolhighschool.co.uk/school/News%20Ticker/Fantasy%20Football%20Ticker.png" /></a>'
    pausecontent[2]='<img src="https://portal.schoolhighschool.co.uk/school/News%20Ticker/_w/The%20school%20ticker_png.jpg" /></a>'
    pausecontent[0]='<img src="https://portal.schoolhighschool.co.uk/school/News%20Ticker/Welcome%20Ticker.png" /></a>'
    pausecontent[3]='<img src="https://portal.schoolhighschool.co.uk/school/News%20Ticker/_w/nevermindthesixthformers_png.jpg" /></a>'

    </script>
    <script type="text/javascript">

    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)
    }

    pausescroller.prototype.initialize=function(){
    this.tickerdiv=document.getElementById(this.ticker id)
    this.visiblediv=document.getElementById(this.ticke rid+"1")
    this.hiddendiv=this.hiddendiv=document.getElementB yId(this.tickerid+"2")
    this.visibledivtop=parseInt(pausescroller.getCSSpa dding(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.w idth=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)
    }

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

    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.offsetHeig ht, div1.offsetHeight)+"px"
    }

    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>
    </head>

    <body>
    <script type="text/javascript">
    new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
    </script>
    </body>
    </html>

  2. #2
    ljlbray's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Thank Post
    37
    Thanked 21 Times in 13 Posts
    Rep Power
    14
    oh forgot to mention. The global navigation drop down appears behind the scroller for Admins and Site Designers.

    Weird...

  3. #3

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    270
    Thank Post
    47
    Thanked 27 Times in 24 Posts
    Rep Power
    18
    OK few things without looking too deep into it:
    #pscroller1{
    ...
    z-index:0;
    }
    The z-index:0; is setting this layer to 0. Meaning that it will be placed behind layers which are 1+ and infront of 0 or less.

    Try changing the z-index to a higher number. Give me a shout if this still doesn't work. Also you might want to put semi colons at the end of the coding line. But try the z-index thing first

    Peter

  4. Thanks to Pashers from:

    ljlbray (20th April 2010)

  5. #4
    ljlbray's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Thank Post
    37
    Thanked 21 Times in 13 Posts
    Rep Power
    14
    Thanks Peter, but I don't want the news ticker to appear in front of anything, the global navigation is disappearing behind the news ticker for all users that aren't site owners. But I'll have a fiddle with that bit again.
    Cheers for now!

  6. #5

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    270
    Thank Post
    47
    Thanked 27 Times in 24 Posts
    Rep Power
    18
    Where is the global navigation part? If you send the global navigation I'll give it a quick look.
    Have you thought about making a flash file? This could do something similar.
    Last edited by Pashers; 21st April 2010 at 09:14 AM.

SHARE:
+ Post New Thread

Similar Threads

  1. Javascript help
    By garethedmondson in forum General Chat
    Replies: 1
    Last Post: 10th July 2009, 01:53 AM
  2. Selective Javascript
    By danIT in forum Coding
    Replies: 2
    Last Post: 13th March 2009, 07:54 AM
  3. Javascript - Timed Script
    By danIT in forum Scripts
    Replies: 2
    Last Post: 26th November 2008, 02:04 PM
  4. html/ javascript help
    By strawberry in forum Coding
    Replies: 2
    Last Post: 2nd July 2008, 11:22 AM
  5. scroller thingy
    By mac_shinobi in forum General Chat
    Replies: 8
    Last Post: 12th October 2005, 08:20 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •