These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Oct 2017
Dennis Daubney Jr
@MrOolong
Oct 06 2017 01:17
@2cool4school What about bootstrap Jerrz?
Ben Hart
@Benjmhart
Oct 06 2017 02:50
hey folks, would anyone be able to help with this twitch API project?
korzo
@korzo
Oct 06 2017 02:51
@Benjmhart What's the problem?
Ben Hart
@Benjmhart
Oct 06 2017 02:51
I keep getting not found when based on what I've read i should be able to get a big object with the details for all the channels
getting a 404 error
piteto
@piteto
Oct 06 2017 02:52
@Benjmhart I had the exact same idea when I started my twitch app, unfortunately, the wind-bow.gomix.me server that Free Code Camp provides doesn't let you use a comma separated list of channels
you have to call them one at a time
Ben Hart
@Benjmhart
Oct 06 2017 02:52
...well crap
thanks @piteto
CamperBot
@camperbot
Oct 06 2017 02:52
benjmhart sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Oct 06 2017 02:53
You can still do it that way if you use the actual twitch api, but it requires you to sign up for a developer account and get an API key
Ben Hart
@Benjmhart
Oct 06 2017 02:53
is that hard?
piteto
@piteto
Oct 06 2017 02:53
No, it only takes a few minutes to do
Ben Hart
@Benjmhart
Oct 06 2017 02:53
...isn't dealing with ajax calls in a for loop a big pain?
what did you end up doing?
piteto
@piteto
Oct 06 2017 02:54
.forEach() will work better than a for loop with ajax calls
I used the server that Free Code Camp provides, using promise.all to call the API multiple times.
korzo
@korzo
Oct 06 2017 02:55
@piteto Promise.all is not good idea as API randomly fails.
piteto
@piteto
Oct 06 2017 02:56
@korzo Yeah, we talked about that back when I was building it and trying to use $.when, but I switched it up, got rid of jQuery and tested failure scenarios. It all seems to work well under those scenarios.
Ben Hart
@Benjmhart
Oct 06 2017 02:56
@korzo how would you do it then?
Where is your twitch app @korzo ?
korzo
@korzo
Oct 06 2017 02:58
@Benjmhart with promises, but collect resolved promises or process them per promise
Similar to what @piteto posted, just without promise.all
users.forEach(e => {
   Promise.resolve(e)
    .then(getChannelData)
    .then(getStreamsData)
    .then(renderUser)
    .catch(doSomething);
});
@Benjmhart
Ben Hart
@Benjmhart
Oct 06 2017 03:01
hmmm ok, thanks @korzo
CamperBot
@camperbot
Oct 06 2017 03:01
benjmhart sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 587 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Oct 06 2017 03:03
@piteto I didn't finish Twitch project yet.
Gersho
@Gersho
Oct 06 2017 03:07
considering the knowledge you displayed it wouldn't take you long
piteto
@piteto
Oct 06 2017 03:09
@korzo yeah, you were really helpful when I was trying to get $.when working. You could probably hammer something out in 30 minutes
korzo
@korzo
Oct 06 2017 03:10
@Gersho I have functional code somewhere. But then I started playing with design trying to make it perfect and I overthinked it :)
piteto
@piteto
Oct 06 2017 03:10
That's why I used bootstrap cards - just said, screw the UX :)
I used bootstrap cards on everything, got carried away with my calculator and pomodoro...and still struggling with those
Gersho
@Gersho
Oct 06 2017 03:12
i'm completely suck at design (i'm still not done with my portfolio, the current version is beyond ugly lol)
korzo
@korzo
Oct 06 2017 03:12
Yeah, I had code ready in some 20 minutes, then spent 3 hours browsing upLabs/Graphicriver trying to find something perfect
@Gersho design and portfolio is my nemesis
Gersho
@Gersho
Oct 06 2017 03:13
that's part of the reason i'm starting backend before finishing react/d3, i want to build solid python/js skills so my lacking css won't be an issue
korzo
@korzo
Oct 06 2017 03:17
I'm also good with css, but I have zero design imagination. If I see something, I can code it, but I can't create something to display by myself
Jerzz
@2cool4school
Oct 06 2017 03:19
Hey does anyone know how to make the footer stay at the absolute bottom of page
ive tried this
Gersho
@Gersho
Oct 06 2017 03:20

I'm also good with css, but I have zero design imagination. If I see something, I can code it, but I can't create something to display by myself

well i'm not THAT bad at css, but i'm not really good either, i can copy basic stuff, my worst nemesis in design is choosing colors

Jerzz
@2cool4school
Oct 06 2017 03:21
footer { width:100%; bottom:0; left:0; position:absolute; }
footer {
    width:100%;
    bottom:0;
    left:0;
    position:absolute;
}
korzo
@korzo
Oct 06 2017 03:22
@2cool4school do you want sticky or fixed footer ?
Jerzz
@2cool4school
Oct 06 2017 03:28
sticky.
i believe
i dont want it always visible at the bottom of my page
korzo
@korzo
Oct 06 2017 03:30
@2cool4school Old school trick is set html and body to 100% height, footer to bottom : 0 with margin of footer's height
Jerzz
@2cool4school
Oct 06 2017 03:34
margin of footers height?
what if the height isnt set?
korzo
@korzo
Oct 06 2017 03:36
@2cool4school you need margin, otherwise it will cover part of the body, when height of the body is more then 100%
Jerzz
@2cool4school
Oct 06 2017 03:37
@korzo okay, im actually seeing that error on my page now
@korzo what do i set the margin to? i dont have height set i was going to let height be dynamic and use col's in the footer
@korzo you dont have margin set and im still confused DX
korzo
@korzo
Oct 06 2017 03:45
@2cool4school Sorry, I posted link prematurely. Take a look again. This is better solution
@2cool4school then there is flexbox solution
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
and add flex: 1 0 auto; to content
Jerzz
@2cool4school
Oct 06 2017 03:50
@korzo im following your method, same as ive found on the internet and its not working. the footer is generated at the bottom of the viewport if height is greater than 100%. and since position is absolute it stays there
korzo
@korzo
Oct 06 2017 03:50
If you don't know height of footer and can't guess it, you'll need bit of javascript
@2cool4school Here is solution with position: absolute http://jsbin.com/cesiyicaga/edit?html,css,js,output
first link is using min-height
korzo
@korzo
Oct 06 2017 04:04
@2cool4school If you don't know height of the footer, there should be solution using display: table-footer-group;
but I don't know if this is usable for you
Vyacheslav 'SLEL' Solomin
@Selnapenek
Oct 06 2017 06:49
Guys, tell me please what to use for a brick grid and a beautiful appearance of blocks when scrolling or how to bind masonry and scrollreveal?
kozen0
@kozen0
Oct 06 2017 06:58
hi
kirbyedy
@kirbyedy
Oct 06 2017 07:11
@Selnapenek maybe this: https://github.com/desandro/masonry
WebDevJJ
@WebDevJJ
Oct 06 2017 07:46
Hello kozen0
Pascal Clanget
@Gh05d
Oct 06 2017 08:29
Anybody knows a good library for playing sounds who won't block codepen with a 403?
corsanywhere doesn't work :(
LiciniusRex
@hashtagyolo1
Oct 06 2017 08:58
what kind of sounds are you looking for?
Pascal Clanget
@Gh05d
Oct 06 2017 08:59
It's for the pomodoro challenge, so a simple ring sound should suffice.
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:00
have you tried just uploading a sound somewhere?
Pascal Clanget
@Gh05d
Oct 06 2017 09:01
no, you know a good free service? I thought it would be easier to just get a sound from a library
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:01
just found this
probably not what you're looking for
Pascal Clanget
@Gh05d
Oct 06 2017 09:04
looks fine
I will try
thx
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:04
All the sounds libraries I can find aloow you to download. I'd imagine it's tpo prevent their costs from getting to high from people streaming directly from their page
Pascal Clanget
@Gh05d
Oct 06 2017 09:09
It worked :)
@hashtagyolo1 thx
CamperBot
@camperbot
Oct 06 2017 09:09
gh05d sends brownie points to @hashtagyolo1 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @hashtagyolo1 |http://www.freecodecamp.com/hashtagyolo1
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:19
no worries
For some reason this is returning [Object Object] instead of the answer
function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line
  for (var i in collection) {
    for (var j in collection[i]) {
      if (collection[i][j] === source[j]) {
        arr += collection[i];
      }
    }
  }
  // Only change code above this line
  return arr;
}

whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
It's returning the right amount of objects, which I guess is something.
Pascal Clanget
@Gh05d
Oct 06 2017 09:27
Have you tried changing it to:
        arr.push(collection[i]);
@hashtagyolo1
Markus Kiili
@Masd925
Oct 06 2017 09:28
@hashtagyolo1 Second nested loop needs to be over source's keys.
You cannot add to an array with +=.
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:30
Thank @Masd925 @Gh05d. Not done any work in a while so having to get it all back in my brain
CamperBot
@camperbot
Oct 06 2017 09:30
hashtagyolo1 sends brownie points to @masd925 and @gh05d :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @gh05d |http://www.freecodecamp.com/gh05d
:star2: 4525 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Oct 06 2017 09:30
@hashtagyolo1 Using a simple for loop to loop over array indices is better, because it is guaranteed to loop them in order.
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:31
is that not what it's doing now?
Markus Kiili
@Masd925
Oct 06 2017 09:35
@hashtagyolo1 for...in loop is not guaranteed to loop property keys in insertion order. Therefore a for...in loop is not good if array element iteration order matters. Not totally sure if it matters here, but generally you should use a simple for loop or array iterators to loop array indices.
LiciniusRex
@hashtagyolo1
Oct 06 2017 09:36
Didn't know that. I'll change it and see if it helps.
Markus Kiili
@Masd925
Oct 06 2017 09:36
@hashtagyolo1 It won't. The logic is wrong.
You need to keep those objects that have matching property values with source for all the source's keys. You need some loop logic.
Second nested loop needs to be over source's keys.
rscales02
@rscales02
Oct 06 2017 10:13
Why is it that when I change my border radius the actual box itself maintains its shape?
Markus Kiili
@Masd925
Oct 06 2017 10:14
@rscales02 The page layout is always made out of boxes.
rscales02
@rscales02
Oct 06 2017 10:15
specific areas with issues are that all of my colored buttons act as buttons to the corners of the container div and my center-element div extends passed its circle as well
@Masd925 any idea how to pull my button effective area into the proper border radius then?
Markus Kiili
@Masd925
Oct 06 2017 10:17
@rscales02 You mean make only the round area clickable?
rscales02
@rscales02
Oct 06 2017 10:18
I want the colored areas to be clickable. currently center-element sticks out into each of them (only slightly) and the "empty" corners are still clickable
Markus Kiili
@Masd925
Oct 06 2017 10:24
@rscales02 Not sure if there is an easy solution. You could do it by checking the element and cursor positions/dimensions.
rscales02
@rscales02
Oct 06 2017 10:35
@Masd925 thanks, I will look into that I guess. The example is impressive, buttons are exact and only buttons when expecting input. Not the slightest idea where to start... I guess with paper and pen!
CamperBot
@camperbot
Oct 06 2017 10:35
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4526 | @masd925 |http://www.freecodecamp.com/masd925
alteducation
@alteducation
Oct 06 2017 10:58
hi guys can someone help me. i am working on this page for a non profit https://www.alternativeeducation.in/learning-spaces. the modal that opens up when i click on the 'see full information' link only scrolls if the mouse pointer is inside the modal. how can i fix that. also is it possible to get cards to stack below each other like pintrest. could someone guide me
Ayush Bahuguna
@relentless-coder
Oct 06 2017 11:58
https://codepen.io/ayushb/pen/Jrpoqw
is there a special way to add border to the thead element?
i can't make it work the normal way
alpox
@alpox
Oct 06 2017 12:04
@alteducation sadly no resolution for you because i am not on my laptop, but i encountered on mobile that when i click on see the full information, i always get the information of the first card and not of the one i clicked
alteducation
@alteducation
Oct 06 2017 12:05
@alpox yeah i have that issue too. i'm using jekyll and liquid loop to loop over my data files but the modal only shows the first element. dont know why i am trying to fix it for some time now
alpox
@alpox
Oct 06 2017 12:06
@alteducation id try to help but im sadly on the way to mountains :D maybe i can take a look another time. I didnt yet use jekyll though
alteducation
@alteducation
Oct 06 2017 12:08
@alpox thanks for taking a look. enjoy your journey to the mountains. mountains are the best :)
CamperBot
@camperbot
Oct 06 2017 12:08
alteducation sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1343 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 06 2017 12:08
They are :D thanks!
@alteducation do you have your code on github?
CXmanager
@CXmanager
Oct 06 2017 12:10
How can I have the portfolio pictures in a grid format https://codepen.io/CXmanager/pen/mwwxYq?editors=1100#0
alteducation
@alteducation
Oct 06 2017 12:11
@alpox yeah i have this is the code for the specific page https://github.com/alteducation/web/blob/gh-pages/learning-spaces.html
Markus Kiili
@Masd925
Oct 06 2017 12:13
@CXmanager You can use widths and float etc, but somewhat easier to make it responsive using some grid system like Bootstrap grid.
Marianissimus
@Marianissimus
Oct 06 2017 12:16
@CXmanager many ways, such as @Masd925 told you, or like {display: inline-block; width: 25%;} etc
alteducation
@alteducation
Oct 06 2017 12:16
@CXmanager you can use flexbox apply display:flex propert to the parent element then apply a width to img tags
alpox
@alpox
Oct 06 2017 12:16
@alteducation what do you use there for the modal? Materialize or Bootstrap? I see you included both
@alteducation but you didnt define the target of the buttons for the modal
alteducation
@alteducation
Oct 06 2017 12:18
i wrote the css for the modal. bootstrap and materialize are not used in that page they are included in common to all pages. some materialise modal stlyling got applied though
alpox
@alpox
Oct 06 2017 12:18
@alteducation but you sure used some js to show the modal then?
alteducation
@alteducation
Oct 06 2017 12:20
@alpox sorry i didnt get you
alpox
@alpox
Oct 06 2017 12:21
@alteducation there must be some action triggered which makes the right modal appear. Where is the logic for that?
alteducation
@alteducation
Oct 06 2017 12:24
@alpox var modalBtn = document.getElementsByClassName("modal-show"); function openModal (){
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
}    for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
@alpox var modalBtn = document.getElementsByClassName("modal-show"); function openModal (){
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
} for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
sorry for the messy code formating
this is the logic i used to show the modal

@alpox

var modalBtn = document.getElementsByClassName("modal-show");

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

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

alteducation
@alteducation
Oct 06 2017 12:37

@CXmanager use this code
`

Portfolio ul{

display:flex;
}

Portfolio img{

width:95%;
padding: 0 3%;
}
`

alpox
@alpox
Oct 06 2017 13:35
@alteducation where is "modal" defined in modal.style.display =" block";?
That should most likely be this.style.display...
alteducation
@alteducation
Oct 06 2017 13:45
modal is defined as var modal = document.querySelector('.modal');
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
@alpox modal is defined as var modal = document.querySelector('.modal');
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
alpox
@alpox
Oct 06 2017 13:54
@alteducation did you try it with this instead of modal?
alteducation
@alteducation
Oct 06 2017 13:54
@alpox yeah id doesnt work
alpox
@alpox
Oct 06 2017 13:57
Oh wait right. That wouldnt work. You will have to target the right modal. Either through an index or better through a data-target attribute on the button which you can retrieve in the click callback to identify the modal
alteducation
@alteducation
Oct 06 2017 13:58

@alpox
var modal = document.querySelectorAll('.modal');

var modalBtn = document.getElementsByClassName("modal-show");

function openModal (){
  for(var i=0;i<modal.length;i++){
    for(var j=0;j<modalBtn.length;j++){
   if(modal[i] === modalBtn[j]{
     modal[i].style.display = "block";
   });}}
  }

Can I do something like this

alpox
@alpox
Oct 06 2017 14:06
Nope that doesnt work :D like this you still dont know which modalbutton refers to which modal. You would acticate all the modals
Best, set data-target html attributes on the buttons which hold a selector uniquely identifying the modal it should open (the modal also needs a unique id then). Then you can just ask for the attribute in openModaland use the selector for getting the right modal.
Another method is to push the modalbuttons into a real array (yea its not a real array now), then use modalBtnArr.indexOf(this); to retrieve the index of the button in the buttonlist and then use the index to read out the modal with the same index out of a list retrieved through another getElementsByClassName to the modals. This is a less secure method though and is more error prone
@alteducation ^
alteducation
@alteducation
Oct 06 2017 14:21
@alpox the buttons are generated by a jekyll loop how can i set different data target attributes to each?
alpox
@alpox
Oct 06 2017 14:26
@alteducation i dont know jekyll much, but im sure there must be a method to get the index of the current iteration step which you could use to set unique identifiers
alteducation
@alteducation
Oct 06 2017 14:28
@alpox if i get the index of the button that user clicks can i do modal['index-of -button-user-clicked] could you explain why you said its unsecure
Ian Gracia
@iangracia
Oct 06 2017 14:47
hey guys can someone explain this to me
var display = 0554651;

$("#equals").on("click",function(){
  $("#display").html(display);
});
Why does the equals element show "186793" ?
Tom
@moT01
Oct 06 2017 14:49
the display element?
after you click the equals element
Ian Gracia
@iangracia
Oct 06 2017 14:49
yes i mean display
Tom
@moT01
Oct 06 2017 14:50
and you click equals and display changes from something to 186793?
Ian Gracia
@iangracia
Oct 06 2017 14:51
yes
where does that number come from, display var is 0554651
i understand its something to do with a leading zero
Tom
@moT01
Oct 06 2017 14:51
im wondering if it's from that leading 0
not sure why that would happen, i bet if you made it a string it would work
display = "0554651";
Ian Gracia
@iangracia
Oct 06 2017 14:52
yup
that works,
but this
$("#display").html(display.toString());
does not work
why?
and where does the number "186793" come from :laughing:
Tom
@moT01
Oct 06 2017 14:55
im not sure exactly why it gets translated like that - but if you remove that 0 in front it shows the 554651
Tom
@moT01
Oct 06 2017 15:02
a small look around says you can't use numbers like that, it has to be a string if you want a 0 in front
Pascal Clanget
@Gh05d
Oct 06 2017 15:18
can anybody tell me how to center the text inside the green fields vertically?
alteducation
@alteducation
Oct 06 2017 15:20
@Gh05d
.inner-field {
height: 100%;
width: 33.33%;
background: green;
float: left;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
Pascal Clanget
@Gh05d
Oct 06 2017 15:21
@alteducation Wow thx. That was quick :smile: :+1:
CamperBot
@camperbot
Oct 06 2017 15:21
gh05d sends brownie points to @alteducation :sparkles: :thumbsup: :sparkles:
api offline
Pascal Clanget
@Gh05d
Oct 06 2017 15:22
So I guess the magic was the flex?
What does it do? Could you elaborate?
alteducation
@alteducation
Oct 06 2017 15:25

@Gh05d flexbox makes layouts super easy. If you are unfamiliar with flexbox please try games such as flexboxfroggy, flexboxdefence etc they will help you understand flexbox.

what i did is i applied the property display: flex that makes the element a flexbox element

the align-items:center centers it vertically inside the element
and justify-content:center centers it horizondally
both of them are flexbox properties

Pascal Clanget
@Gh05d
Oct 06 2017 15:26
@alteducation cool thx. I will check that out :+1:
CamperBot
@camperbot
Oct 06 2017 15:26
gh05d sends brownie points to @alteducation :sparkles: :thumbsup: :sparkles:
api offline
Giancarlos C.
@GianCastle
Oct 06 2017 15:42
image.png
Hi guys. Can you guys help me with this? i want to draw this line when the site is scrolling down and up. Does somebody have any resources of any kind of idea of how to implement this?
alpox
@alpox
Oct 06 2017 15:43
@alteducation thats insecure because you would have to be sure that in no case you could get the modals in another sort order than the buttons. This would be ok in most cases but it CAN go wrong
alteducation
@alteducation
Oct 06 2017 15:46
@alpox woudlnt the order of the buttons change to when i change the sort. for eg if i filter by state then the buttons and modal will change respectively right?
Brian
@Cornielle
Oct 06 2017 16:13
Hello World :)
I have this situation , I want my notifications appears after the page is loaded ,I wil share my code
  success: function(data){
                            if (data.message == 'success') {

                                location.reload();

                                    $(window).on('load', function(){
                                            showNotification('alert-success', '@lang("tables.success")', 'top', 'right', 'animated fadeIn', 'animated fadeOut');
                                        });
                        }
                            else if (data.message == 'nosuccess'){
                        showNotification('alert-danger','@lang("tables.fail")' , 'top', 'right', 'animated fadeIn', 'animated fadeOut');
                            }
                        }
window.on load , doesn't work
piteto
@piteto
Oct 06 2017 16:19
@Cornielle hello
window.onload won't run if it's inside another function
$(window).on("load", function() {
  showNotification("alert-success", '@lang("tables.success")', "top", "right", "animated fadeIn", "animated fadeOut");
});

...
success: function(data){
  // ajax success function code here
}
Chris Rutherford
@cjrutherford
Oct 06 2017 16:38
Hey all, working on a front end thing, and I'm having trouble with JQeury. I'm using a click function to add elements to the DOM. I can confirm that the function does fire, but the $().addClass() function never takes effect.
      $('.xlsFile').click(() => {
        console.log('file clicked');
        console.log($(this).hasClass('selected'));
        if($(this).hasClass('selected')){
          console.log('Selected is True')
          $(this).removeClass('selected');
        }else{
          console.log('Selected is false')
          $(this).addClass('selected');
        }
      });
piteto
@piteto
Oct 06 2017 16:40
@cjrutherford the this keyword won't work with arrow functions =>
Chris Rutherford
@cjrutherford
Oct 06 2017 16:41
Ah! okay, I'll fix that now. Thanks @piteto
CamperBot
@camperbot
Oct 06 2017 16:41
cjrutherford sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Oct 06 2017 16:41
Try it with a normal anonymous function, or replace this with '.xlsFile'
Chris Rutherford
@cjrutherford
Oct 06 2017 16:42
that was it! it's working!
piteto
@piteto
Oct 06 2017 16:42
Nice :)
Chris Rutherford
@cjrutherford
Oct 06 2017 16:44
didn't want to use the `.xlsFile' because there will be multiple, and I want to have individuals selected. Thanks again!
piteto
@piteto
Oct 06 2017 16:46
@cjrutherford makes sense - there's a toggleClass() method, by the way, that might simplify your code a bit
$(".xlsFile").click(function() {
  $(this).toggleClass("selected");
});
Chris Rutherford
@cjrutherford
Oct 06 2017 16:46
Oh yeah, that would work better anyway!
piteto
@piteto
Oct 06 2017 16:47
Or with arrow functions:
$(".xlsFile").click((e) => $(e.currentTarget).toggleClass("selected"));
Chris Rutherford
@cjrutherford
Oct 06 2017 16:49
This is going to make the back end functions I'm working on a lot easier. Been a while for me and Jquery, but this project is too small to load out a full Angular app. Here Goes!
Vyacheslav 'SLEL' Solomin
@Selnapenek
Oct 06 2017 17:16
Guys, tell me please, in the horizontal scrolling how to hide the element (the arrows to the left, to the right) when reaching the beginning of the scroll and the end?
piteto
@piteto
Oct 06 2017 17:20
@Selnapenek Check out element.scrolleft and element.scrollWidth to determine the beginning and end scroll position
Vyacheslav 'SLEL' Solomin
@Selnapenek
Oct 06 2017 17:21
@piteto thx =*
CamperBot
@camperbot
Oct 06 2017 17:21
selnapenek sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @piteto |http://www.freecodecamp.com/piteto
alpox
@alpox
Oct 06 2017 17:37
@alteducation in theory yes. I would say it should work in around 99% of the cases
Its just that usually, programmers tend to go sure when they are insecure about internals of a system like jekyll to be able to control it for sure in 100% of the cases
alteducation
@alteducation
Oct 06 2017 17:38
@alpox i managed to add a data-modal attribute to the buttons that has the value of he loop index. now i am figuring out the js code to make this work
alpox
@alpox
Oct 06 2017 17:38
The credo is: "most likely good, is not good enough"
@alteducation :thumbsup:
alteducation
@alteducation
Oct 06 2017 17:57

@alpox i'm trrying to grab the data element of the button clicked

here is what i wrote

for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',function(e){
const openModal = document.querySelector(button[data-modal="${e.data('modal')}]");
console.log(openModal);
});

which is wrong
could you please help

Moisés Man
@moigithub
Oct 06 2017 18:01
whats ${e.data('modal')}? @alteducation
jQuery ? or template string ?
alteducation
@alteducation
Oct 06 2017 18:02
@moigithub i am trying to get the value of the data-modal attribute from a mouse click event
@moigithub how should i write it?
Moisés Man
@moigithub
Oct 06 2017 18:02
dunno. im asking what that above are :)
alteducation
@alteducation
Oct 06 2017 18:03
@moigithub that is es6 templating thats all i know :)
Moisés Man
@moigithub
Oct 06 2017 18:03
IF template string.. u should use backtick instead of quotes
alteducation
@alteducation
Oct 06 2017 18:04
@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
Oct 06 2017 18:07
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
Oct 06 2017 18:09
@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
Oct 06 2017 18:10
use dir instead of log
console.dir(e) OR console.dir(e.target)
it should show an arrow which u can expand
alteducation
@alteducation
Oct 06 2017 18:12
@moigithub that is a pretty big list
Moisés Man
@moigithub
Oct 06 2017 18:12
check if it have a data property
alteducation
@alteducation
Oct 06 2017 18:14
@moigithub thanks man we found it its e.target.dataset.modal
CamperBot
@camperbot
Oct 06 2017 18:14
alteducation sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3652 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Oct 06 2017 18:15
:+1:
alteducation
@alteducation
Oct 06 2017 18:54

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
Oct 06 2017 18:59

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
Oct 06 2017 18:59
@alteducation You should call openModal() in event callback
Is this Bootstrap modal or your own implementation?
alteducation
@alteducation
Oct 06 2017 19:00
@korzo my own implementation
korzo
@korzo
Oct 06 2017 19:01
@alteducation Then why not to pass openModal as a Event listener?
alteducation
@alteducation
Oct 06 2017 19:02
@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
Oct 06 2017 19:03
@alteducation Do you have more modals in document?
@alteducation I mean elements with .modal class
korzo
@korzo
Oct 06 2017 19:06
@alteducation then var closeBtn = document.querySelector('.close-post'); selects only first close button
alteducation
@alteducation
Oct 06 2017 19:07
@korzo should i create loop for close button? only one close button is displayed on page so i thought this would work
korzo
@korzo
Oct 06 2017 19:10
@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
Oct 06 2017 19:11
for(var i=0;i<closeBtn.length;i++){
closeBtn[i].addEventListener('click',closeModal);
}
this worked
korzo
@korzo
Oct 06 2017 19:12
@alteducation But I would say better approach is to listen for event on parent element, for example .posts-box
Kaz Baig
@kbaig
Oct 06 2017 19:12
Would appreciate some feedback on my first D3 chart! https://codepen.io/kbaig/pen/rGYYrm?editors=0010
alteducation
@alteducation
Oct 06 2017 19:12
@korzo i am new to js. could you explain how and why
korzo
@korzo
Oct 06 2017 19:13
@alteducation and if clicked element is .modal, open modal. If it's .close-post, close modal
alteducation
@alteducation
Oct 06 2017 19:14
@korzo will that open up respective modals according to the element?
korzo
@korzo
Oct 06 2017 19:14
@alteducation Yes, If clicked element is button, open closest modal
If it's close button, close parent modal
alteducation
@alteducation
Oct 06 2017 19:16
@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
Oct 06 2017 19:19
@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
Oct 06 2017 19:20
@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
Oct 06 2017 19:22
@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
Oct 06 2017 19:24
@korzo how can i change that. users will get confused.
korzo
@korzo
Oct 06 2017 19:25
@alteducation try modal[currentModalValue].focus() if this is current modal element
alteducation
@alteducation
Oct 06 2017 19:27
@korzo like this?
function openModal(){
  modal[currentModalValue].style.display = "block";
  modal[currentModalValue].focus();
  document.body.style.height ="100vh";
  $('.modal').scrollTop(0);

}
korzo
@korzo
Oct 06 2017 19:31
@alteducation Yes, but I'm not sure it will work. Never tried it on div, only form elements
alteducation
@alteducation
Oct 06 2017 19:33
@korzo no it doesnt work
alpox
@alpox
Oct 06 2017 20:09
@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
Oct 06 2017 22:12
@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