I've taken the code from the example to try to make it work, but my link only links out to youtube.
I linked out to the scripts and styles to try to get it to work, but that didn't help. I'm completely new to this so your help is much appreciated.
<div class="example gc3">
<div class="html-code">
Open YouTube video<br>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
Related
i open a testroom videoconference with chrome https://meet.jit.si/testroom and tried the following script in another browsertab, but no video, i dont know what to put into the body section for displaying the room?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='https://meet.jit.si/external_api.js'></script>
</head>
<body>
<div id="app1">
{{ message }}
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
message: 'Hello Jitsi with Vue!'
}
})
const domain = 'meet.jit.si';
const options = {
roomName: 'testroom',
width: 700,
height: 700,
parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);
</script>
</body>
<html>
this script works now, be sure to use chrome as browser
the doco of the options you find here
https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md
you can also build up your own videoconfernce server
api.html
<html>
<head>
<script src="https://meet.jit.si/external_api.js"></script>
</head>
<body>
<div id="meet"></div>
<script>
var domain = 'meet.jit.si';
var options = {
roomName: 'testroom',
width: 500,
height: 500,
interfaceConfigOverwrite: { filmStripOnly: false },
parentNode: document.querySelector('#meet')
};
var api = new JitsiMeetExternalAPI(domain, options);
</script>
</body>
</html>
I believe you missed a needed element: 'meet'
<div id="app1">
{{ message }}
<div id="meet"></div> <!-- missing -->
</div>
It's used by JitsiMeetExternalAPI:
parentNode: document.querySelector('#meet')
I simply use Tippy capability to have an input field included in the tooltip.
Everything works fine, except that it is impossible to write anything in the input field.
Is it possible to do it? How?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tippy.js#3/dist/tippy.all.min.js"></script>
<script>
tippy.setDefaults({
allowHTML: 1,
trigger: 'click',
hideOnClick : 'toggle'
})
function initAllValues() {
tippy('.enery', {
content: document.querySelector('#myTemplate')
})
}
</script>
</head>
<body onload="initAllValues()">
<span class="enery">Text</span>
<div id="myTemplate">
My HTML <strong style="color: pink;">tooltip</strong> content with an input field <input type="number" id="catch_value">
</div>
</body>
</html>
Solution as easier than thought:
One has to set the following option in tippy:
interactive: true option
Note: direct tippy support and discussions is available on their github, including answr to the present question: https://github.com/atomiks/tippyjs/issues/342#event-1935111700
Just do:
interactive: true
as in:
function initAllValues() {
tippy('.enery', {
content: document.querySelector('#myTemplate'),
interactive: true
})
}
or in:
tippy.setDefaults({
allowHTML: 1,
trigger: 'click',
hideOnClick : 'toggle',
interactive: true
})
Also have a look at Tippy's docs: https://atomiks.github.io/tippyjs/v6/all-props/#interactive and FAQ for problems using the interactive property: https://atomiks.github.io/tippyjs/v6/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all
There is one image in dojo/dijit's content. I want to set click event for the image but it can't catch the event.
the code in JSFiddle
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../../_static/js/dojo/dojo.js'></script>
<script>
require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
new ContentPane({
content:"<p><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png' onclick='clickHandler()' /></p>",
style:"height:125px"
}, "targetID").startup();
function clickHandler()
{
alert("img clicked");
}
});
</script>
</head>
<body class="claro">
<div id="targetID">
I get replaced.
</div>
</body>
</html>
You are defining the clickHandler function within the require function. This means that it will not be available after require returns. At the console you can see an error when the image is clicked: "clickHandler is not defined". You can easily solve this by defining the clickHandler function outside of require().
<script>
require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
new ContentPane({
content:"<p><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png' onclick='clickHandler()' /></p>",
style:"height:125px"
}, "targetID").startup();
});
function clickHandler()
{
alert("img clicked");
}
</script>
Edited.
require([
'dojo/dom-construct',
'dijit/layout/ContentPane',
'dojo/domReady!'
], function(domConstruct, ContentPane){
new ContentPane({
content: '<div id="imageDiv"></div>',
style: 'height:125px'
}, 'targetID').startup();
domConstruct.create('img', {
src: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png',
onclick: function(){ alert('i have been clicked') }
}, 'imageDiv');
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="targetID">I get replaced.</div>
I am working with DataTables JQuery and for each row I have dynamic text.
This datatable shows on Modal.
I am trying to use bootstrap popover but doesn't work right.Its look like overlay by the table.
Half of my popover not appearing.
fiddle link seems working but in my case (loading remote modal with dynamic datatable doesnt work
Table
<td class="noteTable">
<div class="show-popover" data-toggle="popover" title="{{$log->newStatusText}}">
{{substr(($log->newStatusText),0,50)}}
</div>
</td>
And Script is
<script type="text/javascript">
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
});
My datatable script
<script type="text/javascript">
$(document).ready(function() {
$('#showLogTable').dataTable( {
"order": [[ 4, "desc" ]],
"scrollY": 400,
"destroy": true,
"pagingType": "simple",
"scrollCollapse": true,
"dom": '<"top"f>t<"bottom"ip><"clear">'
} );
} );
</script>
Thanks for advance!
UPDATE:
my ugly solution is
fiddle expanding row to bottom (working localhost as expected but on fiddle doesn't look like working)
Update 2
When I set 'container': 'body' popover goes behind modal! Any idea how to bring front?
Here is the solution for modal
This will help for Modal users
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': '.modal-body'
});
Set the container option to body for the popover.
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': 'body'
});
-->Questions are at the end of the post.
I want to use ExtJs on a multipage application with ASP.NET MVC. I know one of the MVC purposes is to build clean and fast HTML pages, but let's just say I have to use ExtJs.
Given the fact that ExtJs is mainly a single page app oriented framework, I had to find a way to make it work on multipage apps.
So, my layout page looks like this:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#*Scripts.Render("~/bundles/modernizr")*#
#Styles.Render("~/Resources/css/app.css")
#Styles.Render("~/ExtJs/ext-theme-neptune-all-debug_01.css")
#Styles.Render("~/ExtJs/ext-theme-neptune-all-debug_02.css")
#Scripts.Render("~/ExtJs/ext-all-debug.js")
#Scripts.Render("~/App/app.js")
#RenderSection("actionscripts", required: false)
</head>
<body>
<div id="body">
<section class="">
#RenderBody()
</section>
</div>
</body>
</html>
App.js is my app starter and simplified looks like this:
APP = {}
BuildActionHTML = null;
Ext.application({
name: 'MyApp',
launch: function () {
APP = this;
APP.VIEWPORT = Ext.create('Ext.container.Viewport', {
layout: 'border',
cls: 'spViewport',
maxWidth: 1280,
minWidth:960,
items: [{
region: 'center',
xtype: 'panel',
title: 'Main content',
items: [{
xtype: 'label',
html: '<div id = "mainAppContainer"></div>',
listeners: {
afterrender: function (label, eOpts) {
BuildActionHTML && typeof BuildActionHTML == 'function' && BuildActionHTML();
}
}
}]
}]
});
}
});
Now, my Index view in Home controller (and any other view) looks like this:
#section actionscripts
{
<script type="text/javascript">
function BuildActionHTML() {
Ext.create('Ext.panel.Panel', {
title: 'My panel',
width: '100%',
renderTo: 'mainAppContainer',
items: [{
xtype: 'textfield',
fieldLabel: 'Text field'
}]
})
}
</script>
}
So my viewport contains a panel with a label which has a label in it. After rendering the label with that <div id = "mainAppContainer"></div> I know for sure I can start rendering my view in it, by calling BuildActionHTML()
1. My question is how bad is this approach, because I know for sure it is not elegant. What "problems" will I probably get into and what are the advantages/disadvantages.
2. Also, how can I customize ext-all.js to use only the classes and components I am using in application, to reduce its size. I don't think I can to this with sencha cmd due to my app architecture (or the lack of it).
Thank you.