We Keep Coding

JAVASCRIPT only the first function is working on my window.onscroll function

I am new to javascript and I am trying to make both of these functions run at different times depending on the scroll position but only the first function 'myFunction1' is running. Please help.
<script>
window.onscroll = function redblob() {myFunction()
function myFunction() {
if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 ||
document.documentElement.scrollTop > 250 && document.documentElement.scrollTop < 1200 ) {
document.getElementById("redblob").classList.add('scale-transition');
}
else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 ||
document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700 ) {
document.getElementById("blueblob").classList.add('scale-transition');
}
else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
};
</script>

You were reusing the function name myFunction(). I renamed the second one to myFunction1() (this is what you said it should be named in your question) and added a function declaration before it. This caused the errors to go away.
<script>
window.onscroll = function redblob() {
function myFunction() {
function myFunction1() {
if ((document.body.scrollTop > 250) && (document.body.scrollTop < 1200) || (document.documentElement.scrollTop > 250) && (document.documentElement.scrollTop < 1200)) {
document.getElementById("redblob").classList.add('scale-transition');
} else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700) {
document.getElementById("blueblob").classList.add('scale-transition');
} else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
}
}
</script>

Thank you for your help Daniel, as you noticed i did reuse the function name myFunction. I changed the name to function1 and added that to the first function and it worked perfectly.
window.onscroll = function functionname() { myFunction2(); myFunction1();
function myFunction1() {
if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 ||
document.documentElement.scrollTop > 250 && document.documentElement.scrollTop < 1200 ) {
document.getElementById("redblob").classList.add('scale-transition');
}
else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 ||
document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700 ) {
document.getElementById("blueblob").classList.add('scale-transition');
}
else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
};

Show a div only when a value = 0

I have a problem with this script.
The script shows to me the hidden div #regalo if #total is between 99.99 and 299.99 ... ok, but (now), I also need to show the hidden div #alert when #total is 0 (zero), and be available to show if values ​​of #total more than 1 , and only when the screen is in landscapeand mode...
Truth is that I can't find a way to modify the code.
Any ideas?
$(document).ready(function() {
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = parseFloat($("#total").val());
if (totalStorage != null && total === 0) {
total = totalStorage;
}
if(total > 99.99 && total < 299.99) {
console.log("PASS");
$('#regalo').show();
//if(total === 0) {
//if(total == 0) {
//if(total < 1) {
//$('#alert').hide();
//}
//else{
//$('#alert').show();
//};
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
//--------------------
if (!$("#notify")[0].paused) { //play audio
$("#notify")[0].pause(); //play audio
$("#notify")[0].currentTime = 0; //play audio
} else { // play audio
setTimeout(function() { //play audio
$("#notify")[0].play(); //play audio
})}; //play audio
//--------------------
localStorage.setItem('suppress_gift_tooltip_1', 'true')
}
} else {
console.log("FAIL");
$('#regalo').hide();
}
}
$(document).on('click', function(event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val()));
}
});
manageRegalo();
});
#alert {
display: none
}
#media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo"></div>
<div id="alert"></div>
<!-- I need to show this div when the #total equals zero -->

This is where consistent and sensible indentation is important. All of the conditions you're trying are all valid:
if (total === 0)
if (total == 0)
if (total < 1)
Any one of them by itself will work just fine. But the problem is that they're not by themselves. They're inside another condition:
if (total > 99.99 && total < 299.99)
When that condition is true, none of your above conditions can possibly be true. The same variable (total) can not be greater than 99.99 and equal to 0 at the same time.
Don't put the test for zero inside of that if block:
if (total > 99.99 && total < 299.99) {
if (total === 0) {
//...
}
}
Put it outside of that if block:
if (total > 99.99 && total < 299.99) {
//...
}
if (total === 0) {
//...
}

Have a try with this
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total")) || 0;
var total = parseFloat($("#total").val());
if (totalStorage && total === 0) {
total = totalStorage;
}
$('#regalo').toggle(total > 99.99 && total < 299.99);
$("#alert").toggle(!total);
if ($('#regalo').is(":visible") && localStorage.getItem('suppress_gift_tooltip_1')!="true") {
$('.tooltip').show();
localStorage.setItem('suppress_gift_tooltip_1',"true");
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
}
}

Javascript scroll issue in Opencart theme

I'm working on a project based on Opencart with the theme Tranda Social (I think it's deprecated). The problem I'm facing is that at Home page ONLY I can't get the scroll-effects (eg. When scrolling-down keep the navbar in fixed position, or getting to the TOP by just clicking the button with the UP-arrow). After some research I've concluded that for some reason a Javascript function isn't get called correctly.
setTimeout(function () {
/* Menu */
$('#menu ul > li > a + div').each(function (index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
/* Fixed Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
/* Margin Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
}, 500);
The functions after fixed-menu and margin-menu comments are NOT working when I'm navigating in Home page. Also if you notice, there is a duplicate of each function (don't know for what reason). Have you any ideas? Any help will be greatly appreciated.

It was a problem caused by Slidesshow module (Nivo Slider) because of a JS error related to it. Uninstall-reinstall the module fixes the problem.

Jquery - Detect Window Width

i have this little script where i try to detect the window size to apply the limit of caracters of an element.
the problem the detection is not working. Always apply the limit of 150.
i have set an alert to look if detect or not, and now i´m sure that he is always apply the same.
can someone help me to find out what is wrong with this script?
here is my code:
$(function () {
$(".block6 p").each(function (i) {
len = $(this).text().length;
if (len > 10) {
if ($(window).width() <= 1280) {
$(this).text($(this).text().substr(0, 150) + '...');
}
else if ($(window).width() > 1280) {
$(this).text($(this).text().substr(0, 10) + '...');
}
}
});
});

Your code only runs once, on document.ready. You need to run the test every time the window is resized:
$(window).on('resize',function() {
if ($(window).width() <= 1280) {
$(".block6 p").each(function (i) {
var len = $(this).text().length;
if (len > 10) {
$(this).text($(this).text().substr(0, 150) + '...');
}
});
} else { //if ($(window).width() > 1280) {
$(".block6 p").each(function (i) {
var len = $(this).text().length;
if (len > 10) {
$(this).text($(this).text().substr(0, 10) + '...');
}
});
}
});
$(document).ready(function() {
$(window).trigger('resize');
}
http://jsfiddle.net/mblase75/6PQ4Q/
That said, you have a problem in that you're altering the text of each element directly, so switching back and forth by resizing the browser will be destructive. I suggest using text-overflow: ellipsis instead if possible.

prototype: show a element when scroll page pased 800px

If user up, then hide the element. A div.
i have something:
<script>
window.onscroll = function()
{
if (document.documentElement.scrollTop > 900 || self.pageYOffset > 900) {
$('#divId').css('display','block');
} else if (document.documentElement.scrollTop < 900 || self.pageYOffset < 900) {
$('#divId').css('display','none');
}
}
</script>
But not work.

Something like this:
$(window).scroll(function () {
var $someDiv = $("#someDiv"),
top = $(this).scrollTop();
if (top > 200) {
$someDiv.show();
} else {
$someDiv.hide();
}
});​
See this Fiddle.