I have tried all the possibilities (not the ones involving adding js from codebehind)..
I have a script which I want to include in a content page.. There is a ref of .js also. I want to include both!
<script src="Scripts/js/jquery.slimscroll.min.js" type="text/javascript"></script>
and
<script>
$(function () {
$('.catcontent').slimscroll({
height: '180px',
width: '100%',
opacity: '.08',
distance: '0px'
}).parent().css({
'float': 'left',
'margin-right': '1px'
});
});
</script>
I have tried all the possibilities, added both in the master page, added both in the content page adding ref in the master page and script in the content page! Since I have a very weak logic base of how a browser checks the script so unable to achieve what I want to!
This script is working fine if I make a separate aspx page. Adds a scrollbar neatly to the
<div>
. But it is not working when I'm trying to add it inside a content page!
Also when you answer this! Please try and explain me what is the best practice and how to actually add it!! I remember of adding css and js to content pages in the past! But I was a little out of touch and I tried searching in the internet! Nothing worked for me today! Please help me! Thanks
Master page:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" type="text/css" href="~/Content/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="~/Content/css/bootstrap.min.css" />
<link rel="stylesheet" media="screen" href="~/Content//font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="~/Content/css/style.css" />
<script src="~/Scripts/js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/bootstrap.min.js" type="text/javascript"></script>
<script src="Scripts/js/jquery.slimscroll.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<p>ldlajdlkdjljda</p>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Content Page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<header>
<div class="container">
</div>
</header>
<section class="category">
<div class="container">
<h2>Some text goes here</h2>
<p>
Some text goes here...Some text goes here...Some text goes here...
Some text goes here...Some text goes here...Some text goes here...
Some text goes here...Some text goes here...Some text goes here...
Some text goes here...Some text goes here...Some text goes here...
Some text goes here...Some text goes here...Some text goes here...
</p>
<span class="row" />
</div>
<div class="container content">
<asp:DataList ID="DataListCategory" runat="server" DataKeyField="Pk_Category_Id" DataSourceID="SqlDataSourceCategory" RepeatDirection="Horizontal" RepeatColumns="4" Width="100%" CssClass="row" AlternatingItemStyle-HorizontalAlign="NotSet" RepeatLayout="Flow">
<ItemTemplate>
<div class="col-sm-12 col-md-3 item">
<asp:Label runat="server" ID="CatID" Text='<%# Eval("Pk_Category_Id") %>' Visible="False" />
<h4><%# Eval("Category_Title") %></h4>
<div class="catcontent">
<ul>
<asp:DataList ID="DataListObjectivesList" runat="server" DataKeyField="Pk_Objective_Id" DataSourceID="SqlDataSourceObjectives">
<ItemTemplate>
<li>
<asp:HyperLink ID="linkObjective" runat="server" Target="_blank"
Text='<%# Eval("Title") %>'
NavigateUrl='<%# "Objective.aspx?oid=" + Eval("Pk_Objective_Id")%>' />
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</div>
<div>
<asp:SqlDataSource ID="SqlDataSourceObjectives" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT O.Pk_Objective_Id, O.Title, M.fk_Category_Id FROM dml_np_Objective AS O INNER JOIN dml_np_Objective_Category_Mapping AS M ON O.Pk_Objective_Id = M.fk_Objective_Id WHERE (M.fk_Category_Id = @CID) ORDER BY O.Pk_Objective_Id DESC">
<SelectParameters>
<asp:ControlParameter ControlID="CatID" Name="CID" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</section>
<div>
<asp:SqlDataSource ID="SqlDataSourceCategory" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT [Pk_Category_Id], [Category_Title] FROM [dml_np_Category] WHERE ([Is_Active] = @Is_Active) ORDER BY [Pk_Category_Id] DESC">
<SelectParameters>
<asp:Parameter DefaultValue="true" Name="Is_Active" Type="Boolean" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<script>
$(function () {
$('.catcontent').slimscroll({
height: '180px',
width: '100%',
opacity: '.08',
distance: '0px'
}).parent().css({
'float': 'left',
'margin-right': '1px'
});
});
</script>
</asp:Content>