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.
Related
I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!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">
<title>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- 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]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});
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.
I have a responsive site designed with twitter bootstrap that works fine on desktop, but not so much on mobile (tested on 2 different Android devices in Chrome and Samsung browser, and an iPhone in safari).
What works - Mobile
If I type in the url with an additional page (other than index.html), i.e. seniorcareplacementchoices.com/learn.html it loads just fine.
What doesn't work - Mobile
If I type in the url itself - seniorcareplacementchoices.com (with or without www or http://) it loads for about .2 secs then goes to www.google.com.
seniorcareplacementchoices.com/index.html does not work either.
The only real difference between index.html and the others such as partners.html is that I added a bootstrap carousel to the index.html.
I am using site44 for hosting.
I think the problem is either:
a) The carousel is not responsive and messes up the mobile interpretation of the site
b) Something to do with google's new ssl rule (haven't looked much into it)
Any ideas?
NOTE: Yes I do have the line
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CODE
index.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!--New Stylesheets and scripts for CAROUSEL -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles for this template -->
<link href="./css/carousel.css" rel="stylesheet">
<script src="./js/carousel.js"></script>
<!--end new stylesheets for carousel -->
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
learn.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
</head>
this would be your culprit:
(function() {
'use strict';
var isMobile = function () {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
};
var redirectToMobile = function () {
if (isMobile()) {
window.location.href = "http://google.com";
}
};
redirectToMobile();
})();
Embedded in your "Confidence: START" area. Looks like a copy paste fail ;)
Curiously enough if you have a large (5"+) phone, this doesn't fire. My Nexus 5 didn't trigger this condition because the innerHeight was 640.
My project is using a combination of Bootstrap and Codeigniter. I cannot access functions within external javascript files. Using firebug in Firefox I can see that these external scripts get loaded. External css files work fine. Please note that jquery works but I suspect that it is because of the jquery.js file that is included in the Bootstrap/Codeigniter framework in directory assets/js/jquery.js
Here is my header code within every Codeigniter View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/img/icons/favicon.png">
<title>Sample Website</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/carousel.css" rel="stylesheet">
<!-- styles custom to our site -->
<link href="/css/style.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
Try to add base_url before url:
<script type="text/javascript" src="<?= base_url();?>js/jquery.cookie.js"></script>
Firebug is giving me strange behavior and i don't know if there is something with my code or if it's a bug in firebug.
The problem i'm having is that firebug does not stop on a simple breakpoint. However, if i add a watch expression it does show me the value of that, so i know that my code is working and something other must be at play here.
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>DOM API</title>
<meta name="keywords" content="t.a.v. klant: plaats keywords gescheiden door een comma">
<meta name="description" content="t.a.v. klant: Wordt gebruikt door google als omschrijving in de zoekresultaten">
<meta name="author" content="klantnaam">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/nav-popup.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:700,400' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://www.site.nl/images/favicon.ico">
<link rel="apple-touch-icon" href="images/ios-icon.png"><!--ios web app icon 114x114-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<meta name="robots" content="all">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--pluginSyntax-->
<script type="text/javascript" src="js/pluginSyntax/scripts/shCore.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="js/pluginSyntax/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--pluginSyntax-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--level1-->
<div class="level1">
<!--level1-->
<h1>DOM</h1>
<p>The Document Object Model (DOM) is a programming interface for HTML. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.</p>
<p>In the DOM every part of a web page is represented as a <code>node</code>. There are 3 nodes:</p>
<ul id="jow">
<li><code>Element</code> nodes (h1 tag)</li>
<li><code>Attribute</code> nodes (class="heading")</li>
<li><code>Text</code> nodes (Title of this tutorial)</li>
</ul>
<!--level1-->
</div>
<!--level1-->
<script>
var ieps = document.getElementById("jow");
for (var member in ieps){
if(ieps.hasOwnProperty(member)){
alert(ieps[member]);
}
}
</script>
I have set a breakpoint on the declaration of the var ieps and offcourse firebug does not stop there and just reloads the page.
Any ideas?
Thx...