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>
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>
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>
$('#user_text').keyup(function(){
var user_text = $('#user_text').val();
$('#user_text_feedback').html(user_text);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="user_text" value="hey"><br />
<span id="user_text_feedback"></span>
</body>
</html>
I'm using google chrome as my default browser. I tried to execute the above code but I'm not getting the required output.I also tried using keydown instead of keyup I wasn't getting the proper output
Change $('#user_link') to $('#user_text'):
$('#user_text').keyup(function(){
var user_text = $('#user_text').val();
$('#user_text_feedback').html(user_text);
});
Working here you should use #user_text :
$('#user_text').keyup(function(){
var user_text = $('#user_text').val();
$('#user_text_feedback').html(user_text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input type="text" id="user_text" value="hey"><br />
<span id="user_text_feedback"></span>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
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?
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.