Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.
Related
I am building a chat application using Meteor for Android. I have included "Add Image" option using cordova camera plugin. Now, after the image is uploaded and is seen by the users, I want to click on it and zoom it. How to proceed?
Here's my image rendering code :
<div class="message">
<img src="{{t.img}}"
data-action="zoom"
class="showImage"
>
</div>
I've tried using the inno:zoom package but was unsuccessful. Any insights?
In the html head, i have the following code :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I’d suggest using a touch library such as Hammerjs: http://hammerjs.github.io/
There are a lot of ways to work with touch in JavaScript, but they can be difficult if you aren’t experienced with them.
You may have to put the uploaded image in its own template and use reactive variables to re-initialize the image element in order to enact the zoom feature. This is likely also true of the package you already tried.
If you could share more code samples, I (or others) might be able to give a more specific answer.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/modernizr-custom.js"></script>
</head>
I used the Development Build option on their front page that selects all of the options and I tried minified and not minified but got the same error. I am just downloading the file and placing it in a local folder. I tried it with just selecting the canvas element in thier selection options and it works fine.
This bit of code is what is added in the full feature one and is the line that is giving the error on line 29.
;
define("test/network/beacon", function(){});
Thanks.
Ok they helped me out over there. I was using Ublock and it messed something up.
I have problem with CKEditor. I download lastest version and implement on my CMS. All buttons and textarea are disabled and I can't do anything. I searched and find solutions like CKEditor.inline or readOnly but it just doesn't work...
My code looks just like:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" class="text" rows="4" cols="115">Some text</textarea>
<script type="text/javascript">
CKEDITOR.replace("editor");
</script>
</body>
</html>
And here is live version: http://www.hbmedia.pl/test.php
I finally figured this one out. Thought I'd post an answer in case anybody else comes across this question.
In order for the "Classic Editor" to function within a custom ckeditor4 package, you need to make sure the "wysiwygarea" feature is added to the package. This is named "iFrame editing area" in the feature list.
If you don't do this, only the inline editor is available, even though the classic editor shows up as disabled.
If you don't want to use iframe as a content container you might want to use Div editing area. The behaviour is described in IFrame Editing Area page in the notes section:
This is the core functionality of the classic, iframe-based editor which can only be disabled if it is backfilled by an alternative plugin (such as Div Editing Area) or if only inline editor is used.
I downloaded and deployed the 2 AngularJS demos below
https://code.msdn.microsoft.com/windowsapps/AngularJS-TODO-Sample-for-b651512a
https://code.msdn.microsoft.com/AngularJS-Detail-Sample-7a409e5e/view/Discussions
I deployed them to WP8 and Android devices and they worked fine.
But when I deployed to Windows 8 Store App, the input box does not work.
Both demos have the same issues.
I tried using VS 2013 and VS 2015. The outcomes are the same.
Am I missing any build setting? Please advice.
I searched this few days. Add:
ng-csp
to html tag:
<!DOCTYPE html>
<html ng-csp>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp1</title>
<!-- BlankCordovaApp1 references -->
<link href="css/index.css" rel="stylesheet" />
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/index.js"></script>
</head>
<body ng-app="">
<p>Hello, your application is ready!</p>
<input type="text" value="text" />
</body>
</html>
Please refer to my stackoverflow response for a similar problem.
There are a few things you may want to check in your app - the version of jQuery should be >= 2.x, ng-cspis added to your index.html and winstore-jscompatlibrary is added to your project.
These are common issues that windows 8.1 apps with angularjs/jQuery throw. Hope this helps!
I'm trying to get media queries to work in IE8 using Webshims Lib. I've followed the setup instructions and loaded the default (all) polyfills, but it doesn't seem to work.
Am I still supposed to still explicitly include html5shiv? I thought Webshims Lib would take care of it?
Cheers.
You need to download respond.js, after adding these statements:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link href="css/bootstrap-ie8.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->