I have a master page with the following lines inside my <head> tags.
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
When I navigate to a page that uses URL routing, the lines above generate the following HTML.
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
Based on the mapped URL, the stylesheet link is correct. How can I get the script link to also be correct?
P.S. I tried setting runat="server" in the script link but that just seems to confuse ASP.NET. The entire project fails to compile based on bogus errors reported in my JavaScript file. (The javascript file runs fine otherwise.)
It looks like the best answer is this:
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src='<%= ResolveClientUrl("~/Scripts/navmenu.js") %>' type="text/javascript"></script>
Note that if I use the ResolveClientUrl() for the stylesheet <link> tag, it doesn't work. Apparently, there is special handing for this tag.
Related
I have this Plugin I want to use, it is a slider plugin, here's the link to it: https://github.com/seiyria/bootstrap-slider
I want use it using the CDN: https://cdnjs.com/libraries/bootstrap-slider
So in my header of the html I have it like this:
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.min.css"></script>
</head>
And then I try to use one of the examples they show on their page: http://seiyria.com/bootstrap-slider/
Example 21:
<input id="ex21" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
As a result all I get is a text box. Am I not using the plugin or referencing it the right way ?
First: you only need either the full or the minfied versions. In your example code you're including both.
For development purposes I propose to remove the includes of the minified files (the one with the .min suffix.
Secondly, you are including the stylesheets through script tags. You need to include a stylesheet using a link tag.
Lastly, I do not see an include of the Bootstrap JavaScript itself, you'll need to include it as well.
I would also update the path to the bootstrap-slider files. Using two slashes at the start could lead to strange behaviour. Update them to use https:// as the prefix.
After these changes your head section should look like
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
</head>
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I am very new to using templates. My CSS is not working if I put my html in another folder.
I have realised the css was being applied through JavaScript which I am also new too. I have guided the link for css/js the correct folders and files but it still wont work.
The relevant files are /Linear/index.html and /Linear/builds/index.html(where the error is) and the js and css folders
https://www.dropbox.com/s/cmmdybvbhvff0w4/Linear.zip?dl=0
In your template used skel.js and the style base path defined into it. So if you want your other html file that exist in other child folder work well, you must change the skel.js file.
Also in your index.html file used "noscript" tags. Its mean is if your browser dose not support JavaScript then load the css file, So if you remove this tags it works well like file that exist in root Folder.
<script type="text/javascript" src="../js/skel.min.js"></script>
<script type="text/javascript" src="../js/skel-panels.min.js"></script>
<script type="text/javascript" src="../js/init.js"></script>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</head>
Removing the noscript tag around the css link will solve this;
So, instead of
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
You have;
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
You can download the modified version here
https://www.dropbox.com/s/lewnpt0iy980i53/Linear-Modified.zip?dl=0
So I have a master page in MVC that has the following code in its Master Page's head section:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript" />
<script src="../../Scripts/grid.locale-en.js" type="text/javascript" />
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript" />
</head>
You can see that the last three files are the JavaScript files.
Now if I run this code, my jquery-1.4.4.js is included, but grid.locale-en.js and jquery.jqGrid.min.js which are in the same folder as jquery-1.4.4.js are not! What's up with this?? Is MVC being dumb and can't reference my last two javascript files as it did with the first one? The interesting thing is that, if I comment out the include with jquery-1.4.4.js, MVC will reference grid.locale-en.js which is the second line. So it seems that MVC is able to only reference the first include line of the javascript which ever one it is, but not any line after that. Can someone please explain this scenario?
You need to close the script tag off like this
<script src="..." type="text/javascript"></script>
I created a default ASP.net MVC project. In the Master page I have the following at the top
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
I then need to add a javascript file and added the line as follows by dragging the file from the solution explorer to the page:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
When I access a the site and look at the html from the browser I see this:
<head><title>
Index
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
The CSS file relative path was fixed but the JS file not. The site will be deployed to a different folder on the server than the root which I get on my development box.
Is there a proper way to do this?
Use the Url Helper:
<script type="text/javascript" src="<%=Url.Content("~/Content/script/MyFile.js")%>"></script>
Hope that helps
You can create a helper method that does something like this:
<%= Helper.IncludeJavascriptFile("Menu.js") %>
and then in that helper you do something like:
public string IncludeJavascriptFile(string fileName){
return Url.Content("<root>/Javascript/Files/" + fileName);
}
Then you can call that helper method from your view. If you decide to change the location of the files, it's only in one location you have to worry about it. If you change the name of the files, that's a different problem in and of itself.