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 9 of 9
  1. #1
    Regular Coder student's Avatar
    Join Date
    Jan 2007
    Posts
    129
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Arrow How can I create sliding link button that moves down with the page?

    Hello,
    I have seen a web site where that webmaster has placed a button that moves down as we scroll down the page.
    It is here: http://bigprism.com
    There is a button 'Found a Typo' at the bottom right side that moves down the page.

    Please tell me how to create such a button with a link on it.
    Thank you

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    CSS's display: fixed, can do that without javascript for compatible browsers.

    for IE, it will be more complicated...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    Regular Coder student's Avatar
    Join Date
    Jan 2007
    Posts
    129
    Thanks
    13
    Thanked 0 Times in 0 Posts
    hello rnd me,
    Thank you for your reply.

    I have checked http://bigprism.com in internet explorer and that button is working in that browser also.

    Almost 80% of my visitors are using Internet Explorer.
    So, I am looking for a script that can do this in IE as well.

    Also, I would like to place two links on that button with anchor texts like 'Join now' and 'upgrade'
    Thank you

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    student (01-02-2008)

  • #5
    Regular Coder student's Avatar
    Join Date
    Jan 2007
    Posts
    129
    Thanks
    13
    Thanked 0 Times in 0 Posts
    hello harbingerOTV,
    Thanks for your reply.

    I have applied the script here:
    http://cbtopsites.com/affiliates/join22.php
    (It is a blank page with lot of <br> tags just created to test this script )

    However, it is working in opera but not in IE or firefox. ( i have default browser settings )
    I think something is wrong somewhere.

    I have tried the other script too. but not working for me.
    I could see that the script is working very well on the demo pages of those sites.

    Can somebody check that testing page and find out what is wrong?
    Thank you

  • #6
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Try the technique used here. This is based on a hack from Stu Nicholls that allows position fixed to work with earlier versions of IE.

    John Rostron

  • #7
    Regular Coder student's Avatar
    Join Date
    Jan 2007
    Posts
    129
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Hello JohnRostron,
    Thanks for your reply.
    I have IE version 6 and I have visited the link you have given.
    the screen is not scrolling down. I could not even see more than three paragraphs on that page!.
    It is working well in firefox and opera.
    Thank you

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>untitled</title>
    
    <script type="text/javascript">
    
    // fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
    // version 1.8, 08-Aug-2003
    // written by Andrew Clover <and@doxdesk.com>, use freely
    
    /*@cc_on
    @if (@_win32 && @_jscript_version>4)
    
    var fixed_positions= new Array();
    var fixed_backgrounds= new Array();
    var fixed_viewport;
    
    // Initialisation. Called when the <body> tag arrives. Set up viewport so the
    // rest of the script knows we're going, and add a measurer div, used to detect
    // font size changes and measure image sizes for backgrounds later   
    
    function fixed_init() {
      fixed_viewport= (document.compatMode=='CSS1Compat') ?
        document.documentElement : document.body;
      var el= document.createElement('div');
      el.setAttribute('id', 'fixed-measure');
      el.style.position= 'absolute';
      el.style.top= '0'; el.style.left= '0';
      el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
      el.style.fontSize= 'xx-large'; el.style.height= '5em';
      el.style.setExpression('width', 'fixed_measureFont()');
      document.body.insertBefore(el, document.body.firstChild);
    }
    
    // Binding. Called every time an element is added to the document, check it
    // for fixed features, if found add to our lists and set initial props   
    
    function fixed_bind(el) {
      var needLayout= false;
      var tag= el.tagName.toLowerCase();
      var st= el.style;
      var cst= el.currentStyle;
      var anc;
    
      // find fixed-position elements
      if (cst.position=='fixed') {
        needLayout= true;
        fixed_positions[fixed_positions.length]= el;
        // store original positioning as we'll overwrite it
        st.position= 'absolute';
        st.fixedPLeft=   cst.left;
        st.fixedPTop=    cst.top;
        st.fixedPRight=  cst.right;
        st.fixedPBottom= cst.bottom;
        st.fixedPWidth=  fixed_parseLength(cst.width);
        st.fixedPHeight= fixed_parseLength(cst.height);
        // find element that will act as containing box, for convenience later
        st.fixedCB= null;
        for (anc= el; (anc= anc.parentElement).parentElement;) {
          if (anc.currentStyle.position!='static') {
            st.fixedCB= anc;
            break;
        } }
        // detect nested fixed positioning (only ancestor need move)
        st.fixedNest= false;
        for (anc= el; anc= anc.parentElement;) {
          if (anc.style.fixedNest!=null)
            st.fixedNest= true;
            break;
        }
      }
    
      // find fixed-background elements (not body/html which IE already gets right)
      if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') {
        needLayout= true;
        fixed_backgrounds[fixed_backgrounds.length]= el;
        // get background offset, converting from keyword if necessary
        st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
        st.fixedBTop=  fixed_parseLength(cst.backgroundPositionY);
        // if it's a non-zero %age, need to know size of image for layout
        if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
          st.fixedBWidth= 0; st.fixedBHeight= 0;
          fixed_measureBack(el);
        }
      }
      if (needLayout) fixed_layout();
    }
    
    // Layout. On every window or font size change, recalculate positioning   
    
    // Request re-layout at next free moment
    var fixed_delaying= false;
    function fixed_delayout() {
      if (fixed_delaying) return;
      fixed_delaying= true;
      window.setTimeout(fixed_layout, 0);
    }
    
    var fixed_ARBITRARY= 200;
    
    function fixed_layout() {
      fixed_delaying= false;
      if (!fixed_viewport) return;
      var i, el, st, j, pr, tmp, A= 'auto';
      var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom;
      var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight;
    
      // calculate initial position for fixed-position elements [black magic]
      for (i= fixed_positions.length; i-->0;) {
        el= fixed_positions[i]; st= el.style;
        // find positioning of containing block
        cb= st.fixedCB; if (!cb) cb= fixed_viewport;
        cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
        if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; }
        cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
        cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
        // if size is in %, must recalculate relative to viewport
        if (st.fixedPWidth[1]=='%')
          st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
        if (st.fixedPHeight[1]=='%')
          st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
        // find out offset values at max size, to account for margins
        st.left= A; st.right= '0'; st.top= A; st.bottom= '0';
        oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight;
        st.left= '0'; st.right= A; st.top= '0'; st.bottom= A;
        oLeft= el.offsetLeft; oTop= el.offsetTop;
        // use this to convert all edges to pixels
        st.left= A; st.right= st.fixedPRight;
        st.top= A; st.bottom= st.fixedPBottom;
        oRight-= el.offsetLeft+el.offsetWidth;
        oBottom-= el.offsetTop+el.offsetHeight;
        st.left= st.fixedPLeft; st.top= st.fixedPTop;
        oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop;
        // edge positioning fix
        if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
          tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
          tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
          st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px';
        }
        if (st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) {
          tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px';
          tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom;
          st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px';
        }
        // move all non-auto edges relative to the viewport
        st.fixedCLeft= (st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft;
        st.fixedCTop= (st.fixedPTop=='auto') ? oTop : oTop-cbTop;
        st.fixedCRight= (st.fixedPRight=='auto') ? oRight : oRight-cbRight;
        st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom : oBottom-cbBottom;
        // remove left-positioning of right-positioned elements
        if (st.fixedPLeft=='auto' && st.fixedPRight!='auto') st.fixedCLeft= 'auto';
        if (st.fixedPTop=='auto' && st.fixedPBottom!='auto') st.fixedCTop= 'auto';
      }
    
    
      // calculate initial positioning of fixed backgrounds
      for (i= fixed_backgrounds.length; i-->0;) {
        el= fixed_backgrounds[i]; st= el.style;
        tmp= st.fixedBImage;
        if (tmp) {
          if (tmp.readyState!='uninitialized') {
            st.fixedBWidth= tmp.offsetWidth;
            st.fixedBHeight= tmp.offsetHeight;
            st.fixedBImage= window.undefined;
          }
        }
        st.fixedBX= fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth);
        st.fixedBY= fixed_length(el, st.fixedBTop, vpHeight-st.fixedBHeight);
      }
    
      // now call scroll() to set the positions from the values just calculated
      fixed_scroll();
    }
    
    // Scrolling. Offset fixed elements relative to viewport scrollness
    
    var fixed_lastX, fixed_lastY;
    var fixed_PATCHDELAY= 300;
    var fixed_patching= false;
    
    // callback function after a scroll, because incorrect scroll position is
    // often reported first go!
    function fixed_patch() {
      fixed_patching= false;
      var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
      if (scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll();
    }
    
    function fixed_scroll() {
      if (!fixed_viewport) return;
      var i, el, st, viewportX, viewportY;
      var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
      fixed_lastX= scrollX; fixed_lastY= scrollY;
    
      // move non-nested fixed-position elements
      for (i= fixed_positions.length; i-->0;) {
        st= fixed_positions[i].style;
        viewportX= (st.fixedNest) ? 0 : scrollX;
        viewportY= (st.fixedNest) ? 0 : scrollY;
        if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
        if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
        viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX;
        viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY;
        st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px';
        st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px';
      }
    
      // align fixed backgrounds to viewport
      for (i= fixed_backgrounds.length; i-->0;) {
        el= fixed_backgrounds[i]; st= el.style;
        viewportX= scrollX;
        viewportY= scrollY;
        while (el.offsetParent) {
          viewportX-= el.offsetLeft+el.clientLeft;
          viewportY-= el.offsetTop +el.clientTop;
          el= el.offsetParent;
        }
        st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
        st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
      }
    
      // call back again in a tic
      if (!fixed_patching) {
        fixed_patching= true;
        window.setTimeout(fixed_patch, fixed_PATCHDELAY);
      }
    }
    
    // Measurement. Load bg-image into an invisible element on the page, when
    // loaded write the width/height to an element's style for layout use; detect
    // when font size changes
    
    function fixed_measureBack(el) {
      var measure= document.getElementById('fixed-measure');
      var img= document.createElement('img');
      img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage));
      measure.appendChild(img);
      el.style.fixedBImage= img;
      if (img.readyState=='uninitialized')
        img.attachEvent('onreadystatechange', fixed_measureBackImage_ready);
    }
    
    function fixed_measureBackImage_ready() {
      var img= event.srcElement;
      if (img && img.readyState!='uninitialized') {
        img.detachEvent('onreadystatechange', fixed_measureBackImage_ready);
        fixed_layout();
      }
    }
    
    var fixed_fontsize= 0;
    function fixed_measureFont() {
      var fs= document.getElementById('fixed-measure').offsetHeight;
      if (fixed_fontsize!=fs && fixed_fontsize!=0)
        fixed_delayout();
      fixed_fontsize= fs;
      return '5em';
    }
    
    // Utility. General-purpose functions
    
    // parse url() to get value inside
    
    function fixed_parseURL(v) {
      v= v.substring(4, v.length-1);
      if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
          v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
        return v.substring(1, v.length-1);
      else return v;
    }
    
    // parse length or auto or background-position keyword into number and unit
    
    var fixed_numberChars= '+-0123456789.';
    var fixed_ZERO= new Array(0, 'px');
    var fixed_50PC= new Array(50, '%');
    var fixed_100PC= new Array(100, '%');
    var fixed_AUTO= new Array(0, 'auto');
    
    function fixed_parseLength(v) {
      var num, i;
      if (v=='left'  || v=='top')    return fixed_ZERO;
      if (v=='right' || v=='bottom') return fixed_100PC;
      if (v=='center') return fixed_50PC;
      if (v=='auto')   return fixed_AUTO;
      i= 0;
      while (i<v.length && fixed_numberChars.indexOf(v.charAt(i))!=-1)
        i++;
      num= parseFloat(v.substring(0, i));
      if (num==0) return fixed_ZERO;
      else return new Array(num, v.substring(i));
    }
    
    // convert parsed (number, unit) into a number of pixels
    
    function fixed_length(el, l, full) {
      var tmp, x;
      if (l[1]=='px') return l[0];
      if (l[1]=='%')  return Math.round(full*l[0]/100);
      // other units - measure by setting position; this is rather inefficient
      // but then these units are used for background-position so seldom...
      tmp= el.currentStyle.left;
      el.style.left= '0';
      x= el.offsetLeft;
      el.style.left= l[0]+l[1];
      x= el.offsetLeft-x;
      el.style.left= tmp;
      return x;
    }
    
    // convert stupid IE offsetLeft/Top to page-relative values
    
    function fixed_pageLeft(el) {
      var v= 0;
      while (el.offsetParent) {
        v+= el.offsetLeft;
        el= el.offsetParent;
      }
      return v;
    }
    function fixed_pageTop(el) {
      var v= 0;
      while (el.offsetParent) {
        v+= el.offsetTop;
        el= el.offsetParent;
      }
      return v;
    }
    
    // Scanning. Check document every so often until it has finished loading. Do
    // nothing until <body> arrives, then call main init. Pass any new elements
    // found on each scan to be bound   
    
    var fixed_SCANDELAY= 500;
    
    function fixed_scan() {
      if (!document.body) return;
      if (!fixed_viewport) fixed_init();
      var el;
      for (var i= 0; i<document.all.length; i++) {
        el= document.all[i];
        if (!el.fixed_bound) {
          el.fixed_bound= true;
          fixed_bind(el);
      } }
    }
    
    var fixed_scanner;
    function fixed_stop() {
      window.clearInterval(fixed_scanner);
      fixed_scan();
    }
    
    fixed_scan();
    fixed_scanner= window.setInterval(fixed_scan, fixed_SCANDELAY);
    window.attachEvent('onload', fixed_stop);
    window.attachEvent('onresize', fixed_delayout);
    window.attachEvent('onscroll', fixed_scroll);
    
    @end @*/
    
    </script>
    <link href="http://cbtopsites.com/styles.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    
    #watermark {
    position: fixed; 
    left:0px; 
    top:0px; 
    z-index:20; 
    width:124px;
    height: 49px;
    }
    
    </style>
    </head>
    <body>
    <div id="watermark">
    <a href="http://cbtopsites.com/affiliates/#pro" style="text-decoration:none;cursor:hand;"><img 
    
    src="http://cbtopsites.com/affiliates/joinnow.gif" width="124" height="49" border="0" alt="Join 
    
    Now, get Free Clickbank Mall and Earn Money" style="filter: alpha(style=1, opacity=70); 
    
    width:124px; height:49px;"></a>
    </div>
    <div style="height: 1200px;"></div>
    </body>
    </html>
    taken from:

    http://www.doxdesk.com/software/js/fixed.html

    seems to work fine. It's a lot of Javascript but it's actually easier to use this than the css fixed way for IE6.

    My bad on the generator link. Seems it doesn't work with a Doctype declared.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    Regular Coder student's Avatar
    Join Date
    Jan 2007
    Posts
    129
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Hello harbingerOTV,
    Thank you for the code.
    It is working well even in IE.

    Though there is too much code, I am happy to find it working very well.

    I have also implemented the code from dynamic drive.
    I have removed the doctype and the code started working well in IE.
    Thanks a lot.


  •  

    Posting Permissions

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