Strange behavior when updating an iframe with JQuery - javascript

In the following code, when you click the link it swaps out the iframe src attribute with another video as expected. What I find strange is that it appears to create a history in my browser, allowing me to navigate backward and forward between the two videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").attr('src', url);
});
});
</script>
</head>
<body>
<iframe id="video" width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
<p><a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a></p>
</body>
</html>
If I update the code, however, by wrapping the iframe in a div and replace the entire contents of that div (as opposed to just changing the src attribute), it swaps out the video with no browser history.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").html('<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
});
});
</script>
</head>
<body>
<div id="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
</div>
<a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a>
</body>
</html>
Is this expected behavior or can anyone explain to me why it is happening?

Related

Alert not showing after loading entire content of all iframes on page

<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<iframe width="400px" src="http://www.w3schools.com"></iframe>
<iframe width="400px" src="http://www.phpacademy.org"></iframe>
<iframe width="400px" src="http://www.jquery.com"></iframe>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
below is code in custom.js
$(window).(on.('load', function () {
alert('All content loaded.');
}));
I want the alert to display when all the three iframes are loaded on the page.
The syntax you used for load is wrong, you should use
$(window).on.('load', function () {
alert('All content loaded.');
});
Write this way
$(window).load(function() {
alert("All content loaded.");
});

How do I change my Google Map function from auto finding my location, to making me type in a location?

Currently I have a working map that can automatically find my location using the "Find Me" button I added. I would like to change this to instead having a form where the user could type in any location. How would I go about changing that? I'm a total beginner, thanks in advance.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
Find Me
<div id="map">
<iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk?output=embed"></iframe>
</div>
<script>
var c = function (pos) {
var lat = pos.coords.latitude,
long = pos.coords.longitude,
coords = lat + ', ' + long;
document.getElementById('google_map').setAttribute('src', 'https://maps.google.co.uk/?q=' + coords + '&z=60&output=embed');
}
document.getElementById('get_location').onclick = function () {
navigator.geolocation.getCurrentPosition(c);
return false;
}
</script>
</body>
</html>
This code seems to work using a link as a button as you did:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="map">
<iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk?output=embed"></iframe>
</div>
<form>
Latitude:<br>
<input type="text" id="latitude"><br>
Longitude:<br>
<input type="text" id="longitude">
</form>
Find This
<script>
document.getElementById('get_location').onclick = function () {
var lat = document.getElementById('latitude').value
var long = document.getElementById('longitude').value
coords = lat + ', ' + long;
document.getElementById('google_map').setAttribute('src', 'https://maps.google.co.uk/?q=' + coords + '&z=60&output=embed');
}
</script>
</body>
</html>

Jquery Color box popup is not working with Firefox when nested iframe and FrameSet is used

I have used jquery color box pop up and it is working fine with Google chrome but not working with Firefox.
I have 3 pages Default.aspx, Default2.aspx & Default3.aspx
Default3.aspx is nested inside Default2.aspx and Default2.aspx is nested inside Default.aspx.
Complete source code is as follows:
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">
<frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0"
scrolling="AUTO" noresize="noresize">
</frameset>
</html>
Default2.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<table style="width:100%">
<tr>
<td>
<iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
</td>
</tr>
</table>
</body>
</html>
Default3.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
function fn_openPopUp(url) {
$.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
}
</script>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
<form>
<div>
<img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
<map name="P1">
<area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
coords="237,196,237,265,400,265,400,196" />
</map>
</div>
</form>
</body>
</html>
Now I am browsing Default.aspx from google chrome then it is working fine but not with Firexfox
Colorbox PopUp will be open, when you remove the attribute target="_top" from in Default3.aspx page.
You can do this:
$('map area[target="_top"]').removeAttr('target');

Can't find function after adding iFrame

A simple Hello world function and a button that illustrate the error. Comment out the iFrame - works like a charm. Remove the comments - Fatal error. I am puzzled.
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"/>
</body>
</html>
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
Put your javascript correctly :
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
</head>
Retype the <iframe> to right syntax.
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
Full Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
alert("Hello world");
}
</script>
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
</body>
</html>
It should works.

How to change video source through selecting link - HTML

I'm trying to change the source of a video from selecting a link. So when the link is selected on the page, it will change the video overhead to the source of another video, sort of like a playlist.
This is the code for my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video.mp4" />
</video>
<br />
<a> Other Video </a>
Check out the HTML standard:
http://www.whatwg.org/specs/web-apps/current-work/#video.
There's a couple of solutions you could use. One is loading the next video sequentially, like a playlist:
<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('video');
videoPlayer.onend = function(){
videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />
Then, making a link to change it would be as simple as (for example):
$("a.change_link").click(function(){
videoPlayer.src = nextVideo;
});
in <source src="video.mp4" type="video.mp4" /> line type="video.mp4" is wrong you cant place this type of value here
here's is the some example of type : video/mp3, video/ogg, video/wbem.
To achieve what you are asking for, if you stick the video path in say the alt of the link, you can then reference it and stick that into the src of the video onclick with some simple jquery.
jsfiddle
Modified html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video/mp3" />
</video>
<br />
<a alt="video2.mp4" id="other"> Other Video </a>​
Some jquery:
$('#other').click( function() {
$('#first_video').children('source').attr('src',$(this).attr('alt'))
});​

Categories