This question already has answers here:
How to set the zIndex layer order for geoJson layers?
(3 answers)
Leaflet layers Z-index
(1 answer)
Closed 3 years ago.
I need to set z-index to my geosjson layers created in leaflet that is bar chart and a choropleth. I tried doing mymap.addLayer(ChinaBarChart).setZIndex(2) but it doesnt work at all. Is there any other alternative ways to set the z-index of the layers? The setZIndex method was based on a leaflet method, if you do know of a way to making it work do let me know?
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<script src="leaflet-motion.js"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
// Hides the choropleth at the beginning
if($(1 == 1)){
mymap.removeLayer(ChinaArea);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(IndiaBarChart);
mymap.addLayer(ChinaBarChart);
mymap.addLayer(MalaysiaBarChart);
mymap.addLayer(UaeBarChart);
mymap.addLayer(TaiwanBarChart);
mymap.addLayer(IndonesiaBarChart);
mymap.addLayer(TurkeyBarChart);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(ChinaArea);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(ChinaArea);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>
Related
This question already has answers here:
Why is simple JavaScript code not running?
(3 answers)
Closed 1 year ago.
I'm trying to get a JS slider to work. I'm using Brackets as my code environment.
I have tried creating a local .js file and putting
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script type="text/javascript" src="my.js"></script>
line in <head>
I have also tried just putting only <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> in <head> and then putting all of the script code within a <script> tag in <head>.
CodePen for that:
https://codepen.io/hiarooo/pen/zYNboJq
As you can see, the slider doesn't function properly.
However, I have noticed that if I simply put the code in the JS box of CodePen (I have commented it, but you can try uncommenting it to see what I mean) then the Slider functions perfectly.
What is wrong with the way I am doing things? I do not understand.
Thank you for any advice.
<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>Crypter | Upload01</title>`enter code here`
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght#700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="my.js"></script>-->
</head>
<body>
<section class="section-slider">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div id="slider-wrap">
<ul id="slider">
<li data-color="#1abc9c">
<div>
<h3>What is cat</h3>
<span>it is a cat</span>
</div>
<i></i>
</li>
<li data-color="#3498db">
<div>
<h3>Slide #2</h3>
<span>Sub-title #2</span>
</div>
<i class="fa fa-gears"></i>
</li>
<li data-color="#9b59b6">
<div>
<h3>Slide #3</h3>
<span>Sub-title #3</span>
</div>
<i class="fa fa-sliders"></i>
</li>
<li data-color="#34495e">
<div>
<h3>Slide #4</h3>
<span>Sub-title #4</span>
</div>
<i class="fa fa-code"></i>
</li>
<li data-color="#e74c3c">
<div>
<h3>Slide #5</h3>
<span>Sub-title #5</span>
</div>
<i class="fa fa-microphone-slash"></i>
</li>
</ul>
<!--controls-->
<div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
<div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
<div id="counter"></div>
<div id="pagination-wrap">
<ul>
</ul>
</div>
<!--controls-->
</div>
</div>
</section>
<script>
//current position
var pos = 0;
//number of slides
var totalSlides = $('#slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('#slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
//next slide
$('#next').click(function(){
slideRight();
});
//previous slide
$('#previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('#slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('#pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('#slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('#counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('#pagination-wrap ul li').removeClass('active');
$('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}
</script>
</body>
Try putting this way it works fine,because If you have code in your JavaScript that alters HTML as soon as the JavaScript file loads, there won't actually be any HTML elements available for it to affect DOM yet, so it will seem as though the JavaScript code isn't working, and you may get errors.Thanks :)
I managed to create some bar charts on my leaflet maps and made a reference to it so that it the chart can be shown or hidden based on the checkbox in the side menu. However, only one bar chart can be shown and hidden at a time whereas I need to create several more barcharts and make them all appear at the same time when the checkbox is checked. There is a way to do this but that would mean I have to manually hard code the barcharts which is not very efficient. If you do know of a shortcut that doesnt requires hard code and still create several more barcharts and show/hidden at the same time do let me know.
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(barChartMarker);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(barChartMarker);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(barChartMarker);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
//$("").show(500);
}
else if($(this).prop("checked") == false){
//$("").hide(500);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>
// leaflet-barchart.js
var options = {
data: {'dataPoint1': 22,'dataPoint2': 36,'dataPoint3': 42,'dataPoint4': 20},
chartOptions: {
'dataPoint1': {fillColor:'#3f0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint2': {fillColor:'#6a0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint3': {fillColor:'#0f6ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint4': {fillColor:'#0f9ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
}
},
};
var barChartMarker = new L.BarChartMarker(L.latLng(20.894, 78.962), options).addTo(mymap);
i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-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>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}
Check the second Q/A pair from the Kendo UI Mobile FAQ.
I'm using this plugin: http://wordpress.org/plugins/wordpress-sliding-drawer-content-area/ on my Wordpress site that creates a drawer on the side for my widgets. It works perfectly fine on my local server.
Unfortunately, I have to convert each of the Wordpress pages into HTML pages for use on my client's intranet servers. That's when the drawer refuses to stay closed on page load unlike before.
Here's the js:
jQuery(document).ready(function() {
if(jQuery('#sod-drawer-plugin.left').length >0){
var $handle = jQuery('#sod-drawer-plugin.left #sod-drawer-handle');
var $plugin = jQuery('#sod-drawer-plugin.left');
var $adjustment = (parseInt($handle.outerWidth())/2)-parseInt($handle.outerHeight())/2;
if (jQuery.browser.msie){
$plugin.css({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.css({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
});
$handle.click(function(){
$plugin.animate({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.animate({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
});
});
}else{
$plugin.css({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.css({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
});
$handle.click(function(){
$plugin.animate({
left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
});
$handle.animate({
left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
});
});
}
}
});
And the HTML:
<!DOCTYPE html>
<!-- saved from url=(0088)./work-life-balance/enhance-your-professional-standing/ -->
<html lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Enhance Your Professional Standing | Staff Benefits and Work-life Initiatives</title>
<link rel="stylesheet" id="sod_drawer_css-css" href="./style(1).css" type="text/css" media="all">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./sod_drawer.js"></script>
<link rel="stylesheet" type="text/css" href="./saved_resource.css">
<link rel="stylesheet" type="text/css" media="all" href="./style.css">
</head>
<body class="page page-id-167 page-child parent-pageid-4 page-template-default">
<div class="sod-drawer left" id="sod-drawer-plugin" style="left: -280px;"> <!--- This value changes to left:0px when loaded on the browser --->
<div id="sod-drawer-handle" class="pull black rotate" style="left: 240px;">
<div class="tag"><p>Contents</p></div>
</div>
<div class="content">
<div class="sod-drawer-inner">
<div class="full" id="sod-drawer-1">
<div id="execphp-2" class="sod-drawer-widget widget_execphp">
<div class="execphpwidget">
<div id="sidebar">
<h1>Staff Benefits and Work-life Initiatives</h1>
<div id="access" role="navigation" class="desc">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Introduction
</li>
<li id="menu-item-626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-626">Epilogue</li>
</ul>
</div>
</div><!-- #access -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm not proficient with Javascript so a little explanation would be greatly appreciated :)
Is the jQuery script library loading properly? I am doubtful of the src URL of your script at the document head:
<script type="text/javascript" src="./jquery.js"></script>
These URLs might be the problem. It may work correctly in your local server, but not on a live URL. You may need to change it to "/jquery.js" because the "." refers to the current directory. The "/" right at the start refers to the root URL.
<script type="text/javascript" src="/jquery.js"></script>
Please try it and let me know the result.
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