I am unable to paste the content to a textbox whose property "Textmode"is multiline this issue is happening in google chrome and safari browsers
For safe side, implement clipboard functionality using ZeroClipboard, works on all browser, irrespective of any browser copy - paste feature.
See its usage below. Download and extract the Zeroclipboard in your project
<script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" >
ZeroClipboard.setMoviePath('zeroclipboard/ZeroClipboard.swf');
<script language="JavaScript" type="text/javascript">
var clip = null;
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.addEventListener('load', function(client) {
});
clip.addEventListener('mouseOver', function(client) {
// update the text on mouse over
clip.setText(document.getElementById('TextBox1').value);
});
clip.addEventListener('complete', function(client, text) {
Label1.innerText = document.getElementById('TextBox1').value + ' Copied to clipboard.';
});
clip.glue('divbutton', 'divcontainer');
}
</script>
1. Don't forget to set <body onLoad="init()">
2. Set the clip.SetText method in onchnage event of the textbox. <td align="left">
<asp:TextBox ID="TextBox1" runat="server" Width="218px" onchange="clip.setText(this.value)"></asp:TextBox>
</td>
3. <div id="divcontainer" style="position: relative; top: 0px; left: 0px; width: 193px;">
<div id="divbutton" class="mybutton">
<b>Copy To Clipboard...</b></div>
</div> in case use need to some button's illusion on page.
Related
This question already has answers here:
Add "Search Area" outline onto google maps result
(5 answers)
Closed 5 years ago.
I want to highlight 2 places in google maps like the image below(could not show two places highlighted, i have just shown the border style that i will implement).
I want to show border of place exactly like the image below.
I want to dynamically mark places based on place name.
For example I don't have lat long values so ,so I have to search by name of
place.
Right now, to do this using the Google Maps Javascript API, you'll need external data to show the borders of each place. Having it internal to the Javascript API is already being requested here in Google's Issue Tracker: https://issuetracker.google.com/issues/35816953
As a workaround though, you can use the Maps Embed API to mimic the behavior you outlined in your post.
Here's a sample:
Be sure to replace YOUR_API_KEY_HERE with your own API key.
var input = document.getElementById('location');
var autocomplete;
function initPlaces() {
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
alert('Error with your search for ' + place.name);
}
if(place.place_id) {
markLocation(place.place_id);
}
})
}
function markLocation(placeId) {
var url = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY';
var placeStr = '&q=place_id:';
var iframe = document.getElementById('iframe');
placeStr += placeId;
url += placeStr;
iframe.src = url;
}
var onSubmitHandler = function(e) {
e.preventDefault();
//markLocation();
}
document.getElementById('form').addEventListener('submit', onSubmitHandler);
input {
height: 2rem;
border-radius: 2px;
border-style: none;
border: 1px solid #e2e2e2;
padding-left: 1rem;
}
.places {
height: 100px;
}
#map {
height: 100%;
}
#location {
width: 400px;
}
.map-frame {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="places">
<form id="form" autocomplete="off">
<input id="location" type="text" placeholder="Enter a location">
</form>
</div>
<div class="map-frame">
<!-- Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
<iframe width="100%" id="iframe" height="100%"frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-QB6d6K5lzMRxi-hKfTINm0&key=YOUR_API_KEY_HERE" allowfullscreen></iframe>
</div>
<!-- Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places&callback=initPlaces" async defer></script>
</body>
</html>
An external jsbin link here as well if you want to try it out: jsbin
Here's the documentation of the Maps Embed API in case you want to pursue that track: https://developers.google.com/maps/documentation/embed/start
Hope that helps!
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 web page that has a master file. The master file has an update panel that contains a timer, used for showing adds/images every so many seconds. However the page's content place holder is not contained within the update panel. This is the basic markup of the master page:
<head id="hdMain" runat="server">
<title>Main Master Page</title>
<link href="~/Style/custom-theme/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />
<asp:ContentPlaceHolder
ID="cpHead"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px" scroll="no">
<form id="frmMain" runat="server">
<asp:ScriptManager
ID="smMain"
runat="server">
</asp:ScriptManager>
<div style="height: 671px; width: 1024px; z-index: 0;">
<asp:ContentPlaceHolder
ID="cpMain"
runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="background-color: #192646; height: 97px; width: 1024px">
<asp:UpdatePanel
ID="upMain"
runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrMain" />
</Triggers>
<ContentTemplate>
<asp:Timer
ID="tmrMain"
runat="server"
Interval="10000"
OnTick="RotateImage">
</asp:Timer>
<img
id="imgMain"
runat="server"
height="97"
width="1024"
alt=""
src="" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Now, when my page loads, I need to do some server side processing before deciding if I want to fire up a jQuery dialog. I am using the code below in my code behind to do this:
if (NeedToRunStartupScript())
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
The OpenDialog() is defined as following in the markup, withing the header content place holder:
<script type="text/javascript" src="../Scripts/JQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/JQuery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript">
function OpenDialog() {
$(function () {
var redirectSomewhere = false;
var newDialog = $('<div title="Dialog">\
<p>Do you wish to redirect?</p>\
</div>');
newDialog.dialog({
height: 250,
width: 300,
modal: true,
buttons: {
Yes: function () {
redirectSomewhere = true;
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function () {
if (redirectSomewhere) {
window.location.href = "SomePage.aspx";
}
}
});
});
};
Pretty standard stuff really. And this code works. However, each time a timer clicks and updates the image, the dialog window shows up again, so if I let it just sit there for several minutes, I will have tens of dialog windows on top of one another. I basically need my dialog to be registered only once, and not be reinitialized on every partial postback. Any help would be appreciated.
Have you tried checking for async postback like this
bool isAsyncPostback = ScriptManager.GetCurrent(this).IsInAsyncPostBack;
if (NeedToRunStartupScript() && !isAsyncPostback)
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
Thank you for taking the time to read and review my post. I've done a lot of Google searching but have yet to find the answer to my jquery/asp.net question. My issue is I'm trying to replace the standard check box with an on/off image. There is a neat tutorial about doing this here. My issue is that my asp OnCheckedChanged check box event is not being called when Jquery places a check in the check box.
ASP.NET Master Page Scripts that works
<link href="~/Styles/jquery.tzCheckbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %>"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/script.js") %>"></script>
Aspx Page with Checkbox
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px">
<Fields>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
JQuery Script called script.js
(function ($) {
$.fn.tzCheckbox = function (options) {
// Default On / Off labels:
options = $.extend({
labels: ['ON', 'OFF']
}, options);
return this.each(function () {
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if (originalCheckBox.data('on')) {
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>', {
className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
html: '<span class="tzCBContent">' + labels[this.checked ? 0 : 1] +
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function () {
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked', isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked ? 0 : 1]);
if (isChecked) {
originalCheckBox.attr('checked', isChecked);
}
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change', function () {
checkBox.click();
});
});
};
})(jQuery);
CSS file
.tzCheckBox{
background:url("../Images/background01.png") no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart
{
background:url("../images/background01.png") no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}
Last Note
Everything works as needed, I just can't seen to get the page to auto post when JQuery checks the check box. Thank you again for your help!
Changes made through javascript will not fire events such as onclick or onchange. What you will need to do is fire the event yourself once you change the value of checked. I am not familiar with the particulars of .net's OnCheckedChanged, but let's assume in the html it turns into onchange (you will need to verify this through viewing the source). You would do something like this:
originalCheckBox.attr('checked', isChecked);
originalCheckBox.change(); // will call the onchange code
I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.
Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.
Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});