app.js file stops working if it is edited - javascript

i am designing a webpage for a construction company using a template. the html file uses a js file called app.js. whenever i edit the js file, the whole html page becomes non-responsive as if the js file was never there to begin with. here is the code which exists in the app.js file.
//animate first team member
jQuery('#first-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#first-person').addClass("animated pulse");
} else {
jQuery('#first-person').removeClass("animated pulse");
}
});
//animate sectond team member
jQuery('#second-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#second-person').addClass("animated pulse");
} else {
jQuery('#second-person').removeClass("animated pulse");
}
});
//animate thrid team member
jQuery('#third-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#third-person').addClass("animated pulse");
} else {
jQuery('#third-person').removeClass("animated pulse");
}
the file works fine with this pre-written script. but when i try to add the following line for a new id "fourth-person" i created in html file
//animate fourth team member
jQuery('#fourth-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#fourth-person').addClass("animated pulse");
} else {
jQuery('#fourth-person').removeClass("animated pulse");
}
the html page becomes non-responsive. please tell me what might be the problem and a solution too if possible

I can see at least two syntax problems, you are not closing the event binding for third-person and fourth-person elements. They should be like this:
//animate fourth team member
jQuery('#fourth-person').bind('inview', function (event, visible) {
if (visible == true) {
jQuery('#fourth-person').addClass("animated pulse");
} else {
jQuery('#fourth-person').removeClass("animated pulse");
}
}); // <-- This is missing

Related

Old JavaScript no longer working. Chrome says Event.path is deprecated, but I don't use Event.path in my code

I built a game of concentration over a year ago. I tried to run it today and when you click on the back of a "card" it's supposed to reveal a picture, but it does not. Chrome dev tools says "Event.path is deprecated and will be removed. Please use Event.composedPath() instead."
Nowhere in my code do I use Event.path and I can't seem to figure out what specifically is broken.
Here is the code I do have for a click event. The first function is repeated for all 24 cards and calls the second function which is supposed to reveal the picture "underneath" the back of the card and if both revealed pictures are the same they remain revealed, otherwise they both get reset to show the back of the card.
//onClick functions for all card images
pic1.onclick = () => {
console.log(revealedPics); //this sends the file link of the revealed picture to the console
if (isClicked(pic1) === false) {
pic1.src = picArray[0];
checkIfMatch(pic1);
} else if (trackRevealedCardsArray.includes(pic1.src) === true) {
return;
} else {
pic1.src = backOfCard;
}
console.log(revealedPics);
}
//Check if two revealed images are a match
const checkIfMatch = (pic) => {
if (revealedPics === 1) {
firstPic = pic;
} else if (revealedPics === 2) {
secondPic = pic;
if (firstPic.src === secondPic.src) {
revealedPics = 0;
totalPairs--;
trackRevealedCardsArray.push(firstPic.src);
console.log(`total pairs ${totalPairs}`);
if (totalPairs === 0) {
window.setTimeout(gameOver, 500);
}
} else {
window.setTimeout(function() {
firstPic.src = backOfCard;
secondPic.src = backOfCard;
}, 800);
window.setTimeout(resetRevealedPics, 800);
}
}
}
I've checked to make sure all my paths are correct and they are. When I run the same html files from my local drive it works perfectly.

History.popState() not working with YouTube navigation

I am trying to detect for the history.popState() event when navigating through YouTube. Here is my code, all of which are in my content script:
if (window.location.href == 'https://www.youtube.com/') {
history.pushState({id: 0}, '',);
chrome.runtime.sendMessage({message: 'home'});
}
window.addEventListener('yt-navigate-start', function() {
if (window.location.href.includes('/results')) {
history.replaceState({id: 1}, '');
chrome.runtime.sendMessage({message: 'results'});
} else if ('/watch' === location.pathname) {
history.replaceState({id: 2}, '');
chrome.runtime.sendMessage({message: 'watch'});
}
});
window.addEventListener('popstate', function (event) {
setTimeout(idChange, 2000);
}, false);
if (history.state && history.state.id === 1) {
console.log('id1')
} else if (history.state && history.state.id === 2) {
console.log('id2');
} else if (history.state && history.state.id === 0) {
console.log('id0');
}
I can register the popstate event event when navigating from youtube home to the results, then pressing back button. But when I go from youtube home to results then to a specific video and click back to return to results, the pop state event doesn't fire. Am I doing something wrong?
Thank you!
I had a similar issue, I wrapped up my entire contentScript functionality into a function called main().
Then added a custom eventListener called yt-navigate-finish and called main() every time this event was triggered.
This way I could satisfy my need of executing contentScript everytime a new page is loaded or navigated on YouTube
document.addEventListener("yt-navigate-finish", function(event) {
console.log("Content changed")
main()
});
Answer referenced and modified form https://stackoverflow.com/a/45956628/6123830

Loading display while uploading file

So I got a loading screen when loading a page. That works great. My issue is when i upload files I don't want my user to be able to trigger any other events that may reload the page as the file is uploading.
Can I re-use my loading div whilst the files are uploading.
My javascript is very novice.
Any help would be greatly appreciated.
<div id="loading"></div>
<!-- Loading -->
<script>
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('loading', false);
});
</script>
Got some source code here: http://xeroharm.com.au/Test.html

Is there any callback to ionic sidemenu when it is closed?

I'm working on an ionic project with sidemenu. I want to load the content only after the sidemenu transition is finished. Then, I wrote the follow snipet:
$scope.$watch(function(){
return $ionicSideMenuDelegate.isOpen();
}, function (val) {
console.log(val);
});
However, my app returns "true" at the moment I tap to open the menu, and returns "false" at the moment I tap to close the menu. I would like to receive "false", or "true" only after the transition finished.
Someone can help me please? Thanks alot!!!
Can you try this ?:
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio == 0) {
//your code
}
//if (ratio == 1) {
//your code
//}
});

JS hide function error

I have 7 different DIV blocks.
The first DIV block should appear at the beginning, be hiding the other.
For that I gave display: none block at the other six defined.
So the other block should appear, I have a JS code copied from the internet.
function showonlyone(thechosenone) {
$('.newboxes').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
Problem is, I become an Error from Firebug:
RefernceError: showonlyone is not defined
I hope, I have declared you all right.
Make sure you load the js at the beginning of the dom, else the function wont be declared.
function showonlyone(thechosenone) {
$('.newboxes').each(function () {
if ($(this).attr("id") == thechosenone) {
$(this).show();
} else {
$(this).hide();
}
});
}
Also you can enhance the whole function to this:
function showonlyone(thechosenone) {
$('.newboxes:not([data-id='+thechosenone+'])').hide();
$('.newboxes[data-id='+thechosenone+']').show();
}
The code you have is a perhaps a little complicated. Something like this:
function showonlyone(thechosenone) {
$(".newboxes").hide();
$("#"+thechosenone).show();
}
would be much simpler.
As for the function being undefined, make sure the function is defined in a scope that can be reached by the thing calling it!

Categories