I am trying to use twitter bootstrap with asp.net in visual studio 2010 ultimate. i cant find anything that explains how to set it up and why. everything i try doesn't quite work. Most articles are for MVC and im still new to asp.net so i want to start with the basics before i try mvc.
The closest i have got is to get the styles to work, but the javascript doesnt seem to work no matter what example i try. here is the closest i have got. its a mash up of the modal example snippet on the bootstrap website and a few blogs i found about using bootstrap with mvc.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication6.WebForm3" %>
<!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 id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="~/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/bootstrap-responsive.min.css" />
</head>
<body>
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/jquery-1.8.2.min.js"></script>
<form id="form1" runat="server">
Launch demo modal
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
#RenderBody()
</div>
</form>
</body>
</html>
The files are all in the locations at the links. im starting to think i need to install some prerequisites or something. The #RenderBody() shows up as text.
i cannot find any examples that work. Any help would be greatly appreciated as ive started going round in circles
This is not an issue with asp.net, you simply need to move the jquery JS file before the bootstrap include.
it will help you greatly if you use a browser with a javascript console such as chrome, the error doesn't always tell you exactly what the problem is but it can help narrow things down.
Related
I have a PDFTron Web Viewer control on my ASP.NET page where I can successfully view a static file 'GettingStarted.xod' already provided by PDFTron in the WebViewer folder. The file is returned by a ASP.NET web api REST service. The file displays successfully while running the solution locally. On hosting in Azure, I get the document from the web api successfully but the web page hosting the web viewer doesn't show the file, instead an empty web viewer control is only displayed. Please suggest how can I get the XOD to be displayed in the ASP.NET page hosting the web viewer control. The code for fetching the XOD file in settings.js file on WebViewer directory is as follows:-
window.WebViewerUniversalInstance.model.set(
{
documentUrl: "/api/Document/GetXODDocument",
//serverUrl: "../html5/annotationHandler.php", //server script for handling annotations
annotationUser: new PDFTron.WebViewer.User("Guest", false),
currentPageNumber: 0,
pageCount: 0,
zoomLevel: 0,
fitMode: PDFTron.WebViewer.FitMode.Zoom,
layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
toolMode: '',
rotation: 0,
webViewerLibPath: 'lib/', //URL path to the WebViewer lib folder
webViewerOptions: { //extra WebViewer options
silverlightOptions: {
enableAnnotations: false //disable annotations if silverlight is loaded.
}
}
});
Adding the .aspx page markup and errors received in console tab of browser
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocViewer.aspx.cs" Inherits="PDFTronWebViewerWebApi.Content.WebViewer.View" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--<![endif]-->
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- use latest browser mode for IE -->
<title>WebViewer Universal</title>
<!-- WebViewer.js Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-1.10.2.min.js"></script>
<!-- WebViewer.js IF DEBUG -->
<!--<script src="../silverlight/Silverlight.js" type="text/javascript"></script>
<script src="../flash/FlashUtils.js"></script>
<script src="../flash/swfobject.js"></script>
<script src="../flash/FABridge.js"></script>
<script src="../flash/HttpAjaxPartRetriever.js"></script>
<script src="../WebViewer.js" type="text/javascript"></script>-->
<!-- WebViewer.js ELSE IF PRODUCTION -->
<script src="lib/WebViewer.min.js" type="text/javascript"></script>
<!-- WebViewer.js END -->
<!-- WebViewer Universal Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-ui-1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/resources/modernizr.custom.js"></script>
<script type="text/javascript" src="lib/resources/i18next-1.7.1/i18next-1.7.1.min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/underscore-min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/backbone-min.js"></script>
<!-- WebViewer Universal Specific -->
<link type="text/css" rel="stylesheet" href="lib/universal/universal.css" />
<script src="lib/universal/universal.js"></script>
<!-- WebViewer Universal Settings (Modify this to your own server setup) -->
<script src="settings.js"></script>
<!-- WebViewer Universal Theming -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/cloud/jquery-ui-1.10.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" /> <!-- use the extra icon set for the classic theme -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" media="screen" /> <!-- use the extra icon set for the classic theme -->
</head>
<body>
<form id="form1" runat="server">
<div id="headerContainer">
<!-- Optional: add custom header content here.
Example usage: Application logo/branding, links to other pages in your app (My Account, Login, Sign up), etc.
-->
<div>
<span>
<br />
<span style = "font-weight:bold; font-size: 22px;" > Doc View Page </span> <br /><br />
<span>Doc Number : <asp:Label ID="lblDocNo" runat="server" /> ; File Type : XOD</span><br />
<span>File : <asp:Label ID="lblDocName" runat="server" /></span>
</span>
</div>
<div style = "clear:both" ></div>
</div>
<div id="contentContainer">
<div id="leftPanelContainer" style="float:left;">
</div>
<div id="viewerContainer" style="float:left;width:100%">
<div id="control" class="toolbar ui-widget-header" style="overflow:hidden;white-space:nowrap">
<span class="left-aligned">
<button id="sidePanelToggle" type="button" data-i18n="[title]controlbar.toggleSidePanel;controlbar.toggleSidePanel"></button>
</span>
<div class="right-aligned">
<div class="group">
<button id="layoutModeMenuButton" type="button" data-i18n="[title]controlbar.pageLayoutModes;controlbar.pageLayoutModes"></button>
<button id="rotateButton" type="button" data-i18n="[title]controlbar.rotate;controlbar.rotate"></button>
</div>
<div class="group">
<button type="button" id="prevPage" data-i18n="[title]controlbar.previousPage;controlbar.previousPage"></button>
<input type="text" pattern="[0-9]*" name="pageNumberBox" id="pageNumberBox"/>
<div class="ui-label" id="totalPages">/0</div>
<button type="button" id="nextPage" class="" data-i18n="[title]controlbar.nextPage;controlbar.nextPage"></button>
</div>
<div class="group">
<button type="button" id="zoomOut" data-i18n="[title]controlbar.zoomOut;controlbar.zoomOut">Zoom Out</button>
<div class="hidden-xs hidden-sm hidden-md" id="slider" data-i18n="[title]controlbar.zoom"></div>
<input type="text" name="zoomBox" id="zoomBox" data-i18n="[title]controlbar.zoom"/>
<button type="button" id="zoomIn" data-i18n="[title]controlbar.zoomIn;controlbar.zoomIn"></button>
</div>
<div class="group">
<div id="fitModes" class="hidden-xs" title="Page layout">
<input type="radio" id="fitWidth" name="radioFirst"/>
<label for="fitWidth" data-i18n="[title]controlbar.fitWidth;controlbar.fitWidth"></label>
<input type="radio" id="fitPage" name="radioFirst"/>
<label for="fitPage" data-i18n="[title]controlbar.fitPage;controlbar.fitPage"></label>
</div>
</div>
<div class="group">
<span id="tools">
<input type="radio" id="pan" data-tool-mode="Pan" name="radioSecond" />
<label for="pan" data-i18n="[title]controlbar.pan;controlbar.pan"></label>
<input type="radio" id="textSelect" data-tool-mode="TextSelect" name="radioSecond"/>
<label for="textSelect" data-i18n="[title]controlbar.textSelect;controlbar.textSelect"></label>
</span>
</div>
<div class="group">
<span id="searchControl" class="search-component hidden-xs hidden-sm">
<input id="searchBox" type="text" class="toolbar-input-text search-component" name="search" data-i18n="[title]controlbar.search"/>
<button id="searchButton" class="search-component" type="button" data-i18n="[title]controlbar.search;controlbar.search"></button>
</span>
</div>
<div class="group">
<button id="downloadButton" type="button" data-i18n="[title]controlbar.download;controlbar.download"></button>
<button id="printButton" type="button" data-i18n="[title]controlbar.print;controlbar.print" style="display: none;"></button>
<button id="fullScreenButton" type="button" data-i18n="[title]controlbar.fullScreen;controlbar.fullScreen"></button>
<button id="aboutButton" type='button'>About</button>
</div>
</div>
</div>
<ul id="layoutModeMenuList" class="ui-widget ui-menu-dropdown" style="display:none">
<li data-layout-mode="SinglePage"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single"></span>
<div data-i18n="controlbar.layoutMode.single"></div></a></li>
<li data-layout-mode="Continuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single-cont"></span>
<div data-i18n="controlbar.layoutMode.continuous"></div></a></li>
<li data-layout-mode="Facing"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing"></span>
<div data-i18n="controlbar.layoutMode.facing"></div></a></li>
<li data-layout-mode="FacingContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing-cont"></span>
<div data-i18n="controlbar.layoutMode.facingContinuous"></div></a></li>
<li data-layout-mode="FacingCover"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover"></span>
<div data-i18n="controlbar.layoutMode.cover"></div></a></li>
<li data-layout-mode="CoverContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover-cont"></span>
<div data-i18n="controlbar.layoutMode.coverContinuous"></div></a></li>
</ul>
<div id="overlayMessage" class="overlayMessage" style="display:none"></div>
<div id="printDialog" style="display:none">
<div>
<span data-i18n="print.pagesToPrint"></span>
<input type="text" id="printPageNumbers" title="Enter a single page number or a single page range. e.g. 3, 4-10." placeholder="e.g. 3, 4-10" style="width:100px" />
</div>
<br/>
<div id="printProgress"><div class="progressLabel"></div></div>
</div>
<div id="documentContainer" style="overflow: auto;width:100%;">
</div>
</div>
<div id="rightPanelContainer" style="float:right;">
</div>
<div style="clear:both"/>
</div>
<div id="footerContainer">
<!-- Optional: add footer content here
Example usage: Application logo/branding, a secondary control toolbar (e.g. page navigation), status bar
-->
</div>
</form>
</body>
</html>
Console Errors in browser:
HTML1300: Navigation occurred.
DocViewer.aspx
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
DocViewer.aspx
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/jquery-1.10.2.min.map
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
DocViewer.aspx (166,13)
HTML1508: Unmatched end tag.
DocViewer.aspx (173,5)
HTML1521: Unexpected "</body>" or end of file. All open elements should be closed before the end of the document.
DocViewer.aspx (174,1)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/i18next-1.7.1/translation-en.json
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/underscore.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/backbone.js
SCRIPT7016: Use of XMLHttpRequest with the synchronous flag set to true is deprecated due to its impact on user-perceived site performance.
jquery-1.8.2.min.js (2,85652)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/html5/Resources/i18n/translation-en.json
SCRIPT5022: Error loading document: Invalid XOD file: Zip end header data is wrong size!
CoreControls.js (727,381)
As suggested by Ryan, I upgraded to latest version 2.2.2. I left the WebApi approach and using PDF Tron Web Viewer as used MVC controller to download the file first on hosted folder in Azure and then displayed the file on MVC Razor View.
It looks like you are running an older version of WebViewer that does not have the azure specific fixes.
You need to switch to the latest version.
https://www.pdftron.com/webviewer/download.html
You can check your version by bringing up a developer console in Chrome, in the top left there is a dropdown that should say "", change this to ReaderControl.html, then run readerControl.docViewer.version in the console.
Dropdown is not showing when clicked. Other input fields are working as expected except this.
The dropdown field is one of the field in form tag.
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem.
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget.
I've tried the solutions below but to no avail.
Semantic-ui dropdown is not working
Semantic UI Dropdown is not showing the drop down but everything else is working
I managed to get the drop down list shown now, by adding this script in the head tag.
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. But somehow it's not.
I'm still waiting for someone to propose a better solution than this.
Thanks.
Include semantic CSS inside the head tag
Include jquery in the end of your body tag, then include semantic UI JS
Put your code from semantic dropdown inside
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
I have created an ASP.Net Master page with Bootstrap 3.3.7 and Jquery 3.1.0.
Default.master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="BootStrap_With_ASPDotNet.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is My Site Using BootStrap in ASP.Net</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font Awesome inclusion for the icons on the pages -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\css" />
<!-- Adding Google Web Fonts to Bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<link href="custom/custom.css" rel="stylesheet" type="text\css" />
<!-- Adding a web font -->
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div id="MyModal" class="modal fade" role="dialog" runat="server">
<div class="modal-dialog" runat="server">
<div class="modal-content" runat="server">
<div class="modal-header" runat="server">
<button type="button" class="close" data- dismiss="modal">×</button>
<h4>This is Modal Header</h4>
</div>
<div class="modal-body" runat="server">This is Modal Body
</div>
<div class="modal-footer" runat="server">This is Modal Footer
<button type="button" class="btn btn-default" data-dismiss="modal" runat="server">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Bootstrap Model (Dialog Box / Popup Window)-->
</body>
</html>
As you can see I have placed a Popup Dialog at the bottom of the MasterPage so that every instance of the MasterPage i.e. Content Pages will be use this.
Also I have created a JavaScript Function called 'openModal()' has created at the head of the MasterPage to use across all the content pages.
Now I have created a content page 'WebForm1.aspx' using the previously created MasterPage and added a button. Please refer the code below.
WebForm1.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Default.Master"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="BootStrap_With_ASPDotNet.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btnClickMe" runat="server" OnClick="btnClickMe_Click"
Text="Click Me" CssClass="btn btn-danger"/>
</asp:Content>
What I want is when I click the button it should show the popup and I need to do it from code behind. See below what I have tried.
protected void btnClickMe_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
However it's not working. I can't figure it out why. So could someone help me on this?
Thanks
I got the answer by my self. Please refer the below information.
First place the below JS code in the .
function openModal() {
$('#myModal').modal('show');
}
Second In server side on button click add the below function()
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
FYI for others in search for Bootstrap 4 Modal not showing up.
I use master page and have the modal inside a child page, jquery 3.2.1 and bootstrap 4 beta 2.
If the modal do not show up, check the page source, and see if you can find it there.
When you find the modal, it will most likely have change id.
Use .modal or whatever class name used on the modal to be sure hit the it.
Javascript part also need to be before the the child page loads, as the code behind run when if gets to that content part.
Javascript (masterpage head tag):
function openModal() { $('.modal').modal('show'); }
code behind (child page):
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "openModal();", true);
This code behind also works.
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "openModal();", true);
I have used the tool to convert older webform MVC projects to razor, it is found here
http://blogs.msdn.com/b/marcinon/archive/2011/01/13/mvc-3-project-upgrade-tool.aspx
I then used another tool to covert the aspx webform files to razor cshtml files and added them to the project.
The program compiles fine but when it is launched it complains
Error Type: loadXML
Description: incorrect XML
Then none of the existing events are showing on the calendar either.
Here is the index view
#model dynamic
<!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 id="Head1" runat="server">
<title>Index</title>
<script src="/Scripts/dhtmlxscheduler.js" type="text/javascript"></script>
<link href="/Scripts/dhtmlxscheduler.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body
{
height:100%;
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
function init() {
scheduler.config.xml_date = "%m/%d/%Y %H:%i";
scheduler.init("scheduler_here", new Date(2014, 6, 1), "month");
scheduler.load("/Calendar/Data");
var dp = new dataProcessor("/Calendar/Save");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onload="init()">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
#*<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>*#
<div class="dhx_cal_tab" name="month_tab" style="right:6px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
</html>
Can you see where this is messing up? This is using the calendar plugin at http://scheduler-net.com/
I found the answer in another thread, the end result was that I need the following in one of my views
#{
Response.ContentType = "application/xml";
}
found here How do you set the content type for a WebMatrix/Razor Response?
Can anyone tell me how to use jQuery tooltip on jQuery accordion control?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Accord').accordion(
{
create: function (event, ui) {
$('.ui-accordion-header').attr("disabled", true);
}
});
})
$(document).tooltip();
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row" id="Accord">
<h2>Getting started</h2>
<div class="col-md-4">
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<h2>Get more libraries</h2>
<div class="col-md-4">
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<h2>Web Hosting</h2>
<div class="col-md-4">
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</form>
</body>
</html>
Above is my sample code. Please guide me how can I integrate tooltip with accordion? I want to get certain contents of panel on hovering mouse over the headers of accordion.
no need to use any plugin. just write it by yourself.
you can put your content which you want to show up on hover in a custom attribute ( or for example rel attribute ) and get it's value and show it in an absolute positioned span generated by jquery.
for example :
HTML:
<h2 rel="YOUR CONTENT GOES HERE">Web Hosting</h2>
jquery:
$(function(){
var ttContent = $('h2').attr('rel');
$('h2').hover(function(){
$(this).append('<span class="ttbox">' + ttContent + '</span>');
},function(){
$(this).children('.ttbox').remove();
});
});
CSS:
h2 { position:relative; }
.ttbox { position:absolute; display:none; top:20px; width:200px; height:30px; display:block; background:#000; color:#fff; }
FIDDLE DEMO