jaukia / zoomooz Goto Github PK

View Code? Open in Web Editor NEW

1.8K 1.8K 276.0 1.08 MB

An easy-to-use jQuery plugin for making zooming web pages.

Home Page: http://janne.aukia.com/zoomooz/

CSS 3.10% JavaScript 74.64% Shell 0.51% Python 7.05% HTML 14.69%

zoomooz's People

Contributors

Stargazers

Watchers

Forkers

dellacroce ironymark bitsushi ryse mashappslabs ameenullah josepssv louisremi coderm rainysun arv100kri ad1984 paizai carmandrew krsreenatha xiaoche sbkame jnorthcott22 jag latouffe rcorreia bgrins openube ideesimple icai larascasse seva tazzkiller dineshkummarc unstru vsachdeva jammie dharmap nvdnkpr nikoroberts mattimatti jarc100 esamattis susov smillea philod lijanele zerodev kevan imhuzi mchorfa waterqiang omarfikir matheusweb sangam12345 houyongchao rodrigosanchez saksoy evilgg lujaw laurencehr lufes fektor myusernamejeep fcoloni iplaydu nurulshuvo cloudmetal liluxdev nijts123 jonathan-wheeler yomigits jevgeniilihovidov griffinartworks naeluh gungfoo feng2012 automotola headphonesjones politicus cmono jiripilar woerwin wilson1315 pcastanheira dj23 alecolucci mvberg leoken fecori didxga pk7 nadeemshaik prashantagarwal cleitonalmeida tjoen helloyou2012 trindade studioludens gerhobbelt agiza rrkhan syntk movibe paulinhopoa

zoomooz's Issues

Overflow?

I can solve this?
http://jsfiddle.net/josepssv/bYT3K/3/embedded/result/

zooming inside container on button press

Hi,

thanks for this great plugin, everythings works perfectly so far - except for one thing:

I would like to set up a zoom Viewport (basically like the one in your demo site) and have buttons outside this viewport to control the zooming. For example there would be a button "button1" - on button press I'd like to zoom on "target1" in the Viewport. Is this possible? If so how can I achieve it?

I tried this code:

$(document).ready(function() {
$('#button1').click(function(evt) {
evt.stopPropagation();
$('#target1').zoomTo();
});
});

but zoomoz keeps zooming in the whole page not just the viewport - I saw this problem posted under "closed issues", but there was no comment on how to solve this.

I'd be grateful for suggestions,

Thanks and all the best,
Christoph

Produces script error on IE 6/7/8

The demo produces script errors on IE. Don't know if this is even possible to implement on IE but it would be nice if it where.

Long-page zoomooz, not body root

Hi,

On this page – http://jsfiddle.net/Didjo/nWUvL/ –, when clicking a box on the bottom of the page, there's several issues :

On Firefox, when clicking a box on the bottom of the page, it scrolls to the top and then animate to the clicked box (because of the $('html').addClass('noScroll');). On Webkit (Safari, Chrome), the $('html').addClass('noScroll'); behaviour is good, but it scrolls too much.

I want to keep the Zoomooz root attribute to #wrap for the fixed footer (it works well when both "#wrap" are replaced by "body", but footer does not), and don't want the page to be scrolled when zoomed.

Another thing : when clicking a box, its bottom is hidden by the footer. An idea how I can add kind of margin?

Thanks!

(http://stackoverflow.com/questions/9886201/zoomooz-jquery-plug-in-issue-on-long-page)

zoomContainer issue

When I set up a zoomContainer I can click the elements fine and they zoom within the container, however if I use jquery like this:

$("#button").click(function(evt) {
$("#example").zoomTo({targetsize:0.75, duration:600});
});

The entire element zooms in even though it is in the zoom container.

Zoomoz misscalculates zoom positions/offsets in special cases

The problem is that the offsetParent of the body element within an foreignObject is null.

jQuery is able to calculate the positions. I have not tracked down the problem further.

Example Document:

<html><head>
    <title></title>
    <script type="text/javascript" src="jquery-1.8.1.js"></script>
    <script type="text/javascript" src="jquery.zoomooz.js"></script>
</head>
<body>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="chart" width="500" height="500">
        <foreignObject width="100" height="100" transform="translate(20,50)"><body xmlns="http://www.w3.org/1999/xhtml"><div class="zoomTarget">test</div></body></foreignObject>
    </svg>
</div>

</body></html>

Zoom to element + optional padding/offset

First off, congrats on an excellent plugin. That CSS matrix shit isn't for the faint of heart ;)

I've been using targetsize to control the amount of zooming. After a zoom, the element is always nicely centered on the page. I would like to be able to specify padding/offset above, below, to the right , or to the left of the element so the element isn't always dead center post-zoom. For example after I zoom in perhaps I want the element to appear closer to the top of the page so as to make room for something else below it. An optional padding/offset is probably the most flexible approach. The scale shouldn't need to change, just need to add/subtract the optional offsets for translate X and Y.

Does this make sense? This request is similar to a previous one about "zooming to a region"; I hope my request is more doable.

I wouldn't mind taking a stab at this myself .. where would I begin to look at this? computeViewportTransformation?

Thanks!

need zoom out function

when clicked on current zoomed item it should zoom out

IE9 is not supported

Hello,
I realise that zoomooz.js is not supported for IE9 even when I go to your website.
Is there a way to fix this ?

Zoom to original size

Hi!

Thank you for the great library! It is very easy to use.

Is there any way to make elements on canvas to be zoomed out initially with some scale factor. An then, when clicked, to zoom in so element gets it's original size with exact height and width, font size, etc.

I believe it could be very useful feature.

Thanks!

Zoom to region (not object)

Hi,

Is there a way to zoom to a region and then pan, i.e. define a certain rectangle by clicking with the mouse in the container will zoom in and then holding the button presses will allow the user to pan at the same zoom level?

Thanks,

Easy creation of a zoom back button

First thanks for the awesome plugin,
i have a div with 300px height that contains the zoomTarget, however i want to prevent my user to zoom back when clicking anywhere inside the zoomTarget div by using return false, after animation done.
and i want to create a button somewhere for them to click then now they can zoom back, how can i do that?

border appears around table when zoomed ?

I have tried many things, but I am using a table without any borders, cellspacing etc, when zoomooz is zoomed in a gray border appears around the table, anything I can do to get rid of it ?

Can't select/hightlight text in DIV after I use zoomozz with mansory plugin, anybody can help?

Anybody have experience this before?

Upper left corner positioning?

Hi Jaukia!

By default zoomed element have a center position into a root div

How it be place into upper left corner?

PS
Case if I have quite some number of the elements, root div is bigger then visible windows size and сenter of root div is outside the visible window...

Sorry for my english (not native)

Video embeds

Is it possible to get this plugin to behave well with video embeds from third parties? With Youtube embeds, the size relative to the browser stays the same no matter if you zoom in our out; with vimeo, playing the video effects the rendering of the rest of the page so that everything looks mussed up.

jQuery 1.9.0 depricated $.browser.webkit

Hi,

Just a "heads up". I just started using jQuery v1.9.0 and found that $.browser is no longer supported on line 288 of the "version 0.10" script here on Github.

var useNativeAnim = ($.browser.webkit && settings.nativeanimation);

I just removed it like this:

var useNativeAnim =settings.nativeanimation;

...and all is well. Great script by the way!

Bad var declaration

There is a bad var declaration in the line 144 of the file jquery.zoomooz.js that makes no difference in ff3.5 and chrome, but in ff4 it crashes the execution. I corrected the var name from $scrollElem to $scroll in my local copy of your plugin and everything is fine.

Thank you for your awesome work man!
Your plugin saved me! ;D

how feasible is < IE 9 compat ?

jquery 1.8 support

seems zoomooz doesnt work with jquery 1.8.0

Demo page not working

HI, just thought you might like to know that the demo page doesn't appear to be working at the moment. Something to do with frames not being allowed.

Issues with zero zoom durations

Hekki Janne,

thank you for your zoomooz plugin.
I am building iPhone apps in html and found your plugin a great help when resizing the content to fit a iPad screen by simply zooming one of the top nodes.

but I have one suggestion:
it is currently not possible to zoom an element instantly, I mean without animation.

When setting the duration to 0, the zoom is animated anyway, and when setting the duration to a tiny value ( ex: 10 or 30 ) then it gives unexpected results.
It seems the element doesn't have time to fully zoom before the end of the timing.

Would be great if you could implement a 'duration zero zoom' in a future update.

All the best
Clément

Janne:

Thanks for your feedback! Will consider this.

By using the "nativeanimation:true" and having "duration:0", the animation should happen instantly. This should work on iPhones/iPads.

Hello janne,

Unfortunately not, you can clearly see the zoom happening when using
those settings:

                    var settings = {targetsize: 1,scalemode: "both",duration:

0,nativeanimation: true,root: jQuery("#mainWrapper")}
jQuery("#zoomWrapper").zoomTo(settings);

Best regards

Clément

Problem with JQuery 1.7

Zoom does not work with JQuery 1.7. Throws error:

jQuery.offset.initialize is not a function

Bitmaped with Isotope/Mansory on Webkit

Hi,

I just added the Isotope jQuery library (almost same thing than Mansory, which is on http://janne.aukia.com/zoomooz/) on my Zoomooz project. A terrible thing now appear with Webkit (Chrome, Safari) : all the website is bitmaped ! (See on http://janne.aukia.com/zoomooz/ with Chrome or Safari).

A big issue, isn't it?

Thanks !

// Edit : In Isotop, set transformsEnabled to false
// Can delete, sorry.

Zoom in twice

(First: Sorry for my bad english, this text was translated by google translate)

Hello,

Is there a way to zoom in twice with this script? For example: first click 50%, second click 100%?

Is it possible?

Thanks for any suggestions…

Recognize scroll/mousewheel events

Sometimes it is very difficult or impossible to zoom out if the parent containing box is hidden. However, if scroll/mousewheel events were supported the user could navigate without having to click anything; they would just have to scroll in or out at a certain point on the screen.

problem with position:fixed;

Hellow!

Fisrt of all, sorry for my english, i am french.
Secondly, Thanks a lot for your work! It helps me a lot!

Now, on a project, i am using zoomooz to control the resolution.
I simply demand a zoom depending on the resolution of the user!

here is the code and there is no problem with it..
.imgfond is a div on the top of my page and i set the duration so user dont see the zooming transition.

But there is one little problem.
I want to put some elements in position:fixed. (image or background, same problem)

The problem is that when zooming or dezooming, that element is not fixed anymore, and i think it is not resised! I tried to modify the code but i didn't find any solution.

Can you help me a little? :)
Thanks for your attention, and again, for your great work!

Not work with Big Objects

Greetings,

I am having problems with big objects, in Chrome not work at more than 3068px , and Firefox at more that 7262px.
Any help?

Native Animation

Hi,

I've looked that the native animation is disabled by default. In the comments:

      "i believe there are issues with native anim at least on chrome for mac
       so i disabled the default native animation for now. should have a better look
       at this at some point."

Which problems? I've tested on my mac with the latest Google Chrome and I didn't notice any problem.

I really need the native animation because the performance in a UIWebView on iPad with non-native animations is very poor (I'm using large images).

Also, I want to question about the location of this statment:

if(endCallbackTimeout) {
    clearTimeout(endCallbackTimeout);
    endCallbackTimeout = null;
 }

If I use nativeanimation with an animateEndCallback this piece of code will cancel the execute of my callback.

few letters overlap on zooming in chrome

Hi,

I have set the font-size to 2px for individual divs and on zoom few of the letters gets overlap in chrome.

Assist me as soon as u can..

My email id: [email protected]

Or provide me with ur email ID so I can provide the page's link, if its possible.

Thanx JAUKIA !

1 Zoom automatically to an element on page load

Hello,

I´m using the zoomooz with a jquery-ui slider towards an iframe- what works fine. But I don´t get it work, that the page starts with a default zoom-factor of 0.75. Here´s my code:

<script>
        $(document).ready(function() {
                $.zoomooz.setup({root: $("#zoomArea", $('#original').contents())});
                $("#publication", $('#original').contents()).zoomTo({targetsize:0.75, duration:600});
        });

        $(".slider").slider(
        {
            min: 10,
            max: 500,
            value: 100,

            slide: function (event, ui)
            {
                $(".percentage").val(ui.value + "%");
            },

            stop: function (event, ui)
            {
                $.zoomooz.setup({root: $("#zoomArea", $('#original').contents())});
                $("#publication", $('#original').contents()).zoomTo({targetsize: ui.value/100, duration:600});
            }

        })
    </script>

Thanks in advance.

Regards
Dom

Reset to original state

Say once we have used "zoomTo()" API call, how can we reset to original state before that call?

position:fixed

plugin crushed css position (fixed) (modal window, overlay don't works)

Problem with the length of the page

Hey! its me again. (if you have a little bit time for me again)

I am using zoomooz to make the page fit for any screen resolution and its working perfectly on every browser! I basicly zoomout the page when resolution is not as big as i want.

I have put my website in a container as you proposed, so i can have position:fixed elements out of it even in zoomout. It works great again for nearly all browser!

The only problem is in Internet Explorer.
The problem is that the page length is growing. The page have an empty space where you can scroll into. That empty space is bigger when i do the zoomout. The empty space is different too for each pages (page lenght).

On some pages i have for example a blank footer that is 200px height and on other pages if i zoomout more, that blank footer is longer.

How can i fix that?
The webdevelloper toolbar on explorer show me it is only the "Div" Html that gets bigger. Nothing else.
If my container that i use for zooming is not 100% height, i have the same problem in firefox

When i dont zoomout there is no problem.
Any idea? Or the problem is only me and my Css?

Thanks for your attention!

chrome rotation & performance issue

thx a lot for the plugin first of all!

i'm having little troubles with chrome on my test page because it doesn't "hit" the targets properly when using rotations:
http://www.splinewalker.com/
but it works perfectly in firefox... i also see a big performance difference in the transitions between the two browser.
i guess the performance is a general browser issue and can't be solved within js - can you confirm?

thx again, madame

Doesn't seem to work with imagemap area tag

I'm trying to use an image map to zoom into specific parts of an image depending on which image map shape has been clicked. However, it doesn't appear that the plugin calculates the zoom area correctly.

Are image map/ area tags supported?

demo site is busted in nightly chromium

dunno whats going on but clicks dont kick off any animation.

Reveal content automatically when zoomed to an element

My goal is that after zooming in, new content will fade in, and upon zooming out, the original content will fade back in. The idea being that you are clicking on a title button, which zooms in to become the content.

I am having trouble figuring out how to setup a callback event for zooming out. Zooming in has the animationendcallback, but when zooming out, the animationendcallback is not called. How can I bind to an event or something to call a custom function on the element that's losing focus?

P.S. The callback(s) would need to work for 3 situations while zoomed in:

Clicking on the zoomed in element a 2nd time (closeclick: true) to zoom out.
Clicking outside the zoomed element to zoom out.
Clicking on another element when already zoomed in on one, thus moving to a new element.

Broken Examples

Looking at the rootchange example (for example), it uses a setup() method which seems to have been very recently removed. Any of the other examples that use setup() are similarly broken.

For the rootchange example to work as I expect it should, I have to use the codebase from April 06.

Scroll when zoomed in

Why is it not possible to scroll around, when zoomed in?

I was looking for a way to reproduce the "safari double tap smart zoom" for other browsers or platforms (I was thinking of combining it with http://jgestures.codeplex.com/ to get the double tap; or to have some ctrl + key version until then).

Is it possible to enable scrolling?

Regards, and thanks for the great work,

jakov

Zooming inside a container using zoomTo

Hi, I am writing to you with a question abou zooming inside a container. I was not able to use zoomTo with zoomViewport. Do you have any idea? Thank you. Lukas

<div class="zoomViewport">
<div class="zoomContainer">
<div class="zoomTarget">Target 1</div>
<div class="zoomTarget">Target 2</div>
</div>
</div>

$('zoomTarget').zoomTo({targetsize:0.75, duration:600});

Non-functional in FF4 Nightlies

Nothing happens and there are also no errors.

Zoomooz zoomContainer shift away

This might not be an issue, but rather a question how on to use this great tool correctly.

I am trying to use zoomooz + jquery.mouse.wheel and jquery.kinetic.js to implement a zoom in a free drag/scroll feature in a form designer. Here is a demo of the feature: http://jsfiddle.net/mVf8Z/

My problem is:

"reset" button cannot reset the state to the original one. It zoom in the container and shift it a little bit to upper right of the view port

when I zoom inside the container by using mousewheel, the container is able to zoom in, but it always shift away to the upper right conner of the view port

Any idea where my code is wrong?

The stackoverflow link of this question is http://stackoverflow.com/questions/12345780/zoomooz-zoomcontainer-shift-away

thx,
Green

Colorbox zoomooz conflict

Hi,

I am having an issue with zoomooz. It seems to break my colorbox.js when I have the zoomooz plugin load ? Is there anyway to fix this ?

here is the url of where the problem is - http://theconfluencegroup.com/new_site4/

Zoom and floating div adv (Fixed) not scrolling

Hi Jaukia !
1st of all i would to say your script is one of the greatest i saw on the net ! Really ! ;)

Sorry i'm not a devlopers but i understand a bit how it works, i had try all my best before asking...
Here my issue:

On http://rencontretchat.fr/test/jaukia1.html
When you clic on the hearts icons, the zoom doing the works on the body
but my fixed advertissement divs doesn't scrolls...

On http://rencontretchat.fr/test/jaukia2.html
I use

the hearts icon and text content

the zoom doing the works inside the container div and advertissement divs scrolls

Unfortunately with the way my website build i can't use containers, i really need that zoomooz zoom or rotate all the body of my page to make a great effet and let my advertissement scroll and go to top icon works.
On http://rencontretchat.fr
(i leave it into containers for the moment)

I found this http://www.jtricks.com/javascript/navigation/floating.html
to make it scroll but the code looks to be eavy and it doesnt stay that much static as fixed div even whith changing parameters and the script that scroll to the top is not included...

Any clues ?

Here the code of what should scroll

:: Advertisment ::

Best regards,

Sayato

Zoom only works on the background

i am using your library zoomooz.js and i implemented it on my website (bram-de-leeuw.nl) but it isn't working, i followed the examples which came with the library but it only seems to work on the background(body). When i click on an article to zoom to i get an error in the google chrome console saying: "Uncaught TypeError: Object # has no method 'initialize'" in the "jquery.zoomooz.js:294" but i dont think it is a good idea to change the library so it must be an other problem sinds it works fine in the examples.

many thanks in advance!

IE7, IE8, IE9

Hi,

I did adaptation work to make your wonderful plugin be completely support the subj. browsers for custom needs.

Unfortunately I don't have time to patch the source code, hopefully I'll do so some time later.

However I would like to summarize the changes for you, so you can do the equivalent work if desired.

Use cssSandPaper http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Align sylvester between zoomooz and cssSandPaper (the versions don't match)
Alter constructZoomRootCssTransform to collect -sand- prefix values for cssSandPaper
Replace $target.css with a local function call, which conditionally applies cssSandpaper.setTransform
Replace style.innerHTML = styleInnerHTML a local function call, which conditionally applies style.styleSheet.cssText = styleInnerHTML instead.

That's it. Please let me know if you'd like to apply the changes yourself, or maybe have in mind anyone who's going to do this work. Otherwise I'll try to find time to apply the changes myself sooner or later.

Regards,
Seva

Opera has problems with rotated elements

when I click it in opera it zooms to the top left navigation of this site but not to the video

zoom by id/class

i'm just trying to implement a zoom by id(would maybe also work with classes...)
i basically wanna change the the id/class by clicking on a menu item with an appropriate attribute, but i think i'm missing storing this information somehow...!?

var myId = $("a.dockItem").click(function(){$(this).attr("id^");});
        var zoomTargetIndex = 0;

        $("#next").click(function(evt) {
            zoomTargetIndex++;
                if(zoomTargetIndex>=myId.length) {
                    zoomTargetIndex-=myId.length;
                }
            $(myId[zoomTargetIndex]).zoomTo({nativeanimation: true, targetsize:0.9});
        });

        $("#prev").click(function(evt) {
            zoomTargetIndex--;
                if(zoomTargetIndex<0) {
                    zoomTargetIndex+=myId.length;
                }
            $(myId[zoomTargetIndex]).zoomTo({nativeanimation: true, targetsize:0.9});
        });

...

<li><a id="Apictures" class="dockItem"></a></li>
<li><a id="Bpictures" class="dockItem"></a></li>                    
...

<div id="Apictures01" class="zoomTarget"></div>
<div id="Apictures02" class="zoomTarget"></div>
<div id="Bpictures01" class="zoomTarget"></div>
<div id="Bpictures02" class="zoomTarget"></div>

any help would be great,
q!

jaukia / zoomooz Goto Github PK

zoomooz's People

Contributors

Stargazers

Watchers

Forkers

zoomooz's Issues

Recommend Projects

Recommend Topics

Recommend Org