I in the middle of a page want to load a font lazily.
I use Lazysizes ans its plugin Unveilhooks.
This is what the author of the library answered some while ago on this topic: https://github.com/aFarkas/lazysizes/issues/169
As for the font, it is Google's Lobster: https://fonts.google.com/specimen/Lobster
fonts.css
#font-face {
font-family: 'Lobster';
src: '\wp-content\themes\nonverbis\assets\fonts\lobster\Lobster-Regular.ttf';
}
html
<span class="lazyload" data-link="\wp-content\themes\nonverbis\assets\css\custom\fonts.css"></span>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>
To the best of my ability fonts.css is loaded lazily. And inside the loaded fonts.css the path to the font is correct.
But visually the font of the text has not changed on the page.
Could you help me?
Use LazyHTML, but you need to add lazyhtml script into Head
<script async src="https://cdn.jsdelivr.net/npm/lazyhtml#1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>
Add the above script to Head
<div class="lazyhtml" onvisible data-lazyhtml>
<script type="text/lazyhtml">
<!--
<link rel="stylesheet" href="/wp-content/themes/nonverbis/assets/css/custom/fonts.css">
-->
</script>
</div>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>
Lazy HTML Github
Related
I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.
This is My Implementation.
const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
const main2 = hyperHTML.wire();
appIframeRender`${[
cbplugin.CharmListComponent.render(main2)
]}`;
cbplugin.WrapperComponent.render = function (render, data){
return render`
<style>
#import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
#import "https://fonts.googleapis.com/icon?family=Material+Icons";
#import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700";
</style>
<div>
<a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
<i class="material-icons">
3d_rotation
</i>
</a>
</div>
}
So My Doubt is Is it possible that material Icon is not supported in Hyper Html. The material Icon css are showing in the inspect element styles.
Thank you
Whenever you use Shadow DOM, you must import fonts in the main document:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...
I am trying to load a dicom image using cornerstone library. I get an error - uncaught exception: loadImage: no image loader for imageId.
I have my image file named as image-1.dcm. What am I doing wrong?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
jsminimal/index.html
</h1>
This is an example of the minimal use of cornerstone driven by javascript
<br>
<br>
In this example, javascript is used to image enable a div.
<br>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone-master/dist/cornerstone.js"></script>
<!-- include special code for these examples which provides images -->
<script src="cornerstone-master/example/exampleImageIdLoader.js"></script>
<script>
$(document).ready(function() {
var imageId = 'image-1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</html>
You need to use the cornerstoneWADOImageLoader to loader DICOM P10:
https://github.com/chafey/cornerstoneWADOImageLoader
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?
For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.
In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.
Above is my ideal use case, does anyone know if assemble supports anything like this?
#Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75
We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...
assemble: {
options: {
flatten: true,
assets: 'docs/assets',
partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
layout: false,
data: ['src/data/*.{json,yml}', 'package.json']
},
pages: {
src: 'src/*.hbs',
dest: 'docs/'
}
}
Layout (default.hbs)...
<!DOCTYPE html>
<html lang="en">
<head>
{{#block "head"}}
<meta charset="UTF-8">
<title>{{title}} | {{site.title}}</title>
<link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
<link rel="stylesheet" href="{{assets}}/github.css">
{{/block}}
</head>
<body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>
{{#block "header"}}
{{! Navbar
================================================== }}
{{> navbar }}
{{/block}}
{{! Subhead
================================================== }}
<header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
<div class="container">
<div class="row">
<div class="col col-lg-12">
<h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
</div>
</div>
</div>
</header>
{{! Page content
================================================== }}
{{#block "body"}}
<div class="container">
<div class="panel panel-docs">
{{> body }}
</div>
</div>
{{/block}}
{{#block "script"}}
<script src="{{assets}}/highlight.js"></script>
<script src="{{assets}}/holder.js"></script>
{{/block}}
</body>
</html>
Some page
{{#extend "default"}}
{{#content "head"}}
<link rel="stylesheet" href="assets/css/home.css" />
{{/content}}
{{#content "body"}}
<h2>Welcome Home</h2>
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
{{/content}}
{{#content "script"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Hope this helps.
Trying to get Galleria script working in WordPress? I am have enqueued the script with this code, and it appears to be loading ok:
function add_scripts(){
// Load Galleria
wp_register_script('galleria',get_bloginfo('wpurl').'/galleria/galleria-1.2.2.min.js',array('jquery'),false);
wp_enqueue_script('galleria');
}
add_action('init','add_scripts');
In the post body I have the following, but all I get is the list of images:
<div id="gallery"><img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" /></div>
<script type="text/javascript">
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});</script>
The error I receive is this: $ is not a function ... so the galleria script isn't firing right, or in the right order..
I have asked the question in the Galleria forum as well.
Thanks
This is the basic setup for Galleria, taken right from the documentation, which works fine as standalone html:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
</head>
<body>
<div id="gallery">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</body>
</html>
Try replacing $("#gallery") with jQuery("#gallery")
According to this post, Wordpress reserves $ for Prototype.
For some reason, sometimes with wordpress you gotta do like this:
var $ = jQuery;
Or do what #zxt suggested. That should work too. The version of jQuery they use doesn't declare $ variable to avoid conflicts if you are using other libraries that may use $.
You need to include the jquery library in your page -- jquery is what defines "$".
Something like
<script type="text/javascript" src="someplace/on/your/server/jquery.js"/>