I am trying to open a popup on page load using jQuery Mobile and Rails.
The popup can be opened with a link, but I can't make it open on load.
HTML code
<div data-role="popup" id="popup-choix" data-history="false" data-overlay-theme="a" data-transition="flow" data-position-to="window">
<ul>...</ul>
</div>
Javascript code
$(document).on("pageshow", function() {
$('#popup-choix').popup('open');
});
I checked with Chrome and the Javascript is correctly linked to the page.
I have a link on the page to open the popup. It works perfectly.
<div class="div-popup">...</div>
I guess the problem is with my Javascript then...
UPDATE
I placed the Javascript in popup.js, which is then called with the application.js manifest.
UPDATE 2
I wrote the javascript in popup.js and call it with the manifest.
Updated
Note: for Ruby on Rails users read this comment.
This is the correct way to open a popup, once page loads/shows.
$(document).on("pageshow", function() {
$('#popup-choix').popup('open');
});
In some browsers, popup doesn't show once the page loads, therefore, adding timeout to open the popup is essential.
Source
$(document).on("pageshow", function() {
setTimeout(function () {
$('#popup-choix').popup('open');
}, 100); // delay above zero
});
If you want to open for a specific page, add '#PageId' instead of document.
Related
I have an ASPX page with hidden iframe.
I'm trying to: on button click load another page into that hidden iFrame and print it's content:
$("#shareButtonPrint").click(function () {
$("#PrintFrame").attr('src', '/ProtocolPrintPage.aspx?g=1');
$("#PrintFrame").ready(function () {
window.frames['PrintFrame'].print();
});
});
but the code above doesn't work.
It works only when I load the iframe on main page load:
$("#PrintFrame").attr('src', '/ProtocolPrintPage.aspx?g=1');
$("#shareButtonPrint").click(function () {
//$("#PrintFrame").attr('src', '/ProtocolPrintPage.aspx?g=1');
window.frames['PrintFrame'].print();
});
How can I load the iframe on button click ?
This is likely due to the iframe not yet being loaded when you're trying to print it
Perhaps try using load instead of ready
Check out my example here
http://jsfiddle.net/andyw_/umYkV/451/
Only tested in latest chrome + IE8-10.
Also note that load is deprecated
http://api.jquery.com/category/deprecated/
The new way of doing it is on('load', fn)
I have a website that uses ajax to bring in content when a user clicks a button. This works fine unless someone uses the "add to homescreen" function of mobile Safari and then opens the website by using the icon on the homescreen.
When someone opens the website from the homescreen icon it all works until the ajax load part. When someone clicks the link the screen flickers white and then the content is loaded in but then none of the functions that should run in the load function actually run. Like the contents gets loaded in but the animations that are supposed to happen do not happen and the page looks broken.
It is a weird problem and I have no way of inspecting the issue as I cannot access my console.
Here is a link to my web app (it's not finished yet) - http://chrisgjones.com/aut/1.3/
My ajax load looks like this
<div class="inner">
Link
</div>
function loadProject(){
var $load = $('#level');
$(document).on('click','.inner a',function(e){
e.preventDefault();
$this = $(this);
var _sourceTarget = '#puzzle',
_url= $this.attr('href');
$load.load(_url+" "+_sourceTarget, function(){
animalSlider();
setTimeout(function(){
$('.animal-content').centerRelative();
}, 2000);
$('#level-selection').animate({'left':'-200%'}, _speed, _ease, function(){
$logo.animate({'top':'10%'}, _speed, _ease);
$loader.animate({'margin-bottom':'10px'}, _speed, _ease, function(){
setTimeout(function(){
$logo.animate({'top':-_logoHeight}, _speed, _ease);
$loader.animate({'margin-bottom':-_loaderHeight}, _speed, _ease, function(){
$splash.delay(_speed).fadeOut(_speed*2);
});
}, 3000);
});
});
}); // end load
}); // end click
} // end function
Ok so I removed this script from my head, it came with the HMLT5 Mobile Boilerplate...it now works fine
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
I was having trouble loading the images after the first question was answered. (android). My connection to everything else is seemless so I doubt it to be a connection issue. Hope that helps.
I have the following html code :
Launch
It launches a popup generated with GREYBOX when I click on LAUNCH. but now I want this to happen automatically every time the website is opened! How do I do that?
<body>
<script>
AJS.AEV(window, 'load', function() {
GB_show("Hello world", "http://google.com");
});
</script>
The AJS library used by greybox offers it's own pageload call
I used Tinybox
http://sandbox.scriptiny.com/tinybox2/
to open a popup web page.
I hope when I click the links on the web page, the popup web page will close and automatically redirect to the link url I click
my javascript codes and html codes
<script type="text/javascript" src="tinybox.js"></script>
<script type="text/javascript">
function openJS(){}
function closeJS(){}
function closeAndGotoURL{
TINY.box.hide();
opener.location.href='http://www.google.com';
}
Open page2
//...below is on webpage2.html, it does not work
Click
but this looks like not to work
Instead of opener.location.href, use parent.location.href. See below:
function closeAndGotoURL {
TINY.box.hide();
parent.location.href='http://www.google.com';
}
You could also use top.location.href:
function closeAndGotoURL {
TINY.box.hide();
top.location.href='http://www.google.com';
}
Another option would be to use pure HTML. Although it wouldn't close the pop up first, it would redirect the entire window to your URL. Notice the target attribute of the anchor tag.
<a href="http://www.google.com" target="_top">
NOTE 1: Why close the pop up first? If you're redirecting the whole page, just redirect - no need to close the pop up.
NOTE 2: This will only work properly if the page that is loaded in the iframe is on the same domain as the parent window (I'm assuming that it is since you're writing the pop up code).
I got this problem during development of my own addon, but I get the same with the reddit example, so I'll use that for simplicity.
Using the exact code from the example found here, this is what happens.
Reddit Example
This example add-on creates a panel containing the mobile version of Reddit. When the user clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser window.
To accomplish this the add-on needs to run a content script in the context of the Reddit page which intercepts mouse clicks on each title link and fetches the link's target URL. The content script then needs to send the URL to the add-on script.
main.js:
var data = require("self").data;
var reddit_panel = require("panel").Panel({
width: 240,
height: 320,
contentURL: "http://www.reddit.com/.mobile?keep_extension=True",
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("panel.js")]
});
reddit_panel.port.on("click", function(url) {
require("tabs").open(url);
});
require("widget").Widget({
id: "open-reddit-btn",
label: "Reddit",
contentURL: "http://www.reddit.com/static/favicon.ico",
panel: reddit_panel
});
panel.js:
$(window).click(function (event) {
var t = event.target;
// Don't intercept the click if it isn't on a link.
if (t.nodeName != "A")
return;
// Don't intercept the click if it was on one of the links in the header
// or next/previous footer, since those links should load in the panel itself.
if ($(t).parents('#header').length || $(t).parents('.nextprev').length)
return;
// Intercept the click, passing it to the addon, which will load it in a tab.
event.stopPropagation();
event.preventDefault();
self.port.emit('click', t.toString());
});
The icon is displayed in the bar, and clicking it launches the panel. Clicking a link within the panel opens it in a new tab - just as described and expected.
Clicking the "next page" link within the tab successfully fetches the next page, within the panel - as expected.
Clicking a link on the 2nd page does NOT open it in a tab, it opens it WITHIN the panel.
Here's my guess: When the page reloads within the panel, it does not reload the script specified in the contentScriptFile. Does anyone else experience this? And is there a workaround?
I'm using SDK 1.0 and FF 5.0
Question cross-posted on the Addon forum here
Recieved this answer at the Mozilla forum, and will post here as well for future reference.
Perhaps you are seeing Bug 667664 - Panel content scripts don't work after reloading or changing location. I think the workaround is to load the content in an iframe.
Which I believe might be the case, I'll try this during the day and report back.
EDIT: iframe seems to do the trick