I have the following demo page to test Shaka Player for my use case. I'd like to play live content given in an mpd file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.2/shaka-player.compiled.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/4.3.2/controls.css">
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script src="main.js"></script>
<title>Salt TV Client</title>
</head>
<body>
<header id="header">
<h1 class="display-6 text-center">Salt TV Client</h1>
<hr />
</header>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<main class="container">
<h1>Guarda RSI La1 HD</h1>
<br />
<div class="ratio ratio-16x9" id="video-container">
<video controls id="video" playsinline></video>
</div>
</main>
<footer>
<hr />
<div class="container">
<span id="digital-clock"></span>
</div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script>
const manifestUri = /* My URL */
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
async function initPlayer() {
// Create a Player instance.
const video = document.getElementById('video');
const player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
await video.play();
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (e) {
// onError is executed if the asynchronous load fails.
onError(e);
}
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
</html>
When I want to get acces to the ui to configure it, I get video.ui is undefined.
What could the problem be?
Thanks.
I'm expecting the video.ui Object to be defined, so that I can use it to configure the UI of Shaka Player.
Related
Hello last few days I am trying to learn call API from different site. Now I try to build a website like this. My task is call API from The MealDB and implement a site and also show API data in card view and when I click any card it's show another view where contain all ingredients
but I can't call the API from The mealDB I wanted to implement this website by calling the mealBD API. But whenever I tried it's not work as I want. I don't know how to call that API.
My project is given below :I can't call the API
this is my js code
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data))
const displayFoods = foods =>{
const foodsDiv = document.createElement('food-items');
foods.forEach(meals=>{
const foodDiv = document.createElement('div');
foodDiv.className = 'meals';
const foodInfo = `
<h3>${meals.strMeal}</h3>
`;
foodDiv.innerHTML = foodInfo;
foodsDiv.appendChild(foodDiv);
});
}
I used bootstrap in html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cooking master</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Cooking master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-end"
id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#recipes">Recipes</a>
<a class="nav-link" href="#blog" tabindex="-1">Blog</a>
</div>
</div>
</div>
</nav>
</header>
</section>
<section class="container input-style">
<main class="d-flex justify-content-center">
<div class="input-group mb-3 input-filed ">
<input type="text" class="form-control" placeholder="Search for Meal...." aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text bg-color text-light" id="basic-addon2">Search</span>
</div>
</main>
</section>
<div id="food-items">
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
The result json is an object with property meals. So you cannot execute forEach on that. You need to run on foods.meals
Below is your working code.
(function(){
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data))
const displayFoods = foods =>{
const foodItemsDiv = document.getElementById('food-items');
foods.meals.forEach(meal=>{
const foodDiv = document.createElement('div');
foodDiv.className = 'meal';
const foodInfo = `
<h3>${meal.strMeal}</h3>
`;
foodDiv.innerHTML = foodInfo;
foodItemsDiv.appendChild(foodDiv);
});
}
})();
<div id="food-items">
</div>
Try this in your browser console:
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> console.log(data))
You'll see an end result like this:
{
meals: [
{ // meal 1 },
{ // meal 2 },
{ // meal 3 },
{ // meal 4 }
]
}
Inside your displayFoods function, you're trying to call forEach on this data, but forEach can only operate on arrays, not objects.
Instead, you need to pass the meals array inside the returned data to your function:
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> displayFoods(data.meals)) // data.meals instead of data
$(function(){ $.get("header.html", function(data){
$("#header").html(data); }); });
So I am eventually going to have to do this in java but for now I just want to do this in the javascript extension known as jquery but any format that makes this work will please me.
I have 2 files:
header.html
<!-- Header -->
<div class="row navigationBar">
<!-- Company Logo -->
<div class="col-2">
<img src="images/GCB.png" alt="GCB-logo" class="gcb-logo">
</div>
<!-- Top Bar -->
<div class="col-md-10">
<div class="top-navigationBar">
<nav class="navbar navbar-expand-md quick-help">
<!-- Collapse Button -->
<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Quick Help -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">CONSULTATION</a>
</li>
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">CUSTOMER SUPPORT</a>
</li>
<li class="nav-item">
<a class="nav-link black-font blue-line" href="">TIẾNG VIỆT</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Bottom Bar -->
<div>
<nav class="navbar navbar-expand-md bottom-navigationBar">
<div class="row bottom-navigationBar">
<!-- Quick Navigation -->
<div class="col-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<button type="button" class="btn btn-primary btn-sm thick-font button-flat-bottom">Checking</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Savings</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Loans</button>
</li>
</ul>
</div>
<!-- Bank Name -->
<div class="col-md-4">
<h1 class="bank-name">Go<span class="orange-text">Com</span>Bank</h1>
</div>
<!-- Login Form -->
<div class="login-container">
<form action="/action_page.php">
<input type="text" placeholder="Username" name="username">
<input type="text" placeholder="Password" name="psw">
<button type="button" class="btn btn-primary btn-sm">Login</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Header End -->
and the webpage
webpage.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="header"></div>
</body>
</html>
I am trying to load header.html and set it into the id=("header") of webpage.html
Currently the only code that works is $("#header").html("")
Using this format I can set things like
<p>Hello World</p>
but it doesn't work when I want to add the loaded header.html items.
--NEW CONTENT WITH ANSWER IN PROGRESS--
So none of the answers have even come close to being correct but I have came up with my own solution that should in theory work but I have been unable to implement it myself.
Before the res.send(/*HTML Code Here*/);
I propose this solution::
A: load the HTML file into a var
B: load the insertion code into another var
C: A.replace("ReplaceKeyword", B);
D: res.send(A);
This method has worked for me when I use java and it sometimes works with jQuery but I can't seem to find the appropriate syntax to do this inside of javascript.
If you can provide the code to implement this then I can mark your response as the answer.
Note
A is something like
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--InsertionPoint-->
</body>
</html>
B is something like
<p>Hello World</p>
Replace keyword in this instance would be ""
The End result that is sent in the res.send() is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
=====================================
try this
<script>
document.getElementById("header").innerHTML='<object type="text/html" data="header.html"></object>';
</script>
Edited for new method
i found this on w3school. I already try it and i think this can solve your problem
https://www.w3schools.com/howto/howto_html_include.asp
<script>
includeHTML();
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
elmnt.innerHTML = this.responseText;
}
if (this.status == 404) {
elmnt.innerHTML = "Page not found.";
}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
on your body tag add something like this
<div w3-include-html="header.html"></div>
as long as you add w3-include-html attribute it will work, and you can add your stylesheet at the top of webpage.html
I have a simple page where I've tried to get to different sections via anchor-links. I justed wanted to get this "jumps" to smooth scrolls. After trying different jQuery-Code-Snippets I'm hoping that some of you could give me a tip, why it's still not working on my Django-Site.
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Import Java -->
{% load javascript_settings_tags %}
<script type="text/javascript">{% javascript_settings %}</script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- CSS -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<title></title>
<!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="/media/navbar/Nav_Logo_PG_681_4.svg" width="30" height="30" alt="">
</a>
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}#info">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}#hoerproben">Hörproben</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}#band">Band</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}#anfragen">Anfrage</a>
</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="section" id="info">
<div class="section" id="hoerproben">
<div class="section" id="band">
<!-- JavaScript Smooth Scroll -->
<script src="{% static 'js/java.js' %}">
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
I've taken the JS-Code from CSS-Tricks.com
Ok let's go, your problem is not related with Django as i edited, the only way that django maybe not allow you to run your code is if you place it in other file and not use static app right, so just for clearily i'll put some static code bellow:
{% load static %}
Keep in mind inside your {% javascript_settings %} you need to have {% load static %} too
Keep in mind to use python manage.py collectstatic too
This end anything related with Django that maybe impact your code...
Since in your snippet you placed django tags this will not run on snippet, so consider placing only the javscript code related as snippet (to run and check if this works or not)
Considering that you js code works out side the django environment, you problem messed up some steps that i mentioned above, try place this code inline in your page instead of javascript file, if this dont work inline your code probabily dont work or you are missing some configuration.
Questions I've already looked at:
Bootstrap JavaScript not working
twitter bootstrap drop down suddenly not working
Complete list of reasons why a css file might not be working
My Bootstrap styles seem to have suddenly stopped being applied, resulting in pages that look something like this. I'm using the layout generated by ASP.NET MVC 5, so there should be a navbar at the top, among other things. Ignore the red banner, the button doesn't show on that page anyway.
Nothing looks amiss in the dev tools -- console, network, etc. all look normal with no errors. All the files are loaded, and changing their order changes nothing. All of the .css and .js files are loaded from the local file system. I even reverted to a commit from yesterday, when the site was working fine, but the site still displays incorrectly.
I've tried turning it off and on again, now I'm out of ideas.
Edit: Same results, no matter the browser. I'm at a total loss here.
Code, as requested:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/alertify.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/alertify.js"></script>
<script src="/Scripts/Custom/JavaScript/utility.js"></script>
<script src="/Scripts/jquery.mask.js"></script>
<script src="/Scripts/autosize.js"></script>
<script src="/Scripts/Custom/register-modal.js"></script>
<script>
//<!-- Google Analytics -->
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'shh', 'none');
ga('send', 'pageview');
//<!-- End Google Analytics -->
</script>
<!-- FontAwesome -->
<link href="/Content/FontAwesome/fontawesome-all.css" rel="stylesheet" />
</head>
</html>
change the <nav> tag in layout file with this
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
tl;dr OP updated from Bootstrap 3 -> 4 without updating HTML.
A week ago, I updated to Bootstrap v4(a?) via NuGet, without paying attention to the change in major version number. Apparently my cache didn't get cleared until a week later (when I asked this question), so I had forgotten the update even happened.
Bootstrap 4 is a major rework, so the bulk of my Bootstrap HTML became invalid.
Reverting Bootstrap fixes everything.
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079