I have a section containing some radio buttons and other HTML elements.
When scrolling the page reached to the section, I need to like disable the scroll of the page and instead show some styles on the radios. After reaching to last radio button, enable to scroll the page.
var enabaled = true;
window.onload = function() {
function checkVisibilityOfDiv() {
var target = $(".scene44").offset().top;
if ($(window).scrollTop() >= target ) {
return true;
}
return false;
}
function enableScroll() {
window.onscroll = function () {
};
}
function disableScroll() {
// Get the current page scroll position
scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft,
// if any scroll is attempted,
// set this to the previous value
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}
let amount = 0;
let current = 1;
let max = 7;
var lastScrollTop = 0;
document.addEventListener('scroll', () => {
if (checkVisibilityOfDiv() ) {
var st = window.pageYOffset || document.documentElement.scrollTop;
amount++;
if (amount >= 9) {
amount = 0;
if (st > lastScrollTop ) { //detect scroll direction
// downscroll code
console.log(" down, " + current);
if(current===1 && enabaled=== true){
disableScroll();
enabaled=false;
}
document.getElementById('r' + current).checked = false;
//If you reach the last radio element you reset the counter
if (current === max) {
document.getElementById('r' + current).checked = true;
} else {
current += 1;
document.getElementById('r' + current).checked = true;
}
} else {
// upscroll code
console.log(" up, " + current);
amount = 0;
document.getElementById('r' + current).checked = false;
//If you reach the first radio element you reset the counter
if (current === 1) {
document.getElementById('r' + current).checked = true;
} else {
if (current === max) {
current -= 1;
if( enabaled=== true){
disableScroll();
enabaled=false;
}
} else {
current -= 1;
document.getElementById('r' + current).checked = true;
}
}
}
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}else {
enableScroll();
}
}, false);
};
<div class="scene44" id="scene44">
<input type="radio" name="buttons" id="r1" checked>
<input type="radio" name="buttons" id="r2">
<input type="radio" name="buttons" id="r3">
<input type="radio" name="buttons" id="r4">
<input type="radio" name="buttons" id="r5">
<input type="radio" name="buttons" id="r6">
<input type="radio" name="buttons" id="r7">
<p class="discp">
We discover your potential.
</p>
<div class="controls">
<label for="r1"><span></span>
<div>LAB & Process Development</div></label>
<label for="r2"><span></span><div>Quality & Regulatory</div></label>
<label for="r3"><span></span><div>Engineering & Project Management</div></label>
<label for="r4"><span></span><div>EHS</div></label>
<label for="r5"><span></span><div>Specialized Services</div></label>
<label for="r6"><span></span><div>Data Science LAB</div></label>
<label for="r7"><span></span><div>Technology & Science LAB</div></label>
</div>
<div class="container" >
<div class="leftimage-container">
<div class="box topleft"></div>
<div class="box backleft"></div>
<div class="box bottomleft"></div>
<div class="box frontleft" ></div>
</div>
<div class="centerimage-container">
<div class="box frontcenter"></div>
<div class="box backcenter"></div>
<div class="box bottomcenter"></div>
<div class="box topcenter"> </div>
</div>
<div class="rightimage-container">
<div class="box topright"></div>
<div class="box backright"></div>
<div class="box bottomright"></div>
<div class="box frontright"></div>
</div>
</div>
</div>
I've faced 2 problems; First, it's not working correctly as you can see.
Second, I logged some text and realized that the snippet code detecting the scroll direction does not work exactly.
How can I fix them?
Related
in my JavaScript
$("#inputDatabaseName").on("keyup", function(e) {
alert("Changed!");
console.info(this.value);
var nilaicli = this.value,
skorcli = document.getElementById("skorclis");
var cli1 = parseFloat(nilaicli.value) || 2;
var x = cli1.toFixed(2);
if (x <= 39.99 && x >= 0) {
skorcli.value = 1; //its the only come out and dont want change again if i input another number in inputid="inputDatabaseName". :(
} else if (x >= 40.0 && x <= 59.99) {
skorcli.value = 2;
} else if (x >= 60.0 && x <= 79.99) {
skorcli.value = 3;
} else if (x >= 80.0 && x <= 89.99) {
skorcli.value = 4;
} else if (x >= 90.0 && x <= 100) {
skorcli.value = 5;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<div class="card card-chart">
<div class="card-header">
<div class="row">
<p> Input CLI</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<label>Nilai CLI : </label>
<input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName">
<br>
</div>
</div>
<div class="row">
<div class="col-8">
<label> Skor CLI : </label>
<input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)">
</div>
</div>
</div>
</div>
</div>
</div>
i want change value in inputid="skorclis" again if i input something in inputid="inputDatabaseName".
but my script dont want change value at inputid="skorclis" repeatly. only want the first if statement. and dont want change again. how to make it become change again?
$("#inputDatabaseName").on("keyup", function(e) {
const nilaicli = this.value;
const cli1 = parseFloat(nilaicli) || 2;
const x = cli1.toFixed(2);
hanldeChange(x);
});
const hanldeChange = (x) => {
const skorcli = document.getElementById("skorclis");
console.info(x);
if (x <= 39.99) {
skorcli.value = 1;
} else if (x <= 59.99) {
skorcli.value = 2;
} else if (x <= 79.99) {
skorcli.value = 3;
} else if (x <= 89.99) {
skorcli.value = 4;
} else if (x <= 100) {
skorcli.value = 5;
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<div class="card card-chart">
<div class="card-header">
<div class="row">
<p> Input CLI</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<label>Nilai CLI : </label>
<input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName">
<br>
</div>
</div>
<div class="row">
<div class="col-8">
<label> Skor CLI : </label>
<input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)">
</div>
</div>
</div>
</div>
</div>
</div>
Have look to that:
const myForm = document.querySelector('#my-form') // use a form, it is
// usefull to access on myForm.nilaicli
// element or any one else
myForm.nilaicli.addEventListener('input',function() // use input event, it's also work with mouse copy/paste
{
let x = parseFloat(this.value) || 2
this.value = x // .toFixed(2)
switch (true)
{
case (x >= 0 && x < 40) : myForm.skorclis.value = 1; break;
case (x >= 40 && x < 60) : myForm.skorclis.value = 2; break;
case (x >= 60 && x < 80) : myForm.skorclis.value = 3; break;
case (x >= 80 && x < 90) : myForm.skorclis.value = 4; break;
case (x >= 90 && x <= 100) : myForm.skorclis.value = 5; break;
}
})
myForm.onsubmit = e => e.preventDefault() // disable form submit
fieldset {
display : block;
margin : 1em;
width : 17em;
}
label {
display : block;
margin : 1em;
}
label input {
float : right;
padding : 0 .7em;
width : 9em;
}
<form id="my-form">
<fieldset>
<legend>Input CLI</legend>
<label>
Nilai CLI :
<input type="text" name="nilaicli">
</label>
<label>
Skor CLI :
<input type="text" name="skorclis" readonly >
</label>
</fieldset>
</form>
I have a slider with 6 slides in it. My goal is to show only 3 first slides if radio button id="male" is checked and 3 last slides if id="female" button is currently checked. I've tried splicing array in half and setting slide index depending on checked button but it didn't help. Here is my HTML code:
function skinSlider() {
let slideIndex = 1,
female = document.getElementById('female'),
male = document.getElementById('male'),
skinSlider = document.getElementsByClassName('skin')[0],
skinSliderItem = document.getElementsByClassName('skin-color'),
prev = skinSlider.querySelector('.prev'),
next = skinSlider.querySelector('.next');
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
prev.addEventListener('click', () => {
plusSlides(-1);
});
next.addEventListener('click', () => {
plusSlides(1);
});
function showSlides(n) {
// if (female.checked && slideIndex < 4) {
// slideIndex = 4;
// }
if (n > skinSliderItem.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = skinSliderItem.length;
}
for (let i = 0; i < skinSliderItem.length; i++) {
skinSliderItem[i].style.display = 'none';
}
skinSliderItem[slideIndex - 1].style.display = 'block';
let personSkin = document.getElementById('person-skin');
personSkin.style.background = `url('./img/skin/skin-${slideIndex}.png') center no-repeat`;
personSkin.style.backgroundSize = 'cover';
}
};
<div class="radio">
<input value="male" id="male" name="sex" type="radio">
<label for="sex">Male</label>
<input value="female" id="female" checked name="sex" type="radio">
<label for="sex">Female</label>
</div>
<div class="custom-style">
<div class="style-text">
Choose skin color
</div>
<div class="skin">
<div class="prev">
<i class="flaticon-left-arrow"></i>
</div>
<div class="skin-color skin-color-1"></div>
<div class="skin-color skin-color-2"></div>
<div class="skin-color skin-color-3"></div>
<div class="skin-color skin-color-4"></div>
<div class="skin-color skin-color-5"></div>
<div class="skin-color skin-color-6"></div>
<div class="next">
<i class="flaticon-right-arrow"></i>
</div>
</div>
Any help would be appreciated.
I think this accomplishes roughly what you're looking for. Unfortunately, the slider "wraps" when moving to the right and simply stops at the lower limit when moving to the left. But I'll leave that as an additional challenge for you. :-)
function skinSlider() {
let slideIndex = 1,
female = document.getElementById('female'),
male = document.getElementById('male'),
skinSlider = document.getElementsByClassName('skin')[0],
skinSliderItem = document.getElementsByClassName('skin-color'),
prev = skinSlider.querySelector('.prev'),
next = skinSlider.querySelector('.next');
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
prev.addEventListener('click', () => {
plusSlides(-1);
});
next.addEventListener('click', () => {
plusSlides(1);
});
female.addEventListener('click', () => {
showSlides(slideIndex);
});
male.addEventListener('click', () => {
showSlides(slideIndex);
});
function showSlides(n) {
if (slideIndex > skinSliderItem.length) {
slideIndex = 1;
}
if (slideIndex < 1) {
slideIndex = skinSliderItem.length;
}
if (female.checked && slideIndex < 4) {
slideIndex = 4;
} else if (male.checked && slideIndex > 3) {
slideIndex = 1;
}
for (let i = 0; i < skinSliderItem.length; i++) {
skinSliderItem[i].style.display = 'none';
}
skinSliderItem[slideIndex - 1].style.display = 'block';
}
};
skinSlider();
<div class="radio">
<input value="male" id="male" name="sex" type="radio">
<label for="sex">Male</label>
<input value="female" id="female" checked name="sex" type="radio">
<label for="sex">Female</label>
</div>
<div class="custom-style">
<div class="style-text">
Choose skin color
</div>
<div class="skin">
<div class="prev">
<
</div>
<div class="skin-color skin-color-1">1</div>
<div class="skin-color skin-color-2">2</div>
<div class="skin-color skin-color-3">3</div>
<div class="skin-color skin-color-4">4</div>
<div class="skin-color skin-color-5">5</div>
<div class="skin-color skin-color-6">6</div>
<div class="next">
>
</div>
</div>
As an aside, the for attribute of the label elements should use the IDs of the associated inputs, not the name of the checkbox group.
Why 'alert('animation not finished yet !')' fires every time after input received focus ?
var slidable_blocks = $('.header-internals .slidable');
var header_search = $(slidable_blocks[1]).find('input[type="search"]');
var scroll_content = function(target_node) {
if ($(target_node).is(':animated') === true) {
alert('animation not finished yet !');
return false;
}
if (typeof $(target_node).data('scrollDirection') === 'undefined') return false;
var margin_amount = ($(target_node).data('scrollDirection') == 'up') ? $(target_node).parent().height() * -1 : 0;
$(target_node).animate({
marginTop: `${margin_amount}px`
}, 'slow', '', function() {
var direction = ($(this).data('scrollDirection') == 'up') ? 'down' : 'up';
$(this).data('scrollDirection', direction);
if (direction == 'down') $(header_search).focus();
});
};
$('#search-toggle').on('click', function(e) {
scroll_content(slidable_blocks[0]);
e.preventDefault();
});
<div class="container header-internals">
<div class="slidable" data-scroll-direction="up">
<a href="#" class="site-logo">
<img src="assets/img/header_logo.png" alt="site logo">
</a>
<h1>Just another <span class="underline_accent">Minimalist</span> blog</h1>
</div>
<div class="slidable header-search">
<form method="get" action="" role="search">
<input type="search" placeholder="Type keyword(s) + Enter" maxlength="30" spellcheck="false" autocomplete="off">
</form>
</div>
</div>
I have 2 products and wanted to multiply with quantity and add up both price along with tax and to show the final price of both added and multiplied values I tried doing using jQuery but I am unable to multiply and add up both values can any one help me out
Here is the code for it:
$(document).ready(function(){
$('#sticker01').on('keyup', function() {
var sticker_01 = $('#sticker01').val();
var oldval = parseInt($('#order_total').text());
var total_val = (sticker_01 * 8 +1.30) + oldval;
$('#order_total').html(total_val);
});
});
$(document).ready(function(){
$('#sticker02').on('keyup', function() {
var sticker_02 = $('#sticker02').val();
var oldval = parseInt($('#order_total').text());
var total_val = (sticker_02 * 2 + 1.30) + oldval;
$('#order_total').html(total_val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label>MadEnoughToPayAttention Bumper Sticker</label>
<input type="number" name="bumper_sticker_01_qty" id="sticker01">
</div>
<div class="form-group">
<label>ChangeNotHope Bumper Sticker</label>
<input type="number" name="bumper_sticker_02_qty" id="sticker02">
</div>
<div class="order_total">
<span>Order Total : $<div id="order_total">0.00</div></span>
</div>
Here is a less verbose solution to your issue with minor changes to the HTML and a complete overhaul of the Javascript.
HTML:
I added the min attribute and set its value to 0 to prevent the input spinners from selecting negative values in both the sticker01 and sticker02 elements. I also set the order_total input to disabled as this is the calculation field which will get its value from the inline Javascript. These udpates are cosmetic and play no roll in the structural performance your app.
<div class="form-group">
<label>MadEnoughToPayAttention Bumper Sticker</label>
<input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01">
</div>
<div class="form-group">
<label>ChangeNotHope Bumper Sticker</label>
<input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02">
</div>
<div class="order_total">
<span>Order Total : $
<input type="text" name="bumper_sticker_total" id="order_total" disabled>
</span>
</div>
Javascript:
Here you can implement an anonymous function to handle the events .keyup() and .change() and use a delegated event on the input elements.
$('input').on('change keyup', function() {
sticker_01 = $('#sticker01').val(),
sticker_02 = $('#sticker02').val(),
total_val = $('#order_total');
if ((sticker_01) > 0 && (sticker_02) == 0) {
total_val.val(((sticker_01) * 8 + 1.30).toFixed(2));
} else if ((sticker_02) > 0 && (sticker_01) == 0) {
total_val.val(((sticker_02) * 2 + 1.30).toFixed(2));
} else if ((sticker_01) > 0 && (sticker_02) > 0) {
total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2)));
} else {
total_val.val('');
};
});
That's everything you need. Here is a sample Code Snippet for your review.
$('input').on('change keyup', function() {
sticker_01 = $('#sticker01').val(),
sticker_02 = $('#sticker02').val(),
total_val = $('#order_total');
if ((sticker_01) > 0 && (sticker_02) == 0) {
total_val.val(((sticker_01) * 8 + 1.30).toFixed(2));
} else if ((sticker_02) > 0 && (sticker_01) == 0) {
total_val.val(((sticker_02) * 2 + 1.30).toFixed(2));
} else if ((sticker_01) > 0 && (sticker_02) > 0) {
total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2)));
} else {
total_val.val('');
};
});
<div class="form-group">
<label>MadEnoughToPayAttention Bumper Sticker</label>
<input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01">
</div>
<div class="form-group">
<label>ChangeNotHope Bumper Sticker</label>
<input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02">
</div>
<div class="order_total">
<span>Order Total : $
<input type="text" name="bumper_sticker_total" id="order_total" disabled>
</span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
On my page, I have a section for extra hardware. I have images, beside an increment and de-increment buttons. Right now when you click on the image, a list item appears and when you click off that image it the list item is removed. However, I want to be able to add/update and or remove the list items with the increment and de-increment buttons. I'm just not sure how to put the code together to do so...
Here is the fiddle: http://jsfiddle.net/lolsen7/e2LSB/10/
Here is the html:
<div class="maincontent wraps">
<div class="text-area">
<div class="gethardware">
<div id="station-builder-2">
<h3 class="margin-15 margin-top-30">Need Extra?</h3>
<p>Click on the on the buttons(+/-) to add or subtract from your order.</p>
<div class="numbers-row ipad">
<label for="name">Portable Terminals(iPad mini(s))</label>
<img id="ipad" class="part" src="http://placehold.it/100x100" alt="iPad_mini" />
<input type="text" name="portable-terminals" id="ipad_1" value="0" />
</div>
<div class="numbers-row mobile">
<label for="name">Wireless Receipt Printers</label>
<img id="mobilePrinter" class="part" src="http://placehold.it/100x100" alt="Mobile Printer" />
<input type="text" name="wireless" id="mobile_1" value="0" />
</div>
<!--<div class="numbers-row printer2">
<label for="name">Receipt Printers - For Food/Beverage Orders</label>
<img id="printer2" class="part" src="http://placehold.it/100x100" alt="Receipt Printer2" />
<input type="text" name="printer" id="printer_2" value="0" />
</div>-->
<ul id="list"></ul>
</div>
<!--end of gethardware-->
</div>
<!--end of text area-->
</div>
<!--end of main content-->
Here is the Javascript:
//JS FOR HARDWARE SECTION
$ //JS FOR HARDWARE SECTION
$(document).ready(function () {
$(".part").mouseover(function () {
if (this.className !== 'part selected') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100/ffffff');
}
$(this).mouseout(function () {
if (this.className !== 'part selected') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
}
});
});
var list = document.getElementById("list");
$(".part").click(function () {
if (this.className == 'part') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
console.log(this);
//START OF THE EXTRA -- STATION 2
if (this.id == "ipad") {
li = document.createElement('li');
li.setAttribute('id', 'ipad_li');
li.appendChild(document.createTextNode('iPad mini (portable terminal'));
list.appendChild(li);
}
if (this.id == "mobilePrinter") {
li = document.createElement('li');
li.setAttribute('id', 'mobile_li');
li.appendChild(document.createTextNode('Mobile Printer'));
list.appendChild(li);
}
if (this.id == "printer2") {
li = document.createElement("li");
li.setAttribute("id", "printer2_li");
li.appendChild(document.createTextNode("Receipt Printer"));
list.appendChild(li);
}
} else {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100/ffffff');
console.log(this);
if (this.id == "ipad") {
$('#ipad_li').remove();
}
if (this.id == "mobilePrinter") {
$('#mobile_li').remove();
}
if (this.id == "printer2") {
$("#printer2_li").remove();
}
}
$(this).toggleClass('selected');
});
//javascript for the buttons to increment and decrement
$(".numbers-row").append('<div class="inc buttons">+</div><div class="dec buttons">-</div>');
$(".buttons").on("click", function () {
var $buttons = $(this);
var oldValue = $buttons.parent().find("input").val();
if ($buttons.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
if (newVal > 2) {
return;
}
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$buttons.parent().find("input").val(newVal);
});
});