I would like to make my player seek to 180 sec.
I was able to do it with previous ustream-embedapi.min.js, but know it seems to have changed.
And I can't find the new JS file.
Here is my code :
HEAD :
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="ustream-embedapi.min.js"></script>
WHATS THE URL OF THE NEW USTREAM EMBED API JS FILE ???
<script type="text/javascript">
$(document).ready(function () {
var viewer = UstreamEmbed("PlayerIframe");
$('#link1').click(function(){ viewer.callMethod('seek', 0);});
$('#link2').click(function(){ viewer.callMethod('seek', 60);});});
</script>
BODY :
<iframe id="PlayerIframe" src="https://video.ibm.com/embed/recorded/124808555?autoplay=true&showtitle=false" webkitallowfullscreen allowfullscreen frameborder="no" width="960" height="540" ></iframe>
<ul class="list">
<li><a id="link1" href="javascript:;">INTRODUCTION</a></li>
<li><a id="link2" href="javascript:;">PART-1</a></li>
</ul>
Thanks in advance
Best Regards
Related
I'm trying to setup basic prototype web pages to test UX design in code. And want to recycle html files such as left navigation. Trying to use Vue to do this so that I can also learn Vue. I do not have access to the artifactory (company policy). So I cannot use things other than this http vue loader package that I found. So far, I was able to add external vue which is comp-nav. But from here, I want to pass title="Service" from index.html to comp-vue. How do I do that? Any help would be great! BTW, using Apache2 that came with mac to run.
index.html
<!DOCTYPE html>
<html lang="en">
<title>App</title>
<!-- Vue2 -->
<!-- from https://github.com/FranckFreiburger/http-vue-loader -->
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<comp-nav title="Service"></comp-nav>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
components: {
'comp-nav': httpVueLoader('components/comp-nav.vue')
}
});
</script>
</body>
</html>
components/comp-nav.vue
<template>
<div id="nav">
<div class="nav-header">
<div class="header-title"><a>{{ title }}</a></div>
<div class="header-close">U</div>
</div>
<div class="nav-body">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div><!-- #nav -->
</template>
Based on the example from the docs, you could define a component prop in comp-nav.vue:
<template>
<div class="header-title">{{ title }}</div>
</template>
<script>
module.exports = {
props: ['title']
}
</script>
The Sheety API is great but I cannot make it work with Vue.
The only included example uses jQuery with handlebars.js which, like vue.js, uses double mustache syntax that collides.
<html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
var template = Handlebars.compile($('#item-template').html())
$('#items').html(template(data))
})
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>
Is there a way to make this example work inside the Vue component? Most preferably, to make it work without having to import the handlebars.js or jQuery?
Please mind that I am an exploratory designer, not a well-versed js coder, so I would greatly appreciate a working example :)
I am in learning phase of vue.js and here is my index.html code as follows:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
and code of index.js is as follows:
Vue.component('todo-item', {
template: '<li>Todo 1</li><li>Todo 2</li>'
})
var app = new Vue({
el: '#app'
})
now in the output, I am getting only one <li>Todo 1</li> not the second Todo 2.
Can anyone let me know why it is happening?
In case I repeat the <todo-item></todo-item> in index.html then it is repeating Todo 1, should not it display Todo 2 after Todo 1?
I have gotten the answer, It was happening because
Component template should contain exactly one root element.
and I was using two <li> in the same template without a root element.
So I have changed in the template as
template: '<ul><li>This is a todo</li><li>Another work</li></ul>'
and removed <ul> from index.html. It is working fine now.
Is it allowed if tooltip is not having an href component?
Here is my code :
<a data-toggle="tooltip" title="Please click on map of your precise location"><i class="fi flaticon-question"></i></a>
I removed the href because if I click on the tooltip, the web goes to top of the page (on mobile screen). Is there any other best practice for this?
Does it have to be an anchor at all? You should be able to just do something along the lines of.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<i class="glyphicon glyphicon-question-sign"
data-toggle="tooltip"
data-placement="bottom"
title="Contextual help for mouse/touch users">
</i>
<span class="sr-only">Contextual Help for Screen Readers</span>
Unless you're help icon should go somewhere it probably shouldn't be an anchor. The only thing I've added is the sr-only block which will allow screen readers to read out your contextual help.
Alternatively you can make sure that the anchor doesn't move the page by attaching an event to it and preventing the default behaviour.
//untested!
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
//comment the following line out to see page move on click
$('a[data-toggle="tooltip"]').click(function(e){e.preventDefault()})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/><br/><br/>Your icon is below here to show the lack of scrolling<br/><br/><br/><br/><br/><br/><br/>Keep going...<br/><br/><br/><br/><br/><br/><br/><br/><br/>Just a little more<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" data-toggle="tooltip"
title="Please click on map of your precise location">
<i class="glyphicon glyphicon-question-sign"></i>
</a>
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellite window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks!
Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW