Develop Reference

Making animations in react without using Jquery

I am trying to create a on scroll fade animation in my website i am using reactjs for this although i didnt knew how to bring this effect so i found this jquery code to achive this effect but i want to bring this effect without jquery using plane react is it possible? here is the jquery code:
var html = $('html');
// Detections
if (!("ontouchstart" in window)) {
html.addClass("noTouch");
}
if ("ontouchstart" in window) {
html.addClass("isTouch");
}
if ("ontouchstart" in window) {
html.addClass("isTouch");
}
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
if (navigator.appVersion.indexOf("Trident") === -1) {
html.addClass("isEDGE");
} else {
html.addClass("isIE isIE11");
}
}
if (navigator.appVersion.indexOf("MSIE") !== -1) {
html.addClass("isIE");
}
if (
navigator.userAgent.indexOf("Safari") != -1 &&
navigator.userAgent.indexOf("Chrome") == -1
) {
html.addClass("isSafari");
}
// On Screen
$.fn.isOnScreen = function() {
var elementTop = $(this).offset().top,
elementBottom = elementTop + $(this).outerHeight(),
viewportTop = $(window).scrollTop(),
viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
function detection() {
for (var i = 0; i < items.length; i++) {
var el = $(items[i]);
if (el.isOnScreen()) {
el.addClass("in-view");
} else {
el.removeClass("in-view");
}
}
}
var items = document.querySelectorAll(
"*[data-animate-in], *[data-detect-viewport]"
),
waiting = false,
w = $(window);
w.on("resize scroll", function() {
if (waiting) {
return;
}
waiting = true;
detection();
setTimeout(function() {
waiting = false;
}, 100);
});
$(document).ready(function() {
setTimeout(function() {
detection();
}, 500);
for (var i = 0; i < items.length; i++) {
var d = 0,
el = $(items[i]);
if (items[i].getAttribute("data-animate-in-delay")) {
d = items[i].getAttribute("data-animate-in-delay") / 1000 + "s";
} else {
d = 0;
}
el.css("transition-delay", d);
}
});
});
is there any way that i can bring this effect from react only or do i have to use :
import $ from jquery
thanks in advance

DropDownCheckBoxes select all issue

I am using Saplin DropDownCheckBoxes but it has select all issue for hat i have write below java script code on Document.ready its working in chrome browser proper with all proper functionality but is wasn't working properly in IE browser please help me in the same
<%# Register Assembly="DropDownCheckBoxes" Namespace="Saplin.Controls" TagPrefix="asp1" %>
<asp1:DropDownCheckBoxes ID="chkSubClient_Custom" runat="server" AddJQueryReference="true" UseSelectAllNode="true" Width="150px">
<Style2 SelectBoxWidth="150" /> </asp1:DropDownCheckBoxes>
Java Script Code:-
$('input[type=checkbox]').change(function () {
debugger;
var Checked = 0;
var UnChecked = 0;
var OneUnChecked = 0;
var Count = 0;
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") > 0) {
if (this.checked == true) {
Checked = 1;
}
}
});
$('input[type=checkbox]').each(function () {
if (Checked == 1) {
if (this.name.indexOf("chkSubClient_Custom") > 0) {
this.checked = true;
}
}
});
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") < 0) {
if (this.name.indexOf("chkSubClient_Custom") > 0) {
if (this.checked == false) {
Count = 1;
}
}
}
});
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") > 0) {
if (Count == 0) {
this.checked = true;
}
}
});
});
});

Try this
if ($(this).is(':checked'))
{
// more code
}

results_ready are not defined

I have typescript function
Here is code of function
export class Step1{
constructor(){
this.begin_search();
this.results_ready();
}
private results_ready():void{
$(function() {
Filter.load_filter();
let loading_more_results = false;
let loading_more_offset = 0;
if ((gon.search['search_type'] === 'hotel') || (gon.search['search_type'] === 'package')) {
HotelResults.load_step_1_hotel_results();
} else {
AirResults.load_step_1_air_results();
}
if (gon.search['search_type'] === 'package') {
for (let i of Array.from($('.step_1_air_form'))) {
$('.tip', i).tooltipster({ contentAsHTML: true });
}
$('.step_1_air_form:not(.item_loaded) input[type=checkbox]').on('click', () =>
$('.step_1_hotel_form').each(function() {
return HotelResults.update_price_on_button_hotel($(this));
})
);
}
$('.topnav a').each(function() {
if ($(this).target === '') { $(this).target = '_blank'; }
});
$('.fancybox').fancybox();
$('.list_view').on('click', function() {
$('.img-selected').removeClass('img-selected');
$(this).parent().addClass('img-selected');
$('#filter_view').val('list');
FilterFunctions.onFilterChange();
return false;
});
$('.gallery_view').on('click', function() {
$('.img-selected').removeClass('img-selected');
$(this).parent().addClass('img-selected');
$('#filter_view').val('gallery');
FilterFunctions.onFilterChange();
return false;
});
$('.map_view').on('click', function() {
$('.img-selected').removeClass('img-selected');
$(this).parent().addClass('img-selected');
$('#filter_view').val('map');
FilterFunctions.onFilterChange();
return false;
});
$(window).scroll(function() {
if ($(".right_banner img").length > 0) {
let offset;
if ($('#header').css('position') === 'fixed') {
offset = 75;
} else {
offset = 15;
}
if (($(".right_banner img").css('position') === 'static') && ($(window).scrollTop() > ($(".right_banner").offset().top - offset))) {
$(".right_banner img").css("left", $(".right_banner").offset().left);
$(".right_banner img").css("top", offset);
$(".right_banner img").css("position", "fixed");
}
if (($(".right_banner img").css('position') === 'fixed') && ($(window).scrollTop() <= ($(".right_banner").offset().top - offset))) {
$(".right_banner img").css("position", 'static');
}
}
if ((($('#filter_view').length === 0) || ($('#filter_view').val() !== 'map')) && !loading_more_results && (($(window).scrollTop() + $(window).height()) > ($(document).height() - 1250))) {
let loading_more_results = true;
return Itinerary.loadMoreResults();
}
});
return $(window).resize(function() {
if ($(".right_banner img").css('position') === 'fixed') {
$(".right_banner img").css("position", 'static');
$(".right_banner img").css("left", $(".right_banner").offset().left);
return $(".right_banner img").css("position", "fixed");
}
});
});
};
}
I use it in webpack pack like this
$(document).ready(() => {
Translation.addDict(gon.translations);
Track.initialize();
new Searchfield();
let step1 = new Step1();
if (!gon.search['searched']) {
step1.begin_search();
step1.results_ready();
}
/*if (gon && gon.search['id'] && $('.offer_hotel_addon').length > 0) {
check_status();
}*/
});
But when I run website I have this error at console
results_ready is not defined
Why I get this error if it's defined in first function?
Thank's for help so much

Execute javascript for certain screen size

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).

Codecademy - Interactive Website: Disable the button 2

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');
}
});
};