Add JS Script to this HTML - javascript

I want to add this "TimeCircles JavaScript but, I can't do it correctly, I will add the files of it in the following location: /js/count-down/timecircles.css and /js/count-down/timecircles.js
The HTML file: https://www.dropbox.com/s/diho8tcumte5pqr/coming-soon.html
The JS link: http://git.wimbarelds.nl/TimeCircles/

<script src='/js/count-down/timecircles.js' type='text/javascript'></script>
<link href='/js/count-down/timecircles.css' type='text/css'/>
Stick this in the head of your HTML.

Related

Where to add JavaScript code that needed jQuery file?

I've founded this article but I don't know where to add this code:
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js.
Should I edit one of both file with above code? Please give me a hint.
I want to execute query SQL by clicking the select option that I know it's just possible using jquery/ajax/js, but I'm still newbie.
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js. Both are jquery library file with different version. Only one should be included.
In your case the code snippet which you have shared can be included in a separate js file. Like this
nameOfYourJSFile.js
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
Include the file in your main html file. Add the scripts near the bottom of the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="nameOfYourJSScript.js"></script>
</body>
</html>
DEMO
If the file is included in the bottom , there is no need to use document.ready function
Add your code BELOW the <script src="jquery-1.11.3.min.js"></script>
So, JQuery will be loaded and can be used

JavaScript file doesn't load

I'm using Spring MVC, Thymeleaf and want to import a javascript file in my html document. Although all links are set correctly and the files appear in the debugging view in my browser, they don't load.
There is following JS in the HTML that should call a datepicker, but it doesn't show up:
<script th:inline="javascript">
/*<![CDATA[*/
$( function() {
$( "#datepicker" ).Datepicker(
);
} );
/*]]>*/
</script>
the files are included this way:
<script type="text/javascript" th:src="#{/resources/js/file.js}"></script>
CSS files work just fine just with the type changed.
Any ideas how to fix this?
Shows error on Chrome debugging
Now I deleted all not necessary js files from the import and it shows following error:
more precise error
This shows that the jquery-1.12.4 is used.
When you are using Spring and Thymeleaf the following project structure is recommended:
src
|-main
|-resources
|-static
| |-css
| |-bootstrap.min.css
| |-application.css
| |-images
| |-js
| |-jquery-3.1.1.js
|-templates
Then including different resources in your templates will look like this:
<head>
<link href="../static/css/bootstrap.min.css" rel="stylesheet" media="screen"
th:href="#{/css/bootstrap.css}"/>
<link href="../static/css/application.css" rel="stylesheet" media="screen"
th:href="#{/css/application.css}"/>
<script src="../static/js/jquery-3.1.1.js"
th:src="#{/js/jquery-3.1.1.js}"></script>
</head>
The Answer:
1) <th:block></th:block> makes no diffrence
2) The additions to the html tag
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
make no difference
3) placing the script-tags with content at the bottom of the body is the same as when placing it in the head
4) I use Bootstrap in this project and used the datepicker inside a div of Bootstrap. After placing it somewhere else in the body and not inside a div it worked.
Conclusion:
If you are using Spring MVC and Thymeleaf and want to include JavaScript files you need:
1) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
2) <link th:href="#{/resources/.../file.css}" rel="stylesheet" type="text/css"/>
3) <script type="text/javascript" th:src="#{/resources/.../file.js}"></script>
4) Make sure your JS or CSS files are not "overwritten" by following files
Thanks for your time and help #Parth!

how to add(link) my customized javascript code to any html/php page

i would like to add javascript to an html page. I don't want to have those scripts inline on the home page however, I would like them to be in an external javascript file. How do I link to an external javascript file so those scripts are run on the page?
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script> my jquesry scrips here
</script>
</head>
<body> somecodes </body>
</html>
Instead of
<script>my jquesry scrips here</script>
put
<script src="myscript.js"></script>
Of course you will have to create a file named 'myscript.js' and type javascript code in it.
For example, let say that you have all your javascript code in a file called 'functions.js', to link that javascript file to your html page just do it the same way you linked you jquery file.
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script src="functions.js"></script> <!-- linking your file -->
<script>
/*my jquery scripts here */
</script>
</head>
<body> somecodes </body>
</html>
Keep in mind that if the code in your 'functions.js' file needs jQuery to work correctly you have to add 'jquery.js' before adding your custom file, just as it is in the example.
In the map of your website create a file called script.js
put your jquery script in there
replace:
<script>my jquery scrips here</script>
with:
<script src="script.js"></script>
just like you did with the jquery.js, next time search the web before asking questions on SO.
Example
if you google "link javascript file" the first link is your answer to the question (link above is the website).

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless
First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css

ASP.NET MVC 3 How to inject Javascript into the master layout

I am trying out the new razor view engine from MVC 3. The issue that I am having is that I have Javascript that is page specific. I normally have all my Javascript code before the tag closes. I was thinking of putting a section just before I close the body tag on my master layout. Some thing to the effect of:
<script type="text/javascript">
#RenderSection("JavaScript")
</script>
But VS2010 underlines it in green. So which ever pages uses this master layout can have it's Javascript injected Here. How would you guys do it? The reason why I want to do it like this is because then I can add JavaScript from the master layout also in here, other I will have to define a separate script tag just below the #RenderSection.
When I do the following then VS gives me a warning (I don't like warnings):
Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.
Here is my code for the above warning:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}
How can I get these warnings away?
Here's what I'd do, according to the best practices you should place your scripts at the bottom of the page.
_Layout.cshtml
<html>
<head>
#* ... *#
</head>
<body>
#* ... *#
#RenderSection("Scripts", false)
</body>
</html>
MyView.cshtml
#section Scripts
{
<script src="#Url.Content("~/Scripts/myScript.js")"
type="text/javascript"></script>
}
I would use #RenderSection("head", false) in my _layout page. Then you can inject whatever you want in the head of the page (including script)...and by using false you make it optional on all of your view pages.
You can turn off or modify VS's XHTML validation checking:
http://weblogs.asp.net/scottgu/archive/2005/11/23/431350.aspx
You need to close the link tags.
Like this:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}
And then follow Ryan's answer.

Categories