I am trying to figure out what and how to do a dropdown menu but I can't find my problem or what I am missing.
When I try to click/tap on the button it doesn't do anything (it doesn't drop anything).
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
And here's the menu.
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
I am really new at this so probably this is a simple problem but I still can't figure it out.
Also if there is a simpler solution or without bootstrap I would like to try them all.
After a lot of googling and trying different approaches I found a way to do what I want.
You should use Bootstrap.css, Bootstrap.js, jQuery.js and Popper.js.
Also you should set crossorigin="anonymous"
<script type="text/javascript" src="lib/js/jquery-3.3.1.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/popper-1.14.7.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/bootstrap-4.3.1.js" crossorigin="anonymous"></script>
Also about the using of the JavaScripts you can use it this way: (as stated here - Bootstrap website)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Here's the menu:
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
I hope this will help to some people because I found couple of questions similar to mine.
I have created fiddle example using bootstrap js and bootsrap css similar given your code and i have also added fullpage js but dropdown working fine.
Please check here. its working fine. JS and Css file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.com/libraries/fullPage.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
Related
I've found this similar error mentioned since Foundation 3, usually because foundation.min.js was not included. I have this included but links in the dropdown menu are not working.
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>dashboard</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>chapters</li>
<li>sections</li>
<li>paragraphs</li>
<li>references</li>
<li>annotations</li>
<li>help</li>
<li class="has-dropdown">
Create
<ul class="dropdown">
<li>new chapter</li>
<li>new section</li>
<li>new paragraph</li>
<li>new annotation</li>
</ul>
</li>
</ul>
</section>
</nav>
</body>
</html>
Am I missing a setting? I've seen preventDefault() mentioned as a possible culprit, but why on earth would the default click behavior be prevented...for clickable menu links?
The $(document).foundation(); line must be invoked before the closing BODY tag, not HEAD tag. I was loading foundation before the DOM elements had loaded.
This explains the whacky behavior.
I use angular-ui-router for routing pages. The problem is like the title of this. The first ui-view displays the page normally. the second ui-view display
the first loaded page and unchanged. I don't want to display second one.
'use strict';
angular.module('test').config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
<html lang="en" ng-app="RedCA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RedCA Admin</title>
<link rel="stylesheet" href="css/main.min.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-loader.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-sanitize.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-touch.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="components/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="components/ng-table/dist/ng-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-3.0.3/js/bootstrap.min.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<!-- Ace settings handler -->
<script type="text/javascript" src="components/ace.min/js/ace-extra.min.js"></script>
<!-- Ace Script -->
<script src="components/ace.min/js/ace-elements.min.js"></script>
<script src="components/ace.min/js/ace.min.js"></script>
<!-- Ace Styles -->
<!-- <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-fonts.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-rtl.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-skins.min.css"/> -->
<script type="text/javascript" src="components/angular-1.2.5/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/routingConfig-thirdparty.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/st-openpms.concat.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/dashboard.min.js"></script> <!-- rdash augular ui -->
<script type="text/javascript" src="openpms-st-test.templates.js"></script> <!-- openpms st -->
</head>
<body ng-controller="redcaCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
<!-- <li class="sidebar-list">
Test <span class="menu-icon fa fa-tachometer"></span>
</li> -->
<li class="sidebar-title"><span>Demonstration</span></li>
<li data-access-level="accessLevels.admin" active-nav>Demo Page</li>
<!-- ///smart town
{{DOC_BASE}} -> # -->
<li class="sidebar-title"><span>SmartTown Sample</span></li>
<br>
<li data-access-level="accessLevels.user" active-nav>Home</li>
<!--<li>Select Project </li>-->
<li data-access-level="accessLevels.user" active-nav>Main Menu</li>
<!--<li data-access-level="accessLevels.user" active-nav>Chat</li>-->
<li data-access-level="accessLevels.user" active-nav>ChatMulti</li>
<li data-access-level="accessLevels.user" active-nav>Noti</li>
<!--<li data-access-level="accessLevels.anon" active-nav>Log in</li>-->
<li data-access-level="accessLevels.anon" active-nav>Register</li>
<li data-access-level="accessLevels.admin" active-nav>Comm Pic</li>
<!--<li data-access-level="accessLevels.admin" active-nav>CRUD sample</li>-->
<li data-access-level="accessLevels.admin" active-nav>Comm</li>
<li data-access-level="accessLevels.admin" active-nav>Punch</li>
<li data-access-level="accessLevels.admin" active-nav>Register</li>
<!--<li data-access-level="accessLevels.user" active-nav>Private</li>-->
<li data-access-level="accessLevels.admin" active-nav>Admin</li>
<li data-access-level="accessLevels.user">Log out</li>
<!-- ///smart town -->
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Redca Administration
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
try to call .otherwise on $routeProvider:
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/a.html',
controller: 'ctrlA'
})
.when('/b/:tagId', {
templateUrl: '/b.html',
controller: 'ctrlB'
})
.when('/another', {
templateUrl: '/another.html',
controller: 'ctrlC'
})
.otherwise({ redirectTo: '/' });
});
For the life of me, I can't get google event tracking to work. I'm trying to track clicks on certain images in my site. I've waited a number of days, I've tried using firebug and google chrome debugger with no luck. I would be really, really indebted if someone could tell me what I'm doing wrong. My code is below. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hug Addicts | A variety of hug t-shirts.</title>
<!-- js -->
<script type="text/javascript">
var subMenus = new Array();
subMenus[0] = "shirt1";
subMenus[1] = "shirt2";
subMenus[2] = "shirt3";
subMenus[3] = "shirt4";
subMenus[4] = "shirt5";
subMenus[5] = "shirt6";
subMenus[6] = "shirt7";
subMenus[7] = "shirt8";
subMenus[8] = "shirt9";
subMenus[9] = "shirt10";
function revealshirt(id)
{
for (var i = 0; i < subMenus.length; i++)
{
document.getElementById(subMenus[i]).style.background = "transparent";
}
document.getElementById(id).style.background = "#e0e0e0";
}
</script>
<!-- end js -->
<!-- Style Sheet -->
<link href="_css/reset.css" media="screen" type="text/css" rel="stylesheet" />
<link href="_css/layout.css" media="screen" type="text/css" rel="stylesheet" />
<!-- End Style Sheet -->
<meta name="verify-v1" content="G4CQZIfIEXbhZZcpfWDJnAJe+R4lTGtVhzYsKhcRzS4=" />
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47147009-1', 'hugaddict.com');
ga('send', 'pageview');
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47147009-1']);
_gaq.push(['_trackPageview']);
</script>
<!-- Google Analytics -->
</head>
<body id="homeid">
<div id="wrapper">
<div id="container">
<div id="container_inner">
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul id="nav">
<li id="prints">
Tees
</li>
<li id="about">
About
</li>
<li id="contact">
Contact
</li>
</ul>
</div>
</div><!-- header -->
<div id="main">
<div id="notice">Hello, my name is . . . and I am an addict.</div>
<div id="mac_nav">
<ul>
<li id="shirt1">
Link
</li>
<li id="shirt2">
Link
</li>
<li id="shirt3">
Link
</li>
<li id="shirt4">
Link
</li>
<li id="shirt5">
Link
</li>
</div>
<div id="content">
<iframe src="shirts/dealing_huggie.html" width="520px" height="600px" name="shirts" scrolling="no"></iframe>
</div>
<div id="pc_nav">
<ul>
<li id="shirt6">
Link
</li>
<li id="shirt7">
Link
</li>
<li id="shirt8">
Link
</li>
<li id="shirt9">
Link
</li>
<li id="shirt10">
Link
</li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
You are using the relatively new universal analytics tracking code (analytics.js) but the event tracking code is for the older analytics version (ga.js). Either use the older version of analytics code or use the proper event tracking code for universal analytics:
instead of:
onClick="_gaq.push(['_trackEvent', 'Click', 'FemaleHugAddicted']);"
Use (you can use spaces for the category / action / label fields):
onclick="ga('send', 'event', 'Click', 'Female Hug Addicted', 'optional label name');"
You can read more here:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events
I am having difficulties with slicebox. I have checked every idea, followed the tutorial, but I'm missing the animation. I think it just doesn't start up, because the first picture in the slide appears, but nothing happens.
CSS included
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
JQuery is the latest version
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
The html seems right
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="slider/image1.jpg" alt="image1"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="slider/image2.jpg" alt="image1"/>
</a>
</li>
</ul>
</div>
And just before the /body tag at the end
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$('#sb-slider').slicebox({
orientation : 'v',
autoplay : true,
});
</script>
What is wrong? I don't know much about the jquery but I have tried many variables, probably there is something I can't see. I appreciate any help.
Ok So almost everything works fine for me. When I try to use this as a template in Dreamweaver and create web pages, the links work and the drop down menu works too. But the drop down only works if the pages I've created are in the same root directory. If I create other folders and save web pages in there, I can get to those pages from the drop down, but once I'm at the page that's inside of another folder and try to use the drop down to navigate from there, I can't. It won't drop down again. I have to click on another link that isn't inside of the folder, like the home link for example. I thought maybe it was a path issue but I've also tried to make the paths absolute instead of relative but that hasn't worked either. I have been Googling for days to see if anyone else has had this same issue come up for them but haven't had any luck.
I have a feeling it's going to be something so easy and simple that I'm not thinking of or overlooking but I'm just not having any luck.
Below is the code that I've been using as an example from the download. If anyone can point me in the right direction, that would be so wonderful!
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>In the Root</li>
<li>In Subfolder</li>
<li>Absolute</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"> <\/script>')</script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>