Is there a better way to do this to reduce code duplication?
Maybe somehow loop the 'pagesTop' array?
The following function is initialized on the windows scroll event.
Thanks.
function redrawSideNav() {
var pagesTop = new Array();
$('.page').each(function(index, elem){
pagesTop[index] = $(this);
});
$('.menu, .page').find('a').removeClass('active');
if ( $(document).scrollTop() >= pagesTop[0].offset().top && $(document).scrollTop() < pagesTop[1].offset().top) {
var target = '#' + pagesTop[0].attr('id');
$('[href^="'+target+'"]').addClass('active');
} else if ( $(document).scrollTop() >= pagesTop[1].offset().top && $(document).scrollTop() < pagesTop[2].offset().top) {
var target = '#' + pagesTop[1].attr('id');
$('[href^="'+target+'"]').addClass('active');
} else if ( $(document).scrollTop() >= pagesTop[2].offset().top && $(document).scrollTop() < pagesTop[3].offset().top) {
var target = '#' + pagesTop[2].attr('id');
$('[href^="'+target+'"]').addClass('active');
} else if ( $(document).scrollTop() >= pagesTop[3].offset().top && $(document).scrollTop() < pagesTop[4].offset().top) {
var target = '#' + pagesTop[3].attr('id');
$('[href^="'+target+'"]').addClass('active');
} else if ( $(document).scrollTop() >= pagesTop[4].offset().top) {
var target = '#' + pagesTop[4].attr('id');
$('[href^="'+target+'"]').addClass('active');
}
}
Well, it seems that only the number changes in the following code, so you can use a for-loop with a break-statement. When the break get's triggered, the rest of the for-loop will not be executed. The last else if(...) is the same, but without the last condition. We can fake this by appending a dummy-element to pagesTop, that makes the last condition always true.
var a = {
offset: function() {
return {'top': 9999999999999};
}
};
pagesTop.push( a );
for( var i = 0; i < pagesTop.length-1; i++ ) {
if ( $(document).scrollTop() >= pagesTop[i].offset().top && $(document).scrollTop() < pagesTop[i+1].offset().top) {
var target = '#' + pagesTop[i].attr('id');
$('[href^="'+target+'"]').addClass('active');
break;
}
}
Do it step by step:
First I would create a variable for $(document).scrollTop() and replace the code inside the if statements:
var scrollTop = $(document).scrollTop();
var targetIndex = null;
$('.menu, .page').find('a').removeClass('active');
if ( scrollTop >= pagesTop[0].offset().top && scrollTop < pagesTop[1].offset().top) {
targetIndex = 0
} else if ( scrollTop >= pagesTop[1].offset().top && scrollTop < pagesTop[2].offset().top) {
targetIndex = 1;
} else if ( scrollTop >= pagesTop[2].offset().top && scrollTop < pagesTop[3].offset().top) {
targetIndex = 2;
} else if ( scrollTop >= pagesTop[3].offset().top && scrollTop < pagesTop[4].offset().top) {
targetIndex = 3;
} else if ( scrollTop >= pagesTop[4].offset().top) {
targetIndex = 4;
}
var target = '#' + pagesTop[targetIndex].attr('id');
$('[href^="'+target+'"]').addClass('active');
After that I would start building a loop instead if of using else if cascades:
var scrollTop = $(document).scrollTop();
var targetIndex = null;
for (var i = 0; i < 4 && !targetindex; i++) {
if (scrollTop >= pagesTop[i].offset().top && scrollTop < pagesTop[i + 1].offset().top) {
targetIndex = i;
}
}
targetIndex = targetIndex || 4;
var target = '#' + pagesTop[targetIndex].attr('id');
$('[href^="'+target+'"]').addClass('active');
(untested.. maybe I made some indices/syntax errors..)
the code below works for dynamic sized arrays:
var scrollTop = $(document).scrollTop();
for (var i=0;i<pagesTop.length ;i++) {
tempCond = pagesTop[i+1] ? (scrollTop <= pagesTop[i+1].offset().top) : true;
if(scrollTop >= pagesTop[i].offset().top && tempCond ) {
var target = '#' + pagesTop[i].attr('id');
$('[href^="'+target+'"]').addClass('active');
break;
}
}
difference with samurai answer:
rather than adding a fictional item to the array to guarantee the loop is executed at least one time and the second condition of if statement is always true,
I check inside the loop if the current element is the last item in the array: if it is , the second condition in the if statement is directly set to true, else, the condition is set to scrollTop <= pagesTop[i+1].offset().top
Related
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
Im writing a practice script where i animate a bunch of boxes and detect collision and then move them accordingly. Problem is, i found the collision but how to check in which side the collision has occurred so i can move them accordnigly.
This is the method i wrote.Is there a better way to do it?
this.ballCollide = function(){
for(var i = 0; i < ball.length; i++){
for(var j = i+1 ; j < ball.length; j++){
if( ((ballX[i] + 50) >= ballX[j]) && (ballX[i] <= (ballX[j] + 50)) && ((ballY[i] + 50) >= ballY[j]) && (ballY[i] <= (ballY[j] + 50))){
movePosX[i] = -movePosX[i];
movePosY[i] = -movePosY[i];
movePosX[j] = -movePosX[j];
movePosY[j] = -movePosY[j];
}
}
}
}
I think a little refactoring is in order. The following might help point you in the right direction:
NOTE: I didn't validate the code, so read every character. Plus, I think the left and right are set up, but didn't work through the top / bottom nor the final moving logic because I don't think I understood the original logic (or at least it started to not make sense to me -- seems like your missing an || in there somewhere).
this.ballCollide = function() {
for (var i = 0; i < ball.length; i++) {
var ax = ballX[i];
var ay = ballY[i];
for (var j = i + 1; j < ball.length; j++) {
var bx = ballX[j];
var by = ballY[j];
var left = ( ax <= bx + 50 );
var right = ( ax + 50 >= bx );
var top = ( ay + 50 >= by );
var bottom = ( ay <= by + 50 );
if( (left && right) && (top && bottom) ){
movePosX[i] = -movePosX[i];
movePosY[i] = -movePosY[i];
movePosX[j] = -movePosX[j];
movePosY[j] = -movePosY[j];
}
}
}
}
Here's a "contains" function which may prove useful:
function contains (big, small){
if( ! big || ! small ){
return false;
}
var Oresult = {};
var Obig = {x:big.x, y:big.y, w:big.width, h:big.height};
var Osmall = {x:small.x, y:small.y, w:small.width, h:small.height};
Obig.xMax = Obig.x + Obig.w;
Obig.yMax = Obig.y + Obig.h;
Osmall.xMax = Osmall.x + Osmall.w;
Osmall.yMax = Osmall.y + Osmall.h;
for (var p in Obig) {
Oresult[p] = ( Obig[p] >= Osmall[p] ) ? true : false;
}
var retval = (!Oresult.x && !Oresult.y && Oresult.xMax && Oresult.yMax) ? true : false;
return retval;
}
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).
Basically, I want to have certain points on my website, that act like "magnets". If you are near one of these, the window should scroll to the top, similar to this jQuery plug-in : http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
The problem is, that the window does not scroll, even though the page is in range of a "magnet".
here is the jQuery:
$(document).ready( function() {
var magnets = [];
var range = 200;
var active = true;
$('.container').each(function(i,obj) {
magnets.push($(this).offset().top);
});
console.log(magnets);
var attract = function(where,time){
$('html, body').animate({
scrollTop: where
}, time);
active = false;
};
//checks the range of a magnet
var magnetic = function(what){
var top = $(window).scrollTop();
var min = top - range;
var max = top + range;
if( (min <= what) && (max >= what) ){
return true;
} else{
return false;
}
}
//returns, wether you are in range of a magnet from your magnets array or not
var inRange = function(){
var magnet = -1;
for(var i=0; i<magnets.length; i++){
if( magnetic(magnets[i]) == true){
magnet = i;
}
}
return magnet;
}
$(window).scroll(function() {
$('.counter').html("");
$('.counter').append("<p>"+inRange()+"</p>");
if(active == true && inRange != -1){
attract(magnets[inRange()]);
}
else if(active == false && inRange() == -1){
active = true;
}
else if(active == true && inRange() == -1){
console.log("fuck");
}
});
});
alternative codepen link: http://codepen.io/NiclasvanEyk/pen/jEMrZr
There is a mistake in your code:
if(active == true && inRange != -1){
attract(magnets[inRange()]);
}
Should be
if(active == true && inRange() != -1){
attract(magnets[inRange()]);
}
i want to make a message which will be always on the top however scrolling the page using java script.
i tried the below code, but when i scroll it still on its static place
var message = '<b><font color=000000 size=5>mona link to us! </font></b>'
//enter a color name or hex to be used as the background color of the message
var backgroundcolor = "#FFFF8A"
//enter 1 for always display, 2 for ONCE per browser session
var displaymode = 1
//Set duration message should appear on screen, in seconds (10000=10 sec, 0=perpetual)
var displayduration = 0
//enter 0 for non-flashing message, 1 for flashing
var flashmode = 1
//if above is set to flashing, enter the flash-to color below
var flashtocolor = "lightyellow"
var ie = document.all
var ieNOTopera = document.all && navigator.userAgent.indexOf("Opera") == -1
function regenerate() {
window.location.reload()
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400)
}
var which = 0
function flash() {
if (which == 0) {
if (document.layers)
topmsg_obj.bgColor = flashtocolor
else
topmsg_obj.style.backgroundColor = flashtocolor
which = 1
}
else {
if (document.layers)
topmsg_obj.bgColor = backgroundcolor
else
topmsg_obj.style.backgroundColor = backgroundcolor
which = 0
}
}
if (ie || document.getElementById)
document.write('<div id="topmsg" style="position:absolute;visibility:hidden">' + message + '</div>')
var topmsg_obj = ie ? document.all.topmsg : document.getElementById ? document.getElementById("topmsg") : document.topmsg
function positionit() {
var dsocleft = ie ? document.body.scrollLeft : pageXOffset
var dsoctop = ie ? document.body.scrollTop : pageYOffset
var window_width = ieNOTopera ? document.body.clientWidth : window.innerWidth - 20
var window_height = ieNOTopera ? document.body.clientHeight : window.innerHeight
if (ie || document.getElementById) {
topmsg_obj.style.left = parseInt(dsocleft) + window_width / 2 - topmsg_obj.offsetWidth / 2
topmsg_obj.style.top = parseInt(dsoctop) + parseInt(window_height) - topmsg_obj.offsetHeight - 4
}
else if (document.layers) {
topmsg_obj.left = dsocleft + window_width / 2 - topmsg_obj.document.width / 2
topmsg_obj.top = dsoctop + window_height - topmsg_obj.document.height - 5
}
}
function setmessage() {
if (displaymode == 2 && (!display_msg_or_not()))
return
if (document.layers) {
topmsg_obj = new Layer(window.innerWidth)
topmsg_obj.bgColor = backgroundcolor
regenerate2()
topmsg_obj.document.write(message)
topmsg_obj.document.close()
positionit()
topmsg_obj.visibility = "show"
if (displayduration != 0)
setTimeout("topmsg_obj.visibility='hide'", displayduration)
}
else {
positionit()
topmsg_obj.style.backgroundColor = backgroundcolor
topmsg_obj.style.visibility = "visible"
if (displayduration != 0)
setTimeout("topmsg_obj.style.visibility='hidden'", displayduration)
}
setInterval("positionit()", 100)
if (flashmode == 1)
setInterval("flash()", 1000)
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function display_msg_or_not() {
if (get_cookie("displaymsg") == "") {
document.cookie = "displaymsg=yes"
return true
}
else
return false
}
if (document.layers || ie || document.getElementById)
window.onload = setmessage
any help. or any new code please
If I'm understanding what you want, I think you're totally over thinking it. You can use CSS to keep your message fixed at the top of the page. just add position: fixed. It's how I make my header stay at the top of the page on this site: http://www.recipegraze.com
So use javascript to make the message appear/disappear, but use some simple CSS to make it stick to the top of the page.
edit: you'll also want to up the z-index of the message to make sure it appears on top of your other content, not under it.