I added this JS script to twig template:
<script>
var images = JSON.parse('[]');
</script>
but after compile the code changed to:
<script type="d7fe36345345345fc57a-">
var images = JSON.parse('[]');
</script>
Browser not do js code, I see error: images is not defined.
Why type="d7fe36345345345fc57a-" is added to script tag and how to avoid it?
I found the reason.
Cloudflare add this code to tag.
The solution is o change setting on Cloudflare.
Related
I'm building a simple website using Node.js, Express and the EJS template engine and I'm having trouble getting my external CSS files to load on the routes that have route parameters. My code looks like this:
const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});
app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});
Test1.ejs and Test2.ejs are exact duplicates of each other, one being copy pasted from the other.
I'm able to to see the CSS file loading properly on Test1 but on Test2 express is sending the HTML of Test2.ejs in place of the actual CSS file. This is without reloading or changing anything. I would be less confused if the CSS just wasn't loading properly on any of my routes, as that would indicate some problem with how I'm using express, but I can't figure out how it can be working properly on all my other routes and fail whenever a route parameter is used. I'm also tried actually using the route parameter e.g.
app.get("/Test2/:route", function(req, res){
const routeParam = req.params.route;
res.render("Test2.ejs", {
routeParam: routeParam
});
});`
I also displayed routeParam in the page to make sure that was working, and it does, except the page is still getting the HTML of the page in place of the proper CSS file, causing it to be poorly formatted.
I'd appreciate any help on this, thank you
Thanks for looking into this CoderFF, you helped me figure out how to get it to work. It look like the problem was that my css file was directly inside the public folder, as opposed to in a subdirectory within it. The html has to be like this:
<link rel="stylesheet" type="text/css" href="/css/customStyle.css" />
it has to include that leading '/' in the href tag. I don't know how it was working for me before without that on routes without route parameters, but it was. The same seems to apply for images in an /images/ folder within the public folder.
I can't really reproduce this. What I'm doing is:
Placed my CSS in public/css/all.css. File contains only one line: html {background-color: #aaaaaa} so I can tell it's loaded
Place two templates into views/Test1.ejs and views/Test2.ejs and put the same contents in them: <html><head><link rel="stylesheet" type="text/css" href="/css/all.css"/></head><body></body></html>
And it works perfectly.
I suppose that you've created a folder Test2 inside of your public/ folder, in which you placed your CSS. In that case, your path to the CSS is /Test2/some.css matches your second route and instead of getting a CSS file, you get an HTML from the route.
In that case, moving your CSS files will help.
I cannot seem to get owl carousel to work in drupal 7. I thought it might be a conflict with Chaos tools but now I'm not sure. I had zero issues with it functioning as expected in Drupal 8 but my client needs it in Drupal 7.
I've tried it as a Block and as a Page. Currently, it stacks the content vertically instead of 3 inline as I hoped.
Here is the working Drupal 8 link to show what I'd like to achieve:
https://bryanbowers.me/cms/slideshow
Here is the Drupal 7 version not working:
https://bryanbowers.me/seven/?q=node/5
How can I get these inline?
forgot to mention that in the parent div it appends a class="owl-carousel-page_12"
in dev tools if I remove -page_12, the carousel renders inline.
I can't seem to find how to prevent this class from being added. I also tried to write css for class="owl-carousel-page_12" to match css for "owl-carousel" without success.
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery-extend-3.4.0.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery.once.js?v=1.2"></script>
<script src="https://bryanbowers.me/seven/misc/drupal.js?pvwisq"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/modules/contextual/contextual.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
I've tried a number of jquery and js scripts in footer to replace class but I'm getting things incorrect or it won't override. Wish I could prevent it from writing the custom class altogether.
/// tried and no
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');
/// tried and no
$(document).ready(function(){
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');
});
//// tried and no
$(div.owl-carousel-block2).attr('owl-carousel-block2', 'owl-carousel');
/// tried and no
(function ($) {
$.fn.replaceClass = function (owl-carousel-block2, owl-carousel) {
return this.removeClass(owl-carousel-block2).addClass(owl-carousel);
};
}(jQuery));
//// tried and no
var el = $('.owl-carousel-block2');
el.addClass('owl-carousel');
el.removeClass('owl-carousel-block2');
$('div.owl-carousel-block2').addClass('owl-carousel').removeClass('owl-carousel-block2');
//// tried and no
jQuery.fn.replaceClass = function(sSearch, sReplace) {
return this.each(function() {
var s = (' ' + this.owl-carousel-block2 + ' ').replace(
' ' + sSearch.trim() + ' ',
' ' + sReplace.trim() + ' '
);
this.owl-carousel = s.substr(1, s.length - 2);
});
};
Issue 1. (the JS)
You have linked to a page that loads via HTTPS, but you are loading your google fonts over HTTP resulting in an error which breaks the JS.
specifically "http://fonts.googleapis.com/css?family=Roboto:400,300,700,500"
Fix:
Either load your page via HTTP or load your fonts via HTTPS
Doing the above will get the owl carousel JS working (but it still wont look right).
Issue 2. (the CSS)
The owl carousel CSS is loaded but not applied.
As you said, this seems to be because the owl carousel block does not have the "owl-carousel" class.
You can check this by simply adding that class to the block in dev tools.
There seems to be an issue about this HERE which mentions a conflict with ctools page manager, though it seems to relate to version 7.x-2.0-alpha0, but you don't seem to be using that module (judging from the module README.txt which your site serves). Are you using ctools page manager?
If you are using version 7.x-1.6 I can only speculate why the "owl-carousel" class is not being output for you but seems to work for so many other people.
A work around would be to either run the JS you have already tried to alter the class (but do it with issue 1 fixed), make use us a preprocess function to add the class, or maybe even just adding the class via the views interface (as it seems to be output from a view).
I am very new and green so please forgive the basic question.
When I create a site using Bootstrap I believe that I include the link to the Bootstrap CDN file in the head section of each page and I also include a link to my own CSS style sheet. Is that correct? Or can I put the cdn file links in my style sheet and then just put a link to the style sheet in the HTML head section of every page?
Same question re JavaScript. Do I link to the cdn file on every page of my site?
It is always good to include the js and css cdn links in every page or u can download these and add it to your project and include as you include your stylesheet.
Don't add cdn link to your css.
It depends on what you want. Are you going for page-speed?
If you want to optimize your website for page-speed I recommend combining both the CSS and JavaScript files in to single files (there are tools to automate this process). Also if you really want to optimize your website for page-speed you can apply both the combined CSS and JavaScript dynamically, by putting the following snippet just before the closing body tag so that the HTML can be rendered before executing the Javascript:
<script type="text/javascript">
function (sources) {
for (var i = 0; i < sources.length; i++) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = sources[i];
head.appendChild(script);
}
})([
'//domain.com/combined.js'
]);
</script>
Note that the JavaScript files are not loaded in synchronized order, but using a single combined script it doesn't matter.
For the sheets I use the following algorithm:
Determine if it is the first page view of the session:
If so, inline the combined CSS in the head tag:
<html>
<head>
<style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
</head>
</html>
If not, just include the CSS link in the head tag:
<html>
<head>
<link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
</head>
</html>
Then you can force to cache to CSS style on the first load by executing a XMLHttpRequest, for simplicity I use jQuery here:
$(document).ready(function(){
var href = "//domain.com/path-to-combined-style.css";
$link = $("link[href='" + href + "']");
if ($link.size() === 0) {
$.get(href);
}
});
You can put this in the combined JavaScript.
Note that you won't be able to use the speed advantage of the CDN. To solve this you could publish your combined resources to your own CDN. You will loose the possibility that the user has already cached bootstrap though.
Ofcourse this whole process requires some knowledge and experience, so you might want to consider using a tool such as CloudFlare, which does a pretty good job optimizing your website.
I have a helper.html page that I need to include in my Meteor app to assist with using an api. Looks like this.
<head>
<script type="text/javascript" src="https://www.example.com/api-helper.js"> </script>
</head>
<body>
</body>
Right now I just have it in the root directory of my app. As it is now, here are the problems: the other api script which I have included in main.html, can't find the helper.html. Second, I get this error in the console: Error: Oh no! No route found for path: "/helper.html?. So my question is how do I properly include this helper html page into my Meteor project? Help greatly appreciated.
Thanks
Just put your html file into a folder called public in the root folder.
Error: Oh no! No route found for path: "/helper.html"
This is an error from iron:router, it's complaining that it can't find any route for path "helper.html".
I suppose you get this error message when typing directly http://localhost:3000/helper.html in your browser address bar, which is WRONG because this is not how iron:router is supposed to work.
iron:router manages pure client-side routing using HTML5 push state API contrary to classic server-side routing involved when requesting "/helper.html" to Apache or nginx means the server is going to send you an actual HTML response page displayed by the browser.
In Meteor "single-page apps", the server does not send any HTML responses to the client, it only sends data. It means that the routing takes place entirely in the client, the URL in the address bar gets parsed and iron:router provides utilities to respond accordingly, which usually involves rendering a different template based on which path (route) you hit.
I hope you really understand the difference in nature between these two approaches because this is very important to be aware of when developing with Meteor.
As far as your problem is concerned, I'll take DISQUS integration as an example which seems to be a similar issue.
DISQUS integration on standard PHP solutions is straightforward, you just need to copy-paste this so-called universal embed code :
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
This is fine because once a page gets sent to the client in a traditional website, javascript code gets executed once and we are done : if the user click on another page on the website, the all process of generating the HTML response, sending it to the client and executing JS code will be started from scratch.
However we can't just copy-paste this code inside a Meteor template, because Meteor webapps are "single-page apps", no page reloading process should ever happen in these type of websites.
When we navigate to another page in a Meteor app, the javascript context stays the same and we don't want the DISQUS script to reexecute. What we need to do instead is loading the script only once in the rendered callback of our template.
So we come up with the following Meteor template logic to integrate DISQUS comments loading :
<template name="disqus">
<div id="disqus_thread"></div>
<a href="http://disqus.com" class="dsq-brlink">
blog comments powered by <span class="logo-disqus">Disqus</span>
</a>
</template>
Template.disqus.rendered=function(){
// assumes we get identifier and title as data context
var identifier=this.data.identifier;
var title=this.data.title;
// we need a way to tell if the script has already been loaded or if it's
// the first time, we can check for the existence of the DISQUS variable on
// the global window object to make the difference
if(window.DISQUS){
// DISQUS API has our back, see this resource
// https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
window.DISQUS.reset({
reload:true,
config:function(){
this.page.identifier=identifier;
this.page.title=title;
}
});
}
else{
// first initialization
window.disqus_shortname = "disqus-shortname";
window.disqus_identifier = identifier;
window.disqus_title = title;
window.disqus_developer = 1;
// load the script via JS instead of embedding it in the HTML
var script = $("<script>",{
type:"text/javascript",
async:true,
src:"//" + disqus_shortname + ".disqus.com/embed.js"
});
$("head").append(script);
}
};
This example demonstrates the way to go when you need to embed API code (google-analytics, DISQUS, etc...) in a Meteor website.
I inserted the following code in a WordPress plugin:
wp_deregister_script('jquery');
wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
wp_enqueue_script('jquery');
The following is echoed to the browser:
<script type='text/rocketscript' data-rocketsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
Instead of:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
I don't know what is happening. Perhaps wp_register_script() is supposed to work in this way. I also tested if any jQuery code worked on the client side but it didn't.
It is easy to fix.
You must change the following tag: <script type="text/javascript"></script>
add: data-cfasync="false"
example:
<script data-cfasync="false" type="text/javascript"></script>
Probably one of wordpress plugins is using CloudFlare.
https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-
Try disabling all the plugins and re-enabling them one by one to find out which one is causing this issue. It's not a problem actually.
Rocket Loader is not included in any WordPress plugins. You would have to disable Rocket Loader by going to: settings->CloudFlare settings (Performance Settings)->Rocket Loader->Toggle Off (this feature is optional and has to be turned on).
I was facing this issue with
WP Rocket plugin which was adding type='text/rocketscript' to the script tags.
Fixed it by adding
data-cfasync="false"
to the script tags.