Hi I am trying to get zurb foundation 4 to have the off canvas mobile menu work within my shopify store. the issue I am having is that it is displaying the menu button fine, but it isn't triggering anything when clicked and the preloaded sidebar is visable on desktop
the code i have used so far is
<!-- mobile only side bar -->
<header class="row">
<div class="large-8 columns small-2">
<p class="show-for-small">
<a class='sidebar-button button' id="sidebarButton" href="#sidebar" >Menu</a>
</p>
</div>
<section id="sidebar" role="complementary">
<nav id="sideMenu" role="navigation">
<ul id="sideMainNav" class="nav-bar">
<li>test</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</section>
</header>
<!-- /mobile -->
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document.write('<script src=/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
{{ 'zepto.js' | asset_url | script_tag }}
{{ 'foundation.min.js' | asset_url | script_tag }}
<script>
$(document).foundation();
</script>
{{ 'jquery.offcanvas.js' | asset_url | script_tag }}
Do you have <body class="off-canvas hide-extras"> already?
this code: <script> document.write('<script src=/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>'); </script> Loads Zepto (jquery compatible library). When zepto is not supported (IE) it loads jquery. Just as a troubleshooting step I would try removing <script> document.write('<script src=/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>'); </script> and {{ 'zepto.js' | asset_url | script_tag }} and import jquery perhaps with {{ 'jquery.js' | asset_url | script_tag }}
I just took a peek at offcanvas.js. It's not that weird since it calls a couple methods not available in zepto. It calls scrollTop for instance. Use jQuery and it will work fine.
Related
I have a Django project contains multiple templates like this:
<body>
<div>
<ul>
<li>
<a href="#">
customers
</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
<!-- place project specific Javascript in this file -->
<script src="{% static 'js/project.js' %}"></script>
<script>
{% include 'vue_dashboard.js' %}
</script>
</body>
the vue_dashboard.js file is the following
var app = new Vue({
el: '#vue_app',
delimiters: ["{(", ")}"],
data: function () {
return {
selected: 'group',
}
},
methods: {
change_selected: function (type) {
this.selected = type;
},
}
Now, I'm trying to use this vue method inside my <a> tag for example like this:
<a href="#" onclick="change_selected(type='customers')">
customers
</a>
then inside some other div obtain the value of the selected variable in the data section:
<div>
{{selected}}
</div>
I've also tried:
{% verbatim %}
{{ selected }}
{% endverbatim %}
and few other things, I know I'm using it wrong, but what's the right way to do so? I'm not even sure if my template can communicate with the vue file like this
Change
<a href="#" onclick="change_selected('customers')"> <!-- removed type= -->
customers
</a>
this should work with verbatim but you can also change delimiters in vue.js like following
delimiters: ["{(", ")}"],
which you did but didn't change {{ to {( so please change like this:
<div>
{( selected )} // <= change here
</div>
The first problem was like #ashwin said with the brackets, the other one was that the Vue app closing brackets were missing, also onclick doesn't work, I replaced it with #click, then everything was okay
I'm trying to create a piechart from a single column of data with the google visualization API by counting each value, but I keep getting the following error message:
Invalid query: SELECT_WITH_AND_WITHOUT_AGG: C
INFORMATION
My spreadsheet can be found here: https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/edit#gid=942634171
What I want to do is create a pie chart that counts the unique values in the 'What neighborhood are you from' column and plot their relative proportions.
The column itself can be seen here:
So I'd like to take this one column and create a table from it that reads like this:
EXAMPLE TABLE
Corona 2
Sunnyside 3
Elmhurst 4
And so on. And then use the string/number combination to populate a pie chart.
With regular SQL you could do SELECT Column, COUNT(Column) GROUP BY Column, so I'm assuming something similar would work for GQL.
So far these are some of the queries I've tried:
QUERIES:
'SELECT COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) PIVOT C
But none of these have worked.
I also get this error message in my console:
ERROR MESSAGE:
Here's the script I'm using that pertains to my problem:
SCRIPT
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
Here's the script for the entire page that it's being used in:
ENTIRE SCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
<title>CDC Dashboard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootswatch Theme -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" >
<!-- External style sheet -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Load the AJAX API for Google Charts-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={
"modules":[{
"name":"visualization",
"version":"1"
}]
}'></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
</script>
</head>
<body>
<!-- Navbar to be affixed at the top -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>What We Do</li>
<li>Who We Serve</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Who We Serve</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<h2 class="text-center">Understanding Our Clients</h2>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div class="row">
<div class="col-md-6">
<div id="filter_div"></div>
</div>
<div class="col-md-6">
<div id="search_div"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="attendance_div"></div>
</div>
<div class="col-md-6">
<div id="transport_div"></div>
</div>
</div>
<div id="chart_div">
</div>
<div id="chart_div2">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<div id="storytime">
<h2 class="text-center">Storytime</h2>
</div>
</div>
</div>
</body>
</html>
The working file for it can be seen here: https://s3-us-west-2.amazonaws.com/example-server/serve.html
UPDATE
Ideally I'd prefer a solution that only relies on changing the query itself, as this is syntactically cleaner. I'll be doing this several times throughout the project and would prefer to avoid workarounds that involve extra lines of code.
Any help would be greatly appreciated.
this should work, must be a bug or something...
'SELECT C, COUNT(C) GROUP BY C'
regardless, you can use data.visualization.data.group to manually aggregate the column
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['controls', 'corechart', 'table']
});
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171');
query.setQuery('SELECT C');
query.send(function (response) {
if (response.isError()) {
alert('Error: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
var dataGroup = google.visualization.data.group(
response.getDataTable(),
[0],
[{
aggregation: google.visualization.data.count,
column: 0,
label: response.getDataTable().getColumnLabel(0),
type: 'number'
}]
);
var neighborhoodChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
dataTable: dataGroup,
options: {
height: 240,
title: 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to change the DIV class base on CLICK action. I am trying to make a floating sidebar like this http://startbootstrap.com/templates/simple-sidebar.html
This demo has only three lines of code for toggle-ing the class.
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
I want to achive same thing but in ember way. Below is my HTML code:
<div id="wrap">
<div class="pull-left" id="main_menu">
<ul class="list-group">
<li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
<li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
<li class="list-group-item"><h4>Account info</h4></li>
<li class="list-group-item"><h4>Recent Orders</h4></li>
<li class="list-group-item"><h4>How to</h4></li>
<li class="list-group-item"><h4>FAQ</h4></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container" id="page_content">
{{outlet}}
</div>
<!-- End page content -->
</div>
</script>
<script type="text/x-handlebars" id="cards/index">
<h1>
<button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
<img src="images/icons/menu_tablet.png" class="main_menu"/>
</button>
</script>
Now I do not know how can I use the action to change the class in WRAP div. I will really appreciate any help regarding this issue.
You can add the action handler within the controller for cards/index
Controller = Ember.ObjectController.extend({
actions: {
changeClass: function() {
// Run logic here
}
}
})
0 release!
I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.
I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.
I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.
Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)
<html>
<body>
<script type="text/x-handlebars">
<nav class="top-bar" data-options="is_hover=false">
<ul class="title-area">
<li class="name">
<h1>Main</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left show-on-small">
<li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
</ul>
<ul class="left">
<li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
</ul>
</section>
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="families">
<div class="row display">
<div class="large-3 columns">
<span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
</div>
<div class="large-9 columns">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="families/details">
<div class="row">
<span>details</span>
</div>
<div class="row">
<section class="section-container auto" data-section data-section-small-style>
<section class="active" >
<p class="title" data-section-title>Family Info</p>
<div class="content" id="panel1" data-section-content>
<span>Family Info goes here</span>
</div>
</section>
<section>
<p class="title" data-section-title>Members</p>
<div class="content" data-slug="panel2" data-section-content>
<span>Family members list goes here</span>
</div>
</section>
</section>
</div>
</script>
</body>
</html>
My Javascript:
App = Em.Application.create();
App.Router.map(function() {
this.resource('families', function() {
this.route('details');
});
this.resource('charities');
});
Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.
Thank you.
EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host
I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.
What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.
App.DetailsView = Ember.View.extend({
didInsertElement: function() {
$(document).foundation('section'); // this will only load the section component
}
});
One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.
You can change Embers location method to a modern variant by specifying:
App.Router.reopen({
location: 'history'
});
This will however not be compatible with IE 9 and below.
Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes
First, I'm a new user so if this is not the place to ask this question or the question is leaking with details please inform me and I'll do the required adjustments.
I'm new to Ember.JS and I've recently started learning by reading this getting started guide.
In the early stages of this guide I'm already dealing with the next problem:
All stages worked well until the stage where I need to update my index.html to wrap the inner contents of <body> in this Handlebars script tag:
<script type="text/x-handlebars" data-template-name="todos">.....</script>
as asked in the 5th step of this guide.
After I do so my window ends-up displaying nothing (except for the background image)
Here is how my files looks like (hierarchic):
https://dl.dropboxusercontent.com/u/24149874/image.png
And those are the content of the relevant files from the previous steps in the guide:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
<script src="libs/jquery-1.10.js"></script>
<script src="libs/handlebars.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/ember-data-0.13.js"></script>
<script src="application.js"></script>
<script src="router.js"></script>
</body>
</html>
application.js
window.Todos = Ember.Application.create();
router.js
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Of course, I tried to find an answer in other relevant posts but nothing I found was helpful.
Appreciate your help!
I guess the only piece missing here is the application template itself.
Try to define one like this:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
...
</script>
The {{outlet}} here is important since you need to tell ember where to inject your todos template.
See here for a working example, the css file is not included so it's normal that everything is screwed up, but the basic setup is working.
Hope it helps.
In addition to the jQuery file, even handlebar file's name is also incorrectly written in the index.html file.
Modify the index.html file with following code:
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
Further in the next step, note the js file is named js/app.js or js/application.js since the code at github has file name as app.js whereas the website shows file name as application.js.
FWIW, I had the same problem, and it turned out the jQuery file in my js folder was a different version than the one called for in the tutorial's html. It was a simple error, but one that took me a little too long to notice.