I am using flexSlider in my website.I am using Slider with Carousel Slider as Navigation .It is not working,It is giving error
"Uncaught TypeError: slider.slides.on is not a function"
in the console of my browser.I don't know how to solve this problem?
Here is the code
<html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
</head>
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="back1.jpg" />
</li>
<li>
<img src="back2.jpg" />
</li>
<li>
<img src="back3.jpg" />
</li>
<li>
<img src="back4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="back1.jpg" />
</li>
<li>
<img src="back2.jpg" />
</li>
<li>
<img src="back3.jpg" />
</li>
<li>
<img src="back4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</html>
https://www.drupal.org/node/2401623 => I ran into this same error. It turns out that the latest Flexslider library requires jQuery 1.7+. Installing the jQuery Update module resolved the issue for me.
Related
Hi I'm usually using flexslider. Now i need a thumnail slider. But thumbnail should be vertical, it should have arrows and while clicking on it have to scroll upwards and downwards..Is that possible with flex slider? Can you guys help me?
Here is my code...
<section class="gallery-details-wrap row-fluid">
<div id="slider" class="gallery-details-slider flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="gallery-details-carousel flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</section>
my script...
$(window).load(function(){
$('.gallery-details-carousel').flexslider({
animation: "slide",
controlNav: false,
directionlNav: true,
animationLoop: false,
slideshow: false,
itemWidth: 111,
itemMargin: 5,
maxItems: 5,
asNavFor: '.gallery-details-slider',
});
$('.gallery-details-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: ".gallery-details-carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
I am using materializecss to hover a button to get drop down menu. But i am not able to achieve this using Alpha-1 version.
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
See Working Demo Here :
$(document).ready(function(){
$('.dropdown-button').dropdown({
hover: true, // Activate on hover
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>
<a class='dropdown-button btn' href='#' data-target='dropdown1'>Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
When I resize my window, Flexslider does not resize. You can see my working code here.
I am following FlexSlider's example, and have reduced all possible variables.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
</ul>
</div>
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
Turns out it's an issue with version 2.6.4 of FlexSlider. In the meantime, I just used version 2.6.3
I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code:
i need a controler nav on both sliders, instructions are here:
http://www.woothemes.com/flexslider/
Does anyone what i'm doing wrong?
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.esens.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.esens.nl/assets/templates/esens/flexslider/jquery.flexslider-min.js"></script>
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
</script>
<!-- Somewhere in the of your page -->
<div id="main-slider" class="flexslider">
<ul class="slides">
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
</ul>
</div>
<br><br><br>
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
</ul>
</div>
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
</script>
My Live solution in Jsfiddle here
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
/*-----------------------------------------------------------------------------------*/
/* DOC Javascript JS */
/*-----------------------------------------------------------------------------------*/
(function($, window){
/*-----------------------------------------------------------------------------------*/
window.app = {};
/*--------------------------------------------------------------------------------*/
app.uiSlide =
{
/* Test elem and Call flexslider() */
flexslider: function ( elem, params ) {
// Test if elem exist in dom
if( $(elem).length > 0 ){
// Call function
$(elem).flexslider(params);
};
},
/* Define and init all elem */
init: function () {
// 1 Define Objects Collection
var elem =
[
// Slider A
{
slide: '#flexslider-a',
param: {
animation: 'slide',
controlsContainer: '.flex-container'
}
},
// Slider B
{
slide: '#flexslider-b',
param: {
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
smoothHeight: true,
}
}
// Add Slide XYZ
//...
//...
];
// 2 Init All
for( var i=0; i < elem.length; i++ ){
this.flexslider( elem[i].slide, elem[i].param )
}
}
};
/* init all function() */
app.start =
function(){
this.uiSlide.init()
};
/*--------------------------------------------------------------------------------*/
$(document).ready(function(){app.start();})
/*-----------------------------------------------------------------------------------*/
})(jQuery, window)
</script>
<!-- Somewhere in the of your page -->
<!-- SLIDER A -->
<div id="flexslider-a" class="flexslider">
<ul class="slides">
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
</ul>
</div>
<br><br><br>
<!-- SLIDER B -->
<div id="flexslider-b" class="flexslider">
<ul class="slides">
<li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
</ul>
</div>
Solved by OP on question:
I have it figured out, i was using some old files. I use flexslider,
when i follow instructions on their website it doesn't work for
multiple sliders, this is the code:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.xxx.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.xxx.nl/assets/templates/esens/flexslider/jquery.flexslider-min.js"></script>
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
</script>
<!-- Somewhere in the of your page -->
<div id="main-slider" class="flexslider">
<ul class="slides">
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
</ul>
</div>
<br><br><br>
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li>
<li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
<li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
</ul>
</div>
I am very new to dojo (And this is my first question on stackoverflow so go easy :) ). I am working on a new project at work and was asked to investigate dojo mobile. The purpose of the following code is just to test the different available widgets that dojo mobile provides in a simple html page.
I have come across the following issue, when i run this code in a browser or deploy it to a mobile device there seems to be an issue with the release event that should fire after clicking the mouse or releasing on a touch screen, important to note is that this only happens with widgets that involve dragging an object. For example, the buttons and the tab bar works fine. This is only with SpinWheelDatePicker/SpinWheelTimePicker, slider, switch etc. In the developer console i get the following error
In Chrome:
Uncaught TypeError: Object #<klass> has no method 'remove' dojo.js:17
_51d.disconnect dojo.js:17
_a.onTouchEnd libs/dojo/dojox/mobile/scrollable.js:401
_3e6 dojo.js:17
Event.Handler.Class.create.handleEvent prototype.js:5767
__method prototype.js:396
responder
In Firefox:
522.remove is not a function
[Break On This Error]
... function(){return _2f4.apply(window,arguments)&&_2f5.apply(window,arguments);};...
dojo.js (line 17)(
I am using 1.7.2 toolkit, and the project is deployed onto a worklight server.
Here is the code:
<!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Android DOJO Test</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link type="text/css" rel="Stylesheet" href="css/blackbird/blackbird.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/common/SpinWheel.css" >
<!-- <link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/iphone/iphone.css" type="text/css" media="screen" title="no title" /> -->
<script type="text/javascript" src="libs/blackbird/blackbird.js"></script>
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, mblAlwaysHideAddressBar:true"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
<script type="text/javascript">
var jsonData = {
items:[
{ src: "images/4242373_460s.jpg"},
{ src: "images/4242618_460s.jpg"},
{ src: "images/4242864_460s.jpg"},
{ src: "images/icon.png"},
{ src: "images/thumbnail.png"}
]
};
log.info('Attempting to load dojo libraries');
require(["dojox/mobile/parser",
"dojo/data/ItemFileReadStore",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/Carousel",
"dojox/mobile/Button",
"dojox/mobile/TabBar",
"dojox/mobile/ScrollableView",
"dojox/mobile/PageIndicator",
"dojox/mobile/SwapView",
"dojox/mobile/CheckBox",
"dojox/mobile/ToggleButton",
"dojox/mobile/TextBox",
"dojox/mobile/Switch",
"dojox/mobile/Slider",
"dojox/mobile/RadioButton",
"dojox/mobile/SpinWheelDatePicker",
"dojox/mobile/SpinWheelTimePicker",
"dojox/mobile/Overlay",
"dojox/gauges/GlossyCircularGauge",
"dojox/gauges/GlossyHorizontalGauge",
"dojox/gauges/GlossySemiCircularGauge",
"dojo/on",
"dojo/domReady!"
],
function(store, mobile, parser) {
log.info('Dojo libraries loaded succesfully');
});
function setTabBar(to){
if(to!=null){
var selectedTab = dijit.byId(to);
selectedTab.select();
}
else{
log.error('From or To parameter/s are empty or not a string value');
return;
}
}
</script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
<h1 data-dojo-type="dojox.mobile.Heading">DOJO TEST APP</h1>
<ul data-dojo-type="dojox.mobile.TabBar" id="mainTabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" id="homeBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="mainView" >Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="fadeBar" icon1="images/Button-Blank-Green-icon.png" moveTo="fadeView" >Fade</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="slideBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="slideView" >Slide</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="swapBar" icon1="images/Button-Blank-Green-icon.png" moveTo="swapViewExample" >Swap View</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="formBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="formButtons" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="carouselBar" icon1="images/Button-Blank-Green-icon.png" moveTo="carouselView" >Carousel</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="pickerBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="pickerView" >Picker</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="overlayBar" icon1="images/Button-Blank-Green-icon.png" moveTo="overlayView" >Overlay</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="gaugesBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="gaugeView" >Gauges</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="mainView" selected ="true">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="fadeView" transition="fade" onClick = "setTabBar('fadeBar');" >Fade</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="slideView" transition="slide" onClick = "setTabBar('slideBar');" >Slide</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="swapViewExample" transition="scaleIn" onClick = "setTabBar('swapBar');" >Swap View</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="formButtons" transition="scaleOut" onClick = "setTabBar('formBar');" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="carouselView" transition="swirl" onClick = "setTabBar('carouselBar');" >Carousel</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="pickerView" transition="flip" onClick = "setTabBar('pickerBar');" >Picker Examples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="overlayView" transition="zoomOut" onClick = "setTabBar('overlayBar');" >Overlay Eaxmples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="gaugeView" transition="zoomOut" onClick = "setTabBar('gaugesBar');" >Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="fadeView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Fade View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="slideView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Slide View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="swapViewExample">
<div data-dojo-type="dojox.mobile.View" selected="true">
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 1</h2>
<img src="images/4242373_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 2</h2>
<img src="images/4242618_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 3</h2>
<img src="images/4242864_460s.jpg">
</div>
</div>
</div>
<div data-dojo-type="dojox.mobile.PageIndicator" fixed="bottom"></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="formButtons">
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.Button" data-dojo-props='label:"Click me!", onClick:function(e){ alert("button clicked");return true; }'></button></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>CheckBox</span><br>
<div align="right"><input data-dojo-type="dojox.mobile.CheckBox" type="checkbox" data-dojo-props='onChange:function(checked){ alert("checked state changed to " + checked); },checked:true' /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Radio Button</span><br>
<div align="right"><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="true" name="radioGroup" value="yes" /><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="false" name="radioGroup" value="no" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Slider</span><br>
<div align="right"><input type="range" style="width:200px;" data-dojo-type="dojox.mobile.Slider" value="10" max="20" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Switch</span><br>
<div align="right"><div data-dojo-type="dojox.mobile.Switch" align="right"></div></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Toggle Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.ToggleButton" checked="true">Toggle me</button></div>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="carouselView">
<div data-dojo-type="dojox.mobile.ScrollableView" >
<span data-dojo-type="dojo.data.ItemFileReadStore" id="store1" data-dojo-props="data:jsonData"></span>
<div id="carousel1" data-dojo-type="dojox.mobile.Carousel" store = "dijit.registry.byId('store1')" data-dojo-props="height:'500px', navButton:'true' , numVisible:2, title:'Photo Gallery'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="pickerView">
<h2 data-dojo-type="dojox.mobile.Heading">Date Picker</h2>
<div align="center"><div id="spin1" data-dojo-type="dojox.mobile.SpinWheelDatePicker" align="center"></div></div>
<h2 data-dojo-type="dojox.mobile.Heading">Time Picker</h2>
<div align="center"><div id="spin2" data-dojo-type="dojox.mobile.SpinWheelTimePicker" align="center"></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="overlayView">
<div align="center"><button data-dojo-type="dojox.mobile.Button" onClick="dijit.registry.byId('customPicker').show()" data-dojo-props='label:"Select date"'></button></div>
<div id="customPicker" data-dojo-type="dojox.mobile.Overlay">
<h1 data-dojo-type="dojox.mobile.Heading" label="Custom Picker">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="width:45px;float:right;" onClick="dijit.registry.byId('customPicker').hide()"></div>
</h1>
<div id="spin3" data-dojo-type="dojox.mobile.SpinWheelDatePicker"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="gaugeView">
<div data-dojo-type="dojox.mobile.View" id="gaugeMainView">
<div align="center"><h2 data-dojo-type="dojox.mobile.Heading">Guages</h2></div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyCircView" transition="fade" onClick = >Glossy Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossySemiView" transition="slide" onClick = >Glossy Semi Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyHorView" transition="scaleIn" onClick = >Glossy Horizontal</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="simpleAnalog" transition="scaleOut" onClick = >Simple Analog Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyCircView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Circular</h1>
<div align="center"><div id="CircularGauge" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossySemiView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Semi Circular</h1>
<div align="center"><div id="CircularGauge1" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossySemiCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyHorView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Horizontal</h1>
<div align="center"><div id="CircularGauge2" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyHorizontalGauge' width='400' height='30' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="simpleAnalog">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Simple Analog Gauges</h1>
</div>
</div>
</body>
</html>
I think you hit a known incompatibility between the Worklight JavaScript libraries (more specifically prototype.js) and Dojo.
Your precise problem is that prototype.js adds an "on" method to all Elements, but unfortunately this method is not compatible with what Dojo expects (Dojo wants 'on' to return an object with a remove() method, whereas prototype.js returns an object with a stop() method).
As a workaround, try to add the following script to your page:
<script type="text/javascript">
// Fix incompatibility between Prototype and Dojo
Event.Handler.prototype.remove = function(){
this.stop();
};
</script>
You must add this after the place where Worklight will insert prototype.js, in your page I would say between auth.js and your main script should be the right place.