I am trying to achieve this function... I have a textarea with 600 maximum character limit (excluding numbers and symbols) and a counter (#chars). When the character limit has been exceeded, the send button (.send-message) will be disabled and character text counter (#chars) will turn red.
The problem is that i want the Excessive characters (above 600 alone) to turn red too on keyup.
$(document).ready(function(){
var char = 600; // Max character limit
$("#chars").html(char);
$("#editor").keyup(function () {
if ($("#editor").text().replace(/[^A-Z]/gi,"").length > char){
$('.send-message').removeClass('btn-default');
$('.send-message').addClass('disabled btn-danger');
}else if($("#editor").text().replace(/[^A-Z]/gi,"").length < 1){
$('.send-message').removeClass('disabled');
$('.send-message').addClass('btn-default');
}
else if(char <= 600){
$('.send-message').removeClass('disabled btn-danger');
$('.send-message').addClass('btn-default');
$('.send-message').attr('type', 'submit');
}
var rest = char - $(this).text().replace(/[^A-Z]/gi,"").length;
$("#chars").html(rest);
if (rest <= 100) {
$("#chars").css("color", "#f00");
}
else {
$("#chars").css("color", "#111111");
}
$("#excessChars") = $("editor").text().replace(/[^A-Z]/gi,"").length > char);
if (rest <= 0) {
$(rest).css("color", "#f00").text();
}
});
});
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
textarea {position: absolute; height: 100px; width: 300px; top: 100px; left: 30px;}
#test1 {background: rgba(0,0,0,0); color: red;}
#test2 {background: rgba(0,0,0,0); color: #000;}
</style>
<body>
<textarea id="test1"></textarea>
<textarea id="test2"></textarea>
<script>
$(document).ready(function(){
console.log('here');
$('#test2').on({
focus: function() {
console.log('here');
if (this.value.length >= 20) {
$('#test1').focus();
console.log(this.value.length);
}
},
keyup: function() {
if (this.value.length >= 20) $('#test1').focus();
$('#test1').val(this.value);
}
});
});
</script>
</body>
</html>
Related
hello everyone. I'm strugling to do some piece of code with 2 different buttons colors that when clicked, they change the color value so when I click the div it changes to that color. I found that I can do it the first time but I can not call again the function to repeat the process all over again. Any suggestions? Thank you a lot :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.green {
background-color: green;
}
.red {
background-color: red;
}
#change {
border: 1px solid black;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="change"></div>
<button id="green-btn">Green</button>
<button id="red-btn">Red</button>
<script>
const gbutton = document.getElementById("green-btn");
const rbutton = document.getElementById("red-btn");
const change = document.getElementById("change");
let color = "";
function changeGreen () {
color = "green";
}
function changeRed () {
color = "red";
}
gbutton.addEventListener("click", changeGreen)
rbutton.addEventListener("click", changeRed)
change.addEventListener("click", () => {
if(color == "green") {
change.classList.add("green");
} else if (color == "red") {
change.classList.add("red");
}});
</script>
</body>
</html>
you just have to remove other class
change.addEventListener("click", () => {
console.log('color', color)
if (color == "green") {
change.classList.add("green");
change.classList.remove("red");
} else if (color == "red") {
change.classList.add("red");
change.classList.remove("green");
}
});
you should remove the other class
change.classList.add("green")
change.classList.remove("red")
I was looking for the solution for my API but I couldn't find.. All examples or advices didn't work. Could somebody help me out? Or give me any suggestion? I'm still studying JQuery, so any help would be more than welcome..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>
JQuery code:
function screenResolutionAlert(x) {
if (x.matches) {
$("#alert").html("This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse").show();
} else {
$("#alert").hide();
}
}
var x = window.matchMedia("(max-width: 1200px)")
screenResolutionAlert(x)
x.addListener(screenResolutionAlert)
//API swap words code
$(function () {
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pierogi", "gołąbki", "pies", "sześcian"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split('');
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++) {
lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
}
$('#wordblock').html(lis.join(''));
$('#wordblock').mouseup(function () {
setTimeout(() => {
let r_word = '';
$('#wordblock>li').each(function (e) {
r_word += $(this).text();
});
if (r_word == word) {
$("#result").html(`Correct! It was exactly "${r_word}"`);
} else {
$("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
}
}, 0);
});
});
function shuffle(a, b, c, d) {
c = a.length;
while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}
Yes I was using mobile Jquery links, didn't work... And any versions of.. I tried everything what was written in the internet ;(
I tried your code and ...it seems to work! Snippet is here below, just press Run code snippet, and order letters to "PIES".
I suggest you to read about APIs, because at the moment you're not using any API at all! 😁
function screenResolutionAlert(x) {
if (x.matches) {
$("#alert")
.html(
"This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse"
)
.show();
} else {
$("#alert").hide();
}
}
var x = window.matchMedia("(max-width: 1200px)");
screenResolutionAlert(x);
x.addListener(screenResolutionAlert);
//API swap words code
$(function () {
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pies"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split("");
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++) {
lis.push('<li class="ui-state-default">' + d_word[i] + "</li>");
}
$("#wordblock").html(lis.join(""));
$("#wordblock").mouseup(function () {
setTimeout(() => {
let r_word = "";
$("#wordblock>li").each(function (e) {
r_word += $(this).text();
});
if (r_word == word) {
$("#result").html(`Correct! It was exactly "${r_word}"`);
} else {
$("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
}
}, 0);
});
});
function shuffle(a, b, c, d) {
c = a.length;
while (c)
(b = (Math.random() * (--c + 1)) | 0),
(d = a[c]),
(a[c] = a[b]),
(a[b] = d);
}
ul#wordblock {
padding-left: 0;
}
ul#wordblock li {
display: inline-block;
font-size: 2em;
padding: 0.2em 0.2em;
cursor: pointer;
background-color: aliceblue;
border-radius: 50%;
margin: 0.5em;
width: 1em;
height: 1em;
text-align: center;
line-height: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>
So I have an example of a basic classtoggle with a div but can I make it so the "active class" can stay switched with a refresh/re-open. Could this be done?
function myfunc(div) {
var className = div.getAttribute("class");
if(className=="normal") {
div.className = "active";
}
else{
div.className = "normal";
}
}
.normal /*Default*/
{width:25%; height:25%; background: #ffeb00;}
.active /*Switch*/
{width:25%; height:25%; background: #ff00e2;}
<html>
<head>
<title>Test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div id="div" class="normal" onclick="myfunc(this)"></div>
<script src=".jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Thank You for all future Answers.
Use the localStorage to hold the last class
try jsfiddle
$("#div").addClass(localStorage.getItem('ClassName')) ;
$("#div").on("click",function(){
if($(this).hasClass('active')){
$(this).removeClass("active").addClass("normal");
localStorage.setItem('ClassName', 'normal');
}
else{
$(this).removeClass("normal").addClass("active");
localStorage.setItem('ClassName', 'active');
}
});
Something similar to this, haven't tested but this will get you on the right track (note that snippet cannot run on stack overflow due to being sandboxed)
function localStorageExists() {
if (typeof(Storage) !== "undefined") {
return true;
}
return false;
}
if (localStorageExists()) {
myfunc(document.getElementById('div'));
}
function myfunc(div) {
var className = div.getAttribute("class");
if (className == "normal" || (localStorageExists() && localStorage.getItem('someKey') == 'active')) {
div.className = "active";
localStorage.setItem('someKey', 'active');
} else if (className == "active" || (localStorageExists() && localStorage.getItem('someKey') == 'normal')) {
div.className = "normal";
localStorage.setItem('someKey', 'normal');
}
}
.normal
/*Default*/
{
width: 25%;
height: 25%;
background: #ffeb00;
}
.active
/*Switch*/
{
width: 25%;
height: 25%;
background: #ff00e2;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="div" class="normal" onclick="myfunc(this)"></div>
<script src=".jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I am trying to move my JQuery UIdraggable container into div(id="frame") but it is dragging everywhere in the webpage. So how can I move my draggable container into specific div(id="frame").So please give me a way to solve this problem. I am trying to make my own custom product designer plugin for which this my first feature.Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dragg</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style>
#draggable {
overflow:hidden;
width: 100px;
height: 100px;
padding: 0.5em;
background-color: transparent;
}
#frame {
overflow:hidden;
width: 350px;
height: 500px;
padding: 0.5em;
border : 1px solid black;
}
</style>
</head>
<body>
<input type = "file" id="inputFileToLoadOuter">
<input type = "button" onclick = "loadImageFileAsURL(1)" value = "LoadOuterImage">
<input type = "file" id="inputFileToLoadInner">
<input type = "button" onclick = "loadImageFileAsURL(2)" value = "LoadInnerImage">
<div id="frame">
<img src="" id="OuterImg" style="width: 100% ; height:100%" />
</div>
<div id="draggable">
<img src="" id="InnerImg" style="width: 100% ; height:100%" />
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).resizable().draggable();
} );
function loadImageFileAsURL(pos)
{
if(pos == 1){
var filesSelected = document.getElementById("inputFileToLoadOuter").files;
}else{
var filesSelected = document.getElementById("inputFileToLoadInner").files;
}
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
if(pos == 1){
var imageLoaded = document.getElementById("OuterImg");
}else{
var imageLoaded = document.getElementById("InnerImg");
}
imageLoaded.src = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
</script>
</body>
</html>
plunker : https://plnkr.co/OubL3Uw0G7gi4d01yx0V
Modify your #draggable object to this
$("#draggable").resizable().draggable({
revert: "invalid",
});
and add this to make you #frame droppable
$('#frame').droppable({
accept: '#draggable',
})
Read up the jqueryui docs on this, there is much more you can achieve with this. See here https://jqueryui.com/droppable/#photo-manager
You need to use accept of droppable. Like this
$('#frame').droppable({
accept: '#draggable',
})
It will solve you problem :)
For more knowledge visit
JQuery UI
First off, please don't yell at me for asking this question. I know there is already a million topics on this, and sadly I have read through them all and I STILL can't figure out what I am doing wrong.
I created just a simple site to try understand how this works so that I can implement it on a more complex site.
I am just using one of the many scripts I have found and tried. All of them didn't have any effect.
The HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> </title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(document).ready(function() {
var colordivs = $('#fade div');
$(document).scroll(function(e) {
var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;
if (scrollPercent > 0) {
if (scrollPercent < 33) {
var opacity = 1 - (scrollPercent / 33);
$(colordivs[0]).css('opacity', opacity);
}
else if (scrollPercent > 66) {
var opacity = 1 - (scrollPercent / 100);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', 0);
$(colordivs[2]).css('opacity', opacity);
}
else if (scrollPercent > 33) {
var opacity = 1 - (scrollPercent / 66);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', opacity);
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="fade">
</div>
</div>
</body>
</html>
The CSS file:
body {
background-color: #ffcc00;
}
.container {
height: 6000px;
width: 100%;
margin: 0 auto;
}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}
So I guess my first question is do I have everything? Am I missing a jquery script or something. and second does it matter where the css file is as along as its linked correctly in the html file? Like I said, I don't completely understand how the changing opacity works if it has anything to do with the css file.
I understand HTML and CSS completely and I understand what is going on in the script just fine, I just can't figure out why they aren't talking with each other and causing a change.
Thanks in advance for any guidance!
Change
var colordivs = $('#fade div');
to
var colordivs = $('#fade');