I hope someone can help me with the following problem. I am currently using jQuery.bPopup.js script for a popup I am using. After a few days I finally managed to get it working, however I am experiencing a small problem. Since my jQuery / PHP knowledge is almost to non-existent I cannot seem get it working properly.
The problem is every link, inside the popup, opens inside the popup, while it should open on the mainpage, or better said; the background page. I tried contacting the author of the script, however he doesn't seem to respond, so I am guessing he is on vacation.
I rather not ditch this popup script, because I already spend a lot of time to get it working properly. Also the script itself is working fine, however for some reason it opens links within the popup instead of opening them on the main page.
Anybody got an idea on how to solve this?
The code I am using is show below.
in the section:
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#colorButton').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.customcontent',
loadUrl: 'popup-page.php' //Uses jQuery.load()
});
jQuery('iframe').attr("width", 920);
jQuery('iframe').attr("height", 400);
jQuery('iframe').attr("scrolling","no", "frameborder","0");
});
});
})(jQuery);
And in the section I am using:
<button id="colorButton" style="width:100%;">testbutton</span></button>
<div id="element_to_pop_up"><div class="customcontent"></div><span class="button b-close">X</span></div>
Though the popup works fine and it displays the contents also fine, it opens links within the popup, instead of opening them on the main / background page.
I hope I posted all the necessary information. I am kinda clueless (yeah, that happens a lot in general).
Related
I have a Chrome extension with a content script that must be injected when the url matches the rule. the thing is, if I refresh the page, it's working, but if I navigate to the url (it does match the pattern) then the event is not triggered.
Any idea why?
Edit: Take into account that it's based on a web app and I've tried using the webNavigation event and still doesn't work.
Edit: Ok, so a working solution (in Chrome at least) is to use the onHistoryStateUpdated event handler.
Possibly due to the cache saved in your Browser. If you hard refresh it, then it will run the whole script again.
You can use the following code:
$(window).bind("load", function() {
// code here
});
You can also try this function:
window.onpageshow()
I am trying to create a loading icon which triggers on a code behind function (Button click) the function redirects to another page. I am trying to find a way of having a loading icon appear on the button click and go away when the second page is loaded.
I have tried using Jquery by hiding the loading icon on page ready using the following function
$('#LoadingIcon').hide()
... in the document ready function.
However the icon doesn't appear until the page is already halfway through its loading process.
Any guidance on how I could solve this would be greatly appreciated.
Please use the following link which may help you to do this. There's a way to do it using a bit of JavaScript.
http://blog.ysatech.com/post/2010/02/06/ASPNET-redirect-a-web-page-with-AJAX-loading-indicator-image
I want to refresh my parent window when I close the popup.I could use following
window.opener.location.reload();
But my requirement is slightly different in that I have to write all this code for refreshing the parent page in the parent page itself.
I cannot write a single line of code in the popup.
Thanks,
The only way I know is by checking child window status at frequent intervals but this is explained clearly in this question
That said, I don't know if that could be an alternative, but using a lightbox instead of a new window popup would allow you to keep full control on your events as the whole thing stays in the same window.
Most lightbox API's offer that kind of functionality (loading an external site in the lightbox instead of the usual image), using dynamically generated iFrame to display the external site. This solution also have drawbacks (e.g.: frame-busting code on site loaded in lightbox) but can look nicer than a plain old new window...
I've been using Shadowbox on projects for quite some time now and always liked it, but there are plenty of others out there, maybe even better.
You need to handle the unload event handler in the pop-up and do the reloading in the main window. In the main window, add JavaScript:
function popUpClosed() {
window.location.reload();
}
In the pop-up:
window.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
};
So the answer to your question is generally no, if you need your code to work in all browsers, in particular IE.
This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.
I am trying to make a simple Google Chrome extension - like finding a specific element on the page and display an alert.
My problem is that the specific page loads relatively slow (having also some AJAX behind).
How can I make my check only when all the page is loaded?
I tried "run_at" : "document_idle" in my manifest file, but with no success. It shows me the message, before the whole page loads.
I was thinking to check every second (or something) the whole DOM elements, but is this a feasible solution? I think it will slow down the page...
Thanks.
If that element does not exist on the page when you click "view source", then one way of catching it would be listening to DOMSubtreeModified event, which fires each time DOM is modified:
document.addEventListener("DOMSubtreeModified", function(event){
if(document.getElementById("my_element")) {
//element is added
}
});
Have you tried to put your code in window.onload event in "content_script.js"?
window.onload = function() {
// your code
};