I've fruitlessly looked for examples of using Meteor with an Iframe. (Note that I have to use an iframe instead of a DIV because of the content that will ultimately go there). I've tried both:
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click to see what you typed" />
<br>
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
</template>
<template name="iframe-content">
<body>
<div contenteditable="true">
Edit me
</div>
</body>
</template>
This loads recursively, creating sub-Iframes continuously.
I've also tried
<iframe id="compose" src="content.html" height=600></iframe>
but Meteor munges the multiple HTML files together which also causes the iframe to fail.
The only thing that worked so far is SRCDOC instead of SRC, but that isn't well supported by multiple browsers like FF.
So, what's the trick to use an iframe within Meteor, preferably in the template rather than strictly through code?
You want the 'public' folder. Meteor leaves content in that folder alone, as described here: http://docs.meteor.com/#/full/structuringyourapp
Move 'content.html' into a folder named 'public' at the root of your project/app and reference it like so in the html:
<head>
<title>iframe</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
<iframe src="hello.html"></iframe>
</template>
To be clear for other readers, Meteor has no problem with iframes. The issue was with the location of the 'content.html' file the iframe referenced.
I don't understand your first code example:
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
As far as I know, that's not how iframes work; you have to specify a url in the src attribute, you can't just put the actual HTML there. So that won't work.
As for the second example:
<iframe id="compose" src="content.html" height=600></iframe>
Where do you expect Meteor to get content.html if you haven't specified that that path exists? Since Meteor doesn't set up routing by default, there is no resource at /content.html. So you'd have to add the Meteor Router package or some similar routing mechanism, and then tell Meteor that when asked to serve /content.html, it should just return the content of some template. The challenging part is figuring out how to get Meteor to return "real" HTML and not the Meteor-wrapped live HTML construction that is usually served up.
I have been playing with iframe lately (mainly to encapsulate some page made for an app webviews) and if you put those html files in the /public folder and in the iframe src write absolute url /file.html then it just works.
Related
I am trying to create a Datetime picker for birthdays, as you can see here, the solution requires the use of many links and script sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<br>
<div class="form-group">
<div class='input-group date datepicker' name="datepicker" >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
I want to use mvc bundles, with links to those scripts and stylesheets. But the solution I found: How to setup bundles using CDN in ASP.NET MVC?
does not explain how to include many links in a bundle. Instead, uses one link per bundle:
bundles.Add(new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js")
.Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
.Include("~/Content/bootstrap.css"));
As you can see, I would have to 6 different bundles.Add. I want to be able to do something like this:
bundles.Add(....,"https://maxcdn","https link","another link")
How can I do it ? I want to include that bundle in my view like this:
#Scripts.Render("~/bundles/myCustomBundle")
This an example you can change parameters according to your need.
Example
The cdnHost parameter refers to alternate URL for the bundle when it is stored in a content delivery network. The cdn bundle is supposed to be loaded as one file and should contain a combined content of all files uploaded on cdn for example server path is https://ajax.googleapis.com/ in your case
then you can load multiple script file as one bundle you just need to provide relative path of other files in include method.
var cdnHost = "https://ajax.googleapis.com/";
bundles.Add(new ScriptBundle("~/bundles/angularCDN", cdnHost).Include(
"~/ajax/libs/angularjs/1.3.0-beta.17/angular.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-cookies.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-route.js"));
i hope it'll work for you.
Need help to run processingjs on Meteorjs for my project. I have added the package from bgrayburn and still have difficulty in being able to run processing file.
I use cloud9 as my platform to run and flow router. In the picture is the file organization.
file organization:
Here's my code on my page1 template:
<template name="page1">
<body>
<div>
<h1>HELLOO to Page1!</h1>
{{> processingSketch}}
</div>
</body>
</template>
<template name= "processingSketch">
<div style="border-style:dotted;">
<canvas style="border-style:solid;" data-processing-sources="mysketch.pde"></canvas>
</div>
</template>
On the browser I got like below:
view in browser:
You can see that the html works fine, but it does not run the sketch.pde file. What did I miss? I really appreciate your answers. If possible please include screenshots.
I have many scripts inside of my index.html file that holds all my Ractive scripts. I am wondering if there was some way to organize this all and have these scripts in different html or js files.
Here's what I mean:
//index.html
<script type="text/html" id="template-1">
...content...
</script>
<script type="text/html" id="template-2">
...content...
</script>
<script type="text/html" id="template-3">
...content...
</script>
Here's what I am trying to accomplish
//template1.html or js
<script type="text/html" id="template-1">
...content...
</script>
//template2.html or js
<script type="text/html" id="template-2">
...content...
</script>
//template3.html or js
<script type="text/html" id="template-3">
...content...
</script>
I have tried doing it this way, and I get errors since my ractive objects are on my index.html, and there's no way to include other html files. I'm sure other people have had this problem before, is this possible?
You should use per-file components. This allows you to package one component into one file, script, styles and markup while still keeping the separation between them. In order to use components, you need to use loaders which are available in just about every module management/bundling system out there.
You could use php or some other server side script
<?php
include_once('a.html');
include_once('b.html');
include_once('c.html');
?>
I'm creating a Meteor application. When first creating application, Meteor has put this sample code in hello.html
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Hello World Template
</template>
I install Iron-Router package. then here is my lib/Router.js file:
Router.route('/', function () {
this.render('post_template');
});
And here is my client/templates/posts/post_template.html
<template name="post_template">
Example Template
</template>
I don't know why when I run this application. The result is:
HelloWorld Template
Example Template
In other word, which part of Meteor's configuration that load hello.html as default page, and then append all other templates in routing inside ?
Thanks :)
In this case the very first Meteor loads is the
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
Since you are calling there the hello template, thats the first you get on the screen.
I reccomend on this case use the layout template and remove the <body> tag
So first declare the route.
Router.configure({
layoutTemplate:'layout'
})
delete the <body> and <head> tags and place this layout template instead.
<template name="layout">
<navbar>
<!-- This stuff will be available on all routes since you are declaring on the layout template -->
</navbar>
{{> yield}} <!-- this yield helper will render the post_template or any other -->
</template>
For example
If you have this 2 routes.
Router.route('/', function () {
this.render('post_template');
});
Router.route('/example', function () {
this.render('example');
});
What happened here, when you go through the / route, iron router will render the 'post_template' html into the layout template, and when you navigate to /example, iron router will remove the post_Template html and render the content inside /example template, if you want to have the same content on all pages, declare it on the <layout> template i.e footers,navbars, etc
The layout template its like the "master" template here.
IR will append to the <body> if it exists (and otherwise add one for you) so it's recommended that you remove the entire <body> tag.
You are actually safe to remove the hello.html entirely (since you also don't need the hello template). If you want to keep the head tag, you could just modify the file to look like:
<head>
<title>hello</title>
</head>
To understand why hello.html is being included, see the Structuring your application section of your docs:
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
So all of your html files are always included. If you don't want to include them, you need to remove them from your app.
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.