Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Javascript Help

  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Help

    Could anyone help me with what might be a javascript problem?
    I manage a school website and i wanted to have the top images on the template rotate through others have a fade effect between each image. I was given the below code to enable me to do this.

    <script type="text/javascript">
    <!--
    var zxcSS = {

    init: function (o) {
    var id = o.ID, obj = document.getElementById(id), ary = o.ImageArray, ms = o.FadeDuration, hold = o.hold, ms = typeof (ms) == 'number' ? ms : 1000, hold = typeof (hold) == 'number' ? hold : ms * 4, div = document.createElement('DIV'), img = document.createElement('IMG'), z0 = 0;
    obj.style.zIndex = '1';
    div.style.position = 'absolute';
    div.style.zIndex = '0';
    div.style.overflow = 'hidden';
    div.style.left = obj.offsetLeft + 'px';
    div.style.top = obj.offsetTop + 'px';
    div.style.width = obj.offsetWidth + 'px';
    div.style.height = obj.offsetHeight + 'px';
    obj.parentNode.appendChild(div);
    img.style.position = 'absolute';
    img.style.left = '0px';
    img.style.top = '0px';
    img.style.width = '100%';
    img.style.height = '100%';
    for (; z0 < ary.length; z0++) {
    img = img.cloneNode(false);
    img.src = ary[z0];
    this.opac(img, z0 > 0 ? 0 : 100);
    img.style.left = (z0 > 0 ? -3000 : 0) + 'px';
    img.style.zIndex = z0 > 0 ? '0' : '1';
    div.appendChild(img);
    ary[z0] = img;
    }
    o = zxcSS['zxc' + id] = {
    obj: obj,
    div: div,
    ary: ary,
    ms: ms,
    hold: hold,
    cnt: 0
    }
    this.addevt(window, 'resize', 'resize', o);
    this.auto(o, hold);
    },

    auto: function (o, hold) {
    var oop = this;
    o.to = setTimeout(
    function () {
    o.lst = o.ary[o.cnt];
    o.ary[o.cnt].style.zIndex = '0';
    o.cnt = ++o.cnt % o.ary.length;
    o.ary[o.cnt].style.zIndex = '1';
    o.ary[o.cnt].style.left = '0px';
    oop.fade(o, o.ary[o.cnt], 0, 100, new Date(), o.ms);
    }
    , hold);
    },

    fade: function (o, obj, f, t, srt, mS) {
    var oop = this, ms = new Date().getTime() - srt, now = (t - f) / mS * ms + f;
    if (isFinite(now)) {
    oop.opac(obj, now);
    }
    if (ms < mS) {
    o.to = setTimeout(function () { oop.fade(o, obj, f, t, srt, mS); }, 10);
    }
    else {
    oop.opac(obj, t);
    oop.opac(o.lst, 0);
    o.lst.style.left = '-3000px';
    oop.auto(o, o.hold);
    }
    },

    opac: function (o, p) {
    o.style.filter = 'alpha(opacity=' + p + ')';
    o.style.opacity = o.style.MozOpacity = o.style.WebkitOpacity = o.style.KhtmlOpacity = p / 100 - .001;
    },


    resize: function (e, o) {
    o.div.style.left = o.obj.offsetLeft + 'px';
    o.div.style.top = o.obj.offsetTop + 'px';
    },

    addevt: function (o, t, f, p) {
    var oop = this;
    if (o.addEventListener) o.addEventListener(t, function (e) { return oop[f](e, p); }, false);
    else if (o.attachEvent) o.attachEvent('on' + t, function (e) { return oop[f](e, p); });
    }

    }

    zxcSS.init({
    ID: 'bslide', // the unique ID name of the table. (string)
    ImageArray: [ // the SRCs of the images. (array)
    "Images/Template/Slideshow_Images/photo1.jpg",
    "Images/Template/Slideshow_Images/photo2.jpg",
    "Images/Template/Slideshow_Images/photo3.jpg"
    ],
    FadeDuration: 1000, //(optional) fade duration in milli seconds. (number, default = 1000)
    Hold: 2000 //(optional) 'hold' duration in milli seconds. (number, default = FadeDuration*4)
    });
    //-->
    </script>


    The script works fine, but now that it is on my website, it seems to have shifted itself outside of the layout of my site slightly. (shifted to the right)

    Website: www.darrickwood.bromley.sch.uk

    If you naviagte to other pages on the site you will see that the script keeps moving to the right. Can anyone help with this as i have no idea what i am doing with javascript.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    the script must go intermediately before the </BODY> tag

    and these modifications will help

    Code:
        var zxcSS = {
    
            init: function (o) {
                var oop=this,id = o.ID, obj = document.getElementById(id), ary = o.ImageArray, ms = o.FadeDuration, hold = o.hold, ms = typeof (ms) == 'number' ? ms : 1000, hold = typeof (hold) == 'number' ? hold : ms * 4, div = document.createElement('DIV'), img = document.createElement('IMG'), z0 = 0;
                obj.style.zIndex = '1';
                div.style.position = 'absolute';
                div.style.zIndex = '0';
                div.style.overflow = 'hidden';
                div.style.left = obj.offsetLeft + 'px';
                div.style.top = obj.offsetTop + 'px';
                div.style.width = obj.offsetWidth + 'px';
                div.style.height = obj.offsetHeight + 'px';
                obj.parentNode.appendChild(div);
                img.style.position = 'absolute';
                img.style.left = '0px';
                img.style.top = '0px';
                img.style.width = '100%';
                img.style.height = '100%';
                for (; z0 < ary.length; z0++) {
                    img = img.cloneNode(false);
                    img.src = ary[z0];
                    this.opac(img, z0 > 0 ? 0 : 100);
                    img.style.left = (z0 > 0 ? -3000 : 0) + 'px';
                    img.style.zIndex = z0 > 0 ? '0' : '1';
                    div.appendChild(img);
                    ary[z0] = img;
                }
                o = zxcSS['zxc' + id] = {
                    obj: obj,
                    div: div,
                    ary: ary,
                    ms: ms,
                    hold: hold,
                    cnt: 0
                }
                this.addevt(window, 'resize', 'resize', o);
                o.to = setTimeout( function () { oop.resize(null,o); }, 100);
                this.auto(o, hold);
            },
    
            auto: function (o, hold) {
                var oop = this;
                o.to = setTimeout(
       function () {
                oop.resize(null,o);
           o.lst = o.ary[o.cnt];
           o.ary[o.cnt].style.zIndex = '0';
           o.cnt = ++o.cnt % o.ary.length;
           o.ary[o.cnt].style.zIndex = '1';
           o.ary[o.cnt].style.left = '0px';
           oop.fade(o, o.ary[o.cnt], 0, 100, new Date(), o.ms);
       }
      , hold);
            },
    
            fade: function (o, obj, f, t, srt, mS) {
                var oop = this, ms = new Date().getTime() - srt, now = (t - f) / mS * ms + f;
                if (isFinite(now)) {
                    oop.opac(obj, now);
                }
                if (ms < mS) {
                    o.to = setTimeout(function () { oop.fade(o, obj, f, t, srt, mS); }, 10);
                }
                else {
                    oop.opac(obj, t);
                    oop.opac(o.lst, 0);
                    o.lst.style.left = '-3000px';
                    oop.auto(o, o.hold);
                }
            },
    
            opac: function (o, p) {
                o.style.filter = 'alpha(opacity=' + p + ')';
                o.style.opacity = o.style.MozOpacity = o.style.WebkitOpacity = o.style.KhtmlOpacity = p / 100 - .001;
            },
    
    
            resize: function (e, o) {
                o.div.style.left = o.obj.offsetLeft + 'px';
                o.div.style.top = o.obj.offsetTop + 'px';
            },
    
            addevt: function (o, t, f, p) {
                var oop = this;
                if (o.addEventListener) o.addEventListener(t, function (e) { return oop[f](e, p); }, false);
                else if (o.attachEvent) o.attachEvent('on' + t, function (e) { return oop[f](e, p); });
            }
    
        }
    
        zxcSS.init({
            ID: 'bslide',  // the unique ID name of the table.                 (string)
            ImageArray: [  // the SRCs of the images.                          (array)
      "http://www.darrickwood.bromley.sch.uk/Images/Template/Slideshow_Images/photo1.jpg",
      "http://www.darrickwood.bromley.sch.uk/Images/Template/Slideshow_Images/photo2.jpg",
      "http://www.darrickwood.bromley.sch.uk/Images/Template/Slideshow_Images/photo3.jpg"
     ],
            FadeDuration: 1000, //(optional) fade duration in milli seconds.   (number, default = 1000)
            Hold: 2000          //(optional) 'hold' duration in milli seconds. (number, default = FadeDuration*4)
        });
    your use of tables creates all sorts of positioning problems
    Last edited by vwphillips; 06-10-2013 at 12:28 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Abyssalwolf (06-10-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, i have made the changes but when i navigate from each page it shows the image moving each time i click a link to aanother page.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    i have viewed a number of your pages and they are working for me

    try clearing the cache by refreshing each page
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much this seems to have sorted the problem. Very much appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •