JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

Fixed.js problem... (scrolling page infinity)

Discuss Fixed.js problem... (scrolling page infinity) in the JavaScript Development forum on Dev Shed.
Fixed.js problem... (scrolling page infinity) JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old April 28th, 2008, 03:15 PM
motiejus motiejus is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2008
Posts: 12 motiejus User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 50 sec
Reputation Power: 0
Fixed.js problem... (scrolling page infinity)
Hi,

I decided that I want several div tags, which can not be slided with all content. I found fixed.js file and started to use it.

But now my page is scrolling to infinity! (in IE 6,7)

Can somebody help me to fix this problem?
Reply With Quote
  #2  
Old April 29th, 2008, 06:53 AM
Ebot's Avatar
Ebot Ebot is offline
Meatball Surgeon
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Elbow deep in code
Posts: 1,040 Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)Ebot User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)  Folding Points: 10015 Folding Title: Novice Folder
Time spent in forums: 1 Week 3 Days 3 h 37 m 17 sec
Reputation Power: 462
Can you post some code?
__________________
The liver is evil and must be punished!
Reply With Quote
  #3  
Old April 29th, 2008, 07:11 AM
motiejus motiejus is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2008
Posts: 12 motiejus User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 50 sec
Reputation Power: 0
This is the fixed.js file:

Code:
// 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 @*/


And this is the code that I use in html css:

Code:
#main #right_item object {
	position: fixed;
Reply With Quote
  #4  
Old April 30th, 2008, 02:34 AM
motiejus motiejus is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2008
Posts: 12 motiejus User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 48 m 50 sec
Reputation Power: 0
Any ideas? Please...
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Fixed.js problem... (scrolling page infinity)

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

 Free IT White Papers!
 
Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.
 
Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.
 
Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.
 
Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.
 
Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway.