i'm writing a android apps with phonegap and need inappbrowser to display certain contents, so i write some testing code
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
#footer {
position:fixed;
bottom:0;
width:100%;
}
</style>
</head>
<body>
<div data-role="page" id="page_dashboard">
<script type="text/javascript" charset="utf-8" src="scripts/dashboard.js"></script>
<script type="text/javascript" charset="utf-8">
var ref = window.open('http://apache.org','_blank','location=yes, enableViewportScale=yes');
ref
.addEventListener('loadstart', function() { alert(event.url); });
</script>
After i clicked the button, the strange code will convert to the valid text. That is "Alert" box to prompt "undefined" text.
Problems:
Why the text can't be displayed?
Why there is a alert box when the apps start?
Related
There are two versions of code. The first version is there is a main page containing an iframe and dialog <div>. The iframe will load the dia.html into the parent <div id="popdiv"> and fire it as a dialog. The dialog itself will initiate a Datepicker with elem.datepicker();.
The second version is just the ideal version for what I want which is an iframe fire the parent main page dialog and have a Datepicker running. But this approach cannot load the dia.html page into the <div id="popdiv"> which is not as handy.
My question:
Why is that when I want to select the element$('#myInput', window.parent.document) in the dia.html, I need to add window.parent.document after selector?
I try to figure it out by checking the html code in development tools. But I had no idea why it is required. How does query Dialog work?
How to make the elem.datepicker(); inside the dia.html work inside the dialog if I want to use the .load('dia.html') approach? What was the reason it didn't work?
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<div id="popdiv"></div>
<iframe src="iframe1.html" height="800" width="800"></iframe>
</body>
</html>
iframe1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
</head>
<body>
<p>iframe1</p>
</body>
</html>
dia.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
var elem = $('#myInput', window.parent.document);
alert(elem.val());
elem.datepicker();
});
</script>
</head>
<body>
<p>Date: </p>
<input id="myInput" value="22" />
</body>
</html>
working version
change it to not load html
iframe1.html (working)
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
//parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
main.html (working)
<div id="popdiv">
<p>Date: </p>
<input id="myInput" value="22" />
<script>$('#myInput').datepicker();</script>
</div>
the window popup but video isn't playing.
it says ''The web page at file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 might be temporarily down or it may have moved permanently to a new web address.''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/watch?v=Nlw5FnHGER4">play</a>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</body>
</html>
when i am trying this with a image then it is working fine.
$(document).ready(function(){
$('.popup-youtube, .popup-vimeo').magnificPopup({
// disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
iframe:{
patterns:{
youtube:{
index: 'youtube.com',
id: 'v=',
src: 'https://www.youtube.com/embed/%id%'
},
},
srcAction:'iframe_src',
},
fixedContentPos: false
});
});
Declared src for iframe and it worked.
If you want the video in a popup/another window try this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
please note the movement of all script tags to under the head, the updated URL, and the removal of
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
if you want it embedded within the page (as an iframe) try:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</head>
<body>
<iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
</body>
</html>
also reference this site, w3 schools, (here)
also try it out here (option 1), RIGHT CLICK on the link in STACK OVERFLOWS ENGINE in any other you can just click on it but stack overflow requires you to right click and say "open in new tab"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
im trying to call
.bind("click")
from an external .js file (js1.js).
here is the code:
js1.js:
$(function() {
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
page.html:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
</head>
<body>
<p>Click me!</p>
</body>
this code does not work in my files.
i found it from w3scools and it is working in their site:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
how can i make it running from my external .js? any ideas?
thanks.
By the looks of it, you haven't added jQuery on your page yet. Add jQuery prior to your script.
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
If you forget to add this line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
so add it in your <head> </head> section first. Otherwise your script could not work.
Bellow the complete code which working for me..
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#p').bind('click', function(){
alert('The paragraph was clicked.');
});
});
</script>
<style>
#p{cursor:pointer;}
</style>
</head>
<body>
<p id="p">Click me!</p>
</body>
</html>
I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.