I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.
Related
I am not sure if it is possible or not.
I have a bunch of javascript files, all are dependent on each other.
I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.
So my question is, can I bundle all these files while keeping the dependencies intact.
This is how my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Expires" content="3600">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D BAT</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/jspanel.css" rel="stylesheet" type="text/css">
<script src="js/lib/three.js"></script>
<script src="js/lib/controls/MapControls.js"></script>
<script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
<script src="js/lib/jquery-2.2.4.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/raphael.js"></script>
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>
<link href="css/main.css" rel="stylesheet">
<link href="css/label_tool.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
<div id="label-tool-wrapper"></div>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
<script src="js/lib/PCDLoader.js"></script>
<script src="js/lib/OBJLoader.js"></script>
<script src="js/lib/controls/OrbitControls.js"></script>
<script src="js/lib/controls/TransformControls.js"></script>
<script src='js/lib/controls/PointerLockControls.js'></script>
<script src='js/lib/controls/KeyboardState.js'></script>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/lib/stats.min.js"></script>
<script src='js/lib/dat.gui.js'></script>
<script src='js/lib/Projector.js'></script>
<script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
<script src="js/lib/html2canvas.js?ver=1.0"></script>
<script src="js/lib/base64-binary.js?ver=1.0"></script>
<script src="js/util/math.js?ver=1.0"></script>
<script src='js/util/classesBoundingBox.js?ver=1.0'></script>
<script src='js/util/boundingbox.js?ver=1.0'></script>
<script src='js/base_label_tool.js?ver=1.0'></script>
<script src='js/pcd_label_tool.js?ver=1.0'></script>
<script src="js/image_label_tool.js?ver=1.0"></script>
<script src='js/util/ajax_wrapper.js?ver=1.0'></script>
<script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
<script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
<div class="current">1/900</div>
<div class="list-wrapper">
<div class="frame-selector__frames"></div>
</div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
labelTool.start();
</script>
</html>
in the above code script tag order is important since files are dependent on each other.
Can I bundle all these files into one without making any change into the current js files?
If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)
This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.
e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.
So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).
uglifyjs input.js other-input.js more-input.js --output combined.js -c
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
I visited Eyecon and downloaded the datepicker. I got three folders. 'css', 'js' and 'less'. I have included the bootstrap-datepicker.js and the latest jquery.js and linked the .css in the head:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
As one can see, I'm already working with the bootstrap library and have therefore also included that.
My question now is: how do I implement and call the date picker function?
$('element').datepicker(); where element is some class, id etc.
http://jsfiddle.net/6kk3k/1/
HTML
<input type="text" class="datepicker">
jQuery
$('.datepicker').datepicker();
I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.
I'm trying to integrate Coin Slider into my page, and I've downloaded and attached the latest Jquery to my header, along with all of the necessary Coin-slider files. However, the page simply stacks the images as if I had simply inserted tags.
The paths for all of the files are correct. I tried following his instructions to the letter on the "how to install" page, with no success. It won't work in IE8, or the latest versions of Chrome or Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/paradigm.css" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paradigm Solutions</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navbar"></div>
<div id="leftMenu"></div>
<div id="coin-slider">
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
<img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
<span>
<b>Don't Use IE</b><br />
Internet Explorer is an inferior product that should be destroyed.
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</body>
</html>
Change your script tags from
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
to
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
coin-slider depends on jQuery therefore it must be loaded before.... And I would suggest you remove js/coin-slider.js as js/coin-slider.min.js and js/coin-slider.js are the same thing ... the .min is just a minified version of the other
The order of your javascript file includes is very important. jQuery should always be first (as is evident in the production documentation). Also, you don't need BOTH coin-slider includes. The .min will be enough:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js">
This one may sound obvious but the coin-slider package doesn't always come packaged with jQuery, so make sure you have jQuery in your javascript folder before linking too it c(:
it works well
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
check this link for code