I've been looking for a way to integrate a slideout menu into my website but have failed with various javascript plugins (I'm quite new to web design). I can't seem to get this to work correctly. I recently posted about a side menu which ended up working but was blank on a phone screen. Now I am trying my luck at a mmenu at http://mmenu.frebsite.nl/examples.html I have posted my html below and have been trying to fix it for a full day now and still can't get it to work! You can see what is currently showing up on the website here http://jpst.it/zQtF
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#menu").mmenu({});
var API = $("menu").data("mmenu")
$("menu-button").click(function() {
API.open();
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
<button id="menu-button">menu</button>
</div>
<div class="content">
<div class="posts">1</div>
<div class="posts">2</div>
<div class="posts">3</div>
<div class="posts">4</div>
<div class="posts">5</div>
</div>
<div class="footer">asdfafdsasfsdasfad</div>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>The team</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
There are a couple things wrong with your code and without your stylesheets I can't be really sure what your problem is, but I believe your problem starts from the fact that you haven't included jQuery when you include the mmenu javascript file. So switch the lines in your code:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
That should be enough to make it functional, but remember to include the # symbol in your javascript when you're referencing IDs. As well, remember your semi-colons at the end of all your javascript statements.
Related
I have a Spring Boot 1.3.0.BUILD-SNAPSHOT with Spring security for authentication. I have a layout.html page for use by my other pages.
When I go to my login.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/custom.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<script src="/libs/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div th:replace="layout :: head"> </div>
<div style="padding-top:60px;">
....
</div>
<div th:include="layout :: foot"/>
</body>
</html>
Where here is my layout:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<div th:fragment="head" class="my-header">
<div class="navbar navbar-default navbar-fixed-top navbar-transparent" role="navigation">
...
</div>
</body>
</html>
The form submits a POST, which returns a 302:
And then the url is redirected to http://localhost:9001/js/bootstrap.min.js instead of http://localhost:9001/ so that the browser just shows the contents of the bootstrap js file. If I manually change the URL to http://localhost:9001 then my authenticated window is shown. All other pages behave normally, its just the login page that shows the js file content.
I cannot figure out where the call to display js/bootstrap.min.js is coming from, I grep'd my files and all references to it are in the format:
<script src="/libs/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Thank you for your time in reading this and offering any advice on what might be causing this issue.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Last week i launched a site live in production using Foundation 5. I have tried everything with this application using respond.js, htmlShiv.js and much more. I have made sure to include the shivs and respond.js after my css and for the most part it works however, the nav bar appears collapsed and expanded as someone would view through mobile. The site also looks completely different in IE8 compatibility mode even after I have included
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />.
Most users which will be hitting the application will be from school districts and they never update their browsers therefore, I need to support back to it.
Here is the nav bar in IE8 Compatibility Mode
Here is the nav bar in IE8 without Compatability Mode.
Here is the nav bar in Chrome and this is how it is supposed to look like.
Any help would be appreciated as I have applied every solution possible out there by moving my respond and shivs around. Making sure im not using CDN's for my css or any of my js files. I am stumped why this inconsistent behavior exists.
Here is my code for the nav bar.
<nav class="top-bar" id="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<div class="name-logo">EBi</div><!-- title on navigation -->
</li>
<li class="toggle-topbar menu-icon">
<em class="fa fa-bars"></em> </li>
</ul>
<section class="top-bar-section" id="menu"><!-- menu -->
<ul class="nav-bar-section">
<li><div class="home"><strong>EB</strong>i</div></li>
<li>Our Story</li>
<li>Educator Solutions</li>
<li>Our Team</li>
<!--<li>Let's Talk</li>-->
<li>Contact</li>
<!----><li title="Soon EBi-AR.com will allow you to log in to your EBi account"><div class="login">Login</div><img src="images/logo/bubble2.png" style="padding-bottom:10px; padding-left:5px;"></li><!---->
</ul>
</section><!-- .menu -->
</nav>
</div>
Here is my head with the references.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,100italic,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="stylesheets/font-awesome.min.css" />
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/component.min.css" />
<link rel="stylesheet" href="stylesheets/theme.css" />
<link rel="stylesheet" href="stylesheets/flexslider.css" type="text/css" media="screen"/>
<!-- JavaScript -->
<script src="js/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="./stylesheets/ie8.css">
<link rel="stylesheet" type="text/css" href="./stylesheets/IE.css">
<script src="./js/htmlShiv.js"></script>
<script src="./js/respond.js"></script>
<script src="./js/ie8-head.js"></script>
<script type="text/javascript" src="./js/nwmatcher.js"></script>
<script type="text/javascript" src="./js/selectivizr.js"></script>
<script type="text/javascript" src="./js/PIE.js"></script>
<![endif]-->
</head>
I am including scripts in the bottom of my webpage as well.
<script src="js/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/masonry.min.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/classie.min.js"></script>
<script src="js/AnimOnScroll.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/headroom.min.js"></script>
<script src="js/toucheffects.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/app.js"></script>
<script src="js/plugins/jquery.fitvid.js"></script>
<script src="js/plugins/froogaloop.js"></script>
<!--fixes IE not formatting content correctly-->
<script src="js/rem.js" type="text/javascript"></script>
<!--.fixes IE not formatting content correctly-->
<!--[if IE 9]>
<script src="./js/ie8.js"></script>
<![endif]-->
If there is anything sticking out to anyone which is quite noticeable i would really appreciate the guidance as I have been stumped on supporting back to IE8 corrrectly.
Foudation doesn't support Internet Explorer 8.
Furthermore IE8 in compatibility mode behaves like IE7 which has a non-standard box model.
I am try to use nested sort plugin from https://github.com/mjsarfatti/nestedSortable , but i keep getting this error
Uncaught TypeError: $(...).nestedSortable is not a function
This is my head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mjs.nestedSortable.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
This is the body
<ol class="sortable">
<li><div>Some content</div></li>
<li>
<div>Some content</div>
<ol>
<li><div>Some sub-item content</div></li>
<li><div>Some sub-item content</div></li>
</ol>
</li>
<li><div>Some content</div></li>
</ol>
Javascript code that i use
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
});
Please help me
I have tested nestedSortable and this code work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<script>
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
});
</script>
</head>
<body>
<div>
<ol class="sortable">
<li><div>Some content</div></li>
<li>
<div>Some content</div>
<ol>
<li><div>Some sub-item content</div></li>
<li><div>Some sub-item content</div></li>
</ol>
</li>
<li><div>Some content</div></li>
</ol>
</div>
</body>
try putting this code in a file and execute it. If it works dont use external links
download the css and js keep them in your project folder and include them from there
The error indicates the method does not exist on your jQuery object. This means the nestedSortable plugin has not loaded.
Refer to this line:
<script src="js/jquery.mjs.nestedSortable.js"></script>
Check that the address is correct, and that the JavaScript file exists in that location.
update your script
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
To
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mjs.nestedSortable.js"></script>
On the following github: NESTEDSORTABLE
You have to use the upgraded version of nestedSortable. Here is the updaed version of nestedSortable: https://github.com/ilikenwf/nestedSortable
Also you have not included jQuery-UI.js file in your file : <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> add this code before you include jquery.mjs.nestedSortable.js file
I'm curious problem linking my js files in my php webpage. First at all, I put it at the end of the file (just before closing body tag) and in local mode everything works ok. But when I upload my web to my server js files seems not linking, I have to put it in header to work it.
So that way could be important to say all my functions are in a separated file called "scripts".
It's not important trouble, but I'm concerned. Anybody could explain me?
Thanks in advance
Edited
Thank you #Pointy and #Jochen for your quickly answer. I tried using chrome inspector. No errors show, only not load files. This is my web structure (I don't copy complete code cause would be so extense)
<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--CSS starter-->
<link href="" rel="stylesheet" media="screen">
<!--CSS font-awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link href="font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- javascript (here links working) -->
</head>
<body>
<!--sections-->
<!--/sections-->
<!-- javascript (here not working) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/messages_es.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I guess this path is wrong, try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I am not able to render AngularJs templates in Internet Explorer 8, I have followed several suggestions for using AngularJs in Internet Explorer but I am still not able to get it to work. below is my html code for the page including the scripts I have used. Is it possible to point out if I am using anything that could make the code not work in Internet Explorer? I can upload details of other files if anybody would like to know the details of it. Everything works perfectly on all other browsers but just Internet Explorer.
<!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 xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" 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, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<style>
#-moz-document url-prefix() {
.filter-menu .btn {
padding: 0;
}
}
</style>
<!-- endbuild -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.js"></script><![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> -->
</head>
<body>
<!--[if lt IE 8]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<aside id="sidebar">
<ul class="list-unstyled">
<li></span></li>
<li></span></li>
<li></span></li>
</ul>
</aside>
<section id="topbar">
<ul class="list-unstyled">
<li><span class="icon-briefcase icon-2x"></span></li>
</ul>
</section>
<section id="main-container">
<section ui-view id="main-inner-container"></section>
</section>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bower_components/jquery-easing/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/directives.js"></script>
<script src="scripts/controllers/hotelsController.js"></script>
<script src="scripts/controllers/restaurantsController.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- endbuild -->
</body>
</html>
I am working on AngularJS project at the moment where Internet Explorer 8 support is required.
Everything is working fine cross browsers - including IE 8.
If you need to give IE8 support my first advice for you is to not use custom element tags such as <mynewtag> (use the attribute version <div mynewtag> instead).
It will save you the headache of creating elements on the fly like this one:
<!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->
Below you can find my index.html bootstrapped for AngularJS to work with IE 8:
<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" ng-app="myApp">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="header"></title>
<meta name="description" content="">
<!-- build:css({.tmp,app}) system/css/main.css -->
<link rel="stylesheet" href="system/css/main.css">
<!-- endbuild -->
<!--[if IE 8]>
<script src="ui/components/es5-shim/es5-shim.js"></script>
<script src="ui/components/json3/lib/json3.min.js"></script>
<![endif]-->
</head>
<body ng-controller="myAppCtrl">
<!-- Add site or application content here -->
<div class="content" ng-view=""></div>
<!-- build:js system/js/plugins.js -->
<script src="ui/components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) system/js/scripts.js -->
<script src="system/js/app.js"></script>
<script src="system/js/filters/filters.js"></script>
<script src="system/js/controllers/controllers.js"></script>
<script src="system/js/services/services.js"></script>
<script src="system/js/directives/directives.js"></script>
<script src="system/js/scripts.js"></script>
<!-- endbuild -->
<!-- build:js system/js/modules.js -->
<script src="ui/components/angular-resource/angular-resource.js"></script>
<script src="ui/components/angular-cookies/angular-cookies.js"></script>
<script src="ui/components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
</body>
</html>
Hope that's helpful.