I've tried every combination that was given in the answers throughout the different sites.
Here's my code.
<div class="circular" v-bind:style="{ 'background-image': 'url(' + require('../assets/kafa.jpg') + ')' }"></div>
The problem is (I think) that path is good, and image is found, it just won't show on the background (or anywhere for that matter).
And here is the image of the page and Inspect Elements
Thanks.
Okay, so I found the problem. I closed the tag in the same line, instead of wrapping whole template in that div.
According to vue documentation:
https://v2.vuejs.org/v2/guide/class-and-style.html
in the section of “Binding Inline Styles” and “Object Syntax” it describes that you could define peroperty-values of styles in the “data” part of “vue instance”. This is what I was doing for implementing that:
new Vue ({
el: "#app",
data: {
activeColor: "red",
backImg: 'url("galaxy.jpg")'
}
});
.circular {
min-height: 1080px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="circular" v-bind:style="{color: activeColor, backgroundImage: backImg}"> texts to show styles</div>
</div>
<script src="vue.js"></script>
<script src="myScript.js"></script>
</body>
</html>
I used the “camelCase” format and the image is something different, you can substitute your own “url” in the “data” part of “vue instance” in the script code. I could not upload my used image, but you could test your own image.
Related
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?
If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)
I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
This question already has answers here:
How to disable letterboxing and adjust UI5 for the widescreen?
(5 answers)
Closed 18 days ago.
In the snapshot below you can see the initial layout of an app, run by flpSandbox.
In the 2nd snapshot you can see the same app after I added and called an index.html file which I found in a blog and adjusted
In order to achieve full width I have already added the following statement in manifest.json:
"sap.ui5": { "config": { "fullWidth": true }, etc etc
Seems that the above parameter is ignored when I call the index.html file, so I tried various ways to define it within index.html itself (HTML below) but without success. Any help?
Regards,
Greg
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Agreements Maintenance</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"kristal.apps.agreements": "../webapp/"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "kristal.apps.agreements"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Solution from SDN
sap.ui.getCore().attachInit(function(){new sap.m.Shell({
appWidthLimited:false,
app:newsap.ui.core.ComponentContainer({
height :"100%",
name:"kristal.apps.agreements"
})
}).placeAt("conten...
I'm trying to use CSS Containment(contain: layout), but it doesn't seems to work correctly on Chrome 62.
I want to know a proper way to use contain: layout or what is my misunderstanding.
Code is here:
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Containment</title>
<script src="main.js" defer></script>
</head>
<body>
<div id="container" style="contain: layout; height: 300px; width: 300px">
</div>
</body>
</html>
main.js:
const container = document.querySelector('#container');
setTimeout(() => {
const elem = document.createElement('div');
elem.textContent = 'content';
container.appendChild(elem);
}, 100);
I expect that the #container element is rendered as a layout root after appendChild(elem), but Chrome Dev Tool shows that the root is still the #document.
On the other hand, contain: layout size or contain: strict works correctly, which means #container becomes a layout root.
Other browsers don't support CSS Containment yet, so I can't identify it's Chrome-specific or on the spec.
If you have any ideas, please give me a hand.