I'm trying to fix a Bootstrap Navbar on my resume. The links work and it's fixed to the top of the resume. When viewing from a smaller screen the Navbar toggle button appears and the background color toggles open to close and vice versa...But the links aren't toggling with it. I've checked multiple sources but can't figure out what's off.
Any suggestions are appreciated.
Thanks.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M.Gillespie Resume</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jQuery.js"></script>
<script src="js/helper.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top animated bounceInRight"> <!-- Fixed Nav Bar -->
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Top</a> <!-- NavBar Brand -->
</div>
<div class="navbar-collapse collapse " id="navbar-collapse1"> <!-- Links to Resume Sections -->
<ul class="nav navbar-nav navbar-right">
<li class="active, hover">Experience</li>
<li class="active, hover">Projects</li>
<li class="active, hover">Education</li>
<li class="active, hover">Connect</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
<div id="main">
<div id="header" class="center-content clearfix, animated bounceInDown">
<ul id="topContacts" class='flex-box'></ul>
</div>
<div style='clear: both;'></div>
<div id="workExperience" class='gray, animated bounceInDown'>
<h2>Experience</h2>
</div>
<div id="projects" class='gray, animated bounceInDown'>
<h2>Projects</h2>
</div>
<div id="education" class='gray, animated bounceInDown'>
<h2>Education</h2>
</div>
<div id="mapDiv" class=" animated bounceInDown">
<h2>Where I've Lived and Worked</h2>
</div>
<div id="letsConnect" class='dark-gray animated bounceInRight'>
<h2 class='orange center-text'>Let's Connect</h2>
<ul id="footerContacts" class="flex-box">
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/resumeBuilder.js"></script>
<script type="text/javascript">
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('topContacts').style.display = 'none';
}
if(document.getElementsByTagName('h1').length === 0) {
document.getElementById('header').style.display = 'none';
}
if(document.getElementsByClassName('work-entry').length === 0) {
document.getElementById('workExperience').style.display = 'none';
}
if(document.getElementsByClassName('project-entry').length === 0) {
document.getElementById('projects').style.display = 'none';
}
if(document.getElementsByClassName('education-entry').length === 0) {
document.getElementById('education').style.display = 'none';
}
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('letsConnect').style.display = 'none';
}
if(document.getElementById('map') === null) {
document.getElementById('mapDiv').style.display = 'none';
}
</script>
</body>
</html>
try to add to <a href="#IDNAME"> this code: data-toggle="collapse" data-target=".navbar-collapse"
Related
How do i make a link to antoher page with asp.net MVC? I want to link to an page named overview through my homepage(index page). I have made an view function with my HomeController. When i click "Go To View" my overview page show up. But my hyperlink still dont work on my index page. Anyone have an idea?
Thanks!
Here are my controller
public IActionResult Overview()
{
return View();
}
Here are my hyperlink
Overview
here are my overview page i want to display
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
Layout = "~/Views/Home/Overview";
}
<h1>Overview</h1>
#RenderBody()
Code for my Layout Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Why are you using IActionResult?
Try:
public ActionResult Overview()
{
return View();
}
and in view part remove the #RendorBody(), Layout = "~/Views/Home/Overview";
use this instead :
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
}
<h1>Overview</h1>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
About the static file 404 error, I think the issue is related to the file path.
I have created a new Asp.net core 3.1 applications on my side, and try to create a new layout page using your code, generally, the client-side library (such as JQuery and Bootstrap) was installed in the lib folder as below, but in your code, you want to load the js and css file from the vender folder,
So, if I using your code, the related JS and CSS file will show 404 error. Try to check the structure in the wwwroot folder, and load the Jquery and Boostrap from the lib folder.
In my sample, I'm using the default installed library, and install the font-awesome in the lib folder, so, my custom layout as below:
_CustomLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="~/css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Code in the Home controller:
public IActionResult About()
{
return View();
}
public IActionResult OverView()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
Code in the About.cshtml page (using the default layout page):
#{
ViewData["Title"] = "About";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>About</h1>
Overview
Code in the OverView.cshtml page:
#{
ViewData["Title"] = "OverView";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
<h1>OverView</h1>
The result like this:
I'm having a trouble with no scroll bar showing up on my page when I resized the web page. this page was built up with bootstrap and used CDN as an option to install, so i have nothing to do with the css, any help would be highly appreciated, thank you so much
the code--
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You had few mark-up error in your code--you forgot to close the nav and head tag.
now working fine
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
height: 1000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
</body>
</html>
I have this code and it doesn't work in responsive mode. I mean the button will appear, but when I click on the button my navbar does not appear. I have no idea what is it about. css and js file is also added to document but it still doesn't work. Any tips for this problem will appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ------------------------------bootstrap css link--------------------- -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/custom-css.css">
</head>
<body>
<div class="row">
<div class="col-md-12 top-site">
<div class="top-bg col-md-12">
</div>
<!-- <div class="col-md-2 social">
</div>
<div class="col-md-2 search">
</div> -->
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li>خانه</li>
<li>تماس با ما</li>
<li>لینک به ما</li>
<li>درباره ما</li>
<li>تبلیغات در سایت</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
<!-- ------------------------------bootstrap css link--------------------- -->
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="npm.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
</body>
</html>
jQuery library should be included before bootstrap.
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
I'm using a Bootstrap 3 navbar static top with nav pills. And that it works.
I cannot make data toggles working when the navbar is fixed to top.
This is the snippet with the navbar static top:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
And here it does not work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
The data toggle is working, it's just that your content is overlaid by the navbar. Take a look at the docs:
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Example here: http://www.bootply.com/pGzO62Dp9L
When the navbar is fixed, the next div starts at the same spot. So the pills are working, but the navbar is covering the content. You need to add padding to the top of your container.
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.