I'm working on a simple apple tv application using the atvjs framework, however I am running into difficulties with the menu bar.
Does anyone know if it is possible to retain the top menu bar when navigating between pages with the 'data-href-page' attribute?
The sample code below will correctly navigate to and render the page but the menu bar is gone and requires the user to back out instead.
<document>
<alertTemplate>
<title>Example for creating links to other pages</title>
<description>Select an option</description>
<button data-href-page="homepage">
<text>Go To Homepage</text>
</button>
<button data-href-page="login" data-href-page-options='{"username": "emadalam", "password": "123456"}'>
<text>Login</text>
</button>
</alertTemplate>
Related
I want to show the side navigation bar initially when the page is loaded. Please help. I have written my entire code here for reference.
Use the opened attribute as shown here
<mat-drawer #drawer opened="showFiller" class="example-sidenav" mode="side">
<p>Auto-resizing sidenav</p>
</mat-drawer
I'm very new to website creation. I've been using Weebly and I have a navigation bar that I'd like to change up a bit. I got in contact with the support team as I was unable to do what I wanted to do - they said I would need (myself or someone else) to edit the HTML and CSS to get my desired output.
Current Navigation
This is my navigation bar - I'm looking to break each of the links into multi-line (if that makes sense). So where it says: "Management Consulting" - I want Management to be on top, and Consulting to be under that. Same goes for "Economic Development," "Strategic Communications," and "About Us." So navigation links with more than 1 word, I want to break by word.
I went to the Weebly navigation folder for the code: Weebly Navigation Code Location
Here is the file item.tpl
<li {{#id}}id="{{id}}"{{/id}} class="wsite-menu-item-wrap">
<a
{{^nonclickable}}
{{^nav_menu}}
href="{{url}}"
{{/nav_menu}}
{{/nonclickable}}
{{#target}}
target="{{target}}"
{{/target}}
{{#membership_required}}
data-membership-required="{{.}}"
{{/membership_required}}
class="wsite-menu-item"
>
{{{title_html}}}
</a>
{{#has_children}}{{> navigation/flyout/list}}{{/has_children}}
</li>
list.tpl
<ul class="wsite-menu-default">
{{#links}}
{{> navigation/item}}
{{/links}}
</ul>
From my understanding (or lack there of), the "Flyout" is the mobile tab thing. So this shouldn't need an edit!
Is this doable? I appreciate it!
Normally you can specify an anchor on a page such as "index.html" with code such as:
Link Text
You can then jump to that anchor when the page is displayed by including it in the path:
http://example.com/index.html#anchor
I am developing a landing page with the Yesod Haskell framework, and would like to integrate this functionality into my landing page.
Currently I have a navigation bar with several links at the top of the page. The navbar is specified with hamlet as:
<div #navbar .collapse.navbar-collapse>
<ul .nav.navbar-nav>
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}>_{MsgHome}
Note that the href is specified with "HomeR". "HomeR" is defined in the Yesode "config/routes" file that lists all of the paths for the site.
It looks like:
/ HomeR GET
/settings SettingsR GET
Here is my problem. I can add an anchor to a section of the hamlet specification, then modify the href on the title bar to jump to that section such as:
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}#section0>_{MsgHome}
However this is annoying for several reasons. First the anchor is not checked for validity at compile time like the other paths.
Second normally the current page is highlighted on the navigation bar with the code:
<li :Just HomeR == mcurrentRoute:.active>
With this approach I can highlight for individual pages, but not individual anchors within a page.
Is there a way to insert safe anchors into the Yesod config/routes file. Or is it only possible to have a route with actual pages. This would allow jumping to sections of the page in the navbar, then highlighting the section that was clicked on. If this is not possible is there a better way to deal with page anchors in yesod?
Right now at my job, I'm tasked with creating a monitoring dashboard site. I'm thoroughly looking through a lot of different design choices and what my company wants, but all the templates I'm looking at for dashboards aren't formatted the way the company wants: a nested tab feature, not a side bar navigation.
Upon looking through a bunch of nested tab examples, one of them caught my attention which was Zozoui's Nested Tabs. This isn't something I've seen from BootStrap and JQuery UI, so I don't even know how to begin with starting something like this, but I'd like to change a couple of things here and there, like right before the second set of tabs, have a description of the first current tag.
So in short, how do I create my own nested tab feature like Zozoui's Nested Tabs?
You can make a menu and a div for contents when you click a specific tab it's contents should show in that div.do it by jquery or js.
HTML
<nav id="menu">
<a id="item1">item1</a>
<a id="item2">item2</a>
.
.
.
</nav>
<div id="contents">
<div>
jquery
$("#menu a").click(function{
$("contents").html(//something that you want);
});
Can someone please offer me some advice?
I'm trying to customise a website and its HTML Nav Menu. By default, the menu already highlights the current tab for all existing pre-built pages.
http://webservices.retrotorque.com
I've added a new page to the website - Website Design - and I've added a tab to the menu for that page. All fine. But I can't find a way of making that tab become highlighted for only when that page is viewed.
Here is the existing code for one of the default tabs, which works fine.
<li class="first <#tag:homesection /#>">
Home
Here's my code for the menu tab I've created for my new page:
<li class="levelone <#tag:webdesignsection /#> ">
Website Design
<li>
My problem is that I can't find where to define:
<#tag:webdesignsection /#>
So I may need to find another solution.
I've thought of another approach:
<li class="levelone active">
Website Design
<li>
This code does work, but only in so much as the tab is always highlighted, whichever page is being viewed.
Is there a way of wrapping this up in a 'conditional'? So that it only applies when viewing the websitedesign page. And I could have a non-active alternative, conditionally set up for when viewing any of the other pages.
Thanks.
i think you should put JQuery there that can addClass and removeClass active from li element.
there is for example
var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');