I take a video photo from youtube by iframe.
You can see it when you click on HTML button so the photo is load up but I also try to make the photo to change to a video in the iframe after I click on the picture. Thanks to all..!
This is the HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<header></header>
<nav>
<a target="page" id="img" onclick="html()" href="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg">
<button>HTML</button>
</a>
</nav>
<iframe name="page" src="" frameborder="1"></iframe>
<footer></footer>
</body>
</html>
This is The JAVASCRIPT:
function html(){
var iframes = document.getElementById('iframes');
iframes.innerHTML ='https://www.youtube.com/embed/bWPMSSsVdPk';
}
Is this something like what you are looking for?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
<style>
.hidden {
display: None;
}
.shown {
display: "";
}
</style>
<script>
function html(img) {
var iframe = document.getElementById("frame");
img.setAttribute("class", "hidden");
iframe.setAttribute("class", "shown");
}
</script>
</head>
<body>
<header></header>
<nav>
<button>HTML</button>
</nav>
<img src="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg" frameborder="1" class="shown" id="image" onClick="html(this);"/>
<iframe id="frame" name="page" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="1" class="hidden"></iframe>
<footer></footer>
</body>
</html>
You might want to fiddle with the height and width attributes of your elements, but this is how I would achieve the result you're looking for.
Related
Question:
why I am not seeing the image appear when I click on the checkbox?
Problem:
I get no errors with Inspect Tools. Does anyone see something I am missing? Thank you.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
</body>
</html>
The problem is your click event is getting registered before the checkbox is rendered in dom. Your click event should get registered after the checkbox is rendered in dom.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
I see a clear mistake with the body tag! You opened it after all the div and stuff.
Here's the fixed code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
</body>
</html>
Please add your div elements and logic code in the body section. All the logic code is placed before the ending of the body section. The last script section containing your logic compiles after the dom is ready.
You can use the below code. Hope it helps!!!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
So I'm being asked to create a side by side "frame" in html. When content from the iframe on the left is selected, it populates the link in an iframe next to it on the same page.
Additional background: The left hand side is the menu bar generated from Tableau and the right hand side would be the visualization attached. Using target like in the code below hasn't worked:
<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>
Any advice is much appreciated.
Assuming you control both pages, you can message between the iframes with postMessage, with the left window messaging the parent and the parent messaging the right child, an example is below:
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe src="right.html" class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source) {
r.contentWindow.postMessage(e.data, '*')
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="clickEvent()">SEND</button>
</body>
<script>
function clickEvent() {
window.top.postMessage({"payload": "Hello from the other side"}, '*')
}
</script>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<script>
window.onmessage = function(e){
if (e.source == window.top) {
if (e.data["payload"]) {
alert(e.data["payload"]);
}
}
}
</script>
</html>
Edit - Pure navigation answer
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source && e.data["payload"]) {
r.src = e.data["payload"]
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="navigate('http://www.bing.com')">BING</button>
<button onclick="navigate('http://www.example.com')">EXAMPLE</button>
</body>
<script>
function navigate(url) {
window.top.postMessage({"payload": url}, '*')
}
</script>
</html>
I try to scrape some info from site http://www.example.com that has the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="one">
<div>
<iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="hello">
<img src="http://example.net/dokuro_chan.jpg">
</div>
</body>
</html>
</iframe>
</div>
</div>
<div id="two">
<div>
<iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="hello">
<img src="http://example.net/dokuro_chan2.jpg">
</div>
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Then I try to scrape the iframe content via nodejs using jsdom:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
JSDOM.fromURL("http://www.example.com",{
resources: "usable",
runScripts: "dangerously"
}).then(dom =>{
const divIds=["#one","#two"]
divIds.forEach((divId)=> {
const selector=googleAdSelector(divId)
const iframe=dom.window.document.querySelector(selector)
console.log("Iframe Object", iframe)
})
// callback(null,dom)
})
const googleAdSelector=function(divId){
return divId+" > div > iframe";
}
What I want tyo try to acheive is to get the href and the src content that is inside the iframes.
But for some reason the output is:
Iframe Object null
Iframe Object null
Do you have any idea hot how access the html INSIDE the iframe?
You need to approach it differently. Just using a headless browser manually fetch the data through network during the page load and process it separately.
I can't get this basic code to work for fancybox3. Is it not loading the js library?
Original site is here: http://fancyapps.com/fancybox/3/
<!doctype html>
<html><head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>
</body>
</html>
Put the scripts before the closing body tag.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
</head>
<body>
<a data-fancybox="gallery" href="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
</a>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</body>
</html>
worked great by adding:
<link rel="stylesheet prefetch" href="jquery.fancybox.min.css">
With adding script above body close tag as recommend by others
Thanks guys.
I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div class="gallery">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out2.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:800,
height:600
});
});
</script>
</body>
</html>
I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)
$('#gallery').galleria({
ans I think it should be
$('.gallery').galleria({
After several attempts the following works fine with me. I have missed to put https:// before the jquery address.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div id="gallery">
<img src="galleria/im/out.jpg">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:1450,
height:740
});
});
</script>
</body>
</html>