Here's the HTML I want:
<form class="{{cssClass}}" autocomplete="off">
<img src="{{item.img}}" />
</form>
Here's what I get when I convert that to pug:
form.{{cssClass}}(autocomplete="off")
img(src="{{item.img}}")
... but that is not valid pug syntax and will not parse back to html.
The question is what is the correct pug syntax to achieve this HTML output?
I have never used Pug. However, doing some quick Googling I found this GitHub post that says you can set a class using the attribute syntax (as you are doing with the image src) instead of the ".class" syntax.
A valid Pug template would be:
form(class="{{cssClass}}" autocomplete="off")
img(src="{{item.img}}")
The Pug documentation on Attributes also demonstrates a class being applied this way.
Related
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
I was searching for a way to use includes without server side assistance and found the object .inc method here.
Example: <object name="foo" type="text/html" data="foo.inc"/></object>
Which works great, except I can't style anything inside the .inc file without linking the style sheet within it.
Is there a way to do with the parent html file? like: object:foo #innerelement {}
That is my thinking anyways, like there should be some sort of notation for this.
If I recall correctly, the answer is no because this method is implemented similar to how an iframe tag would work.
I am trying to insert
onclick="countCheckboxes()"
within the input tag. Is there any way to do this in CSS? I tried the following, but didn't work:
input[type=checkbox]:after {
content: "onclick="countCheckboxes()"";}
So that it would eventually output this
<input type="checkbox" onclick="countCheckboxes()">
This is for a Wordpress form. Maybe I could add something in the functions.php template to enable me to do this?
You cannot generate Javascript in css. Please refer to this for more information: Using Javascript in CSS
I am guessing that you want to keep your markup clean of JS? If so, the best thing would be to abstract the JS from your markup in a separate js file. There you can navigate the dom and append functions whichever way you require. You can do this with either vanilla Javascript or a JS framework(like Jquery) which simplifes the process a lot.
I'm happy to set up a demo if you wish to learn how.
Google XML Pages say they support "standard html as long as it's formatted as xml" but they seem to only support html 4.0. The namespace used for supporting html is http://www.w3.org/1999/xhtml and generating output from a gxp that contains elements like <header> <nav> or <footer> complains that the element is unknown in the http://www.w3.org/1999/xhtml namespace.
Is there some different namespace I should be using or do gxps really only support HTML 4?
Here's a reference example gxp file where removing the wrapping header tag works just fine:
<gxp:template
name='com.example.gxps.Test'
xmlns:gxp='http://google.com/2001/gxp'
xmlns='http://www.w3.org/1999/xhtml'>
<html>
<body>
<header>
<b>
<gxp:msg>Hello,</gxp:msg>
<br/>
<gxp:msg>World!</gxp:msg>
</b>
</header>
</body>
</html>
</gxp:template>
As is though, it'll output something like:
java/com/example/gxps/Test.gxp:7:5:7:5: Unknown element <header> (in http://www.w3.org/1999/xhtml namespace)
GXP must have an (old) version of the Namespace definitions, built into it.
It appears that HTML5 and HTML4 use the same namespace, so there's no different namespace you need to use in your GXP pages. This is just an issue of updating/ adding the internal GXP definitions.
Download the source code & find where the definitions are! Ideally you can post/commit the updates back to the GXP project.
(I and other people are interested in GXP myself, so.. this would be really good work to do.)
Let me know how you go!
I have been using CakePHP for a while and recently needed to send emails from an app. Unfortunately I can not figure out a way to tell CakePHP to include the css directly in the document as an internal style sheet instead of a link. I know people think that is a bad idea, but my app is only sending emails to our company so I'm not worried too much about someone's email client messing it up. If I just include the link it doesn't work since the reference is wrong, although if I could make the link an absolute link (http://myserver/css/myfile.css instead of /css/myfile.css) that would be a 2nd best alternative since they would have access to my server.
If there isn't a way to do it in Cake, is there a quick way to just use PHP to read the contents of the file and dump it in the view? I guess I could do that from the controller, sounds like a bad hack though.
Any ideas would be appreciated, thanks
You could use readfile() to print the file content directly in your view.
Or you could $this->Html->url('css/yourcss.css', true) to get the full path to the file and pass it too the css method.
I would like to suggest you to use php variable as style class and use it directly as css class. For example.
$class1 = "border : 1px solid #eeeeee; font-family : font1, font2, font3; color : #785634;"
And use it in your email template as
<div id='my-div' style=<?php echo $class1; ?>>Your div content </div>
Even I do not know any way to include style sheet in the email, and if you create some classes those will not work in email templates.
So this is how I'm using css in my projects.
you can put the css in email layout like normal html (use html email layout)
<style type="text/css"></style>
Reviewing the code of the htmlHelper shows that it can't be done.
However, you can change or overload the helper; to do so in the simplest way just add a new option between line 371 to 378.
I used PHP's include function enclosed in a script tag and it worked perfectly! In the default email view:
<script>
include('css/your_css_doc.css');`
</script>
You can write css inline:
<h2 style="color:#818381">Here are the latest stories everyone's talking about...</h2>