I'm working on a project for an exam and I need to change the stylesheet's name in the page. How can I do this with Dart?
I've seen that I can edit every attribute of my css from Dart but I've already made others css that I would like to use in my page.
For example, I have this in my html page:
<link href="stile.css" rel="stylesheet" type="text/css">
I need to edit the page to make this
<link href="stile-blu.css" rel="stylesheet" type="text/css">
How can I do this?
Assuming your <link ...> element is in the <head> element
document.querySelector('#button').onClick.listen((_) {
var stile = document.head.querySelector('link[href="stile.css"]');
stile.attributes['href'] = 'stile-blu.css';
});
If you add an id attribute to your link element the selector can be simplified
<link id="mystyle" href="stile.css" rel="stylesheet" type="text/css">
document.querySelector('#button').onClick.listen((_) {
var stile = document.head.querySelector('#mystyle');
stile.attributes['href'] = 'stile-blu.css';
});
Related
So I have the following controller that maps to the same ThymeLeaf template:
#GetMapping(value="/nextStep/{id}")
public String nextStep(#PathVariable int id) {
return "nextStep";
}
#GetMapping(value="/xxx")
public String nextStep() {
return "nextStep";
}
If I navigate to /xxx, the page has my css applied. If I navigate to /nextStep/10 the template displays but there is no css applied.
The template is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
Hello world<br>
</body>
</html>
There are no exceptions thrown in this example.
I think i have the same problem, all pages load with css all right. but if i access localhost:8080/group/3 the page will come without css (even the pages was in the same directory).
#GetMapping(value = "/group/{id}")
I found a shortcut to avoid this issue:
#GetMapping(value = "/group-{id}")
In my case this works fine, i hope work on your too.
you need put CSS path like this
<link rel="stylesheet" type="text/css" th:href="#{/css/my.css}"/>
I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.
I currently am trying to change the style of my page on the push of a button - the button is part of a dropdown. Everything I try does not seem to work,
here is what I'm trying:
Lead</li>
Have two <link /> tags defined like this:
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="onclick.css" disabled id="onclick" />
<link rel="stylesheet" href="offclick.css" disabled id="offclick" />
Using the jQuery, you can easily give the control to the following HTML:
Change Style
$(function () {
$("#style-change").click(function () {
if ($("#onclick").prop("disabled")) {
$("#onclick").prop("disabled", false);
$("#offclick").prop("disabled", true);
} else {
$("#onclick").prop("disabled", true);
$("#offclick").prop("disabled", false);
}
});
});
Hope this helps.
To begin with this line of code looks scary !
Lead</li>
If you want to change the style for a particular container ? or change the entire stylesheet ?
If later is the case, then you need to hold the current stylesheet value somewhere, may be in ViewBag or even Session. And then check when you are including in your layout, something on this lines..
#if(ViewBag.Style == "red")
{
Styles.Render("~Views/Customer/css/Hide.css");
}
else if(ViewBag.Style == "blue")
{
// you get the idea...
}
If you're willing to use JQuery you can do this within one line:
$("head").append("<link rel='stylesheet' id='extracss' href='"~Views/Customer/css/Hide.css"' type='text/css' />");
I am using 3 stylesheets (style1, style2, style3) for many pages.
style1 for my web header,
style2 for my contents and
style3 for footer
Now I want to apply a new stylesheet on my home page and disable style2 for only home page.
I added new classes for different elements but at some places it is still detecting my previous stylesheets. How can I disable CSS on a specific page?
Since you did not include the code to see how you doing it, and considering you are having the header as an include file:
USE PHP:
In your Home page before including header:
<?php $homepage = 1; ?>
//include your header//
In your header where you are referencing CSS:
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />
Your files should be in PHP for this to work.
change "Home-style.css" to your new CSS file for home page.
Check for page then grab the dom stylesheets array object and disable anything you want .
if(window.location.href.indexOf("<name in page url >") > -1) {
//Next line will disable the 2nd stylsheet in the document .
document.styleSheets[1].disabled = true;
}
Also fyi you can view all style sheets in the dom with:
console.log(document.styleSheets)
This should give you the appropriate index of whatever stylesheet you want to remove.
You have to use jQuery to disable a stylesheet like :
<script>
$(function () {
if (location.pathname.indexOf('/pagename') >= 0) {
$('link[href*="/media/css/csspagename.css"]').prop('disable', true);
}
});
</script>
I need to set the HTML to iFrame. (iFrame src is null.)
e.g I get following string from web method call:
string s =
<html>
<head>
<style type="text/css"> <!-- .some dynamicaly generated css> </style>
<link id="css1" type="text/css" rel="stylesheet" href="1.css" /></head>
<body style="padding:0; margin:0;" tabIndex="-1">
--- some HTML elements ------
<script type="text/javascript">
---some script ---
</script>
</body>
</html>
I need to set this string into iFrame. But when I use iframe.innerHTML it strips out head and body tags.
Can you please help me in this? Do I need to add something to string or add some property to iframe.
Thanks in advance.
Why don't you you use jquery?, it will be more easer.
You just can var innerHtml = $( 'Your html' );
and then user function called $.html( innerHtml );