I have an table generated from the code-behind and have tried applying the HTML5 draggable attribute to its table cells.
TabCell.Attributes["draggable"] = "true";
The above applies the attribute successfully as I can see it in inspect element but the element doesn't drag.
Does anyone have any idea's why this may be?
I had to set draggable through JQuery on the element.
$('#myid').draggable();
Doesn't work when the attribute is applied server-side
It's not entirely clear from your question what TabCell is, but assuming it's just a clientside HTML element you want to do:
TabCell.setAttribute("draggable", "true");
You don't need JQuery. Here is some code with two tabs, both made draggable by setting the attribute as above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="tab">
<button id="TabCell1">Tab1 Header</button>
<button id="TabCell2">Tab2 Header</button>
</div>
<script>
window.onload = () => {
var TabCell = document.getElementById('TabCell1');
TabCell.setAttribute("draggable", "true");
var TabCell2 = document.getElementById('TabCell2');
TabCell2.setAttribute("draggable", "true");
};
</script>
</body>
</html>
Related
I m trying to use some code which i find in Embedding a bot on a website .
I know it have been some updates, my question is if BotChat.App is avaible to use.
Because i use the BotChat.App and gave me this error Uncaught ReferenceError: BotChat is not defined.
I try to change it to window.WebChat.renderWebChat and it works but gave me the error in this line document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: 'myAppSecret' },
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Uncaught ReferenceError: BotChat is not defined html:31
As the error suggests this is due to the fact that , though you utilize BotChat.App, you haven't got a reference to BotChat.
Try importing <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script> within the header section.
Pretty simplistic markup. I want to add a box with rounded corners to my form. So, I have this CSS markup:
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
It's "called" from this div:
<div id="rcorners2">
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</div>
My app has a CSS file, so I added that markup to it. Nothing happens. No markup, the form loads with a generic square table in it.
I move the markup to the header section of my page and it works fine.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<script src="Scripts/jquery-ui-1.11.0.js" type="text/javascript"></script>
<!-- <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script> -->
<!--//**********************************
// Comment Character Count
//********************************** -->
<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
setTimeout(function () {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}, 0);
}
</script>
<script>
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});
} );
</script>
<style>
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
</style>
</asp:Content>
Any idea why it's working in one spot and not the other? This is a multi-page C#/ASP.net app running on IE9 (although I eventually need to get it running on IE11, Chrome and Firefox too, but that's for later).
It is usually a good idea to press Ctrl + F5 together after editing external CSS or JS files. This will force the browser to download the files again instead of reading them from cache.
I have a WPF application that uses the WebBrowser control in order to print html documents.
My problem is that from time to time some of the characters are missing from the generated documents.
I tried to replace the printer and cables and I also validated the html markup here.
This is how I generate the printing:
public static class HtmlPrint
{
public static void Print(string html, string documentTitle)
{
var wb = new System.Windows.Forms.WebBrowser { DocumentText = html };
wb.DocumentCompleted += wb_DocumentCompleted;
}
private static void wb_DocumentCompleted(object sender, System.Windows.Forms.WebBrowserDocumentCompletedEventArgs e)
{
var wb = ((System.Windows.Forms.WebBrowser)sender);
wb.Print();
wb.Dispose();
}
}
HTML sample:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Items report</title>
<style type='text/css'>
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
margin-top: 10px;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
/*white-space:nowrap*/
}
</style>
</head>
<body dir="rtl">
<h3>15/12/2015 09:22:17</h3>
<h3>Items for station: 1</h3>
<br />
<table class="gridtable">
<tr>
<th>Location</th>
<th>Item</th>
<th>Description</th>
<th>Color</th>
<th>Size</th>
<th>Qty</th>
<th>Remarks</th>
</tr>
<tr>
<td>AD393</td>
<td>06957TO_GRE_S</td>
<td>Green shirt</td>
<td>GREEN-GRAY</td>
<td>S(36)</td>
<td>0</td>
<td>AD-37-5<br />AD-38-3<br />AD-38-5<br />AD-39-0<br />AD-39-3<br />AD-39-5<br />BC-38-1</td>
</tr>
<tr>
<td>CA183</td>
<td>A100000000464</td>
<td>White golf shirt</td>
<td>WHITE</td>
<td>XS/S (34-36)</td>
<td>0</td>
<td>AI-25-1<br />AK-25-1<br />AK-36-6<br />AK-37-6<br />AL-24-1<br />AL-25-1<br />CA-18-3</td>
</tr>
</table>
Any ideas on how to fix it?
UPDATE
I've tried using the System.Windows.Controls.WebBrowser as follows but it prints empty pages:
public static void Print(string html)
{
/*
html is the actual HTML data e.g.
<!DOCTYPE html>
<html lang="he-IL" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9">
...
*/
try
{
var wb = new System.Windows.Controls.WebBrowser();
wb.LoadCompleted += Wb_LoadCompleted; //never called
wb.Loaded += Wb_Loaded; //never called
wb.NavigateToString(html);
mshtml.IHTMLDocument2 doc = wb.Document as mshtml.IHTMLDocument2;
doc.execCommand("Print", true, false);
}
catch (Exception ex)
{
//no exception raised
throw;
}
}
Here I am calling the webmethod in a jquery...
If I run this code in a normal aspx page then the webmethod gets fired.. But when I use master page and put this code in child page(Default4.aspx) then web method is not being fired. I have used the colorbox jquery plugin.
Here When I click on any link a popup will open and display the file content
My code is as below...
Default4.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="example1/colorbox.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
$("[id$=LinkButton2]").click(function() {
alert('child');
$.ajax({
type: "POST",
url: "Default4.aspx/lnkbtn1",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
// Replace the div's content with the page method's return.
$("#[id$=LinkButton2]").attr('href',msg.d);
}
});
});
$(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
});
</script>
<style type="text/css">
.arrowlistmenu
{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar
{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li
{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a
{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited
{
color: #A70303;
}
.arrowlistmenu ul li a:hover
{
/*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
.style1
{
width: 100%;
}
.style2
{
width: 99%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Result">
Click here for the time.</div>
<p>
<a runat="server" id="a" class='iframe' href="Uploadedfiles/Education Portal.xlsx.1.html">
Outside Webpage (Iframe)</a></p>
<p>
<a runat="server" id="a1" class='iframe' href="~/Images/Desert.jpg">Image
(Iframe)</a></p>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="iframe"
>LinkButton</asp:LinkButton>
</asp:Content>
.Cs
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
try like this
I would like to implement a jquery blockUI to popup and show a progress indicator (loading circle) during postbacks in Asp.Net. How can I implement this? I am using masterpages so I was wondering if I can implement this code in one place to keep it simple. Is this even possible? Looking forward to hear your thoughts on this.
Thanks in advance.
I was able to develop this. I have included the steps in answers. Let me know if you have questions.
I figured it out myself.
Create a new Asp.net web project.
Include the following in Site.Master markup:
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
<script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>
<style>
div.blockOverlay {
background-color: #666;
filter: alpha(opacity=50) !important;
-moz-opacity:.50;
opacity:.50;
z-index: 200000 !important;
}
div.blockPage {
z-index: 200001 !important;
position: fixed;
padding: 10px;
margin: -38px 0 0 -45px;
width: 70px;
height: 56px;
top: 50%;
left: 50%;
text-align: center;
cursor: wait;
background: url(ajax-loader.gif) center 30px no-repeat #fff;
border-radius: 5px;
color: #666;
box-shadow:0 0 25px rgba(0,0,0,.75);
font-weight: bold;
font-size: 15px;
border: 1px solid #ccc;
}
</style>
Add the following markup in default.aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" /></ContentTemplate>
</asp:UpdatePanel>
Add a progress indicator image (ajax-loader.gif) to project root
Add the following in General.js
// BlockUI setup
$.extend({
// Block ui during ajax post back
initializeUiBlocking: function () {
if (typeof ($.blockUI) != 'undefined') {
$.blockUI.defaults.message = 'LOADING';
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.css = {};
var request = Sys.WebForms.PageRequestManager.getInstance();
request.add_initializeRequest(function (sender, args) {
request.get_isInAsyncPostBack() && args.set_cancel(true);
});
request.add_beginRequest(function () { $.blockUI(); });
request.add_endRequest(function () { $.unblockUI(); });
}
}
});
$(document).ready(function () {
$.initializeUiBlocking();
});
Have a look at this
http://www.malsup.com/jquery/block/#overview
This works for ajax calls.
And you need to place the following line
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
in a place available to all pages.
Introduction:
To Block the Page when Data is Submitting, we have various options, Either we can use Ajax based UpdateProgress or some jQuery Stuff. But sometime Ajax UpdateProgress not very useful because of complexity. So, the better approch appoach is to use jQuery UI Block Plug-In.
Implementation:
Download jQuery UI Block Plugin from : http://www.malsup.com/jquery/block/
<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
$("#<%= btnSubmit.ClientID%>").click(function() {
$.blockUI({
message: "<h3>Processing, Please Wait...</h3>" ,
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
});
The above code is simple code without any AJAX or other complex script.
I found this Article on Website and tested, its work fine