For many days I have been trying to figure out a work around to loading javascript and style sheets in my content pages.
How do I link all the resource files like .css and .js in the markup for the master page and then use these directly in the content pages without adding them to each of said content pages?
I found that we can link .css files by using themes and initializing a theme in the master page; But what about .js files and images?
How can they be linked in a master page and then accessed in the content pages?
Please point me in the right direction.
On a master page anything you put in the head will be present for all content pages that use that master.
That is to say if in your master page you have:
<head runat="server">
<script type="text/javascript" src="/js/pages/jquery.min.js"></script>
<script type="text/javascript" src="/js/pages/jquery.jscrollpane.min.js"></script>
</head>
then every content page will contain the same thing in the head.
If you had scripts that were used by some pages and not others then on a master page you can define an <asp:content> tag that is in the <head> of the master page.
Then in your content pages you can place links to your javascript files right into the content place holder for the content tag in the page head.
If you wanted to link pictures, I would suggest doing this through javascript. If you created a <script> block in your master page head with something like the following:
var ReusableImageVariable = new Image();
ReusableImageVariable.src = '\A\Path\To\Your\image.jgp';
Then on any content page you could place a script block that would use that ReusableImageVariable and copy it onto the document in a specified place:
<script type='text/javascript'>
document.getElementById('PlaceHolderForImage').appendChild(ReusableImageVariable);
</script>
Where PlaceHolderforImage is the id of a <div> or other containing element. This would help with browser load times as well because you are loading the images the same time you are loading the style sheets and scripts.
Finally if you wanted to use just ASP, I would define the images as properties of the master page. Then any content page can just access them in code behind and load them where ever you need them.
I assume we are talking web forms, not MVC? You can put scripts in the <asp:ScriptManager> control's <Scripts> collection, or <CompositeScript> list. You can get a reference to the ScriptManager via ScriptManager.GetCurrent(PageReference);
Images there isn't anything specifically like this that's built for images; however, it can be built.
Related
So i'm using main index page, with all the "main" links & css styles.
Then i have other .asp pages with only row code and i display those pages through my index page with:
Dim strPage
strPage = Request.QueryString("show")
If Len(strPage) = 0 Then
Server.execute("sign-in.asp")
Else
Server.execute(strPage & ".asp")
End if
So with this, if i go http://8.8.8.8/?show=start
It will show me start.asp with the styles etc. taken from the index.asp page.
But i have noticed, that my webpage is taking AGES to load.
Previewing it on localhost/?show=start is awesome&fast. But as soon it goes over public. Slow as hell. So seems like this code is slowing up my page somehow, is there some editing i can do OR configure my IIS correctly to handle this better?
(When i removed this and added the links, css etc. on each page it load alot faster like if it was localhost, but i can't go with that, because i edit the "main" links and css alot. And i want to edit them on 1 page only.)
If you prefer to have multiple pages (rather than only one index.asp page) but only one file to edit styles and other general setting, the best way is to include a setting file above all your pages like this
sample source of "setting.asp":
<style>
/*general styles goes here*/
</style>
<script src="setting.js"></script>
// and other general setting including js file and css files goes here
where this is a sample source of index.asp:
<html>
<!--#include file="setting.asp"-->
//index codes here..
</html>
and this is sample source of signin.asp:
<html>
<!--#include file="setting.asp"-->
//signin codes here..
</html>
I built a Master Page using SharePoint Designer 2010 which references an external stylesheet like so:
<link href="/sites/sandbox/Style%20Library/pscp/styles.css" rel="stylesheet" type="text/css">
In the design mode of the master page, all of the styles are reflected correctly, likewise when I create a new .aspx based on that master page. However, when I preview the .aspx on Internet Explorer, all of the styles work except for the ones that apply to styling <a href> elements (for example, hover, color, etc.).
Adding the styles in-line to the <a href> elements in the master page make it so that they are reflected in the preview of the .aspx, but if I add the styles pertaining to links at the top of the master page using <styles> tags, it stops working, too.
Anyone have any ideas as to why styling links with an external stylesheet doesn't seem to work? Thank you in advance.
there are quite a few ways to reference your resources
<SharePoint:CssRegistration name="/Style Library/OVERRIDE.css" After="COREV4.css" runat="server"/>
be careful on testing on IE because often you will experience cache on the browser, cache on the load balancers, and the compatibility mode, which you can disable for yourself, but remember other users still have it enabled
I have just created some directories and tidied up my growing ASP.NET project but it has caused some issues that I can't solve. I have a directory in the root of the project called js and another one called Pages.
In Pages I have a file called MasterPage.master which is a master page. The Pages directory has Default.aspx and some subdirectories of other pages.
I have two main issues. In MasterPage.master I have code like this to reference javascript files:
<script src="js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
However none of my javascript can be found any more. I tried <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> and I tried <script src="~/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> but it still doesn't work.
The other issue is that I have a menu system written is CSS and that has some strange behaviour. When the page loads the menu works fine. If I navigate to /Pages/Trades/TradeInfo.aspx and then hover over that item the page path now says /Pages/Trades/Trades/TradeInfo.aspx
Why has the Trades directory been added twice?
Have you tried ResolveUrl?
It sure works for the script tags and your anchor tags.
<script src='<%=ResolveUrl("~/Scripts/jquery/ui/jquery-ui-1.8.11.custom.min.js") %>' type="text/javascript"></script>
I am new to ASP.NET MVC and I am trying to include a CSS file into my view.
The view is strongly typed and has a List Scaffold Template, it is linked to a master page which itself is linked to a css file and works fine for the master slide but when trying to link the view to a seperate css file I cant as I cannot include tags.
Anybody know how I can resolve this?
<link href="#Url.Content("~/Content/YOURSTYLESHEET.css")" rel="stylesheet" type="text/css" />
You should add a new content place holder in your site.master page in the head tags, i always have one called "HeadContent" which i use for inclusion of scripts and css that i only want on individual pages.
I have a landing page created as a single html file with an external css file and a bunch of jpeg images. It looks fine and everything is good with it. I need to insert this page as an article in Joomla so that it looked the same way as it does now, without broken styles and missing images. It should show all header, footer and sidebar content from Joomla and the landing page as a regular page. What is the right way to do that?
Create a blank template for joomla and paste the whole body of your landing page to a joomla article.
Alternately, if you are using a totally different stylesheet, you may have better luck if you turn it into a custom template. Joomla's templating model is tremendously simple and abnormally flexible!
Try this
place the css,scripts,images in the root folder of your website.
path could be
/css/style.css or for localhost /joomla/css/style.css
/scripts/script.js or for localhost /joomla/scripts/script.js
/images/image.jpg or for localhost /joomla/images/image.jpg
copy and paste your html code including the file paths in article editor.
this could be
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />//for css
<script type="text/javascript" src="/scripts/scripts.js"></script>//for javascript
<img src="/images/image.jpg" />//for images
use absolute paths for locating your files.
this is irrespective of templates