function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300');");
}
Open the Popup Window
That is the code I have now. I want to change it so that it targets a specific class like "popup" and all links with that class generates a popup window with the link in the href.
Kind of like this:
<a class="popup" href="http://google.com">Open the Popup Window</a>
How would I achieve this?
The best optimisation is to remove it, let visitors decide if they want to open the link in a new window or not. At the very least, move the code to a listener:
Open the Popup Window
Then in the popup function, return false if the function executes correctly.
function popUp(URL){
day = new Date();
id = day.getTime();
window.open(URL,'"+id+"','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300');
}
Sorry to be tardy to the party, but here's my 2 cents:
With jquery to do your example
<a class="popup" href="http://google.com">Open the Popup Window</a>
you could use:
var page = [], id=0;
$('.popup').click(function(e){
e.preventDefault();
// add to array of open popups
page.push(window.open(this.href,"page"+id,'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300'));
id++;
return false;
});
Then you'd use something like this to close popups in order they were opened.
$('button').click(function(e){
page.reverse();
page.pop().close();
page.reverse();
});
Related
I have a link to open a pdf in a browser. But, It gets focused on the new tab (the tab with the pdf. How to prevent this behavior?
This is the link:
<strong><a style="text-decoration:none" class='row_link' href='javascript:void(0)' target="_blank" onFocus="false">Open File</a></strong>
This is the jquery:
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = b_url + no_s;
window.open(url);
});
I've tried adding onfocus="false" in the anchor. But, It's no effect
<html>
<strong><a style="text-decoration:none" class='row_link' href='https://github.com/caiyongji' onclick="window.open('#','_blank');window.open(this.href,'_self');">Open File</a></strong>
</html>
This effect is called the "pop under".
Basically you need to use window.blur() on the newly opened window to lose the focus and then refocus on your existing tab.
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = b_url + no_s;
var newWindow = window.open(url);
newWindow.blur();
window.focus();
});
Relevant Stackoverflow post
If I understand correctly, what you need is, you don't want to show the newly opened tab to the user. This cannot be done as #Rex suggested, but what can be done as an alternative is, you can open a popup window and minimise it as soon as you want..
Please have a look on below code :
Parent Page
Click to open popup
Child Page
<body onLoad="setTimeout('window.blur()', 1000);"
onFocus="setTimeout('window.blur()', 1000);">
You can change the time 1000 to what you want.
You can use this on child to keep focus on parent page
window.parent.opener.focus();
Since you want the behaviour of opening background tabs, try the following code which is an example from this answer
For example in your jquery;
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = document.createElement("a");
url.href = b_url + no_s;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
});
Let me know if it helps or if you find a problem
I have an anchor tag which opens a window onclick then in the window opened I have a table which has a column with an anchor tag as well.
Here's what I've been trying do
Code for anchor tag
function handleClickregion() {
var dropDown = document.getElementById('datestart');
var branding = document.getElementById('txtbxbrandid').value;
var dropValue = dropDown.options[dropDown.selectedIndex].value;
event.preventDefault();
window.open('pages/modals.php?param=' + dropValue + '¶m2=' + branding + '&action=' + 2,'mywindow','directories=no,width=1100,height=500,resizable=yes')
}
<a href="#" id="detailswindow" onclick="handleClickregion()">
<span class="glyphicon glyphicon-th-list"></span> Details
</a>
Then in the modals.php I have a table which is show below (this is opened in a separate window, just a note)
Then when I click the Details I need to close the modals.php window and then open another window which passes the member_id to the new window.
How will I do that?
I managed to write a little code but it doesn't open a new modal but closese the previous.
If I do this, it closes the window but does not open a new one (modals2.php)
function closeandopennext() {
window.close('pages/modals.php');
window.open('pages/modals2.php?param=' + dropValue + '¶m2=' + branding + '&action=' + 4,'mywindow','directories=no,width=1100,height=500,resizable=yes');
}
And I interchange the position it does not close the window at all and neither opens a new one
function closeandopennext() {
window.open('pages/modals2.php?param=' + dropValue + '¶m2=' + branding + '&action=' + 4,'mywindow','directories=no,width=1100,height=500,resizable=yes');
window.close('pages/modals.php');
}
This works so far so good. Hope you this help you!
var app = app || {};
app.open = function(){
app.current = window.open("", "MsgWindow", "width=200,height=100");
app.current.document.write("<input type='button' onClick='javascript:opener.call(100)' value='close' />" );
}
window.call = function(params){
app.current.close();
app.current = window.open("", "MsgWindow", "width=200,height=100");
app.current.document.write("<p> I receive param " + params);
}
<button onclick="open()">Open</button>
I have a help link. If a user clicks on it, it opens a new window with fixed width and height. It's working well except that when I right click the link, there is either no options to 'open in a new tab' (in IE) or I can open in a new tab but is directed to an empty page (chrome). Can any one help to make this like a link and also by default open in a new window (not a tab)?
<html>
<head>
<title>
link
</title>
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
</head>
<body>
<a id='PortOrderPageLearnMoreLink' href='javascript:' title='Learn more' onclick='activateHelpView("http://stackoverflow.com/")'>Learn more</a>
</body>
</html>
Use a real link, not the empty javascript: address. The onclick handler can prevent the link from doing anything "normal", but you'll have something for the right-click to work with.
target=_blank is a strong hint that you want the page opened in a new window, but whether that's honored at all -- and whether in a window or a tab -- is out of the page's control.
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
<a id='PortOrderPageLearnMoreLink' href='http://stackoverflow.com/' title='Learn more' onclick='activateHelpView(this.href); return false;' target='_blank'>Learn more</a>
A more modern way of handling all of this -- particularly if there will be more than one help link -- is to add a class to all of them, and run some JavaScript to add the click handler to each in turn. The HTML stays clean (and with real links, still works if JavaScript is disabled or not loaded).
var helplinks = document.querySelectorAll('.helplink');
for (var i = 0; i < helplinks.length; ++i) {
helplinks[i].addEventListener('click', activateHelpView);
}
function activateHelpView(event) {
event.stopPropagation(); // don't let the click run its course
event.preventDefault();
var helpUri = this.href; // "this" will be the link that was clicked
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
helpWindow.focus();
}
}
<a id='PortOrderPageLearnMoreLink'
href='http://stackoverflow.com/' title='Learn more'
class='helplink' target='_blank'>Learn more</a>
StackOverflow snippets aren't allowed to use some of these functions. A working example can be found here.
I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)
Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1
Perhaps you're looking for
window.open("http://example.com");
is it possible to clone an page, javascript and elements in a new popup?
I want to create a popup of a div used like a box of content, all is loaded in javascript
something like
var popup=window.open('', '_blank');
popup.document = this.document;
popup.document.close();
Thanks for your help
I have no idea why you would want to open a copy of the current window and then close it... But here you go:
if(window.name != 'mypopup') {
window.open(document.location.href,'mypopup');
} else {
window.onload = self.close();
}
** Note the window name check.. without it you would just get endless progressoin of windows opening...
<script type="text/javascript">
function popdiv(thediv) {
popwidth = thediv.width;
popheight = thediv.height;
popargs = 'width=' + popwidth + ', height=' + popheight;
popcontents = thediv.innerHTML;
thewindow = window.open('#', 'mypopup', popargs);
thedocument = thewindow.document.open();
thedocument.write = popcontents;
thedocument.close();
}
</script>
<div onclick="popdiv(this);">
Hello,<br />is it possible to clone an page, javascript and elements in a new popup?<br />
<br />I want to create a popup of a div used like a box of content, all is loaded in javascript <br />
Thanks for your help</div>