This question already has answers here:
How to check if element is visible after scrolling?
(46 answers)
Closed 5 years ago.
So currently on button click I'm popping up a new window that goes to some website. But not only do I need to pop open to this new site but I also need to scroll down a little on the popped up screen. Here is what I'm currently doing:
$(document).ready(function () {
$('.popup').click(function(event) {
event.preventDefault();
window.open("https://www.spmet.aspx", "popupWindow", "width=1400,height=600,scrollbars=yes");
setTimeout(function() { scrollTo(0,150) }, 1000);
});
});
This currently opens the window successfully but how do I amend a change that will scroll to a particular spot in the site.
your code is runnning in the parent window, not in the pop up one. If you can´t put int in the pop up target, try scrolling by reference adding "#btnLogin_div" top the url like this:
$(document).ready(function () {
$('.popup').click(function(event) {
event.preventDefault();
window.open
("https://www.spmet.aspx",
"popupWindow", "width=1400,height=600,scrollbars=yes");
setTimeout(function() { scrollTo(0,150) }, 1000);
});
});
Because You open a new window, js is loaded second time and click event wasn't executed. You can use something like:
$(document).ready(function () {
if (window.location.href.indexOf("my_url") > -1) {
$('html,body').animate({ scrollTop: "0px" }); // or 150px
}
});
or use some global variable for setTimeout and break it after execution.
Since you are opening a new window; the js on your old page is not used; you have to add the scroll js on the new page you are loading. This is good cause otherwise I could have you go to a page and phantom click on stuff, which would not be good.
You can get around it by opening the page in an iframe; where you can scroll your iframe window.
Related
I'm running into an issue with my site where if I scroll halfway down the page, close the tab, then reopen it using Shift + Ctrl + T, the opened page loads at the same position it was at when I closed it. I'm already using Javascript to force the page to go to the top whenever it's refreshed, with this code:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
And that's working fine for refreshing the page, but not when I close the tab then immediately reopen it. Not sure why. Is there a difference between refreshing a page and closing+immediately reopening it? Should I be using a different method for the second case?
You could just use onload to catch the page when it loads back up again. You wouldn't need to use onbeforeunload at all either.
window.onload = function () {
window.scrollTo(0, 0);
}
I'm wanting to link to a certain tab (Portfolio Tab) on a page from the main menu of a website, so when clicked it goes to that page with that portfolio tab open.
So far I've come up with this (using jQuery Tabslet) which works when not on the same page, but doesn't work if the user happens to be on the same page as the tabs, and so does nothing.
The link I use in the main menu is /about/#tab-3 which is doing the job of going to the about page with the portfolio tab open.
I thought I may need to trigger a page refresh when on the same page? And perhaps remove the #tab-3 from the url too.
Not being a jQuery expert, I unfortunately just don't know.
Here is the code so far
Thanks in advance.
jQuery(document).ready(function($){
$('.tabs').tabslet({
active :1,
animation : true,
container: '.tabs-container'
});
var hash = $.trim( window.location.hash );
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
});
Advise: Always mention a reference to the plugin you use. I assume here you talk about this one.
This plugin acts on tab click only.
So when using a window hash in a link from another page like you do, you have to "simulate" a click on the tab.
So you will use an attribute selector to find the anchor having a href corresponding to the hash...
And click it.
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
$("a[href='"+location.hash+"']").click(); // Add this!
}
};
Let me explain my scenario. I have a play/stop pair of CSS buttons at my footer. I don't want to use frames. When I press play on the current page (page 1), a popup opens and jplayer starts playing music. When I press close, the window closes thanks to my persisting the window value from the initial opening.
Now, here's my problem: Lets say the user moves to another page (page 2) on the main site - the popup remains playing (that's not a problem, that's what I intended). But I would like for the user to be able to press stop on page 2 and kill the window that was created in page 1.
I tried using HTML5 local storage, but it didn't work - odd thing: the object stored in HTML5 storage, is the of type window - so it is stored. It still seems unable to close it.
Has anyone ever done this before or know of a way to get around it? Here is my code (which does not work) as is:
$(document).ready(function () {
var win;
$('#playButton').click(function () {
win = window.open('Player.html',
"popupWindow",
"width=265,height=360,scrollbars=yes");
$(this).attr('class', 'active');
$('#stopButton').attr('class', 'none');
localStorage.setItem("player", win);
});
$('#stopButton').click(function () {
$(this).attr('class', 'active');
$('#playButton').attr('class', 'none');
win = localStorage.getItem("player");
win.close();
});
});
Following my comment:
Change your page's code to:
$(document).ready(function () {
$('#playButton').click(function () {
window.open('Player.html', "popupWindow", "width=265,height=360,scrollbars=yes");
$(this).attr('class', 'active');
$('#stopButton').attr('class', 'none');
});
$('#stopButton').click(function () {
$(this).attr('class', 'active');
$('#playButton').attr('class', 'none');
localStorage.setItem("player", false);
});
});
And add this to your popup's code:
setInterval(function(){
if(localStorage.getItem("player") == false)
window.close();
}, 1000);
SetInterval will run the internal anonymous function every 1000ms, and it checks the player value and will close itself if it is set to false.
This question already has answers here:
Is there a way to detect if a browser window is not currently active?
(24 answers)
Closed 8 years ago.
I wish to determine using jquery or javascript that is the user has switched tab standing on the same browser?
I.e. if the user is currently standing on browser say mozilla-firefox tab no.1 , now he has opened another tab say tab no.2 , at that point a popup should appear , with the message "tab changed"
I believe you can use the window.onblur event which will fire when the current page loses focus.
window.onblur = function() {
// Your action here
};
In jQuery, you write it this way
$(window).blur(function() {
// Your action here
});
Without jQuery
window.onblur = function () {
// do some stuff after tab was changed e.g.
alert('You switched the tab');
}
with jQuery:
$('window').blur(function () {
// do some stuff after tab was changed e.g.
alert('You switched the tab');
});
Of course displaying alert is not best thing to do, because it focus current tab again :)
this might work, but will popup when the user leaves th esite in anyway not just tab changes
window.onunload = popup;
function popup() {
alert('tab changed');
}
I am trying to open new window from hyperlink using java script and then auto close it in five seconds. It either closes right away or doesn't close at all. Here are some samples of code I was using:
"function closeOnLoad(myLink){var newWindow=window.open(myLink);newWindow.onload=SetTimeout(newWindow.close(),5000);}" + LinkText + ""
You're better off closing the window from the parent instead of defining an onload handler within the child. Due to security restrictions, you simply may not have access to modify child window events.
function closeOnLoad(myLink)
{
var newWindow = window.open(myLink);
setTimeout(
function()
{
newWindow.close();
},
5000
);
};
}
you need to use what is called a 'closure' to wrap the timeout in. It's like the function to timeout and then close is wrapped within another function.
I won't go into detail here, but lookup javascript and closures and play around to see how they work.
Here's a link to help get you started: http://www.jibbering.com/faq/faq_notes/closures.html
The window closing code should be in the window's code:
$(document).ready(function() {
setTimeout(function() {
window.close();
},5000);
})
BUT, you will get a popup asking for the user to confirm if you try & close the popup that way.
To unload is the unload() function. Here you have an example.