We are building a simple web page to reproduce .mpd video using the dash.js player. Having a bit rate selector is a must, that is why we added controlbar.js to the video.
ControlBar is implementent properly as the bitrate selector shows the available bit rates. But when clicking on the we cannot see the difference.
We did a small research and having the player.setFastSwitchEnabled(true); function is recommended but this is the error we got:
Uncaught TypeError: player.setFastSwitchEnabled is not a function
at startVideo ((index):26)
at onload ((index):35)
at window.onload (jquery.waypoints.min.js:7)
How can we implement the function? Is any other action needed in order to make the bitrate change?
Do we need to connect the setQualityFor() function to this part of the code:
<li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
<li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
<li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
<li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
<li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
<li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
<li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
<li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
<li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
<li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
<li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
</ul>
Please, find the index.html attached below:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Europea</title>
<meta name="description" content="">
<link rel="stylesheet" href="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/controlbar.css">
<!-- Links apariencia -->
<script class="code"
src="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/ControlBar.js"></script>
<script class="code" src="http://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>
<script class="code">
function startVideo() {
const url = 'http://videoeuropea.es/videos/Feria_DASH/Feria.mpd';
var videoElement = document.querySelector(".videoContainer video");
var player = dashjs.MediaPlayer().create();
player.initialize(videoElement, url, true);
var controlbar = new ControlBar(player);
controlbar.initialize();
player.setFastSwitchEnabled(true);
}
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
</head>
<body onload="startVideo()" data-spy="scroll" data-target=".site-navbar-target" data-offset="100">
<div class="dash-video-player code">
<!-- HTML structure needed for the ControlBar -->
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay="" src="blob:http://reference.dashif.org/682c3720-89f2-4987-8f30-494795fa6b10">
</video>
<div id="videoController" class="video-controller unselectable">
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01">
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
<div id="trackSwitchBtn" class="control-icon-layout hide" title="A/V Tracks">
<span class="icon-tracks"></span>
</div>
<div id="captionBtn" class="btn-caption control-icon-layout hide" title="Closed Caption">
<span class="icon-caption"></span>
</div>
<span id="videoDuration" class="duration-display">00:00:00</span>
<div class="seekContainer">
<div id="seekbar" class="seekbar seekbar-complete">
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
<div id="seekbar-play" class="seekbar seekbar-play"></div>
</div>
</div>
<div id="bitrateMenu" class="menu hide unselectable menu-item-unselected" style="left: 550px; top: 364px;">
<div id="video">
<div class="menu-sub-menu-title">Video</div>
<ul id="videoContent" class="video-menu-content">
<li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
<li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
<li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
<li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
<li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
<li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
<li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
<li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
<li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
<li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
<li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I think you are using older version of ControlBar.js. See that you take latest code from here.
setFastSwitchEnabled has been removed.
Now you need to do the following to set quality manually.
Call getSettings() on your player to get settings.
Set settings.streaming.abr.autoSwitchBitrate = false.
User player.setQuality() to set quality from bitrateList.
Related
I am new to web development so please forgive for any shortcomings.
I have been working on a website for a project for a while now and now I have to add a specific countdown on it(Keith Wood Countdown) the "Pad with zeroes:" one.
The problem is that, I do not know how to set the target date on it to countdown to and how to attach it to a particular div.
I have searched the Internet and there are similar questions on stackoverflow but they are for an older version of this countdown. And nowhere is there any answer for how to attach it to a div.
Here's my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<meta name="description" content=" Welcome to La Martiniere Model United Nations 2015">
<meta name="keywords" content="lmun,lucknow mun,la martiniere mun,la martiniere college,la martiniere model un,la martiniere model united nations,lmun 2015">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Slideshow *Starts* -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- Slideshow *Ends* -->
</head>
<body>
<div class="brdr_top"></div> <!-- A little gold border at the top -->
<div class="header" id="banner">
<img src="images/Website_bannertxtcombo.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
<img src="images/Logo_Blue_Small.png" id="banner_logo"/> <!-- The LMUN Logo -->
</div>
<div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->
<div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>
<div class="nb_item">ABOUT US <span id="dArrow"></span>
<ul id="abtus_menu">
<li class="nb_item_li"><span id="space2"></span>LA MARTINIERE COLLEGE</li>
<li class="nb_item_li"><span id="space2"></span>LMUN 2015</li>
<li class="nb_item_li"><span id="space2"></span>SECRETARIAT</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
<ul id="rgstr_menu">
<li class="nb_item_li"><span id="space2"></span>INDIVIDUAL</li>
<li class="nb_item_li"><span id="space2"></span>DELEGATION</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
<ul id="comt_menu">
<li class="nb_item_li"><span id="space2"></span>African Union</li>
<li class="nb_item_li"><span id="space2"></span>Arab League</li>
<li class="nb_item_li"><span id="space2"></span>SPECPOL</li>
<li class="nb_item_li"><span id="space2"></span>CCPCJ</li>
<li class="nb_item_li"><span id="space2"></span>UNSC</li>
<li class="nb_item_li"><span id="space2"></span>Ad - Hoc</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>RESOURCES <span id="space"></span></div>
<div class="nb_item">EVENTS <span id="dArrow"></span>
<ul id="evnt_menu">
<li class="nb_item_li"><span id="space2"></span>KEYNOTE SPEAKERS</li>
<li class="nb_item_li"><span id="space2"></span>SOCIALS</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>SPONSORS</div>
<div class="nb_item"><span id="space"></span>CONTACT US<span id="space"></span></div>
</div>
<div id="slideshow">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/ff.jpg" alt="" title="" id="wows0_0"/></li>
<li><img src="data0/images/dsc_0160001.jpg" alt="jquery content slider" title="" id="wows0_1"/></li>
<li><img src="data0/images/la_martiniere_college_building,_lucknow.jpg" alt="" title="" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/ff.jpg" alt=""/>1</span>
<span><img src="data0/tooltips/dsc_0160001.jpg" alt=""/>2</span>
<span><img src="data0/tooltips/la_martiniere_college_building,_lucknow.jpg" alt=""/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">image carousel by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="countdown"></div>
</body>
</html>
I want to add the countdown to the countdown div.
padZeros is now padZeroes. I've inserted variable names for the year, month and day that the countdown approaches. You attach to the target <div> by calling $("#yourDivId").countdown() with the appropriate options.
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.countdown.css">
<style type="text/css">
body > iframe {
display: none;
}
#defaultCountdown {
width: 240px;
height: 45px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
</head>
<script>
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
</script>
<body>
<h1>jQuery Countdown Basics</h1>
Counting down to:
<div id="year"></div>
<div id="defaultCountdown"></div>
</body>
</html>
According to the documentation:
<script>
$(function() {
var mydate = new Date();
mydate = new Date(mydate .getFullYear() + 1, 11 - 1, 6);
$('#countdown').countdown({until: mydate });
]);
</script>
Add this code right before your closing </body> tag.
I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>
So I just started a new site in bootstrap and I'm working on a nav-tabs design. I've followed the directions to the tee and have almost copied and pasted at this point just to get it to function but alas I have several problems:
(1) The nav-tabs do not change on click i.e. the url changes to my element id but the actual tab does not become "active" (Home remains depressed while the others stay unpressed)
(2) The tab-content div only displays the content marked by class="active".
I have included the necessary jquery and bootstrap js scripts and I believe they are in the correct order but no matter what I do these tabs never switch their active state to the one that is clicked.
Here is my html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I have attempted the various solutions I could find including the addition of
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Underneath the bootstrap.min.js script but like I said just about anything I've done has produced NO change whatsoever. Everything else looks fine on the page but a little guidance here would truly get me started on the right foot. I haven't been working with bootstrap for more than a few hours so forgive my ignorance. The docs say that bootstrap does not even require javascript to toggle the tabs when data-toggle is used so I'm quite confused on what the right answer is.
:EDIT: The first answer was correct. Placing the tags right before the closing body tag did not improve functionality but replacing my scripts with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Did indeed work. I my initial jquery and bootstrap files were in the correct place but it seems they are not completely functional/broken in some way or something. Thanks again!
By the way: Am I able to link to these repositories constantly or will I have to update my pages when new updates of bootstrap/jquery come out? What I'm asking is will these repositories will be deleted?
The only thing I can think of (but what usually causes this issue) is your <link> and <script> tags are in the wrong spot. Copying your code to an editor of mine and adding jquery.min.js and bootstrap.min.js right before the closing </body> tag caused it to work just fine for me. Here is the HTML file:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Note: Replace .../ with the correct URL to bootstrap.min.css, jquery.min.js and bootstrap.min.js. Hope that helps!
The tabs are working fine as can be seen here: https://jsfiddle.net/AndrewL32/nh6ma48r/
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
You need to keep bootstrap.js as well as the above script that calls the function above on your <head></head> section but below your jQuery.
Also, please replace your:
<script src="bootstrap.js"></script> with this <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
and your
<script src="jQuery"></script> with this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(issue could be because your js files are edited, moved or missing)
I am new with kendo ui. I am using Kendo UI for my new phonegap project that is developed usin xCode. I had creates a html page which append tag. It work properly when I test on browser. But the same doesn't work in iOS simulator.
Below is my current code:
<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/Initial.js"></script>
</head>
<body>
<div data-role="view" id="drawer-listSurvey" data-layout="drawer-layout" data-title="Create Survey">
<div>
<ul data-role="listview" class="inboxList" id="new-questions">
</ul>
<ul data-role="listview" data-style="inset">
<li data-icon="add"><a data-role="button"data-rel="actionsheet" href="#actionsheet">Add Question</a></li>
<li data-icon="organize"><a>Add Page</a></li>
</ul>
</div>
<div id="footer">
<ul id="actionsheet" data-role="actionsheet" data-popup='{ "height": "auto", "width": 200, "direction": "left" }'>
<li></li>
<li><a onclick="addMultipleChoice()">Multiple Choice</a></li>
<li><a>Dropdown</a></li>
<li><a>Comment Box</a></li>
<li><a>Image</a></li>
<li><a>Text Description</a></li>
</ul>
</div>
</div>
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
<a data-role="button" data-align="right" data-rel="actionsheet" href="#actionsheet">+</a>
</div>
</header>
</div>
<script>
kendo.mobile.ui.Drawer.current = null;
</script>
<script>
function addMultipleChoice(){
$("#new-questions").append("<div id=\"question\"><ul>Wich is the vowel?<li><input type=\"checkbox\"/><label>A</label></li><li><input type=\"checkbox\"/><label>B</label></li><li><input type=\"checkbox\"/><label>C</label></li><li><input type=\"checkbox\"/><label>D</label></li></ul></div>");
}
</script>
</body>
</html>
Any help will be appreciated.
Thanks in advance
In general using jQuery append() to add items to a Kendo UI Mobile ListView is not supported and not recommended. You should use the Kendo UI's append method, as shown here:
http://docs.telerik.com/kendo-ui/api/mobile/listview#methods-append
So here we are: http://greeceinsiders.com/VLASIOS/offcanvas/studio.html
I followed the instructions for having the orbit slider in a page but this one doesnt seem to be working. I read from other users that they experience similar problems. Can anyone help?
<ul data-orbit class="orbit-slides-container">
<li data-orbit-slide="1">
<img src="images/studio/1.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="2">
<img src="images/studio/2.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="3">
<img src="images/studio/3.jpg" />
<div class="orbit-caption">...</div>
</li>
</ul>
and at the end of the closing body tag I include the javascripts:
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document.write('<script src=/javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<!-- Included JS Files -->
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/jquery.js"></script>
<script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="javascripts/foundation/jquery.placeholder.js"></script>
<script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="javascripts/foundation/jquery.offcanvas.js"></script>
<script src="javascripts/foundation/app.js"></script>
<script>
$(document).foundation();
</script>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
You don't have Zepto uploaded to your server or it's in the wrong file location. You're getting the following NOT FOUND error: http://greeceinsiders.com/javascripts/vendor/zepto.js