I have been trying to resolve an issue for awhile with rendering of content and the {{currentUser}} check in meteor. A code snippet is below:
{{#if currentUser}}
<div class="sparkline-box side">
<div class="sparkline-row">
<h4 class="gray"><span>Pending Contract Actions</span> 25</h4>
<div class="sparkline big" data-color="gray"><!--28,11,24,24,8,20,26,22,16,6,12,15--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="dark-green"><span>Outstanding Task Orders</span> $43.33M</h4>
<div class="sparkline big" data-color="darkGreen"><!--16,20,6,19,25,22,9,13,7,10,15,4--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="blue"><span>Current Month Actions</span> 45</h4>
<div class="sparkline big" data-color="blue"><!--20,18,21,17,5,7,29,9,8,14,23,8--></div>
</div>
<hr class="divider">
</div>
{{/if}}
With the {{currentUser}} block in place, the text appears, but the sparkline charts do not render in the browser, even when the page is reloaded. If I am not logged in, the text and charts are not visible. The problem is with the rendering of the sparkline charts when wrapped in the {{currentUser}} block. This also happens with other third-party javascript libraries that I am using in the application if wrapped in a {{currentUser}} block. Any thoughts on what may be happening?
Thanks!!
What happens is that meteor re-renders the context when {{currentUser}} changes. It does not preserve any changes made to the DOM by third parties. Read about isolate, preserve and constant. I believe that {{#constant}} will do the trick here.
Related
I'm working a little dashboard app for one of our internal systems, and opted to add a full-screen overlay when something is loading. It all works fine in Chrome, but on Edge I get something to this effect...
As far as I can tell its caused by having the fa-spin class on my main loading indicator as well as the overlay being transparent. I've removed fa-spin, Edge still has a few weird side effects (that I can live with), but it exacerbated by having the spin effect active.
Questions:
Has anyone encountered this before as my google attempts are returning seemingly futile results. Is there even a fix / work around for this, or is it just Edge being Edge...
Even though I'd love to opt and say to our users to not use Edge / IE, I'd feel like I'm giving up which isn't an option :P
HTML structure (More or less)
<div class="container-fluid" ng-class="{ 'overlay' : vm.isLoading }">
<div ng-if="vm.isLoading">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
</div>
<div class="col-md-7 main">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-12 container-fluid" ng-class="{ 'blur' : vm.isLoading }">
...
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
<div class="col-md-5">
...
</div>
</div>
I've just tried on my dashboard application using fa-spin and I can assure you that it didn't caused my issues. I've tried fontawesome both from cdn and embedded in my static files. Most probably that weird effect is caused by a number of overlapping CSS/JS styles/class toggling. I hope this answers your question.
I have discovered Kibana last week and I am wondering if it is possible to replace that "No results found" communicate with custom message?
I am preparing very huge dashboard and it will almost always contain some visuals that in perfect life should not display any results (because they are for errors).
I am not pleased with my current results because while there are no errors it looks like I just don't posses any knowledge of them.
Yes. You can change the message. And I tried this with kibana-4.X. There is a file called visualize.html in kibana-4.X\src\ui\public\visualize directory. The file consist of the following source.
<div ng-if="showNoResultsMessage()"
class="text-center visualize-error visualize-chart">
<div class="item top"></div>
<div class="item">
<h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
<h4>No results found</h4>
</div>
<div class="item bottom"></div>
</div>
<div ng-hide="showNoResultsMessage()" class="vis-container">
<div ng-style="loadingStyle"
ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
class="visualize-chart">
</div>
<visualize-legend></visualize-legend>
</div>
<!-- <pre>{{chartData | json}}</pre> -->
<visualize-spy ng-if="vis.type.requiresSearch && showSpyPanel"></visualize-spy>
In h4 tag you can provide your custom message whatever you wanted to show. After changing the message you have to empty the kibana-4.X\optimize directory in order to get the changes effect in your kibana.
i have screenShots element in my document that is an array of URLs which am trying to display in the front-end. here is my code
<div class="col-md-4">
{{#each product.screenShots}}
<img src="{{product.screenShots}}" alt="">
{{/each}}
</div>
this is what i get int he client side.
i can see the images exists when i enter the URLs.
what am i doing wrong here?
Since you said, screenshots is an array of URLs, you need to change src attribute like this,
<div class="col-md-4">
{{#each product.screenShots}}
<!-- Assuming product.screenShots = ["http://url-to-image1.com", "http://url-to-image2.com"] and so on..
<img src="{{this}}" alt="">
{{/each}}
</div>
When a user is viewing a tag on my blog, I'd like to be able to display additional information about that tag. I think it would be nice to have a template that's called for each tag I have.
My tag.hbs
{{!< default}}
<div class="row">
<div class="twelve columns">
<h1 class="archive_title"><span>{{tag.name}}</span></h1>
</div>
</div>
<!-- PLEASE LOOK HERE -->
I would like to render a partial here
<!-- PLEASE LOOK HERE -->
<div class="row {{#if #blog.cover}}margintop{{/if}}">
<div class="small-12 large-9 columns">
{{#foreach posts}}
{{> content-post}}
{{/foreach}}
</div>
<div class="small-12 large-3 columns">
{{> sidebar}}
</div>
</div>
<div class="row">
<div class="small-12 columns">
{{pagination}}
</div>
</div>
To render a partial for the current tag name, I've tried using this
{{> tag.name}}
I get a 500 error
[tag.hbs] The partial tag.name could not be found
Is there a way to include a partial with a dynamic name in handlebars?
Additional question: Ideally, I'd like all of the tag partials in their own directory. Is this possible too?
I am quite new to the Ghost platform, but I have been experimenting quite a bit. I see that you attempted to do this:
{{> tag.name}}
That is not actually calling the name for that particular tag, what you were trying to do there was to actually show the contents of the tag.hbs file itself. The reason I claim this is because when I recently just created a "menu.hbs" for a menu bar for my theme I attempted this:
{{> menu}}
Handlebars quickly realized that I had a "menu.hbs" file and poured the contents of that file onto the spot that I placed "{{>menu}}" in.
Essentially what you are trying to attempt is a "path". If you scroll down to "Handlebars Paths" on the Handlebars webpage you will find exactly the method you were trying to attempt. I hope this at least helped a little.
This works:
{{#has tag="foo"}}
{{> partial-for-foo}}
{{/has}}
{{#has tag="bar"}}
{{> partial-for-bar}}
{{/has}}
See the has helper docs.
This is a very strange issue. On the Reveal Form (onclick of "Price and Save My Shopping List"), I thought that for some reason the text box and dropdown were disabled. This is not the case; however, it's only allowing me to click on them on the far right of the control--I had to increase the dropdown to "medium" from "small" to be able to interact with it at all. I have no idea why this is happening and couldn't even think of what to Google. So I've looked at everything related to Foundation Reveal to no avail.
Here is the jsfiddle, but although it works on my site, it does NOT on jsfiddle. If you want to see it in action, I'll send you a link to my site.: http://jsfiddle.net/jenborn/TQjm9/
Here is the modal form since apparently I have to include code if I link to a jsfiddle:
<form id="saveShoppingList" action="" method="POST" class="custom">
<div class="small-12 columns">
<div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
<div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
<div class="small-8 columns"><input type="text" id="name" name="name" /></div>
<div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
<div class="small-8 columns"><select id="beer_style" class="medium"><? echo $style_opt ?></select></div>
<div id="makemebold" class="large-4 columns">Keep Private:</div>
<div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
</div>
<div class="row">
<div class="small-6 large-centered columns">
<button type="submit" class="button radius">Go</button>
<button type="reset" class="button radius alert">Reset</button>
</div>
</form>
You have some major issues in your use of Foundation's grid. You have subsequent columns adding up to well over twelve, and columns nested within other columns without an interposing row. If you go through the Foundation Docs' grid section and rewrite your code accordingly, I'm betting your issue will be resolved. Pay special attention to the section titled "Infinitely nest your grid".
I would also suggest basic improvements like using a label element for your form labels, as browsers will know how to use them better. And for semantics, of course.