Jump to content

How do make target="_blank" open in New Page?


amitamberker
 Share

Recommended Posts

Hello EveryOne, 1. Please find the attached "Test.html" and "jquery.imageWarp - Copy.txt" files.2. Please ReName the "jquery.imageWarp - Copy.txt" file as "jquery.imageWarp.js" (Because, this Forum did not allow me to attach .js files)So, how do make that target="_blank" from Test.html file open in New Browser? Do I need to add something in my "jquery.imageWarp.js" file?

Edited by creative1977
Link to comment
Share on other sites

Guest So Called

Please post only the relevant part of your code. Forum members are unlikely to want to bother downloading your files. Isn't it really just one line of code? Why don't you just give an example?

Link to comment
Share on other sites

Please post only the relevant part of your code. Forum members are unlikely to want to bother downloading your files. Isn't it really just one line of code? Why don't you just give an example?
Hi So Called,Forum did not allow me to Paste the JS Code. No No... It's not just one line of code. The code is big.
Link to comment
Share on other sites

Do you mean a new window, as opposed to a new tab?
Hi Ingolme,Anything is fine. But it's not working. Please download the files and rename that "jquery.imageWarp - Copy.txt" file as "jquery.imageWarp.js" and then Click that Image on "Text.html" file. I think I have done something wrong. Maybe something needs to be added in .js file. Request you to please check the files.
Link to comment
Share on other sites

are you trying to open it in a new separate window? if so try adding target="new" in your link
Hi baragan, It's already there in my "Test.html" file.
<div><a target="_blank" href="http://www.w3schools.com/" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div>
Edited by creative1977
Link to comment
Share on other sites

HTML target attr is deprecated. Try using JS instead. E.g:
onClick="window.open('http://w3schools...')"

or CSS3 target property. E.g:

a.newWin{target-new:window;} 

Hi CodeName, So, you mean instead of this:
<a target="_blank" href="http://www.w3schools.com/" class="imagewarp">
Should I make it like this? <a onClick="window.open('http://www.w3schools.com/')" class="imagewarp"> Edited by creative1977
Link to comment
Share on other sites

Yep!
Hi CodeName,Just now Tried it. But it's not working properly :facepalm:
Link to comment
Share on other sites

-OR-
→ <a href="javascript:window.open('http://w3schools.com')" class="imagewrap">here</a> to open w3schools.com in a new windnw.

Hi CodeName,What? Could you please explain it again?
Link to comment
Share on other sites

Hi CodeName,Just now Tried it. But it's not working properly :facepalm:
You only said its not working properly, but you did not say what you got, when you tryd it.
<a href="#" onClick="">Link</a>

Hope you included the href attri, with the value of 'hash'(#).

Link to comment
Share on other sites

Hi CodeName,What? Could you please explain it again?
Well, nothing much to explain. Lets just say: The 'href' attr, is used to define what you are linking to, then the 'javascript' value inside the href attr, means that you are linking to javascript app, while the colon: , is used to introduce a parameter (value), passed to the JS app. Edited by CodeName
Link to comment
Share on other sites

You only said its not working properly, but you did not say what you got, when you tryd it.
<a href="#" onClick="">Link</a>

Hope you included the href attri, with the value of 'hash'(#).

Hi CodeName,Oh! Nope. I did not include href="#" earlier. Let me try it yet once again. Please hold on.
Link to comment
Share on other sites

Hi CodeName, Now the whole thing looks like this:

<div><a target="_blank" href="#" onClick="window.open('http://www.w3schools.com/')" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div>
But now, that Special Effect does not display and upon clicking the Image (link), HTML file gets blank? Please find the attached "Test-02.html" file for your reference. Remember, this attached file needs to detect "jquery.imageWarp.js" file which I had sent it earlier... Edited by creative1977
Link to comment
Share on other sites

What special effect are you talking about? Note that i never downloaded the file you uploaded, i only used the example you posted, to answer your question. Like i said earlier, the 'target' attr is deprecated, and should be removed. Apart from that, that should work!

Link to comment
Share on other sites

What special effect are you talking about? Note that i never downloaded the file you uploaded, i only used the example you posted, to answer your question. Like i said earlier, the 'target' attr is deprecated, and should be removed. Apart from that, that should work!
Hi CodeName, Why you did not download those 2 files? :( Anyways... I am talking (referring) about following Special Effect: jquery.imageWarp.js
/* imageWarp jQuery plugin v1.01* Last updated: June 29th, 2009. This notice must stay intact for usage* Author: Dynamic Drive at http://www.dynamicdrive.com/* Visit http://www.dynamicdrive.com/ for full source code*/jQuery.noConflict()jQuery.imageWarp={dsettings: { warpfactor: 1.5, //default increase factor of enlarged image duration: 1000, //default duration of animation, in millisec imgopacity: [0.5, 1], warpopacity: [0.1, 0.5] },warpshells: [],refreshoffsets:function($target, warpshell){ var $offsets=$target.offset() warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2) //update x position of final warped image relative to page warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)},addEffect:function($, $target, options){ var setting={} //create blank object to store combined settings var setting=jQuery.extend(setting, this.dsettings, options) var effectpos=this.warpshells.length var attrs={w:$target.outerWidth(), h:$target.outerHeight()} var newattrs={w:Math.round(attrs.w*setting.warpfactor), h:Math.round(attrs.h*setting.warpfactor)} var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray'}).appendTo(document.body) $target.add($clone).data('pos', effectpos) //save position of image var $targetlink=$target.parents('a').eq(0) this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null}) //remember info about this warp image instance $target.click(function(e){ var $this=$(this).css({opacity:setting.imgopacity[0]}) var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')] jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images if (imageinfo.$link){ e.preventDefault() } var $clone=imageinfo.$clone $clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:'visible'}) .animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, function(){ //callback function after warping is complete $clone.css({left:0, top:0, visibility:'hidden'}) $this.css({opacity:setting.imgopacity[1]}) if (imageinfo.$link){ window.location=imageinfo.$link.attr('href') } }) //end animate }) //end click}};jQuery.fn.imageWarp=function(options){var $=jQueryreturn this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined jQuery.imageWarp.addEffect($, $imgref, options) } else if (this.complete){ //account for IE not firing image.onload jQuery.imageWarp.addEffect($, $imgref, options) } else{ $(this).bind('load', function(){ jQuery.imageWarp.addEffect($, $imgref, options) }) }})};
Okie, removed target="_blank"
<div><a href="#" onClick="window.open('http://www.w3schools.com/')" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div>
Edited by creative1977
Link to comment
Share on other sites

I did not download it, coz i use mobile phone@present. The example i gave, should work.
Hi CodeName, May I request you to Download those 2 Files to understand my Concern and also to see that Special Effect? Please CodeName? The example you gave me is NOT working as per my requirement. See, I am pleading you. Normally I don't plead to anybody. But I am pleading you. Because, I feel maybe you can HELP ME to resolve my issue. Edited by creative1977
Link to comment
Share on other sites

This is the part that loads the link: if (imageinfo.$link){window.location=imageinfo.$link.attr('href')} You need to replace that with a call to window.open if you want to open it in a new window, or have it auto-detect the target attribute and act accordingly if you want to be able to specify the target attribute.

Link to comment
Share on other sites

This is the part that loads the link: if (imageinfo.$link){window.location=imageinfo.$link.attr('href')} You need to replace that with a call to window.open if you want to open it in a new window, or have it auto-detect the target attribute and act accordingly if you want to be able to specify the target attribute.
Hi justsomeguy, Thanks for your reply. So, instead of this:
if (imageinfo.$link){ window.location=imageinfo.$link.attr('href') }
Should I make it like this?
if (imageinfo.$link){ window.open=imageinfo.$link.attr('href="http://www.w3schools.com/"') }
Edited by creative1977
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...