I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.
Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL
Related
I have a problem in loading scripts on first time load of view in ASP.NET MVC, the scripts are present on Partial View but these scripts are not called when page is being loaded first time.
But when I append the same partial view second time using Ajax call, the scripts load perfect on the view and components present earlier on the view appended by the partial view also work perfect.
Here I little further discuss my problem in detail that when same scripts I call via _Layout view, then these scripts does not work on partial view, and When I put the same scripts on Partial view also then the problem arises of scripts called two times and my functions are called twice.Actually I am using SignalR scripts and due to 2 times referencing of scripts one time on _layout View and 2nd on Partial view my SignalR functions are called twice and my all code logic ruins.
This is my Home view code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="profile-body">
#*#Html.Partial("ModalMessages")*#
<div class="row">
#Html.Partial("_Messages")
</div>
<div class="row infinite-scroll">
<input type="hidden" value="" name="clientScreenWidth" id="clientScreenWidth" />
#Html.Partial("_AlbumRow", Model)
</div>
<div id="loading" class="text-center">
<i class="fa fa-spinner fa-2x fa-spin"></i>
</div>
</div>
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
and This is my Main _Layout code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Smart Kids</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link href="~/Content/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/css/headers/header-default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="~/Content/css/custom.css" />
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #122;
}
</style>
#RenderSection("metaTags", false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="wrapper">
<!--=== End Header ===-->
<div class="container" id="main">
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/albumSignalR.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Now I have no scripts in Partial view and this is my Partial View code:
<div class="widget-extra margin-bottom-15">
<div class="timeline">
<ul class="timeline-list">
<li>
<a href="#Url.Action("HomeAlbum", "Album", new { aId = item.AlbumId })">
<picture class="thumbnail img-responsive">
<source media="(min-width: 480px)" srcset="#Url.Content(filepath_mobile), #Url.Content(filepath_mobile) 2x">
<source srcset="#Url.Content(filepath_small), #Url.Content(filepath_small) 2x">
<img src="#Url.Content(filepath_mobile)" alt="#item.Title">
</picture>
</a>
</li>
</ul>
</div>
</div>
Kindly suggest me some solution to this, what I am doing wrong or what needs to be fixed.
why dont you move the closing script
tag within the closing }
#section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
//$(function () {
// $("div#loading").hide();
//});
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>
}
I have placed a bootstrap navbar in a .net masterpage. This code runs perfectly when on another page without the masterpage, but if on the masterpage, it does not work.
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/pnotify/css/jquery.pnotify.default.icons.css" rel="stylesheet"
type="text/css" />
<script src="../plugins/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.15/jquery.form-validator.min.js"
type="text/javascript"></script>
<script src="../plugins/notify/notify.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Log Out</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Anyone? About to throw my computer out the window.
/Bob
if you check your browser inspection tool, I think you may be having this error:
Error("Bootstrap requires jQuery")
Bootstrap.js has a jQuery dependency. So you need to load the jQuery first script before bootstrap.js.
this should be the order. right above the </body> tab. The path should be relative to where you have placed your file.
NOTE: use /parent_folder/..path_to_your_files
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
Hope this helps. :-)
I want to load website pages with slide effect similar abnieh.
It means when you are click the menu elements, the page changes with slide effect.
I use Umbraco CMS, ASP.NET Web Form and C#.NET.
How can I do it?
Please help me.
a part of my main master page is:
<form id="AbniyehMainForm" runat="server">
<div id="MasterMaster" style="width: 100%;">
<div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault">
<div>
<uc1:HeaderControl runat="server" ID="HeaderControl" />
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="aboutUsContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="serviceSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="projectSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="newsSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
<div>
<asp:ContentPlaceHolder runat="server" ID="languagesContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="menuContent">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
You will need to use a client side javascript effect, Most likely with jQuery and load the pages using ajax then slide the page in after it is loaded. I found this Project that looks like it will do what you want and here is a sample from a tutorial.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
And here is how you load a page via ajax from the jQuery website.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$( "#new-nav" ).load( "/ #jq-footerNavigation li" );
</script>
</body>
</html>
I have the following master page in asp .net:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!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 runat="server">
<title></title>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<form id="form1" runat="server">
<div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div> <!-- /container -->
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The navigation is made like this for every page:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
What I cannot figure out is how could I make it so that, if admin is requesting the page, add the Boss Stuff link?
In terms of session management and all that it's all good, I'm able to determine in my code behind if the user is admin, what I do not know is how to add the boss link only if he is admin on page load.
What might be a 'best' or standard practice way to do this?
Thanks
I mean, literally, how do I, from my page load event, add links to my navigation. How do I go from the CS to the aspx?
Assuming you are using .Net membership, something as simple as this could be done if you want to do it in the page markup:
<% if (Page.User.IsInRole("Admin"))
{ %>
Boss Stuff
<% } %>
I am having trouble getting the jQuery easySlider working. Can anyone find where I am going wrong?
<%# Page Title="About me" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="About.aspx.cs" Inherits="About" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>About me</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</asp:Content>
The jQuery files name and paths are all correct. I can't seem to find where else the problem might be.
EDIT
When the page is rendered, this is what the HTML code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>About me</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type='text/javascript' src='Scripts/jquery.cookie.js'></script>
<script type='text/javascript' src='Scripts/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#accordion-menu').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
showCount: false,
speed: 'slow'
});
$('#slider').easySlider();
});
</script>
</head>
<body>
<div id="header">
<div class="headerLogo"><img src="Styles/images/reading_uni_logo.gif" /></div>
<div class="loginDisplay">Welcome <span id="HeadLoginName">Username</span>! | Logout</div>
<div class="news">
</div>
<div class="polls"><span id="question">Do you think the library should be open 24 hours?</span>
<br />See more</div>
</div>
<div id="addGadgetButton">Add gadget</div>
<div id="menu">
<ul class="menu" id="accordion-menu">
<li>Home</li>
<li class="current-parent">Getting Started</li>
<li>Apps
<ul>
<li>Apps 1</li>
<li>Apps 2</li>
<li>Apps 3</li>
</ul>
</li>
<li>Social
<ul>
<li>Social 1</li>
<li>Social 2</li>
<li>Social 3</li>
<li>Social 4</li>
</ul>
</li>
<li>About me</li>
</ul>
</div>
<div id="main">
<h2>
About me
</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
<div class="clear" />
<div id="footer">
<a id="FeedbackHyperLink" href="Feedback.aspx">Feedback</a> |
<a id="ContactHyperLink" href="Contact.aspx">Contact us</a> |
<a id="SitemapHyperLink" href="Sitemap.aspx">Sitemap</a> |
<a id="HelpHyperLink" href="Help.aspx">Help</a>
</div>
</body>
</html>
Try referencing jquery-1.7.js first:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
Since easySlider1.7.js extends jquery and expects it to be already defined.
Anytime you use a jquery plugin(jquery UI or whatnot), remember to reference jquery first. I looked at the examples for easySlider1.7, and the examples correctly references jquery first. A good debugging technique to use is to start with what works, i.e. the examples, and try to find the differences between what works and what doesn't. In this case the difference was that you referenced jquery after the plugin.
You need to load jQuery before you load easySlider, so just change the order of the scripts:
From:
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
To:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
That should do the trick :)