I just need to know if there's a way to change the message shown by the Asp:FileUpload when no file as been selected.
Thanks.
http://jsfiddle.net/ZDgRG/
See above link. I use css to hide the default text and use a label to show what I want:
html
<div>
<input type='file' title="Choose a video please" id="aa" onchange="pressed()">
<label id="fileLabel">Choose file</label>
</div>
css
input[type=file]{
width:90px;
color:transparent;
}
javascript
window.pressed = function(){
var a = document.getElementById('aa');
if(a.value == "")
{
fileLabel.innerHTML = "Choose file";
}
else
{
var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
You replace the text with your own message using CSS pseduo-class :after. You can declare a class like this one:
.bar:after {
content:"Please select a file";
background-color:white;
}
And assign it to your FileUpload control. The content message will replace the original one. Of course upon file selection you need to remove the message, you can do this for example via jQuery .removeClass (assuming ID of your FileUpload is "foo"):
$('#foo').change(function() {
$(this).removeClass("bar");
})
Demo: http://jsfiddle.net/5zhuL/2/
Note that this solution seems to work Webkit-browser's only (Chrome, Opera, Safari) you may need an alternative for others.
Nope, not possible. This is the standard rendering in Chrome and cannot be changed.
If you visit your page source in your browser ASP.NET put an input element with type='file' instead of your FileUpload.
You could simply use CSS to cover the text with something when the value attribute is empty.
Only add this CSS to your code. It simply hide the "No file chosen".
<style>
input[type=file]
{
width:90px;
color:transparent;
}
</style>
http://jsfiddle.net/Lsgbx5ne/1/
input[type=file]{
color:transparent;
}
input[type=file]:after {
color: #000;
content:" Cool!";
}
Improvements over other solutions:
Works for short text
Doesn't change the background color
Pure css
This work in all browser
window.pressed = function(){
var a = document.getElementById('aa');
if(!(a.value == ""))
{
var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
input[type=file]{
width:90px;
color:transparent;
}
<div>
<input type='file' title="Choose a video please" id="aa" onchange="pressed()">
<label id="fileLabel">Choose file</label>
</div>
Related
I want to create the two methods, one for clicking on the specific checkbox and second for de-selecting the same checkbox.
I was trying to using the XPath and ID but unable to do so.
Please tell me how it can be done. Here is the HTML:
IJavaScriptExecutor js = (IJavaScriptExecutor)_driver;
js.ExecuteScript("window.scrollBy(200,document.body.scrollHeight)", "");
var mileageTextbox = driver.FindElement(By.Id("VehicleMileageMax"));
mileageTextbox.SendKeys("9500");
var checkBox = driver.FindElement(By.XPath("//label[text()='financial-check-all-8']::input[#type='checkbox'"));
Thread.Sleep(2000);
checkBox.Click();
Element is not visible
HTML code :
<input id="financial-check-all-8" type="checkbox" selected="filter.isDisabled" ng-model="filter.isDisabled" ng-change="vm.emptyFilterValue(filter);" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false" tabindex="44"> <label for="financial-check-all-8" id="enabled-8" class="form-checkbox-label"></label>
You can try with this code :
//input[starts-with(#id,'financial-check-all') and #ng-model='filter.isDisabled']
Code :
var checkBox = driver.FindElement(By.XPath("//input[starts-with(#id,'financial-check-all') and #ng-model='filter.isDisabled']"));
checkBox.Click();
EDIT :
As per the Shared HTML you can use this xpath:
try to wait also before clicking on it, Just try with Thread.Sleep(4000); , If that works then we can easily replace that with webdriverwait.
//label[#for='VehicleMileageMax']/../preceding-sibling::div/descendant::input
or with this xpath :
//label[#for='VehicleMileageMax']/../preceding-sibling::div/descendant::label
after close the popup display's overlay not remove ,
i write javascript and it's button code
plz help me
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
$('#Button1').click(function () {
overlay.fadeIn(1000);
overlay.appendTo(document.body);
$('#popup').fadeIn(1000);
}
);
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').fadeOut(1000);
overlay.appendTo(document.body).remove();
return false;
});
});
and some other code
<div class="popup" id="Div1">
<div class='cnt23'>
<img src="../images/Power-Shutdown-2.png" class='x' id='Img1' />
<br />
<br />
<form action="" method="post">
</form>
</div>
</div>
how i can remove overlay that is display after close popup
update same that:
$('.close').click(function () {
$('.popup').hide();
$('#overlay').remove()
return false;
});
You're appending it to the document a second time and then removing the second one:
overlay.appendTo(document.body).remove();
The first one remains unaffected.
If the overlay is already on the document, then you can reference it by its id. Something like this:
$('#overlay').remove();
You may even be able to remove the previously appended variable (haven't tested this, but worth a try):
overlay.remove();
Or perhaps, before attempting the above, update the variable when originally setting it to the one which was appended (in $('#Button1').click:
overlay = overlay.appendTo(document.body);
If that works (again, haven't tested it, just an idea) then it would remove the need to query the document again with the main jQuery function.
I am working on an MVC4 Application
#{
var = mydivID;
}
<div id="mydivID"></div>
If someone click on mydiv or when it's active then add css class="active"
Like This:
Before someone click on mydiv = <div id="mydivID"></div>
After someone click on mydiv = <div id="mydivID" class="active"></div>
i don't want to use javascript or jQuery.
Please help me.... Thank You in Advance.
You can't dynamically change the contents of the DOM without JavaScript. Your only other alternative is a full new request cycle.
View
#{
var active = ViewBag.Active as bool? ?? false;
}
<a href="#Url.Action("ThisAction", "ThisController", new { divClicked = true })">
<div id="mydivID" class="#(active ? "active" : "")"></div>
</a>
Controller
public ActionResult ThisAction(bool? divClicked)
{
ViewBag.Active = divClicked.HasValue ? divClicked : false;
return View();
}
Bonus points for using a proper model instead of ViewBag, but this illustrates the idea.
If you have multiple divs and want any of them to be clickable, you could try assigning them different IDs and passing the ID of the div into the action (and then the ViewBag) instead.
I want to print from aspx page (body part {}). But I don't want to open print dialog box. i have already installed more then one printer are in my computer. But when i click on print button its directly print in my default printer. How can i do it or is it possible to do it in web application?
Print is handled by the browser, not your ASPX page. So you can't do this.
You can't do that for all browsers. Printing is client side, and you can't pass the print dialog.
There is a old script, but it doesn't work anythere exept IE and Netscape. And it is very old:
function printit() {
if ((navigator.appName == "Netscape")) {
window.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, -1); WebBrowser1.outerHTML = "";
}
}
yes you can, but you'll need to use a third party class\assembly that does it like
pdf.sharp
or just write one yourself...
add iframe
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>
and use follwing javascript function
function printform() {
var content = document.getElementById('<%= PrintDivID.ClientID %>').innerHTML;
var pri = document.getElementById("ifmcontentstoprint").contentWindow;
pri.document.open();
pri.document.write(content);
pri.document.close();
pri.focus();
pri.print();
}
I need to make selected text of textbox bold/italic/underline using javascript. For that i am using the following code.
<img src="~/images/Bold" alt="Bold" onclick="changeFont('TextBox1','b');" />
<img src="~/images/Italic" alt="Italic" onclick="changeFont('TextBox1','i');" />
<img src="~/images/Underline" alt="Underline" onclick="changeFont('TextBox1','u');" />
<script type="text/javascript" language="javascript">
function changeFont(txt, change) {
if (change == 'b') {
if (document.getElementById(txt).style.fontWeight == 'bold')
document.getElementById(txt).style.fontWeight = 'normal';
else
document.getElementById(txt).style.fontWeight = 'bold';
}
else if (change == 'i') {
if (document.getElementById(txt).style.fontStyle == 'italic')
document.getElementById(txt).style.fontStyle = 'normal';
else
document.getElementById(txt).style.fontStyle = 'italic';
}
else {
if (document.getElementById(txt).style.textDecoration == 'underline')
document.getElementById(txt).style.textDecoration = 'none';
else
document.getElementById(txt).style.textDecoration = 'underline';
}
}
</script>
But the issue here is, when i click on bold image its making the whole text into bold but not the selected text. It´s not working for the other two images either.
While saving the text of textbox I am unable to get the text including html tags even after trying with
document.getElementById('TextBox1').innerHTML;
I am able to get only the value of textbox.
Is there any way to save and retrieve the same using javascript or C#
Thanks in advance
SC
Here is a question that answers your problem about getting the highlighting text
How to get selected text in textarea?
About making the selected text bold you would need to use html tags or something like bbcode and parse it to html when you print it on to a page.
EDIT: Here is a page that shows the jquery plugin "fieldselection" in action.
EDIT 2: Here is an example of how I would've done this: jsfiddle link
The HTML:
<input id="bold" type="button" value="B" />
<br />
<textarea id="editor"></textarea>
<div id="resultAsHtml"></div>
<br />
<div id="resultAsText"></div>
The javascript (jquery) code:
$(document).ready(function() {
$("#editor").keyup(Update);
function Update(){
var text = $(this).val();
var result = ParseToHtml(text);
$("#resultAsHtml").html(result);
$("#resultAsText").text(result);
}
$("#bold").click(function(){
var range = $("#editor").getSelection();
var textToReplaceWith = "[b]"+ range.text + "[/b]";
$("#editor").replaceSelection(textToReplaceWith , true);
var text = $("#editor").val();
var result = ParseToHtml(text);
$("#resultAsHtml").html(result);
$("#resultAsText").text(result);
});
function ParseToHtml(text) {
text = text.replace("[b]", "<b>");
text = text.replace("[/b]", "</b>");
text = text.replace(" "," ");
text = text.replace("\n","</br>");
return text;
}
$("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true);
});
document.execCommand("bold", false, null);
this is Simplest techinique which worked for me
in all browsers ...