I'm trying to use ember animated outlet (found here) and, I can not for the life of me get it to work, I understand that instead of using {{outlet}} I need to use {{animated-outlet}} and use {{link-to-aniamted}} instead but it seems to be switching like normal. I also know that I need to include the js after the ember.js and also I am including the css file it comes with, so I'm kind of stumped on this. :(
For my basic view, I'm using
<script type="text/x-handlebars" data-template-name="application">
<div class='wrapper'>
#include('includes.globals.header')
<div class='content row' id='content'>
{{animated-outlet}}
</div>
#include('includes.globals.footer')
#include('includes.js.navigation')
</div>
</script>
and my link looks like:
{{#link-to-animated 'index' animations="main:slideLeft"}} Home #{{/link-to-animated}}
So, is there something i'm missing? Do I need to add something in my app.js? IF you need more code or info, just ask and I will edit this question! Thanks a lot in advance! I'm new to ember, so please take it easy!
You need to specify 'name' in the animated-outlet helper.
{{animated-outlet name="main"}}
The readme explains it: https://github.com/billysbilling/ember-animated-outlet/blob/master/README.md#use-animated-outlet-instead-of-outlet
Related
I have laravel template.blade.php
<div class="classone">
<div class="classtwo">
text
</div>
<div class="classtwo">
text
</div>
</div>
And I would like to display the code to the user as it is. Incluing new line and indents.
I was playing around with {!! !!}, nl2br(view()->render() even Blade::compileString but was unable to find an elegant solution. Everytime I was able to make it work it was difficult to maintain and every small change to the displayed code was laber intense.
I would like to ask for a suggeston how to display more complex html/css/js code to user. I though it will be fairy often topic but was unable to find anything which would help me.
Thank you in advance.
I tried some things out. They may seem a little bit 'hacky' but I think they will suit your purpose. I used a freshly created Laravel 8 application as an example.
<pre>{{ file_get_contents( resource_path('views/welcome.blade.php')) }}</pre>
You can use the Blade facade to compile your blade file to plain php if you want:
<pre>{{ Blade::compileString(file_get_contents( resource_path('views/app.blade.php'))) }}</pre>
I put <pre></pre> tags around the output to show line breaks. It makes the code more readable.
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
I just started learning Laravel, and I want to include a second controller into my main layout.
The route is the default root directory: /
And the layout looks like this:
<div class="container">
#yield('content')
</div>
<div class="basket">
~basket comes here~
</div>
I want to show the user's basket, but I need DB queries for that, and I can't find a way to include an other controller, atleast not with routing.
I'm not really asking for code (Sadly i didn't find a better place for this question), probably I just need a designing tip, I really feel I'm trying to do it wrong, since I couldn't find any relevant/helpful information for this.
And I dont want to put the basket into every controller that uses my main layout.
Any kind of help would be apreciated, I'm really lost :)
You should use view composers. Open you AppServiceProvider and inside the boot() method add the following:
view()->composer('your.layout.name', function ($view) {
$basket = ...// Your basket query here
$view->with('basket', basket);
});
This basically says, when view with name your.layout.name is composed, add variable with name $basket.
I am trying to learn EmberJs, in conjuction with Laravel 4, to create a blog. Things have been going great, stuff hasn't been too difficult yet. But I got into a snag when trying to have a <img/> tag in one of my handlebar templates.
From my understanding to use info from a model in a template you use {{attribute_name}} and like magic, it's there! And so for my tag I was trying something like:
<img src="{{URL::asset('images/posts/')}}#{{id}}.#{{image_extension}}" }}" alt=""/>
Adding the url to images with Laravel and Blade, then on the template, just adding in those last little pieces to make the it all work. But I get this instead:
<img src="http://localhost/blog/images/posts<script id='metamorph-11-start' type='text/x-placeholder'></script>26<script id='metamorph-11-end' type='text/x-placeholder'></script>.<script id='metamorph-12-start' type='text/x-placeholder'></script>jpg<script id='metamorph-12-end' type='text/x-placeholder'></script>" alt="">
Obviously theres script tags in my src tag and this is causing some issues.
Now then, upon much research I discovered {{unbound attribute_name}} and came up with:
<img src="{{URL::asset('images/posts')}}/#{{unbound id}}.#{{unbound image_extension}}" alt=""/>
and while this works on the first blog post I click, it doesn't switch images when I switch posts. So is there a way to make this guy work? I'm running out of ideas! Any information you could shed on this would be great! I really like ember so far and want to get even better! IF there's any more info you need, let em know and I will edit this question! Thanks so much!
EDIT:
Based on the advise from #buruzaemon, I tried
<img src="{{URL::asset('images/posts')}}/#{{bind-attr src=id}}.#{{bind-attr src=image_extension}}" alt="Post image"/>
and it feels like it's on the right path, but not quite there. Any more advice?
Perhaps you should have a look at bind_attr in Ember.js. It will allow you to set the src attribute properly with value that can be set in your controller.
simple question: How do I execute inline javascript in a HTML page snippet loaded with dojo.xhrGet()?
Being new to dojo I'm a bit confused this doesn't just work like in JQuery ...
Can anyone help??
Thanks,
thomas
We need more details! If you don't provide enough info you'll never get the right answer.
Anyway, if the HTML snippet is loaded inside a ContentPane, use a dojox.layout.ContentPane (is an extension to dijit.layout.ContentPane providing script execution).Or you could use one of the script tags that dojo accept. E.g:
<div dojoType=...>
<script type="dojo/connect" event="functionToConnectTo">
//javascript here
</script>
</div>
More valuable information about script tags on dojo parser reference.