p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   ASP.NET 2.0 Professional (http://p2p.wrox.com/forumdisplay.php?f=215)
-   -   Problem Converting Client-side to Server-side Code (http://p2p.wrox.com/showthread.php?t=63964)

kwilliams November 21st, 2007 11:53 AM

Problem Converting Client-side to Server-side Code
 
I'm trying to convert code that was originally client-side into server-side code. It pulls data from several XML feeds, and then uses variables from that data in a news scroller. When client-side with static variables, the data scrolls every 5 seconds. But the server-side example doesn't scroll at all.

Almost everything works fine, except for the setTimeout. When I load the code listed below, I receive this error:
Microsoft JScript runtime error '800a1391'
'window' is undefined
/scroller.asp, line 173

I realize that 'window' is a browser object that cannot be used in server-side code, but I'm not sure how to adjust my code to make it work. If anyone could let me know what I'm doing wrong, that would be great. Thanks.

Code:

<%
var pausecontent=new Array()
        var strMessage1 = "This is message 1";
        var strMessage2 = "This is message 2";
        var strMessage3 = "This is message 3";
        pausecontent[0]='<strong>Title 1: ' + strMessage1 + '</strong>'
        pausecontent[1]='<strong>Title 2: ' + strMessage2 + '</strong>'
        pausecontent[2]='<strong>Title 3: ' + strMessage3 + '</strong>'

        /***********************************************
        * 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
        Response.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

        //*****************THIS IS WHERE I'M HAVING THE PROBLEM****************************

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

KWilliams

planoie November 21st, 2007 05:25 PM

You aren't going to be able to eliminate all the client side code as some of it is specific to only the client. From what I see, there isn't much code that you can move to server side because it all appears to deal with manipulating the display of the data. It looks to me like the only thing you could change is code that generates the client side code that populates the array of messages.

-Peter


All times are GMT -4. The time now is 07:27 AM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.