On new install of Foundation 6 Zurb stack, installing building block sticky-shrinknav and injecting it into index.html template using {{> sticky-shrinknav}} shows the component on the page but scrolling the page does not produce the expected result.
Tried installing Zurb stack multiple times in different locations. Same results are produced.
This is the index.html template:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veridata</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
{{> sticky-shrinknav}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
My app.scss file contains:
#import 'components/building-blocks/sticky-shrinknav';
and my config.yml contains:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/building-blocks/sticky-shrinknav.js"
- "src/assets/js/app.js"
Expecting the same as demonstrated on this page:
https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
Instead, the nav bar is static (doesn't shrink or move) and some page components are above the navbar when scrolling, while others are beneath the navbar as i scroll.
My apologies if this is a noob question. I am new to Foundation.
EDIT: this is the app.js file contents:
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
You have to import the sticky-shrinknav component in your app.js (if you want to bundle it there). Otherwise you have to also include the generated bundle in your html file too.
But in general you need const $ = require('jquery') or import $ from 'jquery' as first line in the sticky-shrinknav file to load jQuery for it.
Related
I am trying to Bundle Bigcommerce Theme but I am getting this kind of error. I tried deleting the line but another one will appear from a different file. I have tried following the recommendation
npm install --use-old-node-sass-fork.
but it didn't work and I keep getting the same error
Error: ".visually-hidden" failed to #extend "%visually-hidden".
The selector "%visually-hidden" was not found.
Use "#extend %visually-hidden !optional" if the extend should be able to fail.
on line 22 of base/base.scss
>> #extend %visually-hidden;
----------^
:
---------WARNING---------
We are currently in the process of deprecating node-sass fork
https://github.com/bigcommerce-labs/node-sass
Your scss files were compiled using latest node-sass version
https://github.com/sass/node-sass
This error might indicate that your scss file is not compatible with it.
There is still an option to compile scss file old fork by using --use-old-node-sass-fork.
But note, that this will lead to 500 error in production in near future.
---------WARNING---------
I saw a thread that " I had to just upgrade my bootstrap version in Base.html file and the error was solved." but I do not have that on the theme that I am using
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{{head.title}}</title>
{{{head.meta_tags}}}
{{{head.config}}}
<link href="{{head.favicon}}" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');</script>
{{> components/common/polyfill-script }}
{{!-- Load Lazysizes script ASAP so images will appear --}}
<script>
{{!-- Only load visible elements until the onload event fires,
after which preload nearby elements. --}}
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
</script>
<script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
{{{stylesheet '/assets/css/theme.css'}}}
{{ getFontsCollection }}
{{{head.scripts}}}
{{{head.rsslinks}}}
{{inject 'themeImageSizes' theme_images}}
{{> components/common/global-injects}}
{{{snippet 'html_head'}}}
{{> core/structured-data/website}}
</head>
I run both the vue and the django.
I have installed webpack_loader and have it in installed apps.
I have the WEBPACK_LOADER in settings.py
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
frontend is the name when creating vue.
Here is some more details KeyError at / 'assets' and ModuleNotFoundError: No module named 'webpack_loader'
My page source from http://localhost:8000/ looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuestionTime</title>
</head>
<body>
<h1>Vue JS</h1>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="http://0.0.0.0:8080/bundle.js" ></script>
</body>
</html>
My page source from http://localhost:8080/ looks like this
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>hello-vue</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
When I use (django-webpack-loader 1.0.0), I get KeyError at /
When I use (django_webpack-loader 0.7.0), I get no errors, but the vue code doesn't show up (But I see it at localhost:8080).
Just started to work Today, I didn't do anything, and it started to work. I tried 2 times to make a new project with the same code, downloaded all the stuff again.
Didn't work. But then my vue code suddenly stopped working. I turned the server on and off. And then I saw that my vue code had been updated.
I then went to localhost:8000 to see if it worked, and it did.
I believe that God fixed it. Not sure what else it would be.
EDIT: 8 July 2022
I happened to get the error: TypeError: expected string or bytes-like object.
It was point to {% render_bundle 'chunk-vendors' %}
The problem was that I had upgraded the django-webpack-loader to the latest version, the error went away when I use this version django-webpack-loader==0.6.0.
I tried django-webpack-loader==0.7.0 and it works as well.
The version of webpack-bundle-tracker I'm using is 0.4.3
I downloaded the latest copy of MathJax through Git, installed it somewhere, and wrote the following document:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes - Wenke's Patterns in Prehistory</title>
<script id="MathJax-script" async src="../../../../MathJax/e5/tex-chtml.js">
</script>
</head>
<body>
$ e^i $
</body>
</html>
When I try to run it in a browser the console prints the message Loading failed for the <script> with source “file:///home/username/underconstruction/MathJax/e5/tex-chtml.js”..
I believe the README.md file that comes with the download indicated that tex-chtml.js was supposed to be the file to link in the HTML document. I've seen elsewhere reference to a MathJax.js file but that was not included in my download.
You specify the location ("../..") of the file "tex-chtml.js" relative to the location of the HTML-page containing $e^i$. The file is likely not there as the warning message indicates. If you specify a path relative to the current HTML-page be also sure that the relative path is the same on your localhost and on the server.
A simple method for using MathJax is given on https://www.mathjax.org.
You do not need to download MathJax from anywhere. Just include the following lines in your HTML-file:
<head>
<script>
MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
I want to remove the Bootstrap stylesheet from my Hyperledger Composer-compiled project.
I compiled using yo hyperledger-composer then npm start. Whenever src/index.html gets served at http://localhost:4200/, a Twitter Bootstrap <style> tag is being inserted right before the closing </head> tag. Here is the source:
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<style type="text/css">/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
...
[bootstrap.min.css is being inserted here, I don't know why]
...
/*# sourceMappingURL=bootstrap.min.css.map */
</style>
<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>
<style></style>
<style>{%BLOCK%}</style>
</head>
Where in my project do I look for the offending code? I want to remove this Bootstrap tag altogether.
I grep'ed the /src/ directory, but "bootstrap" doesn't turn up any hits (besides .bootstrapModule(AppModule);.
In the root directory, it is listed as a dependency in package.json as "bootstrap": "^3.3.7",. Therefore, I think it is importing the style from node_modules/bootstrap/dist/bootstrap.min.css.
There is no .angular-cli.json file. We're not using ng-bootstrap, as far as I can tell. Where is this style injection coming from?
Never mind, there is an .angular-cli.json file after all. You can remove it from the script loader there.