These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Aug 2018
Smootimus
@Smootimus
Aug 17 2018 00:12
:wave:
Donnie
@Donnie-D
Aug 17 2018 10:54
I have designed this page to be mobile friendly :confused: but when I check on mobile devices, it shows as a desktop layout and very tiny. What am I missing? :confounded:
https://s.codepen.io/Donnie-D/debug/EpgbvM/XBkGRZZaPzyA
Dhaval Vira
@dhavalveera
Aug 17 2018 10:55
have you used Media Queries ? @Donnie-D
Donnie
@Donnie-D
Aug 17 2018 10:55
@dhavalveera yup
@dhavalveera could you figure out the issue?
Dmytro Holysh
@dmk1111
Aug 17 2018 11:03
@Donnie-D it works properly if you resize window. Try to do this locally on your environment, as codepen is using iframe, so you could have issues because of that
debug.PNG
Donnie
@Donnie-D
Aug 17 2018 11:22
@dmk1111 On my laptop when i resize the window, it behaves as expected. The trouble is when I open the link in a mobile device, it opens up as a desktop view and not in a mobile view
Could this be a problem with the codepen or is there some meta tag or some other trick I need to add to my code?
Dmytro Holysh
@dmk1111
Aug 17 2018 11:25
It is better to upload it to GitHub pages and check from there
Donnie
@Donnie-D
Aug 17 2018 11:26
@dmk1111 Its a shame to admit but I havent learnt how to use github yet :hear_no_evil:
Dmytro Holysh
@dmk1111
Aug 17 2018 11:27
@Donnie-D I guess it is high time to learn it :)
Donnie
@Donnie-D
Aug 17 2018 11:27
@dmk1111 is youtube a good source?
Dmytro Holysh
@dmk1111
Aug 17 2018 11:27
not really
Donnie
@Donnie-D
Aug 17 2018 11:32
wow
thanks. i better crack on then :smiley_cat:
niniyzni
@niniyzni
Aug 17 2018 15:20
hi,
  • I am trying to learn js
  • can you tell me why its printing as 4, 3, 3.
  • can you please help
function f() {
  this.x = 3;
  (function() {
    this.x = 4;
  })();
  console.log(this.x); 
}

// what will be written in the console and why
f(); // output--->4
new f(); // output---> 3
f.apply(f) // output---> 3
obj.m.apply(f); // how to solve undefined error
Brad
@bradtaniguchi
Aug 17 2018 16:56
mainly due to the inner function: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
Aditya
@ezioda004
Aug 17 2018 17:31

@niniyzni A brief explanation:
1 f(); // 4 This outputs 4 because when executed this.x = 3 this will refer to the global object (window) which is the default binding for this, and inside IIFE this will also refer to the window object. So this.x = 3 gets overwritten by this.x = 4 therefore the output is 4.

2 new f(); // 3 This outputs 3 because because when theres a new keyword before function it acts as a function constructor and this inside the function constructor will refer to the newly created object. However IIFE's this again points to the windows object because of default binding. So as mentioned this inside function constructor will point to the newly created object. That's why console.log(this.x); is equal to 3. However window.x is equal to 4 like in the 1st example.
3 f.apply(f) // 3 This ones a bit tricky. .apply() first argument is what the function's this will point to. In this case f's this is point to f and the argument in the .apply() is used as an object rather as a function.
In this case, since f is treated as an object, a new property on the function f is created and its assigned the value 3. And as before IIFE still points to the window object.
This can be verified by modifying the code a bit.

function f() {
  this.x = 3;
  (function() {
    this.x = 4;
  })();
  console.log(this.x); 
  return f; // <---- modified code
}
let fCopy = f.apply(f);
fCopy.x; // 3
window.x; //4

4 I have no clue what inside .m is so dont know.

Fabusuyi David Oluwasegun
@dav4thevid
Aug 17 2018 17:46

hello everyone currently on #Applied Visual Design: Create a Horizontal Line Using the hr Element i just dont understand why my code is not passing.....here is my code var code = "

<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s><Google</s>Alphabet</h4>
<hr> </hr>

  <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">" help anyone please
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s><Google</s>Alphabet</h4>
<hr> </hr>
  <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s><Google</s>Alphabet</h4>
<hr> </hr>
  <p><em>
Christopher McCormack
@cmccormack
Aug 17 2018 18:07
@dav4thevid I think it's just <hr/>, a self-closing tag, but can you link the problem?
newmoon
@newmoon
Aug 17 2018 18:11
@dav4thevid This is a known issue: freeCodeCamp/freeCodeCamp#17944
You can get the test to pass by putting the <em> tags outside of the <p> tags
And, yeah, use <hr /> like Christopher says :)
Fabusuyi David Oluwasegun
@dav4thevid
Aug 17 2018 18:21
@newmoon @cmccormack thanks guy its works
@cmccormack @newmoon thanks #guys
Christopher McCormack
@cmccormack
Aug 17 2018 18:22
np
Donnie
@Donnie-D
Aug 17 2018 18:28
I wanted to create a 'go to top' button using css in a webpage. I wanted the button to appear once I scroll down from the page top only. I have looked up and the few examples I saw use JS. Isn't there a way without JS? I really thought CSS sticky would do the job. I would really like to know why sticky doesn't do it. Since from what I know about sticky, it operates as a relatively positioned element until reached its specified offset and there on its fixed. I haven't yet created the link to make the page to scroll back to the top once clicked on the button as I am stuck on positioning my arrow at the moment. Any ideas?
https://jsbin.com/gehexurepa/edit?html,css,output
Christopher McCormack
@cmccormack
Aug 17 2018 18:30
@Donnie-D I"m not too sure but I thought sticky was for the top, so if you wanted something to stick to the bottom you might need JS
Donnie
@Donnie-D
Aug 17 2018 18:31
@cmccormack I did wonder about this possibility too. Just kinda need a solid answer for fututre uses whether thats the case
Unfortunately so far I couldn't find this answer on any article on web i.e., MDN or W3S etc.
Christopher McCormack
@cmccormack
Aug 17 2018 18:33
@Donnie-D fortunately it's a convenience only so if the user for some reason doesn't have JS the site can still work, maybe hide it if they don't
I'm also not sure how you would hide it then show it without using JS to detect scroll position
but there may be some better qualified people in this room that can help :)
Donnie
@Donnie-D
Aug 17 2018 18:39
@cmccormack :thumbsup:
But I gotta find out the reply to whether sticky only operates from top only or not as well. So ....Y'all.... are welcome to look into it :laughing:
newmoon
@newmoon
Aug 17 2018 18:43
@Donnie-D Yeah, you'll need JavaScript to detect scroll position if you want to hide/show based on how far you are down the page. position: sticky works with top, bottom, left, or right. The idea is that it sticks to a specific location as you scroll past that location. Here's a sticky bottom example: http://codepen.io/corysimmons/pen/QyBMXN?editors=1100
Donnie
@Donnie-D
Aug 17 2018 18:50

@newmoon

@Donnie-D position: sticky works with top, bottom, left, or right. The idea is that it sticks to a specific location as you scroll past that location.

cheers but the sheer difference between what you explained nicely and what I wanted to know about was that ...
lets say the page loads and the sticky element is a child of another element if need be. And that element is somewhere down enough so the content is not visible yet. Now soon when the element's content starts to appear the sticky comes up as well and sticks to the bottom right corner of the page for the rest of the scrolling down process
newmoon
@newmoon
Aug 17 2018 19:01
@Donnie-D Sticky will only stick inside it's parent container unfortunately
No way to have it stick to the bottom right of the page after a specific element becomes visible. It can stick inside that element though, once it becomes visible and we scroll past. As we scroll past, however, it will keep stuck to that element as it moves up the screen.
It's a few lines of code I think with JS - nothing too complicated in case that's a concern with using jQuery or JavaScript to achieve this functionality.
Donnie
@Donnie-D
Aug 17 2018 20:21

@newmoon :confounded: sorry i am a little confused regarding your explanation. They seem to be two conflicting statements. You said No way to have it stick to the bottom right of the page after a specific element becomes visible . And then you said that It can stick inside that element though, once it becomes visible and we scroll past. Do you mean once that element becomes visible, then this div can stick inside that element? because what your second statement implies is sort of something I am after. That may be I can put my sticky div inside another div(lets call the outer div 'outer-one'). The outer-one can be somewhere well down the page when the page loads. Now when I scroll down and reach the outer-one, the sticky div inside the outer-one becomes visible.

Obviously I am wrong somewhere because its not working when I try this, which leads to make me think that sticky perhaps only works from top of the page. i.e., when the page loads, we can have an element as sticky in the viewport in the initial view. This element would stick to its offsets for the rest of the time we are in that container. If there is another sticky with the same offsets in the next container then that would replace the previous sticky element.

To sum this issue up, in my findings so far, there is no way using HTML and CSS only that we could position an element somewhere down the page and not visible yet but upon scrolling down and away from the top of the page that element becomes visible and stuck to a certain point in the page. (sorry for writing a long winded detail, just want to clear things)

newmoon
@newmoon
Aug 17 2018 20:24
@Donnie-D Long story short - you need javascript to do what you are attempting. position: sticky will only apply to an element's parent container, so you can't use position: sticky to stick something to the bottom of the window after scrolling down a bit on the page.
I think if you create a codepen and play around with it some more, it will become more apparent
Donnie
@Donnie-D
Aug 17 2018 20:26
been doing this for last 3 hours. been reading as well but still unable to find an answer in a nutshell
https://codepen.io/Donnie-D/pen/xJNYKK?editors=1100
did it on a few different online editors because sometimes they all have their own technical problems going on so one cannot be sure whether its the code or the editor messing about
@newmoon but thanks for showing interest to this case. Appreciated!
newmoon
@newmoon
Aug 17 2018 20:37
@Donnie-D In that codepen, you have the arrow stuck to the bottom of the section it is in. Move the arrow so the <main> element has the arrow, and it will be stuck to the bottom of your <main> element. Now, have something above your <main> element that is more than 100vh tall, and your arrow will be out of sight until <main> is scrolled into view.
That should explain how position: sticky and parent elements work
Christopher McCormack
@cmccormack
Aug 17 2018 21:06
@newmoon that's pretty cool, so it's not top or bottom but just contained within the element and viewport
newmoon
@newmoon
Aug 17 2018 21:13
@cmccormack yes, contained within the element. We could move the arrow div up to the top of <main> and change the css from bottom: 20px to top: 20px to have it sticky to the top instead.
Pretty cool feature - not supported still on mobile though I think
Scratch that, looks like mobile is in with some caveats for sticky headers in tables: https://caniuse.com/#feat=css-sticky
Christopher McCormack
@cmccormack
Aug 17 2018 21:20
I like the feature, the examples w3c use are great, sticky section headers are great
it can easily build breadcrumbs of sorts as well