Collection item zooming problem.

[Valdemar72]

Hello!

I'm using “collection item zooming” in a page with some pictures (I
modified the demo page collection-item-zooming.html).
Those are dynamically generated with php, and everything seems to work
fine on my computer (both local and online web page).
It works fine on Windows XP and Windows 7 with Firefox 3.5.5, Opera
10, Safari 4 (and Google Chrome 3).
It works on Linux too (Ubuntu 9.04, Firefox 3).
It also works on a Mac with Safari 4 and Firefox 3.5.5.

Anyways there's a strange bug with Internet Explorer 7 and 8 (ie8
under win7 and ie7 on xp).
When page is loaded, if I don't scroll down the page, everything is
working fine, but if I scroll down the page, the zoom function gets
stuck on X axis, and doesn't scroll on Y axis.
But the strangest thing is that this same bug also shows in Firefox,
from some other computers!
For example, from my brother's computer under xp with Firefox 3.5.5,
it shows the same bug that is showing on my computer with IE8! From
some friends' computers this is showing too but on some other friend’s
computers this is working... (I'm becoming a bit crazy lol!!!).

The demo page collection-item-zooming.html is working well on all
these computers with all browsers, so I believe I did something wrong,
but I can't find where.

May be its due to the dtd document, or something that is on some
server cache? I also thought to some css, but why should it work on my
Firefox 3.5.5 and shouldn't work on same Firefox 3.5.5 on another pc?

Any suggestion is welcome, thank you!
Max.

[cvr]

Do you have a URL where we can look at the code and troubleshoot a
bit?

I'm wondering if maybe your page is not specifying a good DOCTYPE and
you're falling into the quirks mode trap. Clearly something is
affecting the coordinate calculation that determines the vertical
panning, and scrolling does impact that. If we can take a look at the
page, we might be able to repro the problem and get to the bottom of
what's causing it.

[Valdemar72]

Hello
many thanks for answering.
Sorry I can't put the url for privacy reasons required by my customer
(he wants to wait the official release date).
Anyway the problem was the DTD as you told!
Since I'm customizing osCommerce with STS template system, there is a
function that writes an html comment <!-- --> before the <!DOCTYPE -->
line.
So while the other browsers probably fix this, explorer doesn't!
Now is working!

As I'm a newby with Uize, and had not enough time to study the classes
yet, I have another question if you can help me!
I used the example page to make this working, modifying the script
within the thumbnails div, just putting the img url, and changing the
replace line, telling the "big size" picture directory, like this:

window.$page_$$ = {
idPrefix:{root:'thumbnails',tagName:'DIV',className:'thumbnail'},
widgetClass:'Uize.Widget.CollectionItem.Zooming',
previewZoomUrl:function () {return this.get ('previewUrl').replace
('images','images/big')},
zoomPower:2.5
};

Then, to make the script start, I used the example page object class:


Uize.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example'
],
builder:function () {(window.page = new
UizeDotCom.Page.Example).wireUi ()}
});

This is also opening a "share this" menu on the left of the screen,
which I hide with css on his div (display: none).
As this is not a good solution, I'm asking how can I set an option to
don't show that "share this" panel.

Many thanks again!!!

Max.

[Ben Ilegbodu]

I believe your problem is that you are loading up the UizeDotCom.Page.Example JS file and that comes packaged with a lot of special things for the uize.com website, one being the "share this" panel.

What you should do instead is this:

Uize.module ({
       required:[
               'Uize.Widget.Page'
       ],
       builder:function () {(window.page = new Uize.Widget.Page).wireUi ()}
});

That loads in the vanilla/generic page widget instead of the specific page widget for the uize.com website example pages.  Most every page running the Uize framework needs a page widget (or subclass of Uize.Widget.Page) in order to function properly.  In your case, you're just wiring up the Uize.Widget.CollectionItem.Zooming on a series of images so you don't really need any special functionality for your page widget.

If you haven't already, I'd suggest reading the Getting Started explainer: http://uize.com/explainers/getting-started.html

Ben
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
BenMVP.com
http://www.benmvp.com/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit my Zazzle stores!

http://www.zazzle.com/benmvp*
http://www.zazzle.com/benesol*
http://www.zazzle.com/rep_yo_city*
http://www.zazzle.com/name_gear*
http://www.zazzle.com/sports_gear*
http://www.zazzle.com/christ_centered*
http://www.zazzle.com/humor_gear*

Max.

--
UIZE JavaScript Framework...

...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908

UIZE JavaScript Framework Google Group...

...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com

[Valdemar72]

Hello!
Many thanks!!!

It works even faster now!!!
Such a GREAT framework!

Max.

[cvr]

Ben, thanks for answering Max's question. Max, I'm glad you got it all
working. What Ben was describing is covered also in the getting
started guide, here...

http://www.uize.com/explainers/getting-started.html#7_1_2_3

There may be other helpful tips you'll find in there.

Max, thanks for your compliment regarding the framework. We keep
making it better, so please tell all your developer friends about what
you're doing with UIZE. Recently added is the cutting edge ability to
animate text shadows....

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

Make sure you view this page in FF3.5+, Chrome, latest Safari, or
latest Opera. It'll be a while before browsers universally support
this CSS3 property, but UIZE wants to be ahead of the pack in
preparing for upcoming features like this.

[Valdemar72]

Thanks for helping me!

I found a little bug (I think) in Safari (and Chrome of course too).
The zoom is not "fading in" the first time you rollover the thumbnail,
but only from the 2nd time it is working fine.
The first time the big picture is zoomed without fading.
This happens on the example page on Uize site too, so I believe that
is not something I did wrong!
The same happens both with a PC and a Mac, only on Safari and Chrome.

Thanks again!!!
Max.