I would like to have a button when u click on it, it would add 0.25. If I hold the ctrl button and click on the same button it will add 1 instead of 0.25. Is this possible in AngularJs?
Please let me know.
(UPDATED)
HTML :
<input type="text" id="field" value="0" />
<input type="button" id="but" value="ADD" />
JS :
document.onkeydown = downkey;
document.onkeyup = upkey;
var ctrl = 0;
function downkey(e) {
e = e || window.event;
if (e.keyCode == '17') {
ctrl = 0.75;
}
}
function upkey(e) {
e = e || window.event;
if (e.keyCode == '17') {
ctrl = 0;
}
}
var clickbut =function(){
var tmp = document.getElementById('field').value*1;
var value =tmp+0.25+ctrl;
document.getElementById('field').value=value;
}
Thank you #Youness I already got my answer. I used Angular Hotkeys to make this work.
For other people i'll put a link:
http://chieffancypants.github.io/angular-hotkeys/
Related
Could you help to fix this error. Received error as:
Unable to find element with xpath
Below the tags for the element which is a Text area
<td nowrap="">
<script>
function clipBrdAction(evt, fieldName) {
evt = evt||window.event;
if(evt.ctrlKey && evt.keyCode==67) {
document.execCommand('copy');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==86) {
document.execCommand('paste');
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==88) {
document.execCommand('cut');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = '';
} else if(evt.keyCode==46) {
document.execCommand('delete');
//var selStart = $(fieldName).selectionStart;
//var selEnd = $(fieldName).selectionEnd;
//var fieldLen = $(fieldName).value.length;
//if (selEnd == fieldLen)
// temp = $(fieldName).value.substr(0,selStart);
//else if (selEnd > selStart)
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr(selEnd, fieldLen);
//else
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr((+selEnd + +1), fieldLen);
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
</script>
<textarea id="nrpsFilter" rows="3" onkeypress="return checkIt(event,'');" cols="30" title="" onblur="this.value=trim(this.value);" onkeyup="" onkeydown="return clipBrdAction(event, 'nrpsFilter');" name="nrpsFilter"/>
</td>
And my code is:
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("*1??0*");
In Firepath, the element is identifiable, after when i search for another element that is under same division (div tag) but not identifiable after searching for an element from different division. Does that mean I should Switch to the division in my code? Both the divisions are under same Frame.
Ok then just before using Sendkeys please switch to the iframe first after that your code will work without any problem.
driver.switchTo().frame("frame name");
// perform your action
// after you have performed all your action inside the iframe
// plz switch back to the default content
driver.switchTo().defaultContent();
// now perform your user action outside that iframe
Hope this helps you
Try this and see if it works. I took it from your comment but rearranged a couple statements. I think you want the final sendkeys() to be in the IFRAME also, right? We really need more complete HTML to help any further.
driver.findElement(By.xpath("//*[#id='first']//span")).click(); // (1. Click Dropdown)
driver.findElement(By.xpath("//*[#id='ui-id-33']/span")).click(); // (2. Click SubDropDown )
driver.findElement(By.xpath("//a[contains(text(),'Quick Search')][#id='referential_quicksearch']")).click(); // (3.Click the link)
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("1?0*");// (Enter in textArea)
driver.switchTo().defaultContent();
A button is clicked to trigger LoadImages method to load a series of pictures into the web page. I want to add an onclick event for each picture so when user click it, the picture name is displayed. How to use Dojo to achieve this?
LoadImages(PictureNames){
var resultUl = new Builder('<ul />');
for (i = 0; i < PictureNames.length; i++){
resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
}
dom.byId('Pictures').innerHTML = resultUl;
}
DisplayPictureName(picturename)
{
dom.byId('PictureName').value = picturename;
}
<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>
Make the elements using dojo/dom-construct and attach events using dojo/on.
var resultUl = domConstruct.create('ul');
for (i = 0; i < PictureNames.length; i++){
var image= domConstruct.create('img', {
id: PictureNames[i]',
src: "./images/"+ PictureNames[i],
style: {"height: 200px; width: 250px"},
class: "photo"});
var li= domConstruct.create('li');
domConstruct.place(li, resultUl);
domConstruct.place(image, li);
dojo.on(image, 'click', this.DisplayPictureName());
}
dom.byId('Pictures').innerHTML = resultUl;
I am trying to rewrite this function to remove the document.all and replace with document.getElementById, but so far I am not having much luck.
This is the original function:
if (document.all.DeptFundingYN.value == "TRUE") {
This is what I have:
function VoidRtn(fRecNum,fReferenceNum) {
var DeptFundingYNField = document.getElementById("VoidID");
if(DeptFundingYNField.value == "TRUE") {
var href = "PaymentsEntry.asp?speedpay=false&CLAIM=YES&LevelCode=Void&Mode=Update&Reference_Num=" + document.PayClaimGridForm.ReferenceNum.value;
href += "&RecNum=" + fRecNum;
document.location.href = href;
} else {
alert("No Department Funding");
}
}
This button:
<button title=""Void This Payment"" id=""VoidID"" class=""whitefontbutton"" onclick=""VoidRtn(" & fRecNum & "," & fReferenceNum & ");"" style=""width: 15px; height: 15px;BACKGROUND: #6a7dae; FONT-SIZE: 7 PT"" onmouseover=""this.style.background='#000066'"" onmouseout=""this.style.background='#6a7dae'"">V</button></font>
I don't understand why the double-quotes appear twice in your <button>, for example:
<button title=""Void This Payment"" ...
It should be:
<button title="Void This Payment" ...
And there is no "TRUE" value anywhere in your markup.
The only way your condition can work is if you add a value="TRUE" attribute to the button, for example:
<button title="Void This Payment" value="TRUE" ...
With these changes, it should work.
In my gridComplete function, depending on certain values in the datarow, I want to move the focus to a different tab. The gridCompelete function will be something like
var grid = $('#grdResults');
var m = grid.getDataIDs();
for (var i = 0; i < m.length; i++) {
var rowData = grid.getRowData(m[i]);
if (rowData.errorMessage != '') {
alert(rowData.errorMessage);
$('#UploadMain').focus();
}
}
Obviously the .focus() does not seem to work. Given below is the part of the view that has the code for the tabs
<div id="editTabs">
<ul>
<li>Main</li>
<li>Data Validation</li>
</ul>
<div id="UploadMain">
<fieldset>
.......
What do I need to have the focus moved?
Are you looking for the select() method?
$("#editTabs").tabs("select", 0); // Activate first tab.
Or:
$("#editTabs").tabs("select", "#UploadMain"); // Activate "UploadMain" tab.
How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.
I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript">
//
function
startRotator(clickedButton, rotator, direction)
{
if
(!rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(
function
()
{
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function
stopRotator(clickedButton, rotator)
{
if
(rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID =
null
}
}
function
showNextItem(clickedButton, rotator, direction)
{
rotator.showNext(direction);
refreshButtonsState(clickedButton, rotator);
}
// Refreshes the Stop and Start buttons
function
refreshButtonsState(clickedButton, rotator)
{
var
jQueryObject = $telerik.$;
var className = jQueryObject(clickedButton).attr("class"
);
switch
(className)
{
case "start"
:
{
// Start button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"startSelected"
);
// Find the stop button. stopButton is a jQuery object
var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"
);
if
(stopButton)
{
// Changes the image of the stop button
stopButton.removeClass();
stopButton.addClass(
"stop"
);
}
}
break
;
case "stop"
:
{
// Stop button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"stopSelected"
);
// Find the start button. startButton is a jQuery object
var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"
);
if
(startButton)
{
// Changes the image of the start button
startButton.removeClass();
startButton.addClass(
"start"
);
}
}
break
;
}
}
// Finds a button by its className. Returns a jQuery object
function
findSiblingButtonByClassName(buttonInstance, className)
{
var
jQuery = $telerik.$;
var ulElement = jQuery(buttonInstance).parent().parent();
// get the UL element
var allLiElements = jQuery("li", ulElement);
// jQuery selector to find all LI elements
for (var
i = 0; i < allLiElements.length; i++)
{
var
currentLi = allLiElements[i];
var currentAnchor = jQuery("A:first", currentLi);
// Find the Anchor tag
if
(currentAnchor.hasClass(className))
{
return
currentAnchor;
}
}
}
//]]>
And the following code for the calls:
<
a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>
')); return false;"
class="stopSelected" title="Stop">Stop
'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
class="start" title="Start">Start
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs
e)
{
Page.RegisterClientScriptBlock(
"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);"
);
}
There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx