Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Feb 01 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
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
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
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