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...)
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 have an Umbraco setup. And when I edit in the CMS I would like for the "Preview" button to disappear whenever there is not a text-editor present in the DOM.
Angular file in localtion Umbraco/Views/content/edit.html
<form novalidate name="contentForm"
ng-controller="Umbraco.Editors.Content.EditController"
ng-show="loaded"
ng-submit="save()"
val-form-manager>
<umb-panel umb-tabs ng-class="{'editor-breadcrumb': ancestors && ancestors.length > 0}">
<umb-header tabs="content.tabs">
<div class="span7">
<umb-content-name placeholder="#placeholders_entername"
ng-model="content.name" />
</div>
<div class="span5">
<div class="btn-toolbar pull-right umb-btn-toolbar">
<div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
<p class="btn btn-link umb-status-label">{{formStatus}}</p>
</div>
<umb-options-menu ng-show="currentNode"
current-node="currentNode"
current-section="{{currentSection}}">
</umb-options-menu>
</div>
</div>
</umb-header>
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
<div class="umb-pane">
<umb-property property="property"
ng-repeat="property in tab.properties">
<umb-editor model="property"></umb-editor>
</umb-property>
<div class="umb-tab-buttons" detect-fold ng-class="{'umb-dimmed': busy}">
<div class="btn-group" ng-show="listViewPath">
<a class="btn" href="#{{listViewPath}}">
<localize key="buttons_returnToList">Return to list</localize>
</a>
</div>
<div class="btn-group" ng-show="!isNew">
<a class="btn" ng-click="preview(content)">
<localize key="buttons_showPage">Preview page</localize>
</a>
</div>
<div class="btn-group dropup" ng-if="defaultButton">
<!-- primary button -->
<a class="btn btn-success" href="#" ng-click="performAction(defaultButton)" prevent-default>
<localize key="{{defaultButton.labelKey}}">{{defaultButton.labelKey}}</localize>
</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
<span class="caret"></span>
</a>
Return to list
<!-- sub buttons -->
<ul class="dropdown-menu bottom-up" role="menu" aria-labelledby="dLabel" ng-if="subButtons.length > 0">
<li ng-repeat="btn in subButtons">
<a href="#" ng-click="performAction(btn)" prevent-default>
<localize key="{{btn.labelKey}}">{{btn.labelKey}}</localize>
</a>
</li>
</ul>
</div>
</div>
</div>
</umb-tab>
</umb-tab-view>
<ul class="umb-panel-footer-nav nav nav-pills" ng-if="ancestors && ancestors.length > 0">
<li ng-repeat="ancestor in ancestors">
{{ancestor.name}}
</li>
<li></li>
</ul>
</umb-panel>
</form>
I am not certain this is the correct file - but it seems to be the place where the Preview button is created.
The question now is. Can I somehow determine with angular if the text editor is active and then if it is, show the Preview button next to the Save and publish?
I would suggest the following
1) Determine what properties are accessible on the object that is passed through to the <umb-editor> directive.
Digging into the code I can see things like it has a .view property. You could inspect this at runtime in the browser console to see what additional properties are available
2) You can write a rule on the button to show if the collection of fields contains one with a certain property you might have identified
something like this...
Hope this helps
I found a second solution I might as well add here. I used the Umbraco Plugin Backoffice Tweaking.
Here I added this to my Config\BackofficeTweaking.config file
<?xml version="1.0" encoding="utf-8"?>
<Config>
<Rules>
<Rule Type="HideButtons" Enabled="true" Names="preview" Users="" UserTypes="" ContentTypes="Omraader,Grund,Udstykning,Indstillinger,Niveau,Oversigt_Mappe,Oversigt,Information_Mappe,Information,Afstande_Mappe,Afstande" Description="" />
</Rules>
<Scripts>
<Script Name="example"></Script>
</Scripts>
</Config>
Here you can also make some scripting or do many other things. The plugin also has a visual editor for Umbraco. Pretty easy to use.
After intergrating Bootstrap 4 to my ASP MVC Core web project and changing some HTML code to a Cookie Policy window. I noticed the accept button no longer functions. The button is there and you can click on it but it dosen't respond.
Besides changing some of the HTML for the cosmetic appearance the only other change made was the removal of a div tag which defined a container class for the text content. The JQuery code listed remains unchanged.
The function is called by a tag located in the _Layout.cshtml file within the Visual Studio project. It was functioning before the change were made to the code.
Any positive insight would be helpful. Especially if there is something that I have missed or have out of alignment.
using Microsoft.AspNetCore.Http.Features
#{
var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
var showBanner = !consentFeature?.CanTrack ?? false;
var cookieString = consentFeature?.CreateConsentCookie();
}
#if (showBanner)
{
<nav id="cookieConsent" class="navbar navbar-light fixed-bottom float-sm-left"
style="background-color:transparent" role="alert">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cookieConsent .navbar-collapse">
<span class="sr-only">Toggle cookie consent banner</span>
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand"><span class="text-info" aria-hidden="false"></span></span>
<div class="collapse navbar-collapse" style="background-color:rgba(49, 67, 179, 0.80); color:lightgoldenrodyellow">
<div class="container-fluid">
<h4><strong>COOKIE AND PRIVACY POLICY </strong></h4>
<p class="navbar-text" style="color:yellow">
This web site uses cookies and other technologgy for features and functions to
be viewed and operate normaly. You can acknowledge the site uses these features
by clicking the "Accept" button to the right of this message window. To view the
sites "Cookie and Privacy" policy page, click on the "Cookie and Privacy
Information" button.
</p>
<p class="navbar-text" style="color:whitesmoke">
NOTE: Clicking on the "Accpt" button only acknowledges you have read this
this message and is not a condition for access to this site.
</p>
</div>
<div class="nav-container float-right">
<a asp-controller="Home" asp-action="Privacy" class="btn btn-info navbar-btn">Cookie and Privacy Information</a>
<button type="button" class="btn btn-light navbar-btn" data-cookie-string="#cookieString">Accept</button>
</div>
</div>
</nav>
<script>
(function () {
document.querySelector("#cookieConsent button[data-cookie-string]").addEventListener("click", function (el) {
document.cookie = el.target.dataset.cookieString;
document.querySelector("#cookieConsent").classList.add("hidden");
}, false);
})();
</script>
}
It seems that adding hidden class is failed . If you want to hide the cookieConsent nav after clicking accept button , you could try the following two approaches :
add some css for the class "hidden" in the path wwwroot/css/site.css , the JQuery code listed remains unchanged.
.hidden {
display: none;
}
change the JQuery like below :
document.querySelector("#cookieConsent").setAttribute("hidden","true");
Trying to make different colors for different partials based on their type; so far there are 3 types all defined by an integer 1, 2 or 3 and I am struggling to find a way to make the partials in the view appear with different background colors. I am trying to get Red for 1, Blue for 2, Green for 3. I have tried multiple things but none have seemed to work.
I've tried making before_action :set_colours, having if statements in the partial but nothing has worked so far.
Here is the html, calling the type would be done like o.type
<div class="dropdown" style="background-color: <%= set_background(number) %>;">
<button class="btn btn-block" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <%=o.id%>, <%=o.user_id%>
</button>
<div class="dropdown-menu btn-block" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item">Order Type</a></li>
<li><a class="dropdown-item"> Event type:</a> <p><%=o.event_type%></p></li>
<li><a class="dropdown-item"> Requirements/Ideas</a> <p><%=o.description%></p></li>
</div>
</div>
You could use a helper that will return the color you need based on the type, for example:
def set_background_color(type)
case type
when 1 then "red"
when 2 then "blue"
when 3 then "green"
end
end
And then use it to set the background color of your div using the style attribute, like this:
<div class="dropdown" style="background-color: <%= set_background_color(o.type) %>;">
<!-- ... -->
</div>
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è' '主页' }}}