There is requirement where I need to copy HTML code on click of button. The functionality is not working where we are using a video tag. The video tag somehow gets formatted by brightcove. I tried using <pre> and <code> elements. Can you please suggest something.
$('.copy').on('click', function() {
var section = $(this).next().find('code').html();
var elem = document.createElement('textarea');
//elem.textContent = section;
elem.innerHTML = section;
//elem.classList.add('invisible');
document.body.appendChild(elem);
console.log(elem.innerHTML);
elem.select();
console.log("Hi");
try {
document.execCommand('copy');
} catch (e) {
console.log('ERROR: ' + e);
} finally {
elem.remove();
}
});
<div class="ply-item-ratio-content">
<!-- Start of Brightcove Player -->
<div class="parbase brightcovevideo section">
<div style="margin-bottom: 0;margin-left: 0;margin-right: auto;margin-top: 0;overflow-x: hidden;overflow-y: hidden;text-align: center;width: 1025px;text-align:left; height: 560px;">
<div id="25efba484"> </div>
<script type="text/javascript" src="/etc/polycom/www/global/js/thirdparty/BrightcoveExperiences_embedded.js"></script>
<script>
customBC.createVideo("1000", "567", "4223245001", "cd~~,AddB-EKwxDE~,eUqCcdvdv7u6CqAyJC", "4435446654001", "2768ede1a35dsgfdgffba484");
</script>
</div>
</div>-->
<!-- End of Brightcove Player -->
</div>
</div>
<div class="ply-global-video-description">
<h2>NATO Communications and Information (NCI) Agency Success Story</h2>
<p>Centro to create a relaxed working environment that draws teams closer together and enables better sharing of ideas and insights.</p>
</div>
</div>
Related
I'm trying to change the background of the body on my HTML doc using some basic JS functions. I have set the function to target a specific ID, and then the style.background tag, if it is the current background image, then set it to another one I specified, else keep the same image. I have tried changing the code countless times now, but still can't seem to get it to change the background. Any help with this would be appreciated.
HTML:
<div class="bg-image"
style="background-image: url('./img/frankie.jpg');
height: 100vh" id="bacgr"> <!--SETS BACKGROUND using id tag to change w/ JS-->
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>
JS:
let myImage = document.getElementById('bacgr').style.backgroundImage; //have to target specific image(like an array ([0])), put inside div w/ id.
myImage.onclick = function() {
if(myImage === "url('./img/frankie.jpg')") {
myImage == "url('./img/jesus_mobile.jpg')";
} else {
myImage == "url('./img/frankie.jpg')";
}
}
Try this:
const el = document.getElementById('bacgr');
el.onclick = function() {
if(this.style.backgroundImage === "url('./img/frankie.jpg')") {
this.style.backgroundImage = "url('./img/jesus_mobile.jpg')";
} else {
this.style.backgroundImage = "url('./img/frankie.jpg')";
}
}
Here is the example
You are changing only the URL, but that will not be assigned back to the dom element.
const el = document.getElementById('bacgr');
let prev = 'url("https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa")';
el.onclick = function() {
el.style.backgroundImage = prev === el.style.backgroundImage ? 'url("https://images.unsplash.com/photo-1583508915901-b5f84c1dcde1")' : prev;
}
<div class="bg-image" style="background-image: url('https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa');
height: 100vh" id="bacgr">
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>
I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.
There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>
Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.
I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.
I have 2 images displayed on a page. I want a message to appear when I click 1 image and it to disappear when I click the alternate one, then vice versa.
The jQuery code I created below seems to be working fine, but I am continuously getting an [object HTMLImageElement] message on the alternate image every time I click the one that is displaying the text.
$(document).ready(function(){
$("#gimp").click(function(){
var gimp = "Gimp message.";
var i = $("#qInkscape").text(inkscape);
if (i == true) {
$("#qInkscape").hide();
$("#qGimp").text(gimp);
} else {
$("#qGimp").text(gimp);
}
});
$("#inkscape").click(function(){
var inkscape = "Inkscape message";
var g = $("#qGimp").text(gimp);
if (g == true) {
$("#qGimp").hide();
$("#qInkscape").text(inkscape);
} else {
$("#qInkscape").text(inkscape);
}
});
});
And the html
<div class="mf-container">
<div class="mf-content">
<div class="row">
<div class="mf-third mf-center">
<img src="img/qualifications/gimp_g.png" class="mf-pic-unique mf-pic-
shadow mf-margin-top" id="gimp" alt="about gimp">
<p id="qGimp" class="mf-off-black-text"> </p>
</div>
<div class="mf-third mf-margin-top">
<p class="mf-center mf-off-black-text">Click on an image to learn more
about each technology</p>
</div>
<div class="mf-third mf-center">
<img src="img/qualifications/inkscape_G.png" class="mf-pic-unique mf-
pic-shadow mf-margin-top" id="inkscape" alt="about inkscape">
<p id="qInkscape" class="mf-off-black-text"> </p>
</div>
</div>
</div>
</div>
What would be an example of how the on change event works in ACE Editor (https://ace.c9.io/#nav=api&api=editor), with a simple getValue() when the there is an on change event and send the new text to a div?
See https://jsfiddle.net/ralf_htp/hbxhgdr1/ and http://jsfiddle.net/revathskumar/rY37e/
HTML
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Editor</h3>
</div>
<div class="panel-body">
go
<div id="editor" onChange="update()">function foo(items) { var x = "All this is syntax highlighted"; return x; }
</div>
</div>
</div>
<div id="output">Output is here (click 'go' and write HTML and js in the editor) </div>
<div class="text-center">---End of editor---</div>
</div>
JavaScript
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.getSession().on('change', function() {
update()
});
function update() //writes in <div> with id=output
{
var val = editor.getSession().getValue();
var divecho = document.getElementById("output");
divecho.innerHTML = val;
}
The function update() implements the onChange event that is associated with the editor. If the go-link is clicked and then a character is written in the editor, the update()-function outputs the content of the editor in the <div> with id = output as HTML (innerHTML)
CSS
#editor {
/** Setting height is also important, otherwise the editor won’t show up **/
height: 300px;
}
#output {
height: 100px;
}
https://ace.c9.io/, section Listening to Events
See also this question: Ace editor with an onchange event is not working
i got a page on a site and there are several videos within blocs. When i play one video and then hit the close button or click on another box to open it, it works all just fine. But the problem comes when i add extra html markup around the videos, it breaks the close button behavior.
Here's the markup of a box (i've got multiples in my page):
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<iframe ... ></iframe>
</div>
</div>
</div>
</div>
The cunload button is the one closing the box and unloading the video.
Here's the javascript (as seing at the vimeo api's page):
(function(){
var vimeoPlayers = document.querySelectorAll('iframe'), player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) { element.addEventListener(eventName, callback, false); }
else { element.attachEvent(eventName, callback, false); }
}
function ready(player_id) {
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
function setupSimpleButtons() {
var unloadBtn = container.querySelector('.simple').querySelector('.cunload');
addEvent(unloadBtn, 'click', function() { froogaloop.api('unload'); }, false);
}
setupSimpleButtons();
$(".cunload, .box:not(.expanded)").click(function(){
//if (!$(this).is('expanded')) {
froogaloop.api('unload');
//}
});
}
})();
This works just fine, but when i add an extra <div> around the iframe (and i really need to) it doesnt work anymore.
Any clue?
EDIT: problem is more complicated, i added an <ul> and <li> tags around the iframes as such:
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<ul>
<li><iframe ... ></iframe></li>
<li><iframe ... ></iframe></li>
</ul>
</div>
</div>
</div>
</div>
and modified the js line :
var container = document.getElementById(player_id).parentNode.parentNode
to:
var container = document.getElementById(player_id).parentNode.parentNode.parentNode.parentNode
and i got it working.
The problem is that i use the <ul> and <li> tags to call jcarousel and that it adds an extra 3 divs between my .exandable-vids-container and the <ul>. Moreover, sometimes i'll call this carousel and sometimes not, so i really can't go with adding extras .parentNode in the js. This would have to be dynamic and i think the solution has to be in that direction.