IntersectionObserver blur element on unfocus - javascript

Recently I have been working on a project with an image grid for a friend of mine. The idea behind the website was that when the images in one row come into focus it pops out and the remaining go back into their original sizes.
After some research I found the IntersectionObserver API for JavaScript and the following example: http://codepen.io/pawelgrzybek/pen/YWqWXJ I modified the code to change the threshold to
let options = {
threshold: [1.0]
};
but those are just personal modifications, the issue I had was when I scroll down to the next element that comes into focus using the visible class but the previous elements still stay in focus. I wasn't sure about the best way to go about doing this.
I found examples and was able to notice the following code:
function updateStatus(visiblity) {
console.log(visiblity);
const status = document.querySelector('.status');
status.textContent = visiblity;
status.className = 'status status--' + visiblity;
}
but this is only for the top bar in the Simple Example I needed some help figuring this out, please and thank you everyone!

Related

Button eventlistener not executing while in Mobile (Works in PC)

After my object is constructed and its value is displayed in an HTML <.li.>
A btn is created in another function and returned to be appended to the same <.li.>
The button works fine in desktop but when i swap over to mobile it is very strange.
Sometimes it works, sometimes it doesn't.
You sometime can't even press the join button (creates object)
and you cannot tap on the x button that deletes it.
But here's the thing, if you scroll around, fidget around a bit and click the buttons again. There's a chance it will work.
I've tried changing the eventlistener in multiple ways but with no luck.
I've added console.logs into for every step about what it does so it will be easy to see what I am trying to do when you go through the process with console on the side.
Below is the button creation function
function prepCancelForm(list, i) {
const cList = document.getElementById("getCancelList");
const cIndex = document.getElementById("getIndex");
cList.value = list;
cIndex.value = i;
cancelForm.style.display = "";
}
function createBtn(index, listNum) { // creates button
const btn = document.createElement("button");
btn.setAttribute("index", index);
btn.setAttribute("list", listNum);
btn.addEventListener("pointerdown", (event) => {
prepCancelForm(btn.getAttribute("list"), btn.getAttribute("index"));
});
const bNode = document.createTextNode("X");
btn.appendChild(bNode);
return btn;
}
For a bigger insight
Here is the live demo - https://lucasynl.github.io/rbc/pages/game.html
Here is the git repo - https://github.com/LucasYNL/rbc
I've been at this problem for 2 days now and it's driving me nuts.
If all this crap will be gone if I just go learn jQuery, let me know.
Ok, so
I decided that I didn't need sleep untill I figured this out.
To the point where I started redoing my ENTIRE js files.
Turns out, the code have 0 problems. It's because my stupid #ss decided to leave the forms (which takes up 80% of mobile screen) dead #ss in the center and anything that is overlapping it is unclick-able.
So yeah, to solve my own problem, MOVE THE DAMN FORMS.

Document.getElementById in global variable stops working when tab in tabbar is switched

As I learn by "doing" I find myself venturing into uncharted territory with the document.getElementById and addEventListener functions. I am using these functions for a small image (button) that will have — based on various steps the user takes — states of a) disabled, b) enabled, c) mouseover, d) mouseout, e) swap image, and f) various cursor styles.
Yesterday I spent a couple of hours reading through Stack Overflow and MDN Web Docs to understand how all the pieces work together. I then built the code and it worked perfectly. That's the good news. The bad news is this morning I just happened to click a tab on a tabbar (that exists on the same page) and when I went back to the original tab all of the event listeners had dropped and I do not understand why. By choosing "document" as my main target for the getElementById, I thought I was safe in that the event listeners and global variable would be active as long I was within the "document." Could someone help me understand what I'm missing? Here are the various steps I've taken:
I first declare the global variable
window.elem_populate = 0;
Then in the window.onload I apply a value to the variable. BTW, I use window.onload because the ID for the target was not being created in time and was throwing an "undefined" error.
elem_populate = document.getElementById("toolbar_populate");
Then, depending on input from the user I use this approach:
elem_populate.addEventListener('mouseover', hover_populate_on);
elem_populate.addEventListener('mouseout', hover_populate_off);
Here are a couple of examples of the functions being called:
hover_populate_off = function hover_populate_off() {
elem_populate.style.opacity = "1.0";
elem_populate.style.cursor = "not-allowed";
}
hover_populate_on = function hover_populate_on() {
elem_populate.style.opacity = "0.8";
elem_populate.style.cursor = "pointer";
}
The actual target ("toolbar_populate") is positioned on Tab 1 of a two-tab tabbar. If I don't move off the tab, everything works magically. But when I move to Tab 2 and then go back to Tab 1 all the references are lost and the functionality stops. Because everything is on the same document I'm not understanding why I'm losing the reference. Any help or direction would be appreciated. Thanks in advance ...

Buttons are not responding to clicks in Ionic

I have the following button positioned absolutely over a canvas element:
<button class="left">Left</button>
This is the JavaScript that is supposed to respond to button click:
$(".left").mousedown(function() {
leftTimer = setTimeout(moveLeft, 10);
}).mouseup(function() {
clearTimeout(leftTimer);
});
var leftTimer,
moveLeft = function() {
if (circleX > 0) {
circleX -= 4;
}
$("h1.title").text('Clicked Left');
leftTimer = setTimeout(moveLeft, 10);
};
I added the title line to check if there was a delay. When I click the button normally, nothing happens the title does not change. I have to keep the button pressed for some time to change the text to "Clicked Left" or to move my target element. Even then there is a considerable delay between the time I first touch the button and the time the text changes. Why is that ? Let me know if I need to provide more information.
You should actually have Angular with your Ionic app, and use the ng-click element on the div you want to handle.
According to the documentation, AngularJS is required :
Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.
Here is a JSBin, to make you a basic binding between your HTML and your AngularJS : https://jsbin.com/rifigakube/edit?html,js,output
If you are new to this technology here is a list to get started with AngularJS (it's pretty easy to learn if you know Javascript) :
https://angularjs.org/
https://docs.angularjs.org/tutorial/step_00
http://www.w3schools.com/angular/
https://thinkster.io/a-better-way-to-learn-angularjs
https://egghead.io/technologies/angularjs
And finally, when you think you're confident enough with AngularJS : https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic
(I really suggest you learn AngularJS before doing the last one, or you will get stuck after)
Hope this helps.

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

How can I reveal content and maintain its visibility when mousing to a child element?

I'm asking a question very similar to this one—dare I say identical?
An example is currently in the bottom navigation on this page.
I'm looking to display the name and link of the next and previous page when a user hovers over their respective icons. I'm pretty sure my solution will entail binding or timers, neither of which I'm seeming to understand very well at the moment.
Currently, I have:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
$(this).siblings(dropdown).fadeIn();
}, function(){
setTimeout(function(){
dropdown.fadeOut();
}, 3000);
});
});
with its respective HTML (some ExpressionEngine code included—apologies):
<p class="older_entry">Older<span class="hide_me">Older entry:
<br />
{title}</span></p>
{/exp:weblog:next_entry}
<p class="blog_home">Blog Main<span class="hide_me">Back to the blog</span></p>
{exp:weblog:prev_entry weblog="blog"}
<p class="newer_entry">Newer<span class="hide_me">Newer entry:
<br />
{title}</span></p>
This is behaving pretty strangely at the moment. Sometimes it waits three seconds, sometimes it waits one second, sometimes it doesn't fade out altogether.
Essentially, I'm looking to fade in 'span.hide_me' on hover of the icons ('a.paginate_link'), and I'd like it to remain visible when users mouse over the span.
Think anyone could help walk me through this process and understand exactly how the timers and clearing of the timers is working?
Thanks so much, Stack Overflow. You guys have been incredible as I walk down this road of learning to make the internet.
If you just want to get it working, you can try to use a tooltip plugin like this one.
If you want to understand how this should be done: first, get rid of the timeout, and make it work without it. The difference (from the user's point of view) is very small, and it simplifies stuff (developing and debugging). After you get it working like you want, put the timeout back in.
Now, the problem is you don't really want to hide the shown element on the navigator mouse-out event. You want to hide it in its own mouse out event. So I think you can just pass the first argument to the navigator hover function, and add another hover to dropdowns, that will have an empty function as a first argument, and the hiding code in its second argument.
EDIT (according to your response to stefpet's answer)
I understand that you DO want the dropdown to disappear if the mouse moves out of the navigator, UNLESS its moved to the dropdown itself. This complicates a little, but here is how it can be done: on both types of items mouse-out event, you set a timer that calls a function that hides the dropdown. lets say the timer is 1 second. on both kind of item mouse-in even, you clear this timer (see the w3school page on timing for syntax, etc). plus, in the navigator's mouse-in you have to show the dropdown.
Another issue with the timer in your code is that it will always execute when mouse-out. Due to the 3 seconds delay you might very well trigger it again when mouse-over but since the timer still exist it will fade out despite you actually have the mouse over the element.
Moving the mouse back and forth quickly will trigger multiple timers.
Try to get it to work without the timer first, then (if really needed) add the additional complexity with the delay (which you must keep track of and remove/reset depending on state).
Here was the final working code, for anyone who comes across this again. Feel free to let me know if I could have improved it in any ways:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
clearTimeout(emptyTimer);
$(this).siblings(dropdown).fadeIn();
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
$(dropdown).hover(function(){
clearTimeout(emptyTimer);
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
});

Categories