I cannot navigate from my index.html file to a contact.handlebars HTML page that has a contact form.
Am I just misunderstanding how handlebars works?
I've tried taking away the extension completely.
<!-- Header -->
<header>
<img src="/Images/Small Logo.svg" alt="?" class="nav-logo">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<!--NAVBAR-->
<nav>
<ul class="nav-ul">
<li class="nav-li">
Home<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
Answers with Amy<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
About<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
Contact<span class="sr-only">(current)</span>
</li>
</ul>
</nav>
</header>
the file path is correct.
I expect to have it navigate me to the handlebars file, displaying as an HTML page, but the page displays "Cannot GET /contact.handlebars"
Related
Hi im trying to make a navbar with 3 link in container class.I tried justify content between on navbar but it doesnt work justify content center works but between class doesnt work on navbar links displays like block.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex ">
<div class="container justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<ul class="navbar-nav d-flex flex-row align-items-center justify-content-between w-100">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
You can try this.
that is because you are using flex on different element and justify-content in different element,
my suggestion is to use this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container d-flex justify-content-between ">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
</div>
</nav>
also as a bonus suggestion use header instead of nav and replace the first div with nav for SEO purpose by using right semantic elements
Can we remove the tracking urls parameters ?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations used in the related article section?
Yes, WordLift Faceted Search uses a Handlebars template.
The default template looks like this:
<script id="faceted-search-template" type="text/x-handlebars-template">
<aside class="wl-cloud-widget-wrapper wl-faceted-wrapper wordlift-cloud-widget wordlift-faceted">
<h3>{{title}}</h3>
<nav class="chips">
{{#each entities}}
<span class="chip {{activeClass}}" data-referenced-posts="{{referencedPosts}}"
data-id="{{id}}">{{label}}</span>
{{/each}}
</nav>
<section class="cards">
{{#each posts}}
<article class="card" data-post-id="{{ID}}">
<a href="{{permalink}}?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations">
{{#if thumbnail}}
<div class="thumbnail" style="background-image: url('{{thumbnail}}');"></div>
{{/if}}
<div class="card-content">
<header class="title">{{post_title}}</header>
</div>
</a>
</article>
{{/each}}
</section>
<nav class="nav-links">
<span class="nav-link previous">❮</span>
<span class="nav-link next">❯</span>
</nav>
</aside>
</script>
A developer can create a new template and embed it into the page, then set the template_id property of the wl_faceted shortcode to the id of the new template.
I have a basical layout with a sidebar. I want to hide the sidebar when I am on /users/profile. How can I do it using the if helper? Is there a way to get the current file name?
Here is the code:
<div class="wrapper">
{{#if user}}
<nav id="sidebar">
<div class="sidebar-header">
<h3>Options</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<h1>
Home
</h1>
</li>
<li>
<h1>
Chat
</h1>
</li>
<li>
<h1>
About us
</h1>
</li>
</ul>
</nav>
{{else}}
{{/if}}
With the current code if a user is logged in the sidebar is showed , otherwise it is hidden. I want the same behaviour also if I am on users/profile.
Your routing is handled by Node.js. Somewhere in your Node.js you probably have instructions on what to do when the user opens /users/chatlist or /users/search, e.g. you select which template to render. Once you know the request is for route /users/profile, you use a JSON payload for your handlebars to properly render the page. You can customize that payload as you wish, including adding some helper fields. For example it may look like:
{
user: { ... },
sidebar: {
visible: false
}
}
Then inside your template, you may use it for a conditional check, like:
{{#if sidebar.visible}}
<nav id="sidebar">
...
</nav>
{{/if}}
The following code outputs the ui:repeat tag on the genereated html, and its breaking my layout.
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix">
<ui:repeat value="#{categoryBean.rootCategories}" var="cat">
<li class="relative f_xs_none m_xs_bottom_5">
<a href="#{cat.url}" class="tr_delay_hover color_light tt_uppercase">
<b>#{cat.name}</b>
</a>
</li>
</ui:repeat>
</ul>
</nav>
Here the Output generated by the code above:
<nav role="navigation" class="f_left f_xs_none d_xs_none t_xs_align_l">
<ul class="horizontal_list main_menu clearfix"><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="florestal" class="tr_delay_hover color_light tt_uppercase">
<b>Florestal</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="jardinagem" class="tr_delay_hover color_light tt_uppercase">
<b>Jardinagem</b>
</a>
</li></ui:repeat><ui:repeat>
<li class="relative f_xs_none m_xs_bottom_5">
<a href="pragas-urbanas" class="tr_delay_hover color_light tt_uppercase">
<b>Pragas Urbanas</b>
</a>
</li></ui:repeat>
</ul>
</nav>
BalusC, thanks for JSF version tip, I looked the Mojarra changelog and I found a bug on ui:repeat, I updated to Mojarra 2.2.7 and the problemn was solved.
I have a webpage which has tab list, the HTML looks like this for this piece:
<div id="content">
<div class="col span-6">
<div class="section first no-border">
<h2>New Search</h2>
<ul class="tabs clear">
<li id="simple-li" class="current">
<a onclick="switch_search_type('SimpleSearch');; return false;" href="#">Simple</a>
</li>
<li id="structured-li">
<a onclick="redirect_to_search('/search/structured_searches/new'); return false;" href="#">Wizard</a>
</li>
<li id="advanced-li" class="">
</li>
<li id="custom-li" class="">
<a onclick="switch_search_type('ComplexQuerySearch');; return false;" href="#">Custom</a>
</li>
</ul>
<div class="tabbed-panel">
I want to select the "Custom" item in this tab list. I tried multiple things but have failed, some of the things I tried:
browser.li(:id, "custom-li").click
browser.select_list(:id, "custom-li").set("Custom")
browser.link(:xpath, "id('custom-li')/x:a").click
browser.select_list(:id => 'custom-li').select "Custom"
I am new to watir-webdriver. Any feedback and help is greatly appreciated.
Try this:
browser.a(:text => "Custom").click