JavaScript Function Switch Function Not Working - javascript

I recently posted a question and suggested this as an answer but it is not working. Why ?
<div class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>
<script>
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
elem = document.getElementById('thePdf');
elem.src = elem.src == fileA ? fileB : fileA;
}
</script>
Basically there is a default PDF which loads on page open, and once I click the button I want the pdf to change to the other pdf. But it is not working

changes to src attribute on <embed>, <object>, etc...
do not take affect
have to replace with a new element
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
container = document.getElementById('thePdfContainer'),
elem = document.getElementById('thePdf');
var newFile = (elem.src === fileA) ? fileB : fileA;
container.innerHTML = '<embed src="' + newFile + '" width="300" height="300" type="application/pdf" id="thePdf">';
console.log(container.innerHTML);
}
<div id="thePdfContainer" class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

Related

Why are my googleMaps not stacking like a gallery and lining up next to each other instead?

I want to create a gallery of googlemaps and use previous and next buttons to cycle through them.
However, instead of being in one after the other in a gallery they just appear next to each other in a row.
Html:
<div class="maps-gallery">
<iframe class ="maps-list active" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="buttons">
<button disabled="" class="button prev">Prev</button>
<button class="button next">Next</button>
</div>
JavaScript:
const prevButton = document.querySelector('.prev')
const nextButton = document.querySelector('.next')
const mapsList = document.querySelectorAll('.maps-list')
let currentlySelected = 0;
prevButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected--;
mapsList[currentlySelected].classList.add("active");
nextButton.disabled = false;
if (currentlySelected === 0){
prevButton.disabled=true
}
});
nextButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected++;
mapsList[currentlySelected].classList.add('active')
prevButton.disabled = false;
if (mapsList.length === currentlySelected + 1) {
nextButton.disabled = true
}
});

I have .js inside an iframe. Can't find element

I am doing scraping with python and selenium.
Trying to access a table inside an iframe.
Page source section as below:
<div id="pageContentDiv">
<iframe frameborder="0" id="content" name="content" src="emxBlank.jsp" width="100%" height="100%"></iframe>
<iframe class="hidden-frame" id="hiddenFrame" name="hiddenFrame" src="emxBlank.jsp"></iframe>
<iframe class="hidden-frame" id="integrationsFrame" name="integrationsFrame" src="../integrations/emxIntegrations.jsp"></iframe>
<iframe class="hidden-frame" id="appletFrame" name="appletFrame" src="emxBlank.jsp"></iframe>
<iframe class="hidden-frame" id="ClipboardCollection" name="ClipboardCollection" src="emxClipboardCollection.jsp"></iframe>
</div>
While using firefox inspector, it should be
<div id="pageContentDiv" style="top: 0px;">
<div id="divPageHead" class="page-head">
<form method="post">
<div class="toolbar-subcontainer">
<table>
<tbody><tr>
<td class="page-title">
<h2>Part XXX XXXXXXXXX AA: BOM XXXXXXX</h2>
</td>
<td class="functions">
<table>
<tbody><tr>
<td class="progress-indicator"><div id="imgProgressDiv" style="visibility: hidden;"></div></td>
</tr></tbody></table>
</td>
</tr>
</tbody></table>
</div>
<script type="text/javascript">
function getTopAccessFrame() {
var oTop = this;
while(oTop && oTop.parent != oTop && oTop.name != "mxPortletContent" ){
try{
var doc = oTop.parent.test = "temp";
}catch(e){
break;
}
oTop = oTop.parent;}
try{
while(oTop.name != "mxPortletContent" && oTop.opener && oTop.opener.top){
var docOpenerTop = oTop.opener.top.test = "temp";
oTop = oTop.opener.top
}}catch(e){}
return oTop;}
</script>
<script type="text/javascript">
var topAccessFrame = getTopAccessFrame();
if(typeof topAccessFrame.emxUIConstants != "object"){
document.write("<scri" + "pt language=\"JavaScript\" type=\"text/javascript\" src=\"../common/emxUIConstantsJavaScriptInclude.jsp\"></scr" + "ipt>");
}else{
var emxUIConstants = topAccessFrame.emxUIConstants;
}
</script>
<script language="javascript" src="scripts/emxUICalendar.js"</script>
<script language="JavaScript" src="...></script>
<div class="toolbar-container" id="divToolbarContainer">
<div id="divToolbar" class="toolbar-frame"><div class="toolbar">
</div></div>
</div>
</form>
</div><!-- /#pageHeadDiv -->
<div id="divPageBody" style="top: 55px;">
<iframe name="portalDisplay" src="emxPortalDisplay.jsp?portal=ENCPartEBOMPortal&header=emxEngineeringCentral.ObjectPortal.PartEBOMHeader&HelpMarker=emxhelppartebompv&objectId=51758.28388.51328.17028&suiteKey=EngineeringCentral&StringResourceFileId=emxEngineeringCentralStringResource&SuiteDirectory=engineeringcentral&treeLabel=XXXX" border="0" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div></div></div>
Detail about my question:
I don't know which iframe should I switch to.
Once switch into the iframe, I'm still getting .js code only but not any elements.
I'm using Firefox. Is it causing the issue?
I have already tried iframe switch as
iframe=driver.find_element_by_name("ClipboardCollection")
driver.switch_to.frame(iframe)
Not solving my problem.

getting a source for <video src> in html from js script

Im trying to display webms on my homepage in a random order
every time someone access the homepage.
I think, i got the random part done, my problem is,
getting the path string into the source src="" of my html code
my current take on this is:
HTML
<div class="window" id="videos" style="display: none;">
<div class="content">
<center>
<video controls width="500">
<source id="random_webm" src="" type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
JS
function random_webm(max) {
var src = ["videos/ship.webm", "videos/ira.webm"];
return random_webm.src = src[Math.floor(Math.random() * src.length)];
src = rndwebm(3);
document.getElementById('random_webm').src = src.rndwebm(3);
};
other things i tried
https://pastebin.com/raw/3Sjpd0gW
concluision - how it works now:
<div class="window" id="videos" style="display: none;">
<div class="header">
<img class="icon" src="images/video.png">
gnu.3gp
<div class="buttons">
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">_</button>
<button>◽</button>
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">X</button>
</div>
</div>
<div class="content">
<center>
<video controls width="500" id="random_webm" src="">
<source type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
function videos() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
var x = document.getElementById("videos");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
random_webm()
Try this code, and adapt it to your needs.
function random_webm() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
};
random_webm()

Stop the video from playing

I have two videos on the same page and they open in an iframe. When I close the popup, the video won't stop. It keeps playing. Due to circumstances beyond my control, I have to work with the videos within iframes.
Could anyone help, below is the code for the same:
jQuery:
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
var popup = $this.attr("href");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var left = left/2 - 340;
var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var top = top/2 - 180;
document.getElementById("vid").style.top = top + "px";
document.getElementById("vid").style.left = left + "px";
document.getElementById("vid1").style.top = top + "px";
document.getElementById("vid1").style.left = left + "px";
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
HTML:
<div class="popup" id="media-popup"> <!-- video embedded -->
<iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a class="video-close" href="#0"></a>
</div><!-- popup -->
<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>
This helped me, check it out!
click here to go to the original answer
Basically you need to use iframe or video to start player and that code will stop it when you want it.
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.pause();
}
};
To stop the video, not only pause it, you can set currentTime to 0 like:
video.pause()
video.currentTime = 0
This will 'reset' the src attribute for each iframe, stopping the video.
jQuery("iframe").each(function() {
var url = jQuery(this).attr('src');
jQuery(this).attr('src', url);
});
You can also run the following if the iframe is within your domain.
jQuery('iframe').contents().find('video').each(function ()
{
this.pause();
});
jQuery('video').each(function ()
{
this.pause();
});
http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=preview
This plunker helped me to achieve the solution to my question.
HTML:
<head>
<title>Autostop Videos in Closed Modal</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Autostop Videos in Closed Modal</h1>
<ul class="nav" >
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="modal fade" id="video1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 1</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 2</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function(){
$('.modal').on('hidden.bs.modal', function (e) {
$iframe = $(this).find("iframe");
$iframe.attr("src", $iframe.attr("src"));
});
});

A better way to do this with ReactJS?

Well.. I'm new in ReactJS, I'm AngularJS developer.
I have a problem... I need click on link and render a with a youtube iframe video.
I did, but...
Below the code:
<div class="news-box -hero">
<a href="#" class="news-cover -play -video">
<img src="images/news4.jpg" alt="" class="cover">
<div class="video-box" video-id="uoNPBcEBmFg"></div>
</a>
<a href="#" class="news-info" style="border-color: #174489">
<h3>Title</h3>
<p>Date and Hours</p>
</a>
</div>
I need that when click on '.-video' shows youtube iframe inside '.video-box'.
Will have many '.-video'.
I did so:
/**
* Video
*/
var VideoBox = React.createClass({
render: function () {
return (
<iframe width="70%" height="100%" src={'https://www.youtube.com/embed/' + this.props.videoId + '?rel=0&autoplay=1'} frameBorder="0" allowFullScreen></iframe>
);
}
});
/**
* When click on '-video'
*/
var videos = document.querySelectorAll('.-video');
for (var i = 0, t = videos.length; i < t; i++) {
var video = videos[i];
video.addEventListener('click', function(e) {
e.preventDefault();
var videoBox = video.querySelector('.video-box'),
id = videoBox.getAttribute('video-id');
React.render(
<VideoBox videoId={id} />,
videoBox
);
videoBox.style.display = 'block';
});
}
Yes, it works! There is a better way to do this?
Thanks!

Categories