How to Assemble HTML,CSS and JS with EachOther - javascript

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?

Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:

Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Related

Loading HTML file with JavaScript vs having long file content?

I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
Is it a good approach to load .html files using JavaScript for
this purpose?
Is there any reason to load .html with JavaScript
other than cleaner code and easier maintenance?
If there are
benefits of loading .html with JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.

How can I stop rendering HTML until external css, js loaded

I just want to stop rendering to the html to the DOM until my Css and Js loaded from an external source.
<html is showing here >
<link type="text/css" rel="stylesheet" href="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/css/style.css">
<script type="text/javascript" language="javascript" src="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/js/mywinners-global-scripts.js">
<html is end here >
Why I'm doing this is the static html is looking ugly until the css and js loaded and then after sometime?(after loading css and js from network) it looks cool.
So I just want to stop showing html until the script and css load.
Any clues/help regarding this ?
If your includes are nested in the BODY tag not a lot you can do with just pure HTML. If you can move them up into the HEAD section section this should fix itself. A great breakdown of how the page loads and what fires when is on an answer to another StackOverflow question see this link :
Which is the load, rendering and execution order of elements in a HTML page?
Hope you find this helpful.

javascript not pulling through - sticky bar

I'm using this:
http://codesandnotes.com/sticky-elements/ (see the jsfiddle)
but I'm having problems in getting it to work. The pink css pulls through but it doesn't stick/doesn't change to red.
I've changed the article to an aside in the html and js. I'm using wordpress. I've added the js to the js folder and called it in the header which is pulling into the correct template. I've added the css to the main style.css. The js and css files are in different locations- could this be what's stopping the js being called?
Any help would be much appreciated. Thanks
is it fixed?
Anyway!
First add css and jQuery Library link to your WordPress Header. Then add html codes from the jsfiddle. after all the things done.
include copied js script file from the jsfiddle to the bottom of the page. See below code will help you to understand. but it's in html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="copied_css_file_from_the_jsfiddle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- jQuery Library -->
</head>
<body>
<p>This is the proper way <small>How to use css js and html in correct way</small></p>
<!-- add the html code from the JSFIDDLE-->
<script type="text/javascript">
$( document ).ready(function() {
//Copy and paste the script from the JSFIDDLE
});
</script>
</body>
Contact me by searching yeshansachithak in any social network. Thanks

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Categories