TYPO3 website is using TYPO3 extension of Smarty.
In one existing template called header.tpl I have this code:
<div class="header">
...
</div>
<div class="nav">
...
</div>
Is there some way to hide div element with the class "nav" using if condition? This header.tpl is used on every page, but I want to achieve that only on page with id=3 (in TYPO3) the navigation part will be hidden.
For example:
<div class="header">
...
</div>
{if (???) }
<div class="nav">
...
</div>
{/if}
Thank you very much for your help.
If you use the TYPO3 extension of Smarty, there are special plugins that give you the possibility to access data from TYPO3.
You can find them here: https://github.com/rtp-ch/smarty/tree/master/Classes/SmartyPlugins/Frontend
I'd say to use {if $data.uid == 3}, but I also need to see more of your setup to be sure.
Related
<div class="ui form segment">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<div class="default text">
Select
</div>
<i class="dropdown icon"></i><input name="hidden-field" type="hidden">
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
</div>
</div>
</div>
this code is written inside a template.hbs(handlebar) file.
I want to initialise the drop down with the following command
$('.ui.dropdown')
.dropdown();
where could I write the second code?
if it was an html/php file I could write inside the template
Short answer, you don't.
Long answer:
If you are developer who takes any pride in his work and doesn't want the next maintainer to fantasize about drowning you in dirty toilet water, you should create a dropdown component. This component seems small in scope and would look something like this:
{{dropdown-list options=listOfOptions onOptionSelect=(action "someAction")}}
You pass in the options, convert:
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
to:
<div class="menu" tabindex="-1">
#{{each options as |option|}}
<div class="item" data-value="{{option.value}}">
option.displayName
</div>
{{/each}}
</div>
where each options is [{displayName: "Option 1", value: 1}...]
Inside of the javascript part of the component, simply execute the above code from within didInsertElement which the docs describe:
After a component successfully renders its backing HTML element into the DOM, it will trigger its didInsertElement() hook.
Lastly, inside of the component, bind listeners to the dropdowns native events. One such function, the one for the dropdown's select action, should call this.onOptionSelect(whateverTheSelectedValueIs). This allows you to define actions differently for each dropdown.
I highly recommend you take a moment to read this section of the docs
Writing Ember requires a different mindset than writing backend rendered html + jquery style applications. You want to really decouple your javascript code from the DOM as much as possible and focus on values + data down/actions up. Components are the correct place to bind to native javascript events and integrate with 3rd party addons. Doing so effectively isolates the DOM interactions and provides a nicer api to the rest of your application. If you were to just use the routes renderTemplate hook to execute the .dropdown() call, you require every developer to remember to call dropdown any time you want to use a dropdown and have done absolutely nothing for reusability and just hacked your way to a solution. Don't be that guy, do it right :)
Is there a way of having partial views that does not reload when I change click a link in Sitefinity?
I have this template and I want to keep header, menu and footer and change only the content.
<div class="sfPublicWrapper" id="header">
#Html.SfPlaceHolder("headerPlaceholder")
</div>
<div class="sfPublicWrapper" id="menu">
#Html.SfPlaceHolder("menuPlaceholder")
</div>
<div class="sfPublicWrapper" id="content">
#Html.SfPlaceHolder("contentPlaceholder")
</div>
<div class="sfPublicWrapper" id="footer">
#Html.SfPlaceHolder("footerPlaceholder")
</div>
Any idea how to achive this?
After trying different template setups I came into the conclusion it´s not possible with the MVC based templates to have fixed parts of the page that will not re-render after clicking on the menu. There are some implementations that can optimize how the page render and how the cache is managed.
https://www.progress.com/documentation/sitefinity-cms/administration-cache-settings
Template best pratices
https://www.progress.com/documentation/sitefinity-cms/custom-themes-and-templates-preparing-your-work-environment
bundling and minification
https://www.progress.com/documentation/sitefinity-cms/administration-enable-asp-net-bundling-and-minification
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update:
When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView
https://github.com/emberjs/ember.js/pull/4790
I am trying to use foundation UI with ember.js and I seem to have an issue with getting section to work properly. Anything within div class="content" doesn't appear. I am guessing this because of a href ='#' Section 1 . Where else could I be wrong? I don't have a clear understanding of how ember works as I am trying to figure things out.
<div class="section-container accordion" data-section>
<section class="section">
<p class="title">Section 1</p>
<div class="content">
<ul class="side-nav">
<li>Item !</li>
</ul>
</div>
</section>
</div>
Your issue is due to the fact that by default, any element with content class inside a section is hidden. It will remain hidden unless you initialize foundation. The key to solving your issue is doing this:
$(document).foundation();
Now make sure you referenced Foundation's script: foundation.min.js