How to Add external Javascript and CSS for CakePhp - javascript

I am new to CakePhp. I want to get the help of the external javascript and css files. I have downloaded those files. And included those files in webroot directory (js and css sub directories). So If I want to use those in a view.ctp how can I call them. Can you explain me simply ?

Simply use the HTML helper like so :
print $this->Html->css("name_of_css_file");
print $this->Html->script("name_of_javascript_file");
So long as you not doing anything crazy and are using the default ".css" and ".js" extensions - you can leave out the extensions from the above code.

Cake is still PHP. You must add link do css in head of html file (.ctp view file).
There are two ways, write link tag with rel and src attributes or using HtmlHelper

Related

How to upload all html, css and javascript at once

I have created 3 different html, css and javascript files but I am now confuse how can I interlink them and upload as a single file
Looks like you're just getting introduced to web development, these might come in handy for finding out how to bring your HTML, JS and CSS files together:
(Link JS File) - https://www.w3schools.com/tags/att_script_src.asp
(Link CSS file) - https://www.w3schools.com/tags/tag_link.asp
https://www.w3schools.com/
In order to make your codes to be run by browser you need to include all your sources in one .html file. You need to link those files inside this file and there are different requirement of each file extensions to be included.
In order to link CSS file you use link element with src attribute to indicate the source of your file. Another attribute rel defines the relationship between a linked resource and the current document. In here it is stylesheet document and need to get this value.
Sample: <link rel="stylesheet" href="styles.css">
In order to link your JS file, you need to use element which is used to define a client-side script (JavaScript). You may add it internally or externally. According to your question you need to add it externally. First, add your script element and then refer to it using the src attribute in the script tag.
Sample: <script src="myJSFile.js">
Resources for learning more in these topics:
https://www.w3schools.com/tags/tag_link.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
https://www.w3schools.com/tags/att_script_src.asp
To inter-link different HTML files together, you can just use Hyperlink, Hyperlinking is a feature of HTML to link multiple documents (HTML) files together. It'll show up as a button on your HTML.
Here's an example of how you can implement it. href="your-path-to-your-html"
Click here to visit school
Click here to visit inventory
Click here to visit battle
To understand more about hyperlinking, you can read this for better examples: https://www.w3schools.com/htmL/html_links.asp

merging multiple files (html, css and js) with working links

I have multiple html files of different pages a css and a js file for my cv and im wondering how to combine them all to be able to add the as an attachment on indeed as it will only let me add 1 document, i need the links to be working to take to the different pages. Thanks
I've tried putting it all in one file but it all overlapped and I need it to be seperate pages.
I found that, you can use a simple html tag :
<div w3-include-html="your-page.html"></div>
Link your CSS file on the main page
If this doesn't works I think you can use include() with php but you need to install it :/

where do these .less files be loaded from?

on this website : https://www.ornikar.com/
Some .less files are used to change some presets of bootstrap. when inspecting the navbar for example the color of the navbar is white and processed from a .less file (that's what the browser's css inspector shows)
My big surprise is that, the less files are nowhere to be found from the page's includes or from the imports of some other css files. neither is the less js script included in the main page.
Could someone explain to me how this is possible ?
If you're using Chrome that's a feature to help people who use less/sass.
To make Chrome show only .css you need to delete .css.map files
Update:
Less files are also fetched
Update °2 (발렌텐) :
If there are no map files, the trick is the base64 json
at the end of the main stylesheet that includes the mapping directly..
I could after few days understand where do these files be loaded from.
When you map a css to a set of less files, you have two solutions :
with a .map file
this method is generic and the .map file is referenced from within the css file (at the end). The advantage is that you can remove the .map file easily forcing the browser's css inspector to display the references as is in the css file.
the .map file is directly concatenated within the css file
The references to the less files are directly inserted at the end of the css file. The use of a .map file is then no longer needed.
More details following these links
devtools : https://developer.chrome.com/devtools
less : http://en.wikipedia.org/wiki/Less_(stylesheet_language)
It seems your less files are under the following folder path according to DevTools:
"source/Users/vincent/WORK/ornikar-front/solidstorm/src/less/onk"

How to include a javascript in Asciidoc?

I'm using asciidoctor-maven-plugin to convert .adoc files to html file...
Would want to include a link to javascript in the generated html file...
Basically would like to see something like below in the html file that is generated from the .adoc file
<script src="custom.js"></script>
Tried setting attributes like linkcss scriptsdir etc..but of no luck...
Any help?
One way is like in
http://mrhaki.blogspot.ie/2014/06/awesome-asciidoc-include-raw-html.html
But then have to add it in every .adoc file...is there a way to get it automatically added just like the CSS (using stylesheet)
Use docinfo files, see the documentation for more detail.
You create docinfo files by adding another file named <doc_file_name>-docinfo.html for HTML generation or <doc_file_name>-docinfo.xml for docbook generation. The contents of the docinfo file are copied into the generated output, in the head section for html. If you want to add things to the bottom of the document there are footer docinfo files for that. It follows the same as a normal docinfo but the file name is <doc_file_name>-docinfo-footer.html or <doc_file_name>-docinfo-footer.xml
Happy docing :) Let me, or preferably the list know of any other maven issues you find.
You can use the passthrough block for that using ++++:
++++
<p>
Content in a passthrough block is passed to the output unprocessed.
That means you can include raw HTML, like this embedded Gist:
</p>
<script src="http://gist.github.com/mojavelinux/5333524.js">
</script>
++++
Source: http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#more-delimited-blocks

VS2010 WebApp .js+.css able to be embedded fully within HTML code?

So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.
Use external files to allow the browser to cache them. Put the reference to the external files in your master page.

Categories

Resources