I am having an issue with IE 9 and Foundation 5 offcanvas. The offcanvas sidebar just shows no matter what and overlays the main content. So basically there is no way to slide the sidebar in and out. Anyone else having this issue? it only seems to happen in IE 9. IE 10-11 is fine, FF and Chrome too.
Issue can be replicated by visiting the docs page using IE8 or simulator
Zurb-foundation Off Canvas
Add a IE9 conditional at the top of your .html
<!--[if IE 9 ]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
Incase you'r wondering this is the conditionals I'm using (slightly modified boilerplate, for better IE support)
<!--[if IE ]><![endif]-->
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Related
Is there a way to not render blank line where django-tempte tag is?
For instance the following template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Will render to such HTML:
## blank line here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Is there a way to make it render simply to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
If you remove the newline before your <!DOCTYPE it should do the trick:
{% load static %}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Can you give some more context as to why you need this? HTML is built so that spaces shouldn't matter. The space you're seeing is probably a newline character, not a space character. If you need to make it prettier, you can either put your Django tags on the same line as other HTML, e.g.
<head>{% load static %}
or use a minifier or other post-processor after Django renders the template.
The only possible exception to "spaces don't matter" is before your doctype declaration at the very beginning, which really needs to be the first line for the sake of browsers, web crawlers, and others who are looking for it there. If the code you posted is an actual excerpt, I would move your {% load static %} after your <head> tag because you won't need it until then anyway.
I have a header
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html class="ie ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 10]>
<html class="ie ie10" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8) & !(IE 9) & !(IE 10)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
In my virtual box I have a version of IE10 running.
.ie10 body {
background:blue;
}
The problem is I have to stick the document into ie9 to get it to pick up the styles. Why is this not working the way I think it should.
As of IE10, conditional comments are no longer supported.
You'll need to think of a different way to accomplish the result you're after.
Hope this helps...
-- Lance
I am trying to find a group of IDs from an web page html source code.
<!DOCTYPE html>
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<body>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#Grid').tGrid({
pageSize:["5","10","20","50"],
myIds: [1765,1706,1809,1847,1857],
add: 'url/add'}); });
//]]>
</script>
</body>
</html>
I wan't to extract all the values for myIds in this format 1765,1706,1809,1847,1857
So far tried these:
(myIds:\s)\[(.*?)\]
matches myIds: [1765,1706,1809,1847,1857]
(?!myIds:\s)\[(.*?)\]
matches [1765,1706,1809,1847,1857], ["5","10","20","50"], [if gt IE 8], [endif]
How can i get values of myIds.
\s*myIds.*?\[(.*?)\]
This works.
See demo.
http://regex101.com/r/iX5xR2/20
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!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>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>
/app.js
var Welcome = Ember.Application.create({});
Welcome.person = Ember.View.extend({
personName: 'Andrew'
});
Here is the content of the index.html, part of the view:
/index.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![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="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/x-handlebars">
{{personName}}
</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My question is why isn't it displaying anything? Shouldn't it render the content of personName?
UPDATE:
I am using the Starter Kit from Ember. It already has a view defined. I just added one more property to the object but still it is not visible to the view.
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
},
name: 'Andrew'
});
And the view part in .html is:
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world {{name}}!</h1>
{{/view}}
</script>
Since the event works, isn't the name supposed to be accessible?
Since 1.0, the views preserve their context.
VIEW CONTEXT CHANGES
In apps built on earlier version of Ember (before 1.0), the {{#view}} helper
created a new context for the view. This meant that you had to explicitly set the
context on them.
In 1.0, we've made this a bit simpler. The {{#view}} helper no longer changes
the context, instead maintaining the parent context by default. Alternatively,
we will use the controller property if provided. You may also choose to directly
overridethe context property. The order is as follows:
Specified controller
Supplied context (usually by Handlebars)
parentView's context (for a child of a ContainerView)
In the event that you do need to directly refer to a property on the view, you
can use the view keyword, i.e. {{view.myProp}}.
So, for your example, tou have to use {{view.name}}
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world {{view.name}}!</h1>
{{/view}}
</script>