I can't find the issue. It's saying:
Oops, try again. Remember to disable the Post button after posting a new message
Update: It turns out there was a little buggy on Codecademy,I resubmitted the code and it worked.
var main = function() {
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text('140');
$('.btn').addClass('disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if(charactersLeft < 0) {
$('.btn').addClass('disabled');
}
else if(charactersLeft == 140) {
$('.btn').addClass('disabled');
}
else {
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('disabled');
$(document).ready(main);
}
Here is an example:
$('.btn').click(function() {$(this).attr("disabled", true);})
I think you are forgetting to close the function braces. After the last line there should be a closing brace and semicolon }; like this:
var main = function() {
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text('140');
$('.btn').addClass('disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if(charactersLeft < 0) {
$('.btn').addClass('disabled');
}
else if(charactersLeft == 140) {
$('.btn').addClass('disabled');
}
else {
$('.btn').removeClass('disabled');
}
});
};
Related
I was trying to use the same function of fontSize() in mobile view to make it responsive but I don't know to do it. This is what I'm using in window view
document.getElementById('hakdog').onload = function () {func()};
function func() {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "18px";
} else if(a >=30) {
voter.style.fontSize = "22px";
} else {
voter.style.fontSize = "27px";
}
}
Is there any same function for mobile view? I only know some function but I know its not responsive
$(document).ready(function(){
if($(window).width() < 480) {
$('h1').css('font-size','10px');
$('h2').css('font-size','8px');
$('h3').css('font-size','6px');
$('h4').css('font-size','4px');
}
});
EDIT
I was trying to make it responsive using java just like on the first code I given, normal .css is not gonna work since its only going to give for h1, h2, h3, etc. I was pointing out that I wanted to make the responsive if the full name reached 40 letters then the fontSize would be 18px same with other functions given
EDIT 5:30pm MARCH 29
This is what I tried so far but didn't work as what I expected.
document.getElementById('hakdog').onload = function () {func()};
function func() {
$(document).ready(function() {
function resizes() {
if($(window).width() < 480) {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >=30) {
voter.style.fontSize = "10px";
} else {
voter.style.fontSize = "15px";
}
}
}
resizes();
$(window).resize(resizes);
})
}
Edit: Made changes to include the font size based on the length of the content.
This should work. You can check this out on the full page in the below code snippet.
$(document).ready(function() {
function resizeMe() {
if ($(window).width() < 480) {
if ($("#name").text().length < 5) {
$('h1').css('font-size', '46px');
} else {
$('h1').css('font-size', '10px');
}
$('h2').css('font-size', '8px');
$('h3').css('font-size', '6px');
$('h4').css('font-size', '4px');
} else {
$('h1').css('font-size', '20px');
$('h2').css('font-size', '18px');
$('h3').css('font-size', '16px');
$('h4').css('font-size', '14px');
}
}
resizeMe();
$(window).resize(resizeMe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="name">Helo</h1>
<h2>Yes</h2>
<h3>Nooooooooooooooooooooooooooo</h3>
<h4>okkkkkk</h4>
Do you try to change 'px' to 'rem', 'rem' resize in relation to the size of the screen.
This is what i meant for auto sizing for every device
var wid = $(window).width();
if(wid < 320) {
var str = document.getElementById("voter").innerHTML
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >= 25) {
voter.style.fontSize = "11px";
} else {
voter.style.fontSize = "15px";
}
}
Thanks for everyone commented out!
I want to combine these two functions.
Can someone tell my how? I've tried it but I can't find a good solution.
These Functions do the same task. So I want to combine these.
Details:-
Here is my Code:-
var bg = $("#metadescription").on('keyup', function(){
var maxlength = $(this).attr("data-limit");
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$(".spanbg1").css("width", percentage);
var $span1 = $(".spanbg1");
var lengthScope = 10;
if ($(this).val().length > maxlength)
{
$span1.css("background-color", "#fc3636");
}
else if ($(this).val().length > maxlength-lengthScope)
{
$span1.css("background-color", "#ffb14d");
}
else
{
$span1.css("background-color", "#76e07a");
}
});
var bg = $("#title").on('keyup', function(){
var maxlength = $(this).attr("data-limit");
var lengthScope = 10;
var $span = $(".spanbg");
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$span.css("width", percentage);
if ($(this).val().length > maxlength)
{
$span.css("background-color", "#fc3636");
}
else if ($(this).val().length > maxlength-lengthScope)
{
$span.css("background-color", "#ffb14d");
}
else
{
$span.css("background-color", "#76e07a");
}
});
var bg = $("#metadescription, #title").on('keyup', function(){
//your common code here
var $span = ($(this).attr('id')=="metadescription" ? $(".spanbg1") : $(".spanbg"));
//your common code here
});
Updated answer with #iHasCodeForU ternary expression
Please try this.
var bg = $("#metadescription, #title").on('keyup', function() {
var maxlength = $(this).attr("data-limit");
var lengthScope = 10;
var targetSpan = $(this).attr("data-target-span");
var $span = $("."+targetSpan);
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$span.css("width", percentage);
if ($(this).val().length > maxlength) {
$span.css("background-color", "#fc3636");
} else if ($(this).val().length > maxlength - lengthScope) {
$span.css("background-color", "#ffb14d");
} else {
$span.css("background-color", "#76e07a");
}
});
HTML Code:
<input type="text" id="metadescription" data-target-span="spanbg1" >
<span class="spanbg1"></span>
<input type="text" id="title" data-target-span="spanbg" >
<span class="spanbg"></span>
try this,
Code which is common in both function put directly and other code place inside if condition something like this
if($(this).attr("id") == "title") {
// code related to title id
}
else {
}
var bg = $("#metadescription,#title").on('keyup', function(){
var maxlength = $(this).attr("data-limit");
var lengthScope = 10;
var $span = $(".spanbg");
var $span1 = $(".spanbg1");
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
if($(this).attr("id") == "title") {
$span.css("width", percentage);
if ($(this).val().length > maxlength) {
$span.css("background-color", "#fc3636");
}
else if ($(this).val().length > maxlength-lengthScope) {
$span.css("background-color", "#ffb14d");
}
else {
$span.css("background-color", "#76e07a");
}
}
else {
if ($(this).val().length > maxlength) {
$span1.css("background-color", "#fc3636");
}
else if ($(this).val().length > maxlength-lengthScope) {
$span1.css("background-color", "#ffb14d");
}
else {
$span1.css("background-color", "#76e07a");
}
}
});
I have a javascript function that I need modified for certain screen sizes, though I've tried "if (screen.width <= 960) {... " and "if (window.width <= 960) {..." , only the part after "else" get's executed, like it's not even looking at the screen width I'm placing in the parenthesis.
Here is my function ( I know it's poorly written, but I'm new to javascript):
$(document).ready(function(){
var numberofscroll = 0;
var lastScrollTop = 0;
$("#home").scroll(function(){
var st = $(this).scrollTop();
(st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
console.log(numberofscroll);
console.log(lastScrollTop);
console.log(st);
if (numberofscroll<2){
change_background2(numberofscroll);
}
else if (numberofscroll<3){
change_background3(numberofscroll);
}
else if (numberofscroll<4){
change_background4(numberofscroll);
}
lastScrollTop = st;
});
function change_background2(numberofscroll){
var i;
for (i = 2) {
$("#home").css("background-position","0 -652px");
}
}
function change_background3(numberofscroll){
var i;
for (i = 3) {
$("#home").css("background-position","0 -1326px");
}
}
function change_background4(numberofscroll){
var i;
for (i = 4) {
$("#home").css("background-position","0 -1978px");
}
}
)};
Corrections:
Changed all the for to ifs.
Corrected the parentheses.
Assigned a temp variable to ternary operation.
Changed all the i to numberofscroll
I believe the corrected JavaScript is:
$(document).ready(function () {
var numberofscroll = 0;
var lastScrollTop = 0;
$("#home").scroll(function () {
var st = $(this).scrollTop();
n = (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
console.log(numberofscroll);
console.log(lastScrollTop);
console.log(st);
if (numberofscroll < 2) {
change_background2(numberofscroll);
} else if (numberofscroll < 3) {
change_background3(numberofscroll);
} else if (numberofscroll < 4) {
change_background4(numberofscroll);
}
lastScrollTop = st;
});
function change_background2(numberofscroll) {
if (numberofscroll == 2) {
$("#home").css("background-position","0 -652px");
}
}
function change_background3(numberofscroll) {
if (numberofscroll == 3) {
$("#home").css("background-position","0 -1326px");
}
}
function change_background4(numberofscroll) {
if (numberofscroll == 4) {
$("#home").css("background-position","0 -1978px");
}
}
});
I think you want to use the innerWidth property of window. (https://developer.mozilla.org/en/docs/Web/API/window/innerWidth).
var stickyTopbar = $('#mainHeader').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
}
});
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
At the moment just the "stickyTopbar" is working. The "stickyTopbar2" doesn't. I have a feeling I should combine both?!
Try this:
var stickyTopbar = $('#mainHeader').offset().top;
var stickyTopbar2 = $('#project-content').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < stickyTopbar) {
$('#mainHeader').addClass('topped');
}
else {
$('#mainHeader').removeClass('topped');
};
if ($(window).scrollTop() < stickyTopbar2) {
$('#close-bar').addClass('off-white');
}
else {
$('#close-bar').removeClass('off-white');
}
});
jsfiddle: https://jsfiddle.net/vhwuvhrd/1/
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).html();
if (tmpHTML == tmpVAL) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
and #addSearch is an <input type="text">.
So, my problem is that; this obviously will only return the results that are an exact match to the tmpVAL - How would I allow it so every letter will change the search result.
e.g.
I type N
it comes up with No, Not, Nothing, Nothingness
I type NOT
it comes up with Not, Nothing, Nothingness
Any help would be appreciated, I would imagine that it would be RegEx?
DEMO https://so.lucafilosofi.com/autocomplete-autofilter-using-jquery-delegate
$(function() {
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).text();
var subSection = tmpHTML.substring(tmpVAL.length, 0);
if (subSection == tmpVAL && tmpVAL != '' ) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
You could use a regular expression, but I think that might be overkill. You could just use indexOf:
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
$('.w').each(function() {
var tmpHTML = $(this).html().toLowerCase();
if (tmpHTML.indexOf(tmpVAL) >= 0) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
Working example: http://jsfiddle.net/andrewwhitaker/PRyvU/
Here's an alternative solution that doesn't use an .each():
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
var $words = $(".w");
var contains = function(haystack, needle) {
return haystack.indexOf(needle) >= 0;
};
if (tmpVAL.length < 1) {
$words.fadeIn(250);
}
else {
$words.filter(function() {
return !contains($(this).html().toLowerCase(), tmpVAL);
}).fadeOut(250);
$words.filter(function() {
return contains($(this).html().toLowerCase(), tmpVAL);
}).fadeIn(250);
}
});
http://jsfiddle.net/andrewwhitaker/EyJ6b/