I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.
var player = videojs('my-video');
var button = player.addChild('button');
var myButton = player.controlBar.addChild('button', {
text: "Press me",
// other options
});
How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself
Text you pass in your option is available as a controlText and not a display text. ControlText creates a span in you button which is displayed when hovered. This control text is present in all the components in video js.
To add a text in videojs here is a simple way.
var player = videojs('my_video_1');
// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");
// There are many functions available for button component
// like below mentioned in this docs
// https://docs.videojs.com/button.
// You can set attributes and clasess as well.
// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element
// you can add click events
// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";
myButtonDom.onclick = function(){
alert("Redirecting");
window.location.href = "https://www.google.com"
}
Instead of setting an inner html you can play around and add any html DOM attribute since at the end it is only a button.
Adding Codepen link for code demonstration
https://codepen.io/vaibhav281128/pen/NWawWjr
In case if you want to register your button as a custom component
https://codepen.io/vaibhav281128/pen/bGoYGPR
My solution in case you also want to control the position of your button:
addButtonToPlayer() {
let myButton = player.controlBar.addChild('button');
myButton.controlText('tooltip text');
player.controlBar
.el()
.insertBefore(
myButton.el(),
player.controlBar.getChild('fullscreenToggle').el()
);
let buttonDom = myButton.el();
buttonDom.innerHTML = '⬇'; // button text/emoji
buttonDom.onclick = function() {
alert('Hey');
};
}
Related
I'm attempting to do something custom with clusters, where when you click down on a cluster that cannot be expanded further (eg. two objects with the same or very similar location data), a list of what is contained in that cluster should appear, which you can then interact with. I am able to retrieve the objects, create the list and place it on the correct spot on the map, but I am unable to bind any events to those list entries. I have created similar functionality in other parts of the map application, and these seem to be working as expected. Those were not created using the Popup library, so I could try reusing that technique, but the ease of placing popups makes me want to at least try to get those working with events.
I've tried using addEventListener with the click, mouseup and mouseenter events, but nothing is triggering.
How can I use eventListeners in mapbox popups? Is the HTML passed to the popup being sanitized somehow?
I am currently using mapboxgl 1.2.0.
How the popup is generated:
new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
.setLngLat(coords[0])
.addTo($scope.map);
How the content is generated:
function generateListPopup(entries){
var container = document.createElement('div');
container.maxHeight = "240px";
container.overflowY = "auto";
var ul = document.createElement('ul');
ul.style.listStyle = "none";
ul.style.padding = "0";
container.style.background = "blue"; // does set the color to blue
container.addEventListener('mouseenter', function () { // does not trigger
console.log("by golly"); // does not show
});
angular.forEach(entries, function (e) {
var li = document.createElement('li');
var entry = document.createElement('p');
var f = document.createElement('button');
entry.innerHTML = e.name;
entry.style.cursor = "pointer";
f.addEventListener('mouseup', function () {
console.log("hello"); // nope
});
li.appendChild(f);
li.appendChild(entry);
ul.appendChild(li);
});
container.appendChild(ul);
return container;
}
Any help is greatly appreciated!
I just typed out this whole question before figuring it out, so might as well post it in case anyone ever has the same issue:
use setDOMContent on the returned container instead of setHTML on the returned container's outerHTML. I'm guessing the bound events are lost when the elements are serialized using outerHTML.
I'm trying to copy an image to the clipboard and use it in my webpage. But I couldn't store the image data in the clipboard. I tried executing copy commands but I could only able to copy text. Kindly Help.
function copyThings(event){
var msgelem = event.target.previousElementSibling;
// msgelem = the element of current button
var msgcopied = theMsg(msgelem); // returns the content of text if text and url of the image if image.
var copydiv = '<div contenteditable=true id="copyhidden" style="display:block;">'+msgcopied+'</div>';
msgdiv.find('#txtarea').after(copydiv);
msgdiv.find("#copyhidden").select();
document.addEventListener(event, function(){
event.stopPropagation();
event.datatransfer.setData('URL',msgcopied); //No I18N
event.preventDefault();
});
document.execCommand('copy');//No I18N
msgdiv.find("#copyhidden").remove();
}
I just wanted when I click on a particular button the image gets stored in the DataTranferItem.(i.e) the event.clipboardData.items must contain {kind : file, type: image/png}
If I can't do that, what can be the alternate solution?
Thanks in Advance!
So, basically, I want to create a richtextbox even if there is no <textarea> yet. I want to append the richtextbox myself. Not by tinyMCE. The problem is I think that after appending this, I wont have any tinyMCE events.
What I have in mind is like...
$("<textarea></textarea>").tinyMCE({options}) and this will return the html string of the richtextbox. That way, I can append the html string myself. Take note, it should work perfectly especially the events.
Is this even possible?
You can create a <textarea> through javascript and append it to the DOM just before you want to render the editor on screen. However you will need to use an id for the textarea.
//an editor id needs to be used in this method
var editorId = "#myId";
var options = {
//options
}
//Creates an editor instance and adds it to the EditorManager collection.
tinyMCE.createEditor(editorId, options);
//get the editor instance by its id
var editor = tinyMCE.get(editorId);
//get the root element you want insert the editor into. (E.g. body element)
var root = document.getElementsByTagName('body')[0];
//create a textarea element
var textarea = document.createElement("textarea");
//set its id
textarea.setAttribute("id", editorId);
//append it to the root element
root.appendChild(textarea);
//register your events
registerEvents(editor);
//display editor on screen
editor.render();
//set content of editor
editor.setContent("<h1>Hello World!</h1><p>Hello World!</p>");
//retrieve content from editor
var htmlContent = editor.getContent();
console.log(htmlContent);
function registerEvents(editor) {
editor.on("init", function(e) {
console.log("Init", e);
});
editor.on("focus", function(e){
console.log("Focus", e);
});
editor.on("blur", function(e){
console.log("Blur", e);
});
}
Here is the example on JSFiddle.
Does anyone have experience with Disqus?
I am adding buttons to the existing website and when button is pressed, it should fire disqus comments.
In the beginning, this is run
function insertdisqus(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'https://myforum.disqus.com/embed.js';
$('head').append(dsq);
}
then,
var button = document.createElement("a");
button.setAttribute("id", "diqus");
button.innerHTML = "Discussion";
button.addEventListener('click', loaddisqus);
function loaddisqus(e){
parent_element = $(this).parent().parent();
next_element = parent_element.next();
subjectcode = next_element.attr('data-subjectcode');
var disqus_identifier = subjectcode;
var disqus_url = window.location.origin;
next_element.after('<div id="disqus_thread"></div>');
so, when the button is pressed, loaddisqus should execute, and it does. But it doesn't do anything further than creating the disqus_thread divs...
What could be wrong?
first thing, you try to mix plain javascript and jquery (not a good idea)
perhaps you can try something like this:
var btn = $('<button>').html('Duscussion').on('click', btnClickListener);
$('body').append(btn);
var btnClickListener = function(event){
var clickedElement = $(this); // get the clicked element
clickedElement.html('new Text'); // do what you want (i.e. change the content of the clicked button)
}
second is, you try to use a link (a-tag) as an button. the problem is, a link allways tries to relocate your page to the href target. a button should be a button, not a link. if you need a link because of style or something you have to expend your listener function to something like this:
var linkButton = $('<a>').attr('href', '#').html('click here').on('click', linkButtonListener);
$('body').append(linkButton);
var linkButtonListener = function(event){
event.stopPropagation(); // stops actions from all parent elements
event.preventDefault(); // stops the default actions of the link
var clickedButton = $(this); // get the clicked element
clickedButton.html('allready clicked'); // do what you want (i.e. change the content of the link)
}
i hope that helps you to understand how the listeners with jquery works very simple.
last thing, you try to enable a script tag and hope the script runs after click on your button. but this does not work in javascript. all scripts will be loaded once. you can't execute it by adding a script tag after the document is ready. if you want this, you have to execute it by hand (perhaps with eval function), but it's not the fine way. There are some frameworks that can include scripts by action and make them executeable i think. i know it does not work and never used it.
Hi I am adding a iframe dynamically, It displays an image from a server. I need to disable the context menu for this item. In chrome I can inspect element and if I add oncontextmenu="return false" I do get the wanted affect. However I am unable to do this while the page is generated. Here is an example of the working html.
However I can not reproduce this when i frame is being created. Here is my code.
$(window).scrollTop(0);
$('#secVerify').show();
$("#popWaitLoad").modal("hide");
imgLoading.hide();
dvIframe.empty();
//else load deposit data into interface
$("#spanType").text(deposit.DepositType);
$("#spanReference").text(deposit.Reference);
$("#spanAmount").text("R " + deposit.Amount.toFixed(2));
$("#spanDate").text(deposit.DateCreatedOffsetS);
imageID = deposit.Deposit_Doc_imageID;
var url = imageUrl + '/' + deposit.Deposit_Doc_imageID + '/false';
var imgFrame = document.createElement("iframe");
imgFrame.src = url;
imgFrame.frameBorder = '0';
imgFrame.scrolling = 'no';
imgFrame.width = '100%';
imgFrame.height = '100%';
imgFrame.align = 'middle';
imgFrame.id = "iframeImg";
dvIframe.append(imgFrame);
I have tried examples like.
$("#iframeImage").contents().find("img").attr("oncontextmenu", 'return false');
$('#iframeImage img').on('contextmenu', function (e) {
e.stopPropagation();
// Your code.
return false;
});
But because the img element seems to be only created is done after page load it seems to not work. I know disabling the the menu will not help much and I have explained all the other methods of obtaining the image that is still available but the client really wants this.
I have added nocontextmenu to the body tag and it works everywhere except for the iframe.
So let me clarify, My iframe is working like it should however I would like to disable the right click aka context menu on the specific iframe.
I have used setAttribute to set the attributes and targeted a container to appendChild.
function example(){
var target = document.getElementById('container');
var element = document.createElement('img');
element.setAttribute('src', 'http://gopalshenoy.files.wordpress.com/2011/04/product_demos.jpg');
//element.setAttribute('width','100%');
//element.setAttribute('height','100%');
element.setAttribute('id','iframeImage');
element.setAttribute("oncontextmenu","return false;");
target.appendChild(element);
}
// Demo-Snippet use.
window.onload=example;
<!-- Demo Snippet use -->
<div id="container"></div>
If you build more than one element using this function you might find further issues due to duplicated ID's.
ID's are used to target a specific element 'one of' so if you want to build multiple elements I would recommend giving them unique ID's.
I hope this helps. Happy coding!