Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / xTableHeaderFixed and zoom

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 May 2, 2011 5:40:05 pm

shutter
New Member
Registered: May 2, 2011
Posts: 3

xTableHeaderFixed and zoom

I'm looking at using the xTableHeaderFixed js and it works well, however, we have a functionality where we pay attention to the value of document.body.style.zoom to zoom in or out on the page. 

I click a link that updates document.body.style.zoom.  Examples:

<a id="form:zoomInLink" name="form:zoomInLink" href="" onclick="if(document.body.style.zoom){document.body.style.zoom=document.body.style.zoom*(1.25)}else{document.body.style.zoom=1};" title="Zoom In">
   <img id="form:zoomInImg" src="/images/icons/zoomIn.bmp" class="graphicImage" />
</a>

<a id="form:zoomOutLink" name="form:zoomOutLink" href="" onclick="if(document.body.style.zoom){document.body.style.zoom=document.body.style.zoom*(.8)}else{document.body.style.zoom=1};" title="Zoom Out">
  <img id="form:zoomOutImg" src="/images/icons/zoomOut.bmp" class="graphicImage" />
</a>



it works along with setting the zoom parameter on the body css. 

<body style="zoom: #{bean.zoom}">



That increases/decreases everything except the xthf header by 1.25/.8.  Where would it be most effective for me to account for this zoom factor when it goes to repaint the header?  Currently it has no effect when I try to do it.

Offline

 

#2 May 3, 2011 2:13:58 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

Hi shutter, Welcome to the forums!

Hmmm... since everything is increased/decreased except the xthf header, then that implies that the browser is still reporting the original, pre-zoomed, widths even after zooming has occurred. That makes it difficult.

I'm tied up with something at work right now but will get back to this later.

Thanks! smile

Offline

 

#3 May 3, 2011 10:26:16 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

I'm experimenting with it in Chrome. Actually, it works better than I thought it would. After zooming, the XTHF objects don't know there's been a change. Slightly resize the window then so they will repaint and they then adapt to the new widths. This shows that the browser (at least, Chrome) is reporting modified widths after zooming -- this is a good sign. But these are just spurious comments as I experiment -- nothing definitive.

But when the container is the window the results are not as good. Perhaps body.scrollTop isn't reporting the modified value after zooming -- just guessing at this point.

What is the XTHF container in your application? the window or a scrollable div?

Offline

 

#4 May 4, 2011 12:11:57 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

I've added your zoom technique to the demo page, for experimenting.

Offline

 

#5 May 4, 2011 2:53:54 pm

shutter
New Member
Registered: May 2, 2011
Posts: 3

Re: xTableHeaderFixed and zoom

Thanks Mike for the quick response.  Since we are on an intranet, we are only running in IE. 

The container we are using is the window itself. 

I have the link wrapped in a spring framework ajaxEvent call that re-renders the table.  I also tried including a call to init on the xthf object after the update to the zoom value in the onclick.  That works in other ajax places such as a paginator but not from the link. 

Oddly enough, it does seem to work properly if I use the standard web browser zoom i.e. (ctrl + mousescroll) or (ctrl + or ctrl -).

Offline

 

#6 May 5, 2011 10:57:01 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

Hi shutter, sorry but I haven't had a chance to try much else.

My zoom links do not work for me in IE8, altho ctrl+ and ctrl- do zoom. My zoom links do work for me in Chrome. Do your zoom links work for you in IE8? Or are you using IE9? Any tips on what I'm doing wrong? Here's my code:

// Experimenting with "zoom"...
var zEle, xthf = [];
xAddEventListener(window, 'load',
  function() {
    //zEle = document.documentElement;
    zEle = document.body;
    //zEle = xGetElementById('leftColumn');
    xZoom(zEle, 1.0);
    xGetElementById('zoom-in').onclick = zoomOnClick;
    xGetElementById('zoom-out').onclick = zoomOnClick;
  }, false
);

function zoomOnClick()
{
  var nz, oz;
  oz = xZoom(zEle);
  nz = oz + (this.id == 'zoom-in' ? 0.25 : -0.25);
  if (nz <= 0) nz = 1.0;
  xZoom(zEle, nz);
  for (var i = 0; i < xthf.length; ++i) {
    xthf[i].paint();
  }
  return false;
}

xAddEventListener(window, 'scroll',
  function() {
    xConsole.log('onScroll: xScrollTop=' + xScrollTop(window, true));
  }, false
);

// experimental!
function xZoom(e, z)
{
//  xConsole.log('e.style.MozTransform: ' + e.style.MozTransform + ' (' + typeof e.style.MozTransform + ')');
//  xConsole.log('e.style.zoom: ' + e.style.zoom + ' (' + typeof e.style.zoom + ')');

  if (xDef(e.style.MozTransform)) {
    if (z) e.style.MozTransform = 'scale(' + z + ')';
    else z = parseFloat(e.style.MozTransform.substr(6));
  }
  else if (xDef(e.style.zoom)) {
    if (z) e.style.zoom = z;
    else z = parseFloat(e.style.zoom);
  }
  // WebKit now supports "style.zoom"
  //else if (xStr(e.style.WebkitTransform)) e.style.WebkitTransform = 'scale(' + z + ')';

  xConsole.log('xZoom return: ' + z);

  return z;
}



My thoughts on the next thing to try would be to investigate what happens in xScrollTop when style.zoom is changed.

[edit]
I've changed the code above to reflect what I currently have on the demo page.
[/edit]

Last edited by MikeFoster (May 5, 2011 2:49:28 pm)

Offline

 

#7 May 5, 2011 11:23:37 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

Hmmm. I tried a little demo from here in IE8, and div.style.zoom works in that demo. Maybe there's a problem with me using document.body.style.zoom in my demo?

Offline

 

#8 May 10, 2011 11:07:45 am

shutter
New Member
Registered: May 2, 2011
Posts: 3

Re: xTableHeaderFixed and zoom

I'm actually forced into using IE7 here. 

I think the main difference is that you aren't setting the zoom style on the body tag (or in the css that I can see) which may be making it unavailable to you.

<body style="zoom: #{bean.zoom}">



My default zoom value is 1.  Then the percentages make the change to the zoom level..  increase by 25% on zoom in, decrease by 20% on zoom out.

Last edited by shutter (May 10, 2011 11:11:37 am)

Offline

 

#9 May 11, 2011 11:24:50 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

This page has some very helpful information related to IE7 and zoom.

Offline

 

#10 May 11, 2011 11:53:43 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

I think I should not worry so much about making my zoom links work in IE (altho I'm still curious about that), but I think the real focus should be for xTableHeaderFixed to be able to detect and adapt to zoomed pages. The IE7-only getZoomFactor function, from the link above (help.dottoro.com) is very interesting in this regard, and I'm experimenting with it.

I register event listeners for keydown and mousewheel and watch for ctrl++, ctrl+-, ctrl+0, ctrl+mousewheel events. I then call this repaint function to make the xthf objects redraw themselves:

function repaint()
{
  for (var i = 0; i < xthf.length; ++i) {
    xthf[i].paint();
  }
}



But I don't see a clean way to detect when the user changes zoom via the UI in the lower-right of the window.

Last edited by MikeFoster (May 11, 2011 11:57:02 am)

Offline

 

#11 May 11, 2011 2:23:04 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

It looks like listening for the window resize event might be a better way to detect zoom changes. But that doesn't appear to work in IE7.

Offline

 

#12 May 11, 2011 4:23:26 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: xTableHeaderFixed and zoom

FYI: I'm using xthf-demo-test.php for testing some experiments in this xtableheaderfixed-test.js file.

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load