Is JS input spinners exists? NO JQUERY [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I'm looking for js spinners as on picture below (left & right control keys).
But i don't want to use jquery in my project. If you have any snippets, useful links - please paste it here. :) Simple short code is preferred.. :)
Maybe it has another name (not spinner, but.. ?)?

function addSpinner(parent){
var very = document.createElement("div"); // create a div
var minus = document.createElement("button"); // create minus button
var plus = document.createElement("button"); // create plus button
minus.innerHTML = "-"; // draw minus sign
plus.innerHTML = "+"; // draw plus sign
var input = document.createElement("input"); // create an input
input.type = "number"; // type number
input.value = "0"; // and default is 0
very.appendChild(minus); // append the minus sign to the div
very.appendChild(input); // append the input to the div
very.appendChild(plus); // append the plus sign to the div
minus.addEventListener("click", function() {input.value = +input.value - 1});
plus.addEventListener("click", function() {input.value = +input.value + 1});
// + before input.value is to change type from string to number so we can increase/decrease number by 1
parent.appendChild(very);
}
Now you call it: addSpinner(document.body)

Related

Optimizing JavaScript Code [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have written the following JS, and it gets the job done, but I have been having a ton of trouble eliminating the repeating code. I keep breaking the functionality.
It's just field validation using a regex, and adding an error message below the appropriate field if the input doesn't match the regex. It's works, but but I really want to begin writing more succinct code.
If someone can help me do this, I can compare mine and yours and start understanding how to approach this type of task.
Thanks.
<form></form>
Here's my JSFiddle code: https://jsfiddle.net/robinburrage/cnL2d4w8/2/
You can reuse the same function for all the 2 validations. The only difference between the 3 functions is that you are trying to append to a different id.
Use this instead of referring to the element specifically, since the input is anyways bound to the element you are looking for.
phone.addEventListener('keyup', validatePhone);
phone2.addEventListener('keyup', validatePhone);
phone3.addEventListener('keyup', validatePhone);
function validatePhone(evt) {
var pattern = /^(\(\d{1,2}\)\s)?\(?\d{4}\-\)?[\s.-]?\d{4}$/; //set the regular expression
var str = this.value; //get the user's input
var phoneVal = document.getElementById("phoneVal");
if (phoneVal) { //if the error message div is already on the page
phoneVal.parentNode.removeChild(phoneVal); //remove it, to prevent a series of error message divs from accumulating
}
if (str === "") {//if there is no user input
phoneVal.parentNode.removeChild(phoneVal);//remove the error message
}
if (pattern.test(str) === false) { //if the string doesn't match the expression
var elem = document.createElement("div"); //create a DIV
elem.setAttribute("id", "phoneVal"); //give it an 1)id, 2)class and 3)message
elem.setAttribute("class", "form-error-msg");
if(window.location.href.indexOf("/en") > -1) {
elem.innerHTML = 'Please enter a valid telephone number.';
}else{
elem.innerHTML = 'Por favor introduce un número de teléfono válido.';
}
this.parentNode.appendChild(elem); //add the div with the current error message
}
} //end function

How to get Pop up occupying full page using Jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm trying to investigate how this effect is made in http://work.co/grid/. Is there any plugin in jquery to implement similar effect.
Can anyone help me with this as I don't know even what the effect is called but I want to know how it is done.
As per my understanding I think you need this type of example
http://jsfiddle.net/kevalbhatt18/tgsf8n69/1/
hear I will zoom div when you click on div
var isFullscreen = false;
$('.zoom').click(function() {
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
d.width = "100%";
d.height = "100%";
isFullscreen = true;
}
else{ // MINIMIZATION
d.width = "300px";
d.height = "100px";
isFullscreen = false;
}
$(".zoom").animate(d,speed);
});

Javascript plugin for automatic rotation of images [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
need to let the images disappear and reappear like here (footer at) http://www.guiltypeople.nl/het-bureau/.
Each logo, disappear slowly, and reappear on a different place. Could you help me find a Javascript plugin or something to do this?
thanks
First: To overlap the images you must make a trick with position: absolute or play a bit with background. Check here, here and here.
TIP: If the position it's random and not a loop, you must implement a function which changes location of background hidden object's with jquery or javascript.
Second: When you have the images overlapped, you must make the transition effect. For this you must use a loop and the alpha css property.
In your original question you asked also for rotations and other FX, for this you don't need a plugin, check transforming with css.
Example of changin alpha property in plain javascript:
for (var i = 0; i <= 100;){
var element = document.getElementById('id');
element.style.opacity = i * 0.1;
element.style.filter = 'alpha(opacity=' + i + ')'; // IE fallback
i = i + 10;
}
You can use the iterations to make rotation also, or use less i increment to perform each action when mod condition is true, imagine you want to rotate 90 degrees 4 times and make image disapear in 10 steps:
i = i + 5; // allows 20 iterations
if (i % 25 == 0) // if you want 4 rotation steps
if (i % 10 == 0) // if you want 10 alpha modifications

Looking for a jquery textarea script similar to mircrosoft office autocorrect [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm looking for a jquery/javscript textarea script similar to microsoft office autocorrect. Using Microsoft office, I'm able to write things like <= and get ≤. Similary for those ones:
>= gives ≥
-> gives →
+- gives ±
(c) gives ©
(e) gives €
And so many more. Does there exist some jquery/javascript script that emulates this functionality for textarea input fields ?
Edit: Thanks for the answer !
I recently made something similar to MS office auto correct using jquery.
Here is the demo: http://jsfiddle.net/73sEv/6/
function autoCorrect(searchString, replaceString) {
$("textarea").keyup(function(e) {
// escape some regex chars
var escapedString = searchString.replace( /([\\.*+?|()\[\]{}])/g, "\\$1" );
// finds current cursor position
var pos = $(this).prop("selectionStart");
// this turns the textarea in a string
var text = $(this).val();
//only search for strings just typed
var stringToSearch = text.substring(pos-searchString.length,pos);
if (new RegExp(escapedString).test(stringToSearch) === true) {
//if there is a match put the replaceString in the right place
var newText = text.substring(0,pos-searchString.length) + replaceString + text.substring(pos);
$(this).val(newText);
//adjust the cursor position to the new text
var newpos = pos - searchString.length + replaceString.length;
this.setSelectionRange(newpos,newpos);
}
});
}
You can customize the way you want it. For example:
autoCorrect("=>", '⇒');
autoCorrect("->", "→");
autoCorrect("+-", "±");
autoCorrect("<=", "≤");
autoCorrect(">=", "≥");
autoCorrect("(c)", "©");
autoCorrect("(e)", "€");

Get value from textarea. Using Javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
When I try to take a value from a textfield, it works when I use this:
var name = $("input[name='Event[name]']").serializeArray();
name = name[0].value;
I can't get value from a textarea:
var desc = $("input[name='Event[desc]']").serializeArray();
Here is a link to working variant with a textfield. I tried with a textarea and I don't understand why it doesn't work.
Here buddy: http://jsfiddle.net/jVUsZ/
$(document).ready(function () {
var val = $.trim($("textarea").val());
if (val != "") {
alert(val);
}
});
$(document).ready(function () {
var val = $.trim($("textarea").val());
if (val.length !== 0) {
alert(val);
}
});
It is difficult to tell given that you have shown us only part of your code but:
var desc = $("input[name='Event[desc]']").serializeArray();
Your selector here only matches <input> elements. If you want to match a <textarea> element, then you have to replace input with textarea in your selector.
var desc = $("textarea[name='Event[desc]']").serializeArray();

Categories

Resources