Help moving a script from the html to a js file as an include

Discussion in 'Javascript' started by Jake j, Jul 8, 2005.

  1. Jake j

    Jake j Guest

    To those of you who sent me working examples of js include routines,
    much thanks. I see from them examples that what I'm trying to get to
    requires a higher level of js knowledge than I've got. Here's what I'm
    really trying to do:

    I've been using a sliding banner javascript routine in several html
    files and it works fine. Rather than duplicate the code in each file,
    however, it would obviously be preferable to including the routine in a
    js file. So, now, I'm asking how to do it with this particular code
    which is different and more complicated than the simpler examples.

    What this routine does is place a text message ("BannerText") on a web
    page and reposition it as the page is scrolled so that the message does
    not disappear from the window. The text is also linked to another page
    (linkpage.htm). Here's the code. Please note that this works fine
    within the html file. The help I need is in getting it to work by
    putting as much of it as possible in a js file and using <script
    type="text/javascript" src="slider.js"></script> and whatever else may
    be necessary for this particular function to be implemented. (My feeble
    attempt was: <a href="#" "positionit();"></a> but it's obviously more
    complicated). Or, I need someone to tell me it can't be done.

    <div id="staticbanner" style="position:absolute;">
    <a href="linkpage.htm" target="_blank">BannerText</a>

    </div>

    <script>
    //define universal reference to "staticbanner"
    var crossobj=document.all? document.all.staticbanner :
    document.getElementById?
    document.getElementById("staticbanner") :
    document.staticbanner

    function positionit(){
    //define universal dsoc left point
    var dsocleft=document.all? document.body.scrollLeft :
    pageXOffset
    //define universal dsoc top point
    var dsoctop=document.all? document.body.scrollTop :
    pageYOffset
    //define universal browser window width
    var window_width=document.all?
    document.body.clientWidth
    : window.innerWidth

    //if the user is using IE 4+ or NS6+
    if (document.all||document.getElementById){
    crossobj.style.left=parseInt(dsocleft)+
    parseInt(window_width)-40
    crossobj.style.top=dsoctop+120
    }
    //else if the user is using NS 4
    else if (document.layers){
    crossobj.left=
    dsocleft+window_width-60
    crossobj.top=dsoctop+130
    }
    }
    setInterval("positionit()",200)
    </script>

    ~ J

    *** Sent via Developersdex http://www.developersdex.com ***
     
    Jake j, Jul 8, 2005
    #1
    1. Advertising

  2. Jake j

    ASM Guest

    Jake j wrote:
    > I'm asking how to do it with this particular code
    > which is different and more complicated than the simpler examples.


    The complication has no importance

    All JS code that is usually set in header (between <head> and </head>)
    can be in an external JS

    In your example (with a little modif) you can do it too

    It's calling
    <script type="text/javascript" src="slider.js"></script>
    can be written in header

    Didn't you try it ?

    > (My feeble
    > attempt was: <a href="#" "positionit();"></a> but it's obviously more
    > complicated). Or, I need someone to tell me it can't be done.


    positionnit() is automaticly launched by this line :

    setInterval("positionit()",200);

    because this function actives an element of the page, it can't run
    before this element is read by your browser
    so
    you have to put of this line above from your external and keep it in
    separate JS at it's actualy right place

    or have to change it with :

    onload = function('setInterval("positionit()",200)');


    > <div id="staticbanner" style="position:absolute;">
    > <a href="linkpage.htm" target="_blank">BannerText</a>
    >
    > </div>
    >
    > <script>
    > //define universal reference to "staticbanner"
    > var crossobj=document.all? document.all.staticbanner :
    > document.getElementById?
    > document.getElementById("staticbanner") :
    > document.staticbanner
    >
    > function positionit(){
    > //define universal dsoc left point
    > var dsocleft=document.all? document.body.scrollLeft :
    > pageXOffset
    > //define universal dsoc top point
    > var dsoctop=document.all? document.body.scrollTop :
    > pageYOffset
    > //define universal browser window width
    > var window_width=document.all?
    > document.body.clientWidth
    > : window.innerWidth
    >
    > //if the user is using IE 4+ or NS6+
    > if (document.all||document.getElementById){
    > crossobj.style.left=parseInt(dsocleft)+
    > parseInt(window_width)-40
    > crossobj.style.top=dsoctop+120
    > }
    > //else if the user is using NS 4
    > else if (document.layers){
    > crossobj.left=
    > dsocleft+window_width-60
    > crossobj.top=dsoctop+130
    > }
    > }
    > setInterval("positionit()",200)
    > </script>
    >
    > ~ J
    >
    > *** Sent via Developersdex http://www.developersdex.com ***



    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 8, 2005
    #2
    1. Advertising

  3. Jake j

    Jake j Guest

    > <script type="text/javascript" src="slider.js"></script>
    >can be written in header


    >Didn't you try it ?


    Yes, Stephane, of course. I'm also trying your suggestions. Here's
    what I've got in my html file, as I understand your directions:

    <html>
    <head>
    <setInterval("positionit()",200)');>
    <script type="text/javascript" src="slider.js"></script>
    </head>
    </html>

    If I've got it wrong, please correct me. Best of all would be if you
    could try it to make sure it works, and send me the actual code for the
    html file and for the js if you need to make any changes there. Thanks!

    ~ J

    *** Sent via Developersdex http://www.developersdex.com ***
     
    Jake j, Jul 8, 2005
    #3
  4. Jake j

    ASM Guest

    Jake j wrote:
    >><script type="text/javascript" src="slider.js"></script>
    >>can be written in header

    >
    >
    >>Didn't you try it ?

    >
    >
    > Yes, Stephane, of course. I'm also trying your suggestions. Here's
    > what I've got in my html file, as I understand your directions:
    >
    > <html>
    > <head>
    > <setInterval("positionit()",200)');>
    > <script type="text/javascript" src="slider.js"></script>
    > </head>
    > </html>
    >
    > If I've got it wrong, please correct me. Best of all would be if you
    > could try it to make sure it works, and send me the actual code for the
    > html file and for the js if you need to make any changes there. Thanks!


    <html>
    <head>
    <script type="text/javascript" src="slider.js"></script>
    </head>
    <body>
    <div id="staticbanner" style="position:absolute;">
    <a href="linkpage.htm" target="_blank">BannerText</a>
    </div>
    <script type="text/javascript">
    //define universal reference to "staticbanner"
    var crossobj=document.all? document.all.staticbanner :
    document.getElementById?
    document.getElementById("staticbanner") :
    document.staticbanner

    setInterval("positionit()",200)');
    </script>
    <div id="content">
    <p>Blah blah
    <p>Bloh bloh
    </div>
    </html>

    slider.js
    contains the complet JS without the five 1st lines and without the last
    line which are now inserted
    as a JS command *AFTER* the div 'staticbanner'
    because this command needs to have 'staticbanner' existing
    As positionit() needs the variable 'crossobj'
    and as this variable concern 'statichbanner' too
    we can't (under this shape) insert all that in an external JS

    notice :
    setInterval("positionit()",200)');
    means :
    active the function positionit on every 200 milli secondes
    and you'd understood that positionit() does something with
    div 'staticbanner'
    (doesn't it freeze the link somewhere in the window ?)

    By the end, this JS code you gave isn't a good example of code
    to be put 'as it' in an external code.


    === tested (not working with IE) ====
    ====== You could try that : ========

    file 'sm_slider.js' :
    function sm_slide(myDiv) {
    //define universal reference to "staticbanner"
    crossobj = document.all? document.all.myDiv :
    document.getElementById?
    document.getElementById(myDiv) :
    document.myDiv;
    setInterval("positionit()",200);
    }
    function positionit(){
    //define universal dsoc left point
    var dsocleft = document.all? document.body.scrollLeft : pageXOffset
    //define universal dsoc top point
    var dsoctop = document.all? document.body.scrollTop : pageYOffset
    //define universal browser window width
    var window_width = document.all? document.body.clientWidth :
    window.innerWidth;
    //if the user is using IE 4+ or NS6+
    if (document.all||document.getElementById){
    crossobj.style.left=parseInt(dsocleft)+
    parseInt(window_width)/2-40;
    crossobj.style.top=dsoctop+120;
    }
    //else if the user is using NS 4
    else if (document.layers){
    crossobj.left=
    dsocleft+window_width/2-60
    crossobj.top=dsoctop+130
    }
    }
    onload = Function('sm_slide("staticbanner")');

    your file 'page.htm' :
    <html>
    <head>
    <script type="text/javascript" src="sm_slider.js"></script>
    </head>
    <body>
    <div id="content" style="position:relative;height:700px;border:1px
    solid red;">
    <p>Blah blah
    <p>Bloh bloh
    <p>Some space to test banner's effect when scrolling
    </div>
    <p style="color:red">End of file
    <div id="staticbanner" style="position:absolute;">
    <a href="linkpage.htm" target="_blank">BannerText</a>
    </div>
    </html>


    Your div banner must be in end of page

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 9, 2005
    #4
  5. Jake j

    Jake j Guest

    Stephane: Brilliant!

    Got your solution to this and it works like a charm. Merci!
    It shows that you just have to know what you're doing. I suspected that
    part of it needed to be in the html code and even played around with the
    div part, but as my js knowledge is so limited, couldn't solve it on my
    own.

    I owe you a beer, mon ami!

    ~ J

    *** Sent via Developersdex http://www.developersdex.com ***
     
    Jake j, Jul 10, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cloud Burst
    Replies:
    11
    Views:
    1,035
  2. Tom
    Replies:
    8
    Views:
    679
    Adrienne Boswell
    Feb 13, 2007
  3. linkswanted
    Replies:
    0
    Views:
    946
    linkswanted
    Dec 21, 2007
  4. linkswanted
    Replies:
    0
    Views:
    1,578
    linkswanted
    Jan 6, 2008
  5. Andreas Bogenberger
    Replies:
    3
    Views:
    932
    Andreas Bogenberger
    Feb 22, 2008
Loading...

Share This Page