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>
...
Related
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
In Head component of Next.js I add this CDN code:
<script
src="https://kit.fontawesome.com/fbadad80a0.js"
crossOrigin="anonymous"
></script>
and I use the icon in my project as follow:
<Nav.Link href="/cart">
{" "}
<i aria-hidden className="fas fa-shopping-cart"></i> Cart
</Nav.Link>
I get this error on the console:
Warning: Extra attributes from the server: aria-hidden
at i
at span
at div
at Rating (webpack-internal:///./src/components/product/Rating.tsx:14:20)
at div
at div
at CardText (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
at div
at CardBody (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
at div
at Card (webpack-internal:///./node_modules/react-bootstrap/esm/Card.js:44:23)
at Product (webpack-internal:///./src/components/product/Product.tsx:22:22)
at div
at Col (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:17:23)
at div
at Row (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:19:23)
at div
at Container (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:18:23)
at div
at BasePage (webpack-internal:///./src/components/layout/Basepage.tsx:19:25)
at main
at div
at BaseLayout (webpack-internal:///./src/components/layout/BaseLayout.tsx:20:23)
at Index (webpack-internal:///./src/pages/index.tsx:26:30)
at App (webpack-internal:///./src/pages/_app.tsx:34:24)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20)
at withRedux(App) (webpack-internal:///./node_modules/next-redux-wrapper/es6/index.js:182:35)
at ErrorBoundary (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
at ReactDevOverlay (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)
In the head component of your next file try this
<Head>
<link
async
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</Head>
This should work, or any other links for that regard
I have a carousel built with materialize css. I want to start carousel from middle item. But carousel to be start from second item.
link of carousel: link
What can I do?
Thanks in Advance!
Please next time add a snippet of code to understand better...
Btw... You can use the instance.set(x) to move the carousel to nth slide (as stated in the docs here)
Here is an example (just comment the instance.set(middle_slide); statement to see the difference):
document.addEventListener('DOMContentLoaded', function() {
//find wich slide is the middle one
var carousel_items = document.querySelectorAll('.carousel-item').length;
var middle_slide = Math.round(carousel_items / 2)
console.log('The slide in the middle is the ' + middle_slide + ' out of ' + carousel_items)
//Carousel initialization
var options = {};
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
//Set the carousel to show the middle slide first
var elem = document.querySelector('.carousel');
var instance = M.Carousel.getInstance(elem);
instance.set(middle_slide);
})
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
Here is the codepen if you prefere: https://codepen.io/LukeSavefrogs/pen/WPYOGE?editors=1010
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
I am displaying an icon this way:
<?php echo anchor('stuff/edit', '<i class="icon-edit icon-white"></i>', array('class'=>'btn btn-info')); ?>
And what I want is that when I hover over the icon with the mouse a message that says "Edit" pops up. Just like with the icons on this board, if you hover over the {} icon a message that says "Code Sample..." shows up. I want that using bootstrap.
Thanks in advance.
By jQuery solution use jQuery UI
HTML in head tag
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
HTML in BODY tag
<i class="icon-edit icon-white">icon</i>
JavaScript
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 300
}
});
});
for additional information see http://jqueryui.com/tooltip/
Its simple, If you want it to show the native way, ie with no customizations and styles, use 'title' attribute;
<i class="icon-edit icon-white"></i>
For more beautiful and larger messages, you could use bootstrap's TOOLTIP
See Bootstrap Tooltip . Its too easy as:
<i class="icon-edit icon-white"></i>
If you have bootstrap.js included, it will show 'first tooltip'
I do not know if there is a css method for this, however you can add tooltip="string" to asp tags, on html tags use title="string".