I want to add a cookie banner in the Bootstrap 5 Grayscale template. I found the following cookie banner on Github and it should be rather straight forward to use:
https://github.com/kolappannathan/bootstrap-cookie-banner
I added one part in the header to load the .css and .js file, and at the end of the body the banner code. Nothing is happening when loading the html file. Any ideas what I made wrong?
<!-- Cookie Banner -->
<link rel="stylesheet" href="./cookie/cookie-banner.css">
<script async src="./cookie/cookie-banner.js"></script>
</head>
<!-- Cookie Banner -->
<div id="cb-cookie-banner" class="alert alert-dark text-center mb-0" role="alert">
🍪 This website uses cookies to ensure you get the best experience on our website.
Learn more
<button type="button" class="btn btn-primary btn-sm ms-3" onclick="window.cb_hideCookieBanner()">
I Got It
</button>
</div>
<!-- End of Cookie Banner -->
</body>
The cookie banner to pop-up when loading the index.html.
Related
The margins of the page are different when I compare the html file (in the browser) and the ejs file. I am using node/express and Bootstrap 4. I built the page initially in html. I wanted the content to fill the page from side edge to side edge, and I was able to do that with the html page.
html,body {
height: 100%;
width: 100%;
}
{
margin:0;
}
body {
overflow-x: hidden;
}
<div>
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
This will produce a div that is a band of pink color that goes from one edge of the screen to the other edge.
However, when I take the same html page and change it to an ejs file, there is about 1.3 cm of white space between the div and the edge of the screen. Not only that, but the background of white divs becomes a very pale gray background.
I didn't add any other css styling to make the background color change to this pale gray color. And this pale gray background only appears with ejs files, not with html files.
I do not have a partials ejs file except for one that contains messages, and that ejs file has no styling information. Every main page, eg, home page, about page, etc, is supposed to be self-contained in terms of css and html.
I do not know where the gray background is coming from.
Bootstrap (I'm using Bootstrap 4) is working fine for me. There were problems opening dropdown menus initially but I fixed that by downloading Bootstrap and putting the css file into the Public folder instead of using a cdn link to Bootstrap, but anyway the margin problem was there even before I did that.
Hi it sounds odd so I just doubled checked using my Bootstrap 4 template. It works very well the pink background run left edge to right edge no white spaces. Full template below for your ref. I expect it is smt with software installation. You need to make sure Bootstrap, jQuery, popper.js are all installed properly in your project anyhow. Let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>
BS has 2 classes "container" and "container-fluid" you need class "container-fluid" to force the content expand left edge to right edge. Code below should solve the issue. Let me know if all good after.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
your code works just the fine for me, make sure you have written your backend code properly like this
const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res)=>{
res.render('home', {Title: 'Welcome'});
});
app.listen(3000, ()=>{
console.log('Server is running on port 3000');
});
Make sure your EJS file is in a folder called 'views' and you have your css file in a folder called 'public'
I found what the problem is. It is the express-ejs-layouts module that I installed and used. I forgot I had done that and that's why I didn't mention this in the question. I also didn't think it would affect the layout so much, and I thought I had to install this as well as the ejs module for ejs to work properly. To be honest, I didn't know what the express-ejs-layouts module did.
Once I removed const expressLayouts = require('express-ejs-layouts') and the app.use(expressLayouts) middleware, the ejs files render fine now. The margins are flush with the edge of the page with container-fluid. There is no pale gray background anymore.
I also have to mention that the solution suggested by hang-coder above of putting the stylesheets in the correct order worked for the html files. Even though that was not the main question, it solved the issue of the html files not showing margins correctly in the browser when using container-fluid. I had wrongly put the Bootstrap scripts above the jQuery scripts. I had put those scripts in the wrong order in the ejs files too, and that was also part of the problem for why the margins were not displaying properly, but I corrected the order just before I asked the margins question in the ejs files because I had to do that to make the dropdown menu work, which was another problem I had just before I asked the margins question, but I wasn't sure whether they made a difference to the margins issue.
So the problem had nothing to do with mac screens or how Chrome browser displays in macs, as I originally thought.
This script is showing the correct margins in html files for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">.
</script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">.
</script>
</head>
<body>
<div class="container-fluid bg-primary">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
So in summary, placing the jQuery and Bootstrap scripts in the correct order and removing the express-ejs-layouts solved the problem.
So I'm developing a Blazor App, Server side, and for the life of me, I cannot get a modal popup to function. I've followed several guides on how to do it, and from what I can tell I have everything right, but it will not trigger. I have a more complex solution, but even just for testing I did a bare bones project to just see if a cut and dry app would work, maybe something is wrong in my bigger project. But no, even just a simple app will not function. I'm pulling my hair out! Here is what I have, just for the simple bare bones app, this is my Index.razor file
#page "/"
<h1>Hello, world!</h1>
Welcome to your new app.<br />
<br />
<input type="button" class="btn btn-primary" data-target="#testModal" data-toggle="modal" value="Get Random" />
<div class="modal" id="testModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Generate Random Hash</h5>
<button type="button" class="btn btn-primary" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Random Number #((new Random().Next(0, 5000)))<br />
<br />
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#code{
}
My understanding is that the "data-target" and "data-toggle" should make things work, but nothing. Just for posterity too, here is my _Hosts.chtml file
#page "/"
#namespace ModalTest.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ModalTest</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Can anyone shed any light onto what I might be doing wrong here?? Many thanks!!
This simply won't work with Bootstrap - Blazor cannot natively run JavaScript/JQuery out-of-the-box and that's what Bootstrap uses to trigger open/closing of modals (among other components of theirs).
If you want this to work, you have three options:
Use JSInterop and an #onclick event on the button to call the Bootstrap function that is called inside your #code block for the modal. You'll need to cover closing it too using this same idea. I see you're missing (or you didn't include in your snippets) the necessary core Bootstrap jquery libraries which is required to go down this path.
Make your own modal component, roll your own #onclick event function, and call OnStateChanged inside this function when they open & close it.
Switch to something like Blazorise that already has most of the Bootstrap components ported over and usable for Blazor.
Option #2 above worked for me as follows:
Make the modal a component by putting it in its own razor file.
Add this to the component in a code block:
[Parameter] public EventCallback OnClose { get; set; }
Add this to the button that closes the modal:
#onclick="OnClose"
In the main page add
public bool showModal = false
Add somewhere in the main page
#if (showModal)
{
<MyModal OnClose="() => { showModal = false; }" />
}
Finally, in the button that opens the modal, add
#onclick="() => { showModal = true; }"
Dreamweaver library elements are buggy and cause so many updating problems and I don't want to use them anymore. How does everyone else update, for example, the header section of every html page simultaneously without having to manually edit each page?
Here's 3 ways that aren't javascript's include function:
You could have php on your stack, and include files with php:
<?php
include('header.html');
This way used to be standard a long time ago, but no new site should be doing this anymore.
You could use a site generator, like Jekyll. Jekyll parses liquid statements on generation:
{% include header.html %}
This staticcms type of site generation is modern
You could use a javascript framework, like Angular. With angular, your pages get placed inside of a container div, and then you can put anything that shows up on every page (header, nav, footer) outside of the container:
<!DOCTYPE html>
<html>
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
Personally, I use angular. At work, our sites are react apps built in Jekyll. I assume that Facebook uses php, or a php framework like CodeIgniter
I have a HTML project consisting of 5 pages. I have a login button in every page where I am using a modal. It uses id of the modal div.
<li> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">LOGIN</button></li>
but i've to copy paste the modal code in every page.
Is there a way to not paste the complete modal div in every page ?
My suggnetion is to use jquery here is some code snippet
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("button.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
For button you can put your code in #includedContent div.
Aou have to put script code js file . i.e "button.js"
And include that js file in every page where you need to have login button.
and #includedContent div.
hope so this will help you
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div