I've been searching the web for some tips regarding how to make your own numpad, created with html code, to act as a numpad would on the computer.
I have this numpad on my website that would give an input to a textfield in the same div. I've given a value to each button and now I guess I would have to create something more so that the numbers will add to my text field.
I'm really a beginner with programming so maybe this is really easy. Thanks for the help!
You could do it, alternatively, with jQuery. jQuery is better IMHO if you need a simple easy solution (jQuery is generally easier and faster).
HTML:
<div id="myDiv"> </div> //the div to which we add text
<div id="buttonContainer"> //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button>
</div>
jQuery:
$("#buttonContainer button").click(function() {
$("#myDiv").append($(this).val());
});
http://jsfiddle.net/DLzUU/1/
What this does is: when you click any button inside the div with id of 'buttonContainer', it adds its value to the div with the id of "myDiv".
On the Javascript subject, if you want a VERY good guide: http://javascript.info/
what you need is to learn javascript. With javascript you will be able to write code to do this.
<script>
function AddValueToTextField(val)
{
document.getElementByID( <textfiled ID> ).value += val;
}
</script>
<button onClick="AddValueToTextField(this.value)"></button>
this is only very basic but it is a rough idea of what is needed, the button is set to call the function "AddValueToTextField" when it is clicked. When the function is called the value of the button is sent along with it. Inside the function it gets a handle on the textfield and adds the value of the button to whatever was already there, I'd suggest looking at:
http://www.w3schools.com/js/
as a place to start learning javascript.
you can try http://keith-wood.name/keypad.htmlkeypad example, this is an awesome example
$(document).ready(function(){
var selected;
$(".admin_loginid input").focus(function(){
selected = $(this);
});
$(".loginbtn").click(function(){
selected.val(selected.val() + $(this).val());
});
});
Solved it that way and it works really well, thanks for the help! Now my selected input box takes the input from the numpad that i've created.
Related
So... I made a page where you can find some products, and each product has a price/description/title. I’m currently trying to change prices, but the thing is I want them to change if you click on a button (which is sales related). I’d like to change the price and add a 20% discount.
I started to do something, which only change the color of the prices from black to red:
$(".row a").click(function(){
$("cat-bonnet").css("color","red");
});
I selected the class of my thing through CSS. But now I don’t know how I am supposed to add the discount. Should I create another code ? How can You do it when clicking on a button ?
Thanks in advance.
$("cat-bonnet") would try to target <cat-bonnet></cat-bonnet> in the DOM.
You must specify that it's:
A class
$(".cat-bonnet")
Or an ID:
$("#cat-bonnet")
Specify the class or the id of cat-bonnet by using . for a class or a # for id:
$(".row a").click(function(e){
$(".cat-bonnet").css("color","red"); // Add '.' here
e.preventDefault(); // stop page from redirecting (to see change effect)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<a class="cat-bonnet" href="https://www.google.com">Link</a>
</div>
Well it's fairly easily done with a piece of vanilla javascript:
document.querySelector(".cat-bonnet").innerHTML = newPrice;
newPrice should be your calculated discount. So you should get the price of .cat-bonnet and calculate the 20% discount. This could be done in a variable let = newPrice; or inline.
Jquery is a large library and based on your code above you may be better of with just vanilla javascript. But just adding the above line will do the trick for you.
What does add discount do?
Does it post data to apu endpoint? Or just change the html? Or any other processes?
I would suggest a slightly different setup to your code to make it easier to add more properties if you wish to in future. I've also put down a way to check for various ON actions such as 'mouseenter', 'mouseleave' etc.
Have a look at the code below. I think this will make it a lot easier to read when your projects get bigger.
$(".row a").on('click', () => { // Insert mouseenter, mouseleave etc where click is
$(".cat-bonnet").css({
color: "red",
backgroundColor: "gray"
// Add more properties inside the object here as you wish
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<a class="cat-bonnet" href="https://www.google.com">Link</a>
</div>
I'm writing a plug-in somewhat same like auto-complete or virtual keyboard with selected input values along with sorting and searching. This plugin is working fine to if I use it once in a page but when I apply this one to more then one then it is showing both the boxes and events are applied on the last written object. Sample code and fiddle is below:
http://jsfiddle.net/mantrig/ugmwa5b5/
my plug in code to in :
$(document).ready(function(){
var testData = ["BSL","DSK","NPNR","SAV","ET","NDLS","JPR","MAS","BCT","NZM","BR","SUJH"];
$(".stations").myAutoSuggest({
data:testData,
dataref:"stationsList",
title:"Station List",
sort:"desc"
});
var trainData = ["12345","32151","64231","56421","78542","13452"];
$(".trains").myAutoSuggest({
data:trainData,
title:"Train List",
dataref:"trainsList",
sort:"desc"
});
});
I'm very much new to writing any plug-in so code may be very dirty. A little help will be much appreciated!!
You missed '.
Change $(body).append(html); to $('body').append(html);
Jsfiddle
Problem is your "selectedTextbox" variable change here will solve your problem
$(".Help").bind("focus",function(e){
selectedTextbox=this;
showVirtualHelp(selectedTextbox);
});
and later using it here because there are multiple text boxes so you need to pass reference current focused element to show help box
function showVirtualHelp(selectedTextbox) {
$(".virtualHelp."+settings.dataref).css("top",($(selectedTextbox).offset().top+30)+"px");
$(".virtualHelp."+settings.dataref).css("left",($(selectedTextbox).offset().left+30)+"px");
$(".virtualHelp."+settings.dataref).show();
}
Working Fiddle
I hope you guys can give me a push in the right direction as this problem has been eating me up all day now..
What I'm basicly trying to accomplish is this. I have several div's on a page that can be collapsed independently from eachother with the use of a button. Every div has it's own specific ID, generated with a string of static text, and a numeric value based on a auto-incremented database-value. This ensures I never have two div's with the same ID on one page. To target each specific div with Javascript (jQuery) I use the following code:
http://jsfiddle.net/LU7QA/0/
This works really well and does what it's supposed to do. Only there is one problem. On every page frefresh, every div that was opened is closed. Everything resets, and that's why I want to use JQuery Cookies in this construction. Only problem is, I know how it works, but I can't get it to work in this specific construction as it has to deal with a completely unique ID every time and needs to store the values of that particular ID.
As seen here: http://jsfiddle.net/LU7QA/1/
I tried to fiddle around with it but I can't seem to get it working properly and I'm starting to lose my sight on the problem..
<div>
<button class="button_slide" value="1">Show hide</button>
</div>
<div id="slidingDiv_1" class="slidingDiv">Stuff</div>
<div>
<button class="button_slide" value="2">Show hide</button>
</div>
<div id="slidingDiv_2" class="slidingDiv">Stuff</div>
function initMenu() {
$(".slidingDiv").hide();
// Toggle Field
$(".button_slide").click(function(){
//alert($(this).val()); debugging purposes
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
$(div_sliding_id).next().slideToggle('slow', function() {
$.cookie(div_sliding_id, $(this).is(':hidden') ? "closed" : "open");
return false;
});
});
$('.button_slide').each(function() {
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
if ($.cookie(div_sliding_id) == "open") $(this).next().show();
});
}
jQuery(document).ready(function() {initMenu();});
May you have missed a dot on the last *button_slide* declaration?
Btw, look at https://code.google.com/p/sessionstorage/
Im new to js kindly help me! im using functionality to add text boxes dynamically im done with that part now i want make a js function that removes text boxes on a click on remove button. any help ?
You can use bellow JavaScript function to Remove elements.
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
If you have more information you can visit here.
You can either remove a child with
document.getElementById(n).removeChild(thebox);
or you can do as on this thread Remove <p class="classname"> in Javascript? (not recommanded for your case)
Finally, you can use jquery (famous library) with the function $("#id_of_element").remove(); (best and easiest solution)
OK, I'm designing a site and thought I'd stick some jQuery in as I really need so js experience.
Page with my problem is here: http://new.focalpix.co.uk/moreinfo.php
JS in question is:
$(document).ready(function(){
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideUp('slow');
var id = $(this).attr('href');
$(id).slideDown('slow');
return false;
});
});
This works fine, but if you click on a link where the answer has already slid down, then it slides up, then back down again.
I'm not sure on the cleanest way to stop this happening - any ideas?
You should be using the .slideToggle() effect.
$(document).ready(function() {
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideToggle('slow');
});
});
First, I'd suggest the following structure for your faq's:
<div id="faq">
<div class="qa" id="faq_greenandflies">
<span class="q">What is green and flies</span>
<div class="a">
Super Pickle!
</div>
</div>
<div class="qa" id="faq_redandbadforteeth">
<span class="q">What is Red and bad for your teeth</span>
<div class="a">
a Brick
</div>
</div>
<!--
More FAQ's here
-->
</div>
and then defining your jQuery as follows:
<script type="text/javascript">
$(function(){
// hide all answers
$('div#faq .qa .a').hide();
// bind a click event to all questions
$('div#faq .qa .q a').bind(
'click',
function(e){
// roll up all of the other answers (See Ex.1)
$(this).parents('.qa').siblings().children('.a').slideUp();
// reveal this answer (See Ex.2)
$(this).parents('.qa').children('.a').slideDown();
// return true to keep any other click events
return true;
});
// check location.hash to see if we need to expand one (direct link)
$(location.hash).find('.q a').click();
});
</script>
Explanation:
(Ex.1)
this is the link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
select all of its siblings. (we now have all qa's as a jQ object)
hide the answers
(Ex.2)
this is the line or link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
reveal the answer
A working demo is here.
This does several things for you:
If a user deep-links to an answer, the answer is automatically revealed
If a user clicks on one answer, all other answers are hidden
You can give your divs proper ids, so which helps search engine optimization of links to individual answers
Use slideToggle() like Soviut said, but just as a tip -- you can declare the display property in the actual CSS file instead of declaring it inside the javascript. jQuery will pick up on the fact that it is hidden in the stylesheet and still perform the appropriate slide function.
You can also use $(".answer").hide();
Instead of setting the display CSS property. Just thought I would let you know.
try using the one method, something like:
$(selector).one('effect', 'data for effect', callback function);
it makes sure an effect only happens once per element.