I have creating my website using composite c1 .net cms with razor master template.
but I can't able to render the script in the masterlayout.Here is my razor files.
1.MaserLayout.cshtml
#inherits CompositeC1WebPage
#{
string websiteTitle = HomePageNode.Title;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="#Lang">
<head>
<title>#CurrentPageNode.Title</title>
#if (!string.IsNullOrEmpty(CurrentPageNode.Description))
{
<meta name="description" content="#CurrentPageNode.Description" />
}
#PageTemplateFeature("Descriptive HTML head elements")
</head>
<body>
<div class="container-fluid main-container">
#* renders the sub template: *#
#RenderBody()
</div>
</body>
</html>
above is my master template and here is my home template
#inherits RazorPageTemplate
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#*you can add template specific head elements here*#
</head>
<body class="frontpage">
<div>Test template</div>
<script>
$(document).ready(function () {
$('.test').click(function () {
alert("test");
})
});
</script>
</body>
</html>
But I can't able to run the script in the masterpage.Cn anyone help.
Thanks in advance for help.
If Composit-c1 uses some special razor functionality/flow other than default then please ignore this comment
I think it's not related to composit-c1 razor, you should define layout in home page to use master page. & also any script is not defined in you master pages.
in derived pages you don't create complete DOM structure (html, head & body etc. tags)
Related
In the description of Svelte, Rich explained why it's important to use the import keyword for development, and I'm totally agree. He continues and says that in the production build it's using the traditional JavaScript packaging:
That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static .css files).
But when I'm building the famous example from npm init svelte#next with adapter set to node, I see that the output JavaScript still use the import keyword in the pages JS, and also use <link rel="modulepreload" ...> which is super modern for browsers, as mentioned. For example, here is the output HTML of the built for production index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home</title>
<link rel="modulepreload" href="/_app/start-331a94d4.js">
<link rel="modulepreload" href="/_app/chunks/vendor-a4e104ac.js">
<link rel="modulepreload" href="/_app/pages/__layout.svelte-ad0878a7.js">
<link rel="modulepreload" href="/_app/pages/index.svelte-49c07d7e.js">
<link rel="stylesheet" href="/_app/assets/start-61d1577b.css">
<link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-a06e2686.css">
<link rel="stylesheet" href="/_app/assets/pages/index.svelte-1ae03b51.css">
<script type="module">
import { start } from "/_app/start-331a94d4.js";
start({
target: document.querySelector("#svelte"),
paths: {"base":"","assets":""},
session: {},
host: "127.0.0.1:3000",
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [
import("/_app/pages/__layout.svelte-ad0878a7.js"),
import("/_app/pages/index.svelte-49c07d7e.js")
],
page: {
host: "127.0.0.1:3000", // TODO this is redundant
path: "/",
query: new URLSearchParams(""),
params: {}
}
}
});
</script>
</head>
<body>
<div id="svelte">
<header class="svelte-1twf6mk"><div class="corner svelte-1twf6mk"><img src="/_app/assets/svelte-logo-87df40b8.svg" alt="SvelteKit" class="svelte-1twf6mk"></div>
<nav class="svelte-1twf6mk"><svg viewBox="0 0 2 3" aria-hidden="true" class="svelte-1twf6mk"><path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" class="svelte-1twf6mk"></path></svg>
<ul class="svelte-1twf6mk"><li class="svelte-1twf6mk active"><a sveltekit:prefetch href="/" class="svelte-1twf6mk">Home</a></li>
<li class="svelte-1twf6mk"><a sveltekit:prefetch href="/about" class="svelte-1twf6mk">About</a></li>
<li class="svelte-1twf6mk"><a sveltekit:prefetch href="/todos" class="svelte-1twf6mk">Todos</a></li></ul>
<svg viewBox="0 0 2 3" aria-hidden="true" class="svelte-1twf6mk"><path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" class="svelte-1twf6mk"></path></svg></nav>
<div class="corner svelte-1twf6mk"></div>
</header>
<main class="svelte-1izrdc8">
<section class="svelte-mjk9ig"><h1 class="svelte-mjk9ig"><div class="welcome svelte-mjk9ig"><picture><source srcset="svelte-welcome.webp" type="image/webp">
<img src="svelte-welcome.png" alt="Welcome" class="svelte-mjk9ig"></picture></div>
to your new<br>SvelteKit app
</h1>
<h2>try editing <strong>src/routes/index.svelte</strong></h2>
<div class="counter svelte-ltn89m"><button aria-label="Decrease the counter by one" class="svelte-ltn89m"><svg aria-hidden="true" viewBox="0 0 1 1" class="svelte-ltn89m"><path d="M0,0.5 L1,0.5" class="svelte-ltn89m"></path></svg></button>
<div class="counter-viewport svelte-ltn89m"><div class="counter-digits svelte-ltn89m" style="transform: translate(0, 0%)"><strong style="top: -100%" aria-hidden="true" class="svelte-ltn89m">1</strong>
<strong class="svelte-ltn89m">0</strong></div></div>
<button aria-label="Increase the counter by one" class="svelte-ltn89m"><svg aria-hidden="true" viewBox="0 0 1 1" class="svelte-ltn89m"><path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" class="svelte-ltn89m"></path></svg></button>
</div>
</section></main>
<footer class="svelte-1izrdc8"><p>visit kit.svelte.dev to learn SvelteKit</p>
</footer>
</div>
</body>
</html>
How can I build SvelteKit with the node adapter, with the traditional JavaScript rollupjs output in the client code, e.g. without the import keyword?
It turns out that my question is a feature request for SvelteKit.
This will be done after releasing version 1.0 of SvelteKit.
Credit for dummdidumm for pointing me out for this while I opened a duplicated issue.
I'm trying to give my html an css inline style. But this style gets ignored.
This is the HTML string that I'm using for webView.loadHTMLString(htmlBelow, baseURL: Bundle.main.bundleURL)
let fontsize = 16 //This is an dynamic variable
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\"content=\"ie=edge\">
<title>Document</title>
<style>
​html {
font-size:\(fontsize)px; */THIS DOESN'T WORK/*
}
</style>
<link rel=\"stylesheet\" href=\"\style.css\">
<script src=\"jquery-3.4.1.min.js\"></script>
<script src=\"script.js\"></script>
</head>
<body>
<div class=\ "sqr-tree-level\"> \(restOfHtml) </div>
</body>
</html>
I'm trying to set the fontsize dynamically.
When I change the font-size in my css file it works, but I want to set it dynamically. That's why I wanna do it like this.
This is how my document.head.innerHTML looks like
For future reference the fix here was to put the styling in to the <body> tag instead of in the head <style> tag.
<body style=\"font-size:\(fontsize)px;\">
Internal style written in rails mailer template is not working.
<html>
<head>
...
...
</head>
<body>
<style type="text/css">
...
...
</style>
</body>
</html>
How to solve this problem?
Make sure that you are putting internal style inside head tag
eg:
<head>
<style type="text/css">
...
...
</style>
</head>
Note: Only internal style (must be in head tag) supports.
I have a base header layout (base-header-footer.gsp)
<!DOCTYPE html>
<html>
<head>
<title><g:layoutTitle default="${g.message(code: 'title.index.page')}"/></title>
</head>
... some common resources loading....
<body id="launch">
<g:layoutBody/>
...........................
<r:layoutResources />
</body>
</html>
And then 2 more header, one for logged-in user, and another for guest users, and both of these header layout are extending the base layout.
Guest users (anonymouys-header-footer.gsp) -
<g:applyLayout name="base-header-footer">
<!DOCTYPE html>
<html>
<head>
<g:layoutHead/>
</head>
<body>
... render guest user header
<g:layoutBody/>
</body>
</html>
Logged-in users (loggedin-header-footer.gsp) -
<g:applyLayout name="base-header-footer">
<!DOCTYPE html>
<html>
<head>
... some css
<g:layoutHead/>
</head>
<body>
... Render header for logged-in user
</body>
... load some JS file...
</html>
Now in specific pages I apply guest OR logged-in layout based on user's login state, hence I want to show the page specific title user is on, but it doesn't work.
This is how I am using those layout
OrderStatus.gsp -
<!DOCTYPE html>
<html>
<head>
<title>Order status | Some title</title>
<meta name="layout" content="logged-in-header-footer" />
<script type="text/javascript" src="${resource(dir:'js',file:'some.js')}"></script>
</head>
<body>
</body>
</html>
But I still see the title which is defined base-header-footer.gsp, not the one in OrderStatus.gsp
I have also tried using g:layoutTitle in OrderStatus.gsp but doesn't help.
Any help is highly appreciated.
Use
<meta name="layout" content="base-header-footer">
in your pages to load the layout, then add your title there,
<title>${whatever.something()}</title>
in your layout add this:
<title><g:layoutTitle/></title>
enjoy.
Try to use
<title><g:layoutTitle/></title>
in your layouts (base-header-footer and loggedin-header-footer.gsp). More info in the official documentation.
I have installed:
compile ":jquery-ui:1.8.24"
compile ":jqgrid:3.8.0.1"
I got the next error:
| Error 2013-06-03 15:20:33,892 [http-bio-8080-exec-7] ERROR resource.ResourceMeta - While processing /plugins/jqgrid-3.8.0.1/css/jqgrid/ui.jqgrid.css, a resource was required but not found: /plugins/jqgrid-3.8.0.1/css/jqgrid/ellipsis-xbl.xml
I opened the file C:\Users\user\.grails\ivy-cache\org.grails.plugins\jqgrid\zips\jqgrid-3.8.0.1.zip. There is not any: css/jqgrid/ellipsis-xbl.xml
The latest version of JQGrid (4.5.2) has the file ellipsis-xbl.xml included. But I'm using the latest Grails plugin which uses that older version.
How could I tell Grails to look for ellipsis-xbl.xml in another location (let's say web-app/css/jqgrid-additions/ellipsis-xbl.xml).
I did a research on Google and it is what could be related:
taglib: <jqgrid:resources /> (according with the documentation, it
includes the required javascript and css for the plugin)
Add a configurationmapping in BuildConfig.groovy (I didn't find any
Grails documentation about that!)
I added to the GSP the next code to check if it looked at a different
location (and it check in the same location, at /plugins...):
<style>
.ui-jqgrid tr.jqgrow td {text-overflow:ellipsis; -moz-binding:url('ellipsis-xbl.xml#ellipsis');}
</style>
I end up by removing all css/js plugins except for jQuery (which is built-in). Just extract css/js files in /web-app directory. Then include them in /grails-app/conf/ApplicationResources.groovy like this:
modules = {
ui {
dependsOn 'jquery'
resource url: 'css/default.css'
resource url: 'css/print.css', attrs:[media:'print']
}
bootstrap {
dependsOn 'jquery'
resource url: 'css/bootstrap.css'
resource url: 'css/bootstrap-responsive.css'
resource url: 'js/bootstrap.js'
}
choice {
resource url: 'js/choice.js'
}
application {
dependsOn 'jquery,choice'
resource url: 'js/application.js'
}
}
Choice and application are application specific. Include here as an example. Then, call them in layout:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><g:layoutTitle default="My Application" /></title>
<g:layoutHead />
<r:require modules="jquery,ui,bootstrap,choice,application" />
<r:layoutResources />
</head>
<body>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<g:layoutBody/>
</div>
</div>
</div>
</div>
<r:layoutResources />
</body>
</html>
This way, I can manage css/js library myself.