I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.
I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'.
The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.
I'm setting a responsive Navbar just like this
<template name="nav">
<div class="row navbar centered" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
<ul id="nav-ul" class="eight columns">
<li>Quienes somos</li>
<li>Marcas</li>
<li>Servicios</li>
<li>Laboratorios</li>
<li>Contacto</li>
<li>Otros</li>
</ul>
</div>
</template>
but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.
you can see a sample here
any idea on how to get it up and running?
Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.
I assume you want to run the js script after the template is rendered. In this case, you need to write like this.
Template.nav.rendered = function() {
// Run the js to render the dropdown or whatever.
}
This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.
In addition, you can refer the official document here http://docs.meteor.com/#template_rendered
Related
Is it possible to have the same nav bar on all pages, without coping and pasting the code. Basically I want to have this:
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
On all three pages(Home, Login, Register). Without coping and pasting the code.
You can use Javascript frameworks to help you achieve this.
Javascript frameworks such as Angular JS provide functionality to help you do this.
A lot of template systems allow you to nest or inherit templates. For example, you'd put your navbar in a master template, and then simply inherit said template on all your pages. Jade and Jinja are two that come to mind.
If you're not using any type of template system, you could still piece together HTML files with whatever language you're using, but it's going to be a bit messy. For instance, read in multiple HTML files, concatenate them, and then serve them to the client.
Last but not least, you could dynamically add the navbar to the page, and simply include the same script on all the pages you want the navbar to appear.
Ultimately, your best option is to use a template system, as it handles things like this for you extremely efficiently and cleanly, but even without a template system you can still manage, just not as cleanly.
when I start meteor like this:
meteor --production
I get a blank page where my app should be and the following error shows up in my browser console:
No such function: navClassName
However if I start meteor normally like this:
meteor
My app runs without problem.
What could be the problem? Do meteor template helpers need to be loaded differently during production?
Relevant files:
client/navigation/navigation.html:
<template name="navigation">
<ul class="nav navbar-nav">
<li class="{{navClassName 'home'}}">
home
</li>
<li class="{{navClassName 'blog'}}">
Blog
</li>
</ul>
</template>
client/navigation/navigation.js:
Template.navigation.helpers({
'navClassName': function (route) {
if (Router.current()) {
return Router.current().route.options.navbarSelected.search(route) != -1 ? "active" : "";
}
}
});
Move navigation.js to the client/lib directory, or at least the Template.navigation.helpers part and fix/remove any other JavaScript that is causing errors.
I wish I could elaborate more, but this issue seems to be related to the file load order. Files in the lib directory are loaded first and moving the helpers there solved the problem for me.
A typical file structure can be found in the documentation. See the comments in the Example File Structure to learn about some of the special behaviors.
While this may work for you, finer control over dependencies can most easily be achieved through packages, as explained in this other answer from SO. This is specially necessary for code that should be available to both client and server.
Very new to webdev here, but trying my hand at Meteor! I'd like to create a collection that contains some text, a link, and an image and show each item in the collection in a grid-type layout similar to Pinterest.
I have found some resources, such as Meteor-isotope (https://github.com/digioak/meteor-isotope), cast.js (http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid-layouts-with-cast-js) and even maybe using twitter bootstrap's own grid system?
Is there a recommended approach to a gridview with Meteor? Thank you.
Masonry works nicely for me (here's my app). Simply add it to your project.
meteor add sjors:meteor-masonry
In order to make rendering work correctlly with images, you'll also need to add the imagesLoaded library.
meteor add mrt:jquery-imagesloaded
Here's an example on how to use it in your code:
result.html
<template name="resultPage">
<div id="result-container">
{{#each posts}}
{{> post}}
{{/each}}
</div>
</template>
<template name="post">
<div class="result-item">
<a href="{{url}}" target="_blank">
<img src="{{url}}">
</a>
<div class="author">
Submitted by: <strong>{{author}}</strong>
</div>
</div>
</template>
result.js
Template.resultPage.rendered = function() {
var $container = $('#result-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.result-item'
});
});
};
I found this sample project and ended up learning from it. I'm not sure if it helps others, but this is the project: http://isotest.meteor.com/
I went with isotope myself, but not the meteor package. I ended up having to use the library itself and then use jquery ImagesLoaded to do a isotope reLayout call. The way meteors Template..rendered works doesn't take into effect images or something so my "blocks" would intermittently overlap from time to time. I stopped developing the site but you can see how I went about it at www.mmohype.com. Click any game.
I'm working on a PhoneGap+JQM app that allows the operator to view our website. If we do a normal target="_blank", it launches Safari but doesn't provide an easy way to return to the app.
Has anyone figured out a good way to launch an external website in JQM in a dialog or with a closeable header? So far I've stuffed an iframe into a dialog and it is sorta working, but it feels a bit klugey.
Use dialogs. It acts as a popup in which you can add any content you want. User can close the popup and return back to your application. It won't feel nice unless the external website is designed for mobile devices.
Using a header with a back button and an iframe with the external site works great for me. You could also have a button in the header called 'Exit' or something like that that takes you to another JQM page.
<div data-role="page" id="pageExternalSite" data-add-back-btn="true">
<div data-role="header">
<h1>example.com</h1>
</div>
<div data-role="content">
<iframe src="http://example.com/"></iframe>
</div>
</div>
try this out..
https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
works fine for loading external link, within the app
I am working on an Ubercart installation on a Drupal site we are producing. Everything is going smoothly, but I am now trying to setup the order page template (uc_order module), so that the frontend developers can style it up.
The page is the one you view when you go to user/[UID]/order/[ORDER-ID].
I understand how to use hooks, preprocess, theming and template functions within Drupal, but currently I cannot see a way of changing any of the markup on the "order panes" that make up the page. It goes without saying that I don't want to touch any of the module's code.
So, one of the pages is the 'Bill To' address pane:
<div class="order-pane pos-left">
<div class="order-pane-title">Bill to: </div>
Name<br>
Address<br>
Town<br>
Postcode<br>
</div>
Essentially I would like to put a class in the div, so that it looks like this:
<div class="order-pane pos-left bill-to">...</div>
<div class="order-pane pos-left ship-to">...</div>
<div class="order-pane pos-left payment">...</div>
<div class="order-pane pos-left comments">...</div>
...
I just cannot see a way of doing this.
Any help would be much appreciated.
Have you checked the latest version of UC? The release note states:
The biggest change, though, is that order invoice templates now use the theme system to allow customizations. Instead of altering the module files directly, it is now correct to override them in the theme, just like node and page templates.
...and if I am not mistaken (a few months have passed by since I worked with UC), the invoice IS the page displayed by the URL you provided.
If my memory failed me (I haven't a UC installation handy to verify myself), a possible workaround (admittedly far from elegant, but still allowing you not to change the module's code) would be to alter the HTML with jQuery once the page has been loaded.
A more hack-ish workaround would be to maintain your own page callback for that URL, and just alter the menu definition in the UC code [yes, it's still hacking the code, but in this case you just need to modify one line in the UC code, and can maintain your code in a separate module].
HTH,
Mac.
You can create youre own panes or a single pane for everything, look up hook_pane, or you can insert the classes using jquery.