FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

alteducation

@alteducation

@moigithub but the whole thing is wrong its somthing like e.target.attributes . something i am trying to find it out

Moisés Man

@moigithub

since i dont know what e.data are... i would console.log(e)
then check IF it have a data property (on devtools ) and if this also have a modal property

if u already know what value a data property have.. u could try to hardcode for testing...

alteducation

@alteducation

@moigithub i did console.log(e.target)
and i got
<a data-modal="3" class="button modal-show">See Full Information</a>
how to select the value 3

Moisés Man

@moigithub

use dir instead of log
console.dir(e) OR console.dir(e.target)
it should show an arrow which u can expand

alteducation

@alteducation

@moigithub that is a pretty big list

Moisés Man

@moigithub

check if it have a data property

alteducation

@alteducation

@moigithub thanks man we found it its e.target.dataset.modal

CamperBot

@camperbot

alteducation sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:

:star2: 3652 | @moigithub |http://www.freecodecamp.com/moigithub

Moisés Man

@moigithub

:+1:

alteducation

@alteducation

hi could some one help me with this javascript syntax

var modal = document.querySelectorAll('.modal');
var currentModalValue;
var modalBtn = document.getElementsByClassName("modal-show");
var closeBtn = document.querySelector('.close-post');

function openModal(){
  modal[currentModalValue].style.display = "block";
  document.body.style.height ="100vh";
  $('.modal').scrollTop(0);

}
function closeModal(){
  modal[currentModalValue].style.display = "none";

}

for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click', function(e){
  currentModalValue = e.target.dataset.modal;

});
}

Please tell me how to pass the openModal function along with modalBtn[i].addEventListener() so that it runs when the button is pressed. Is this the right way to do it?

alteducation

@alteducation

for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click', function(e){
currentModalValue = e.target.dataset.modal;
openModal();
});

this fixed the issue but i am unable to close the modal now

korzo

@korzo

@alteducation You should call openModal() in event callback
Is this Bootstrap modal or your own implementation?

alteducation

@alteducation

@korzo my own implementation

korzo

@korzo

@alteducation Then why not to pass openModal as a Event listener?

alteducation

@alteducation

@korzo it works but close button only works on the first modal window. i dont know the syntax to pass it as an event listener

korzo

@korzo

@alteducation Do you have more modals in document?

@alteducation I mean elements with .modal class

alteducation

@alteducation

@korzo yes this is the page https://www.alternativeeducation.in/learning-spaces
and code https://github.com/alteducation/web/blob/gh-pages/learning-spaces.html

korzo

@korzo

@alteducation then var closeBtn = document.querySelector('.close-post'); selects only first close button

alteducation

@alteducation

@korzo should i create loop for close button? only one close button is displayed on page so i thought this would work

korzo

@korzo

@alteducation well, you have close button inside every modal, so you have to add event listener to everyone, not just first

@alteducation Or you can assign event listener only to current close button inside openModal function and remove it in closeModal

alteducation

@alteducation

for(var i=0;i<closeBtn.length;i++){
closeBtn[i].addEventListener('click',closeModal);
}

this worked

korzo

@korzo

@alteducation But I would say better approach is to listen for event on parent element, for example .posts-box

Kaz Baig

@kbaig

Would appreciate some feedback on my first D3 chart! https://codepen.io/kbaig/pen/rGYYrm?editors=0010

alteducation

@alteducation

@korzo i am new to js. could you explain how and why

korzo

@korzo

@alteducation and if clicked element is .modal, open modal. If it's .close-post, close modal

alteducation

@alteducation

@korzo will that open up respective modals according to the element?

korzo

@korzo

@alteducation Yes, If clicked element is button, open closest modal

If it's close button, close parent modal

alteducation

@alteducation

@korzo I'm just starting out, I don't get it. If its not much trouble could you show some code on how its done?

korzo

@korzo

@alteducation If it's easier for you, assign Event Listeners in for loop, as you posted :point_up: October 6, 2017 9:11 PM

alteducation

@alteducation

@korzo is it bad practice?

@korzo also the modal only scrolls if the mouse pointer is placed on top of it. how can i get the modal to scroll no matter where the pointer is?

korzo

@korzo

@alteducation I would say it's not good practice, but don't bother yourself with it at this point ;)

@alteducation It's because only element with focus can scroll

alteducation

@alteducation

@korzo how can i change that. users will get confused.

korzo

@korzo

@alteducation try modal[currentModalValue].focus() if this is current modal element

alteducation

@alteducation

@korzo like this?

function openModal(){
  modal[currentModalValue].style.display = "block";
  modal[currentModalValue].focus();
  document.body.style.height ="100vh";
  $('.modal').scrollTop(0);

}

korzo

@korzo

@alteducation Yes, but I'm not sure it will work. Never tried it on div, only form elements

alteducation

@alteducation

@korzo no it doesnt work

korzo

@korzo

@alteducation https://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function

alpox

@alpox

@alteducation I'm not sure that it even can work with any html technology :-/

@korzo I'm not sure also, if focusing something makes that part of the page scroll then. I thought only what is below the cursor scrolls even if the focus is somewhere else

I mean you can have the focus on an input field but as long as your cursor is outside of the input, the input won't scroll when turning the wheel

korzo

@korzo

@alpox Yeah, you can't scroll element if cursor is not above it. I thought "background" is part of the modal.
I 'm absolutely useless on tablet

Ismail Hozain

@ismailhozain

hey guys im having issues turning my images into links for the twitch thing.It is giving me a hard time, each time I click on the linked image it turns my screen in the pen white is there anything else that i can do? https://codepen.io/ismailhozain/pen/zdgQEb?editors=1000

never mind i forgot the target blank thing

Where communities thrive

People

Repo info

Activity