View Full Version : jQuery Image Warp Script

07-08-2012, 09:29 PM
jQuery Image Warp Script


Hello DD Members and ddadmin,

Greetings to All :)

Today just few minutes ago Joined this DynamicDrive portal! Sorry for posting this thread in JavaScript (http://www.dynamicdrive.com/forums/showthread.php?t=69715) segment.

1. Please find the attached "Test.txt" and "jquery.imageWarp.js" files.
2. Please ReName the "Test.txt" file as "Test.html".

So, how do make that target="_blank" from Test.html file open in New Tab in IE Web Browser? Do I need to add something in my "jquery.imageWarp.js" file?

Please help.

07-08-2012, 10:14 PM
Since the link isn't executed until after the warp effect completes, it can only open in an existing frame, iframe, window or tab. If that's other than the current window, it can get tricky.

It can be made to open in a new window or tab, but then it will be blocked pending (in most cases) the result of notification to the user of the attempt to launch a popup. It can work without that locally in IE, but not live on the web. Since user settings vary, some might find it opening anyway, others would not and would receive no notification. The default setting is to withhold it pending the result of notification. If permission is granted, it (the image in this case) has to be clicked again to open the link. But the browser doesn't tell you that. Other browsers are similar, though not identical. Firefox for example won't open it without permission even if the page is local.

07-09-2012, 07:54 AM
It can be made to open in a new window or tab,

Hi John (aka) jscheuer1,

Thanks for your response!

Could you please tell me how to do it?

07-09-2012, 03:46 PM
First of all you're quoting me out of context. If a new window or tab is opened, the browser's popup blocker will block it.

However, I played around with it some more and found that a new window could be opened ahead of time, before the animation, while the browser still thinks it's a normal link. That new window can then be shifted to the background. The animation can play out, then that existing new window can be populated with the new page without arousing the popup blocker.

But, this only really works well in IE. But that's all you asked for.

In Firefox it works, but is jerky. The initial new window sticks around too long before it loses focus. In others like Chrome, Safari, Opera, focus cannot be given to nor taken away from windows, so the animation takes place, but you never see it, it's behind the new window.

Even in IE it must be a new window, as IE will not allow focus to be given to nor taken away from a tab in the same window. And even IE can sometimes be a little slow to have the initial new window lose focus, but in my tests, not too bad.

And in any browser, if the popup blocking settings are high, the initial new window will be blocked. The default popup blocking settings in all browsers will allow the initial new window though.

That all said, put this file named newwin.htm in the same folder as the page:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">


And use this updated version of the script:


I've done only limited testing to see how it works if the target is a frame or iframe, it looks like it would probably still work, and should work in the normal manner if there is no target specified. But I've not tested that thoroughly either.

I have tested it with target="_blank" in IE 9 though and it works fine in that browser, so should work in other IE which are generally less strict about popups and windows.

I also tested it that way in those other browsers, which is why I know it's problematic in them. It still 'works'. It's just that the animation is either completely or partially missed.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Another thing to consider is:

Do you really need a new window? You could populate an iframe or frame on the page or even fetch same domain content via AJAX to a div on the page.

None of these would be blocked (with the exception of pages that don't allow themselves to be in iframes or frames) and the animation could play out first with no problem.