Here is my html:
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/" data-toggle="collapse" data-target="#navbar">
{{chooseScriptLevel
'Home'
'zhŭyè'
'主页'
}}
</a></li>
</ul>
</div>
Here is my helper:
Template.registerHelper('chooseScriptLevel', function (english, pinyin, simplified) {
var userSkillLevel = Meteor.user().profile.skillLevel
switch (userSkillLevel) {
case 0:
return english
break
case 1:
var ruby = '<ruby>' + simplified + '<rt>' + pinyin + '</rt></ruby>'
return ruby
break
case 3:
return simplified
break
default:
english
}
})
My navbar is showing: <ruby>主页<rt>zhŭyè</rt></ruby>. Literally showing the html tags to the user.
How can I get it to show the user this:
zhŭyè
主页
If I do it manually, like this, , it works:
<li><a href="/" data-toggle="collapse" data-target="#navbar">
<ruby>主页<rt>zhŭyè</rt></ruby>
</a></li>
Just use triple braces around your helper - this is necessary if the helper returns html:
{{{chooseScriptLevel 'Home' 'zhŭyè' '主页' }}}
Related
How do you make a navbar you can use on multiple pages that you can change easily?
What I mean is, if you have a big website made of HTML code and you want to change its navbar, you would have to go to every single page and change it, right?
So what I am asking is, how do you make a multi-page navbar that you can change easily?
Something I've done is using JavaScript to create a navbar. In HTML, I have a <div> element with an ID of navbar-slot. Then in Javascript, I write code to stuff a navbar inside with links and all.
var navbar = document.createElement("nav");
var list = document.createElement("ul");
var homeSlot = document.createElement("li");
var home = document.createElement("a");
home.setAttribute("href","index.html");
home.innerHTML = "Home";
homeSlot.appendChild(home);
var aboutSlot = document.createElement("li");
var about = document.createElement("a");
about.setAttribute("href","about.html");
about.innerHTML = "About";
aboutSlot.appendChild(about);
list.appendChild(homeSlot);
list.appendChild(aboutSlot);
navbar.appendChild(list);
document.getElementById("navbar-slot").appendChild(navbar);
But then it occurred to me that, yes, while this is way easier than the "changing everything by hand" approach, it still gets very hard to read when using Bootstrap to refurbish the navbar. So, is there an even easier way?
Simply, use the backtick marker to make a string and save that to the navbar-slot's innerHTML! That's actually quite simple!
const code = `
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-label="Toggle navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="nabar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link text-light dropdown-toggle" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Something
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Something</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>`;
document.getElementById("navbar-slot").innerHTML = code;
I'm new to cypress and lately I have to extract text variables within websites using cypress. Now, I've finally figured out how to extract text variables of a specific class/id in html. However, I cannot find the right way to extract the exact nth element within the class/id.
For example, here is my html:
<div class ="main-menu-wrapper align-self-stretch align-items-stretch" id="navbarCollaspse">
<ul region="header" class="clearfix nav navbar-nav navbar-nav-center mx-auto">
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/aaaaa"
class="nav-link dropdown-toggle main-menu-1" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
TEXTAAAAA </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/bbbbb"
class="nav-link dropdown-toggle main-menu-2" data-toggle="dropdown"
aria-expanded="false" aria-haspopup="true">
TEXTBBBBBB </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/ccccc"
class="nav-link dropdown-toggle main-menu-3" data-toggle="dropdown" aria-
expanded="false" aria-haspopup="true">
TEXTCCCCCC </a>
</div>
Here is my cypress javascript code:
cy.visit('https://example/website')
cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each(($el) => {
cy.wrap($el).invoke('text')
.then(text => {
//do something with the text
//Here, I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC orderly, however, i want to extract only TEXTBBBBBB
})
})
Now, when I cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each($el) I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC. However, now, I only want to get the second element within the class , in this case, TEXTBBBBBB. I tried to reference the way from here but cypress couldn't found the path.
Any ideas on how to get specific element within a class using cypress is a great help! Thanks a million!
If you want to extract the text for a particular element, you can do it by using the index value, it should look something like this. Here we ae extracting the second element.
cy.get('locator').each(($el, index) => {
if (index == 1) {
cy.wrap($el).invoke('text').then((text) => {
//do something with the text
})
}
})
So I have a problem and as per usual given I am trying to learn frontend stuff i am out of my depth. I am currently writing a website that has a forum, live chat, profile, and a few other things. These I would call "Menu items" with sections of those i.e. unread messages being placed on a dropdown menu item for messages. As per blade fashion I am using a menu blade which is part of the layout blade and finally the page incorporates whichever layout it wants.
The last solution I tried after seeing a post was to add {{ Request::segment(1) === 'messages' ? 'active' : '' }} or {{ Request::segment(1) === 'messages' ? 'active' : 'null' }} into the class section of the corresponding li for the menu item, this successfully updated some of the menu items styles but also broke the dropdown functionality.
Below is my code which still has my last solution contained within it:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand {{ Request::segment(1) === '/' ? 'active' : '' }}" data-toggle="tab" href="/">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown {{ Request::segment(1) === 'forum' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="/forum" role="button" aria-haspopup="true" aria-expanded="false">Forum<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Newest Posts</li>
<li>Trending</li>
<li>Something</li>
<li role="separator" class="divider"></li>
<li>Create New Post <span class="glyphicon glyphicon-edit"></span></li>
<li>Your Posts</li>
</ul>
</li>
<li class="{{ Request::segment(1) === 'chat' ? 'active' : null }}">Chat</li>
<li role="presentation" class="dropdown {{ Request::segment(1) === 'messages' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Unread</li>
<li>Read</li>
<li>Sent</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default"></nav>
I appreciate I am new and that most solutions require something like js or jquery, if this is the case you will need to be explicit in how and where I put it as I have never even thought of using it yet!
Thanks!
I did have this problem recently, I found two useful packages in packagist.org
watson/active: This package is very simple and useful you can add active or any other classes to your menu base on their route, this could be route, action or url activation.
lavary/laravel-menu: I personally found this package most useful than the previous one, you can create hierarchical menus, activate a menu base on route, action or url, or even you can activate your menu base on any other url (this is useful for parent menus, e.g. when you are in a child link related to a parent link in your menu, both child link and parent link will be activated.). This package is most complicated than the other one, but I think the documentation written very clear and if you read it carefully you can do anything you want with your menus.
Here is my solution
<a class="#if(Request::is('home')) active #endif" href="{{ route('home') }}">Home</a>
I've been doing this many times and I've come up with 2 solutions depending on the type of navigations.
The easiest, works fine when you have simple entities (like Post, Category, Tag) and 1 menu entry for each.
Posts
This will match all classic endpoints such as /posts, /posts/new, /posts/{post}, ...
I've been using this for my latest projects because it's simple and allows much more customisation. It's pretty useful if you have something like nested navigation items.
Posts
All Posts
New Post
Posts Settings
Categories
All Categories
New Category
I'm just passing a variable to my layout like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="{{ $activeMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
// ...
You can also play with nested active states like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts' 'activeSubMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="dropdown {{ $activeMenu == 'posts' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab">Posts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="{{ $activeSubMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeSubMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
</ul>
// ...
Otherwise I suggest you take a look at spatie/laravel-menu
I need to make my website valid to past the school project. On my website there are few code snippets, which I implemented and when I check it on w3 validator, this error pops out: Named character reference was not terminated by a semicolon. (Or & should have been escaped as &.)
This is the website
I don't quite understand the error message. Can someone explain?
<pre><code> <!-- Example of code (Carousel -->
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">FUTURE LOGO</a>
<div class="visible-xs clearfix"></div>
<div class="navbar-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li>
<li><a href="obsahmp.html">Obsah MP</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
Responzivní webdesign<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li>
<li><a href="webovarozvrzeni.html">Webová rozvržení</a></li>
<li><a href="howto.html">Tvorba responzivního webu</a></li>
<li class="divider"></li>
<li class="dropdown-header">CSS frameworky</li>
<li><a href="frameworky.html">Co, jak a proč?</a></li>
<li><a href="bootstrap.html">Twitter bootstrap</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
<li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
Použité komponenty<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li><a href="navbar.html">Navbar</a></li>
<li><a href="carousel.html">Carousel</a></li>
</ul><!-- End dropdown-menu-->
</li><!-- End dropdown-->
</ul><!--End nav-->
</div><!-- End navbar-collapse-->
</div> <!-- End container-->
</div> <!-- End navbar-->
</code></pre> <!-- End of example of code (Carousel -->
You're displaying HTML syntax on your page, to do that you're using entities such as < (which stands for less than sign <). Except in your code the ; seems to be missing (just <) from all those entities, which is what the validator is complaining about.
When I copied your source into notepad and replaced all < and > with < and > the validator threw no errors.
(If the code you're trying to validate is actually the code in the code box, then you shouldn't be running the validation on the page...)
I am following MVA intro to Angularjs. I have two questions. First; is there any better tutorial website that you would suggest.
Second is using ui-router. I have been looking at it for hours; went looking for the answer, and just cant figure out what could possibly be wrong. Everything looks like the tutorial; the library came off of it; and everything was working in till I switched ng-route with ui-router(and all the href with ui-sref). I think the problem is in the mainApp module since the page is white (when I have had problems with the mainPageModule the navbar would show up but it would have {{event.something[0]}} listed across the top). This is driving me crazy.
index.html
<div ng-include src="'app/event/directives/header.html'"></div>
<div class="container">
<ui-view></ui-view>
</div>
<script src="./app/angular.min.js"></script>
<script src="./app/mainApp.js"></script>
<script src="./app/ui.router.js"></script>
<script src="./app/event/mainpageModule.js"></script>
<script type="text/javascript">
console.log("angular object",angular);
</script>
</body>
mainApp.js
angular.module('mainApp', ['mainPageModule','ui.router'])
.config(['$urlRouterProvider','$stateProvider',
function ($urlRouterProvider, $stateProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: 'main.html'
})
.state("area", {
url: "/area",
templateUrl: "area.html"
})
.state("personal", {
url: "/personal"
templateUrl: "personal.html"
})
.state("contact", {
url: "/contact"
templateUrl: "contact.html"
})
$urlRouterProvider.otherwise('','/home')
}])
.run([function () {
/* Run is when the app gets kicked off*/
console.log("Run hook");
}])
mainPageModule.js
(function(){
angular.module('mainPageModule', [])
.factory('SiteName', [function () {
return {
title:"Website Name"
};
}])
.config([function () {
console.log("Event Module:: config");
}])
.run([function () {
console.log("Event Module::running");
}])
.controller('navigationbarController', ['$scope', 'SiteName',function ($scope,SiteName)
{ this.menu=[
{
name:"Website Name",
href:"home.html"
},
{
name:"Your Area",
href:"area.html"
},
{
name:"Personal",
href:"personal.html"
},
{
name:"Contact",
href:"contact.html"
}
]
this.index = 0;
this.setIndex=function(val)
{
this.index = val;
console.log("called")
}
this.getIndex=function(){
return(this.index);
}
}])
})();
header.html
<nav ng-controller="navigationbarController as event" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{event.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<a ui.sref="home">{{event.menu[0].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="area">{{event.menu[1].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="personal">{{event.menu[2].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="contact">{{event.menu[3].name}}</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
As suggested by #TOM you need to load angular-ui-router right after angular.js has loaded thereafter you could load mainApp.js.
You need to replace your all ui-sref directive at all places.
ui-sref="home" instead of ui.sref="home"
For anybody else who has this problem, the fundamental flaw was the order of the scripts at the bottom of the page. It matters. Second, my script mistake was not including comma's after the url's in the mainApp. Moving forward, I replaced all the ui.sref's with ui-sref's and it did work.
Thanks for your help, pankajparkar and Tom was great. Anyone else who is starting out and run's into thisproblem, check the console, it will tell you whats wrong