Using angular-tour with multiple views produces unexpected results - javascript

I am trying to use the angular-tour plugin to give a short tour of a sites functionality. I would like the tool tips to pop on each icon found in the horizontal navbar. The navbar is a view and even though I have included the required scripts etc in the index.html, it is just rendering text, and that is also being cut off by the main view. This makes sense but how can I fix this?
I have also included angular-tour in angular.module. I appreciate any help.I have also included a screenshot of what it looks like currently (the plain text "Highlighted"). I am just trying to implement the example from http://daftmonk.github.io/angular-tour/ to my application before editing.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrummage</title>
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link href="../bower_components/angular-tour/dist/angular-tour.css" rel="stylesheet" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-ui-modal/angular-ui-modal.js"></script>
<script src="../bower_components/angular-charts/dist/angular-charts.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./js/app.js"></script>
<script src="./js/services/utils.js"></script>
<script src="./js/controllers/signin/signin.js"></script>
<script src="./js/controllers/storyBoard/storyBoard.js"></script>
<script src="./js/controllers/analytics/analytics.js"></script>
<script src="./js/controllers/featureSetup/featureSetup.js"></script>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
</head>
<body ng-app="scrummage">
<div ui-view
></div>
</body>
</html>
navbar.html:
<div class="sidebar-nav">
<ul>
<li><i class="grow fa fa-gear nav-list-icon"></i>
<tour step="currentStep">
<span tourtip="tip 1"> Highlighted </span>
<span tourtip="tip 2"> Elements </span>
<input tourtip="You can use it as an attribute on your element" />
<span tourtip="Full options"
tourtip-step="3"
tourtip-next-label="Next"
tourtip-placement="right"
tourtip-offset="60">Full options</span>
</tour>
</li>
<div id= "analyticsModal" ng-controller='analyticsCtrl'>
<li><i class="grow fa fa-area-chart nav-list-icon"></i></li>
<div modal="showModal" close="cancel()" ng-include="'../js/controllers/analytics/analytics.html'"></div>
</div>
<div id= "featureSetupModal" ng-controller='featureSetupCtrl'>
<li><i class="grow fa fa-plus"></i></li>
<div class="featureModal" modal="showModal" close="cancel()" ng-include="'../js/controllers/featureSetup/featureSetup.html'"></div>
</div>
<li><i class="grow fa fa-sign-out"></i></li>
</ul>
</div>

I figured out what I was doing wrong. Basically, the view that the screenshot above shows is from a view that was included in another view, and I missed having the:
$scope.currentStep = -1;
in the parent view scope.

Related

Error dropdown materialize using .dropdown() - $ is not a function

I am triying to install a dropdown in materialize using instructions but when ran the code console throw me an error
This is the code
//main.js
$(()=>{
alert("Hola de nuevo! Ahora con Materialize")
console.log('Main cargando')
$('.dropdown-button').dropdown();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejs Test</title>
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/materialize.min.css">
<script src="js/materialize.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul class="dropdown-content" id="dropdown1">
<li>TextoPrueba</li>
<li>TextoPrueba</li>
<li>TextoPrueba</li>
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
BrandLogo
<ul class="right hide-on-med-and-down">
<li>Texto1</li>
<li>Texto2</li>
<li>Texto3</li>
<li>TextoDropDown</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
in the console of the code inspector throw me
Uncaught TypeError: $(...).dropdown is not a function
what can i do to show the dropdown correctly?
Had the same problem and found the answer here: https://github.com/krescruz/angular-materialize/issues/96#issuecomment-164877838
In my case it was the order of javascript files include. materialize.js must be declared after jquery.
Add drop-down and their constrainWidth to false.
Materializecss dropdown documentation
<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">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Trigger -->
<a class='dropdown-trigger ' href='#' data-target='dropdown1' >Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content' >
<li>You got something</li>
<li>Extra stuff</li>
<li>You don't have notfications</li>
</ul>
<script>
$(document).ready(function () {
$('.dropdown-trigger').dropdown({
constrainWidth:false,
});
});
</script>
jQuery initialization for dropdowns is only necessary if you create them dynamically.
This should be enough:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='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>

Custom event for Foundation 5 top bar dropdown items

I am using Foundation 5 top bar drop down in an Aurelia web app.
I want to add on click event handler to the drop down menu items.
My code looks like below:
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch g… webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title></title>
<script src="/Scripts/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="/Content/foundation/foundation.css"></link>
<link rel="stylesheet" href="/Content/foundation/foundation.mvc.css"></link>
<link rel="stylesheet" href="/Content/font-awesome.min.css"></link>
<link rel="stylesheet" href="/Content/custom/app.css"></link>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<nav class="top-bar fixed" data-topbar role="navigation">
...
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
<a href="#" title="${activeModule.Description}">
${activeModule.DisplayName}
</a>
<ul class="dropdown">
<ul repeat.for="module of allModules">
<li>
<a click.delegate="$parent.setActiveModule(module.Name)" data-trash="${$parent.activeModule.Name}">
<strong>${module.DisplayName} </strong> | <em> ${module.Description} </em>
</a>
</li>
<li class="divider">
</li>
</ul>
</ul>
</li>
</ul>
</section>
</nav>
<div class="page-host row">
...
</div>
<hr />
<footer>
<p></p>
</footer>
<script src="/Scripts/foundation/fastclick.js"></script>
<script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However whenever I am clicking the drop down item the custom event handler is not invoked. I tested the same piece of code by placing it outside the <li class="has-dropdown"> and directly under <ul class="left"> and I found it to be working.
Can anyone please let me know what I am missing here?
Thanks.
For anyone looking at this question, here is how I solved it:
I understood that the call to $(document).foundation(); is not working properly. As I am using Aurelia, I leveraged the lifecycle events of views for solving this issue. Thus, I added the call to $(document).foundation(); in the attached event like below:
attached() {
$(document).foundation();
}
And that's it. Hope it helps.

Can't get Zurb Foundation accordion to work

I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation

I can't get my app to respond when on moblie device, works fine on PC, even in mobile Test mode on PC [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am working on a Web App using Angular, Bootstrap, and templated off of Ace Admin (Responsiveness template). On the PC, in Chrome and FireFox everything works fine. When we shrink the window or use the Responsive Design Review the sidebar navigation changes to a menu button and works appropriately. However when we bring the site up on a table or phone (Chrome or Firefox browswers), the menu button is visible, but doesn't respond. Any ideas? Here is my opening HTML page, the only thing I have left off is the javascript for my app. The rest is here.
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>DISCUS Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="resources/ace/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/font-awesome.min.css">
<!-- page specific plugin styles -->
<link rel="stylesheet" href="resources/ace/assets/css/jquery-ui.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/datepicker.css">
<link rel="stylesheet" href="resources/ace/assets/css/ui.jqgrid.css">
<!-- text fonts -->
<link rel="stylesheet" href="resources/ace/assets/css/ace-fonts.css">
<!-- ace styles -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.min.css" id="main-ace-style">
<!-- ngModal styles -->
<link rel="stylesheet" href="resources/ng-modal/ng-modal.css">
<!-- TEST DRIVE STYLES (Determine to keep or throw away) -->
<link rel="stylesheet" href="resources/ng-grid/ng-grid.css">
<!-- DSC styles -->
<link rel="stylesheet" href="styles/ng-style.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-part2.min.css">
<![endif]-->
<link rel="stylesheet" href="resources/ace/assets/css/ace-skins.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/ace-rtl.min.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-ie.min.css">
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="resources/ace/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="resources/ace/assets/js/html5shiv.min.js"></script>
<script src="resources/ace/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<!--<body class="no-skin">-->
<body class="skin-1" data-ng-controller="MainController">
<ng-include src="'views/navbar.html'"></ng-include>
<div class="main-container" id="main-container">
<div id="sidebar" class="sidebar responsive" data-ng-show="user">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
}
catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<div ng-include src="'views/sidebar.html'"></div>
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
}
catch (e) {
}
</script>
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div ng-view></div>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.page-content -->
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='resources/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="resources/ace/assets/js/ace.min.js"></script>
<script src="resources/ace/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.onpage-help.css"/>
<link rel="stylesheet" href="resources/ace/docs/assets/js/themes/sunburst.css"/>
<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script type="text/javascript" src="resources/ace/assets/js/ace/elements.onpage-help.js"></script>
<script type="text/javascript" src="resources/ace/assets/js/ace/ace.onpage-help.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/rainbow.js"></script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/generic.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/html.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/css.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/javascript.js"></script>
<!--<script type="text/javascript" src="resources/ace/assets/js/jquery.min.js"></script>-->
<script type="text/javascript" src="resources/ace/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="resources/angular/angular.js"></script>
<script type="text/javascript" src="resources/angular/angular-route.js"></script>
<script type="text/javascript" src="resources/angular/xeditable.js"></script>
<script type="text/javascript" src="resources/angular/angular-local-storage.js"> </script>
<script type="text/javascript" src="resources/angular/angular-resource.js"></script>
<script type="text/javascript" src="resources/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.js"></script>
<script type="text/javascript" src="resources/angular/angular-touch.js"></script>
<script type="text/javascript" src="resources/angular/angular-animate.js"></script>
<script type="text/javascript" src="resources/Smart-Table.debug.js"></script>
<script type="text/javascript" src="resources/ui-bootstrap-tpls-0.11.0.min.js"> </script>
<script type="text/javascript" src="resources/ng-modal/ng-modal.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/lodash.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/highlight.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angular-highlightjs.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script>
<script type="text/javascript" src="resources/pdfjs-mod/pdf.js"></script>
<script type="text/javascript" src="resources/directives/angular-pdf.js"></script>
<script type="text/javascript" src="resources/directives/partials-css.js"></script>
<script type="text/javascript" src="resources/ui-layout/ui-layout.js"></script>
<script type="text/javascript" src="resources/ui-grid/ui-grid.js"></script>
<!-- The following are for exporting from ui-grid -->
<script type="text/javascript" src="resources/ui-grid/csv.js"></script>
<script type="text/javascript" src="resources/ui-grid/pdfmake.js"></script>
<script type="text/javascript" src="resources/ui-grid/vfs_fonts.js"></script>
<!-- TEST DRIVE SCRIPTS (Determine to keep or throw away) -->
<script type="text/javascript" src="resources/ng-grid/ng-grid-2.0.11.debug.js"></script>
<!-- DISCUS-NG Angular JavaScript -->
Most mobile browsers wait about 300ms after a tap-and-release before sending the click event.
Using the ngTouch module, which provides an ngClick replacement might solve this for you:
https://code.angularjs.org/1.2.25/docs/api/ngTouch/directive/ngClick
In searching Stack Overflow I found a somewhat related issue and did some trial and error. My issue turned out to be a conflict between Angular and the Ace Admin template. I ended up moving two Ace JavaScript calls to after the Angular calls (ace.min.js and ace-elements.min.js) and suddenly the toggled menu button works on PC and mobile device in both Firefox and Chrome.

Semantic UI Dropdown can't work

I have tried to deal with this problem for 2 days, but I still can't get the JavaScript of Semantic UI to work. This is my all code. My jQuery is not very good. I have read a lot, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum- scale=0.5, maximum-scale=2.0,
user-scalable=yes" /> <!--自适应-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<script type="text/javascript" src="js/semantic.js"></script>
<style type="text/css">
.diymenu{background-color: blue;margin: 0px 0px 0px 0px; padding-top:0px;}
body{margin: 0px 0px 0px 0px;font-family: 微软雅黑;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#drop').click(function(){
$('#drop').dropdown('show');
});
});
</script>
</head>
<body >
<!--导航栏 -->
<div class="ui blue inverted menu">
<a class="active item"><i class="home icon"></i>主页</a>
<div class="right menu">
<a class="item"><i class="mail icon"></i>消息
<div class="ui black circular label">2</div></a>
<a class="item">
</a>
</div>
</div>
<div class="ui dropdown item" id="drop">
More <i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i>编辑个人信息</a>
<a class="item"><i class="globe icon"></i>选择语言</a>
<a class="item"><i class="settings icon"></i>账户设置</a>
</div>
</div>
</body>
</html>
From the docs at http://semantic-ui.com/modules/dropdown.html#/usage, you should initialize your dropdown with Javascript (no further jquery code required):
$('.ui.dropdown').dropdown();
See also http://jsfiddle.net/fd8qfyra/1/ i think there is no problem.
After researching through blogs, youtube and more I found the answer, implemented it and given me the collapsing dropdown functionality with Semantic UI
Put the CSS and semantic.js link inside the header instead of the body
Give the select an ID
3.Initialize the ID with with dropdown only:
$('#gender-select').dropdown();

Categories