These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Mar 2018
Gulsvi
@gulsvi
Mar 20 2018 00:36
@TeejayParker Are you calling the playVideo() function in your code?
Seems to work fine with this video: https://s.codepen.io/anon/pen/wmgdEO?editors=0011
Gulsvi
@gulsvi
Mar 20 2018 00:44
@Donnie-D I used weather underground for my project, also tried Dark Sky, and Open Weather Map. Weather Underground is a great option, but for simplicity, you may want to use the one recommended for the weather project since it doesn't need an API Key - it's a mirror of Open Weather Map. https://fcc-weather-api.glitch.me/
Donnie
@Donnie-D
Mar 20 2018 00:52
@gulsvi thnx bud but fcc api seems to be a bit dysfunctional in places to me. e.g, icon etc.
CamperBot
@camperbot
Mar 20 2018 00:52
donnie-d sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2678 | @gulsvi |http://www.freecodecamp.org/gulsvi
Norvin Burrus
@ndburrus
Mar 20 2018 01:04
@dardandmr what version of bootstrap are you using?
Dardan Demiri
@dardandmr
Mar 20 2018 01:47
4
inder
@nohoesinder_twitter
Mar 20 2018 02:31
Can someone plz help me Im trying to scroll down my followers list on www.holonis.com with this window.scrollTo(0,document.body.scrollHeight); but it does not work.
Tom
@moT01
Mar 20 2018 03:00
@nohoesinder_twitter maybe add a listener
not sure what you're trying to do
coderNewby
@coderNewby
Mar 20 2018 04:43
no worries @DarrenfJ on the late replies it's always a help anyway thanks
CamperBot
@camperbot
Mar 20 2018 04:43
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2429 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Mar 20 2018 04:44
@coderNewby i'm online now will check it out thanks
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 09:58
Hello , I downloaded a bootstrap template to work on it. I want to remove the icon in the title bar but I can't
LydaTech
@lydatech
Mar 20 2018 10:01
@WatashiHatem_twitter cant help if you cant see the code
@WatashiHatem_twitter put it in a pen
@WatashiHatem_twitter or a link to the template
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:05
How can I make it look like html code
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 20 2018 10:06
@WatashiHatem_twitter It's best to make a pen of it in codepen
kerafyrm02
@kerafyrm02
Mar 20 2018 10:08
Anyone need help? I'm not here long--
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 20 2018 10:09
image.png
@WatashiHatem_twitter
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:15

| <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Hatem Araar CV </title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/devicons/css/devicons.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/resume.min.css" rel="stylesheet">

</head>

LydaTech
@lydatech
Mar 20 2018 10:16
@WatashiHatem_twitter none of that will help remove an icon. What template are you using
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:16
the template for CV
I'm still a beginner
kerafyrm02
@kerafyrm02
Mar 20 2018 10:17
$(".name_of_class_of_icon").remove();
LydaTech
@lydatech
Mar 20 2018 10:17
@WatashiHatem_twitter ok last time im going to ask. Either put the template into a pen or send the link to where you downloaded the template
kerafyrm02
@kerafyrm02
Mar 20 2018 10:17
or
$("#name_of_id_of_icon").remove();
or
kerafyrm02
@kerafyrm02
Mar 20 2018 10:18
$(".name_of_class_of_icon").hide();
LydaTech
@lydatech
Mar 20 2018 10:18
@WatashiHatem_twitter what icon do you want removed?
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:20
the icon in the title bar @lydatech
LydaTech
@lydatech
Mar 20 2018 10:20
@WatashiHatem_twitter the photo?
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:21
in the new tab next to the title
blob
I get this icon
blob
LydaTech
@lydatech
Mar 20 2018 10:23
@WatashiHatem_twitter i dont see where that would popup. Youve downloaded the template and opened it in your browser and thats what you see?
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:24
yes
kerafyrm02
@kerafyrm02
Mar 20 2018 10:25
i dont see that icon either lol
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:26
okay i will try to find the prob just tell me how to use codepen to copy code here
kerafyrm02
@kerafyrm02
Mar 20 2018 10:26
copy link to page
dont need codepen
LydaTech
@lydatech
Mar 20 2018 10:27
@WatashiHatem_twitter the issue isnt with the code. Its either in your editor or something youve added
Screen Shot 2018-03-20 at 3.27.54 AM.png
Where do you see that icon at on this page?
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:36
I fixed it thanks
LydaTech
@lydatech
Mar 20 2018 10:38
@WatashiHatem_twitter what was it?
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:38
I just redownloaded the template
kerafyrm02
@kerafyrm02
Mar 20 2018 10:40
lol
Hatem Araar
@WatashiHatem_twitter
Mar 20 2018 10:42
do you have any websites in which i can find free bootstrap templates
Liam Docherty
@ldocherty1
Mar 20 2018 10:43

Problem:

How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1

What I have tried:

HTML

<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
    <a class="navbar-brand" href="#">Front End Web Developer</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#features-icons">Expectations</a>
            </li>
            <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
            </li>
            <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.navbar {
    display: none;
}

JS

$("body, html").on("scroll", function() {
    var features_top = $("#features-icon").position().top;
    var top_of_window = $(window).scrollTop();
    if (top_of_window >= features_top) {
        $(".navbar").show();
    } else {
        $(".navbar").hide();
    }
});
Fabien SHAN
@X140hu4
Mar 20 2018 11:02
@ldocherty1 Get the height of the home section, detect where your viewport is relative to the home section, modify the opacity of the navbar?
Norvin Burrus
@ndburrus
Mar 20 2018 11:24
Sajid Unar
@sajidunnar
Mar 20 2018 11:57
Hey guys do u know any Jquery lib or plugin for TABS or Steps ,which effects on url as well
Dardan Demiri
@dardandmr
Mar 20 2018 12:05
@sajidunnar What do you mean with steps
@sajidunnar
<!-- Nav tabs -->
  <ul class="nav nav-tabs" id="navId">
    <li class="nav-item">
      <a href="#tab1Id" class="nav-link active">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#tab2Id">Action</a>
        <a class="dropdown-item" href="#tab3Id">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#tab4Id">Action</a>
      </div>
    </li>
    <li class="nav-item">
      <a href="#tab5Id" class="nav-link">Another link</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link disabled">Disabled</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tab1Id" role="tabpanel"></div>
    <div class="tab-pane fade" id="tab2Id" role="tabpanel"></div>
    <div class="tab-pane fade" id="tab3Id" role="tabpanel"></div>
    <div class="tab-pane fade" id="tab4Id" role="tabpanel"></div>
    <div class="tab-pane fade" id="tab5Id" role="tabpanel"></div>
  </div>

  <script>
    $('#navId a').click(e => {
      e.preventDefault();
      $(this).tab('show');
    });
  </script>
Sajid Unar
@sajidunnar
Mar 20 2018 12:08
@dardandmr lets say I have tabs with doctors , engeers , so myurl.com/doctors so it open doctors tab
Dardan Demiri
@dardandmr
Mar 20 2018 12:12
That's what I sent you works for that
Sajid Unar
@sajidunnar
Mar 20 2018 12:12
would it change the url ?
Dardan Demiri
@dardandmr
Mar 20 2018 12:13
ah you want to open it in another chrome tab ?
Sajid Unar
@sajidunnar
Mar 20 2018 12:13
yes
Dardan Demiri
@dardandmr
Mar 20 2018 12:13
aaaah
<a href="https://www.myurl.com/doctors/" target="_blank">Doctors</a>
This link opens a new tab
Just by adding the target
Sajid Unar
@sajidunnar
Mar 20 2018 12:14
No no man
u not gettign it
Dardan Demiri
@dardandmr
Mar 20 2018 12:15
Or you are not explaining it :P
Sajid Unar
@sajidunnar
Mar 20 2018 12:15
I have tabs , my current state is dodctors tab is open
Dardan Demiri
@dardandmr
Mar 20 2018 12:15
yes
Sajid Unar
@sajidunnar
Mar 20 2018 12:15
if open link like this https://www.myurl.com/doctors/ it would open my tab of dcoctors
Dardan Demiri
@dardandmr
Mar 20 2018 12:16
can you make a screenshot
Sajid Unar
@sajidunnar
Mar 20 2018 12:16
give me some time , need to create basic example firest
thanks for help
Dardan Demiri
@dardandmr
Mar 20 2018 12:18
Try this and tell me if this is what you think
https://www.w3schools.com/howto/howto_js_tabs.asp
Dardan Demiri
@dardandmr
Mar 20 2018 12:28
@sajidunnar
i needed this
thanks
gulptech
@gulptech
Mar 20 2018 12:35
@sajidunnar just add a #idName to the link at the end…it should open the tab
LydaTech
@lydatech
Mar 20 2018 15:20
@sajidunnar you could use an iframe
@sajidunnar youre also using a really old version of bootstrap
okeay dokey. No response... time to move on
Spyrantis Theodoros
@thodorisanta
Mar 20 2018 16:09
How do you decide and what difference does it make to either make your navbar elements a "list": li or ""links: aor something else?
Fabien SHAN
@X140hu4
Mar 20 2018 16:11
@thodorisanta li is a block level element, a is a inline element. Styling will be a bit different
Spyrantis Theodoros
@thodorisanta
Mar 20 2018 16:13
@X140hu4 but how do you decide which one to use? Or it doesnt make a difference?
Lev Karatun
@lkaratun
Mar 20 2018 16:14
li makes the items appear above one another I believe. Also you have to use "a" if you want them to be clickable
Fabien SHAN
@X140hu4
Mar 20 2018 16:14
I would say it doesn't really. Maybe semantically it makes more sense to use a list (of link) than a bunch of link elements in a div?
gulptech
@gulptech
Mar 20 2018 16:14
@thodorisanta ‘li' will not point to anything…clicking on them will not do anything unless you use javascript
Spyrantis Theodoros
@thodorisanta
Mar 20 2018 16:15
@gulptech yeah you can then put <a> inside it. but whats the best thing to use for a navbar?
gulptech
@gulptech
Mar 20 2018 16:17
@thodorisanta that is uing an a element..the li is not clickable for navigation
using ul/li it not really needed…you can use divs, etc
LydaTech
@lydatech
Mar 20 2018 16:17
@thodorisanta in html5 go list-less
@thodorisanta semantics, accessibility, and screen readers handle listless navs much cleaner
gulptech
@gulptech
Mar 20 2018 16:18
the old standard was if it is a list of items…make it a list
LydaTech
@lydatech
Mar 20 2018 16:18
@thodorisanta try to keep ARIA in mind while you code
Lev Karatun
@lkaratun
Mar 20 2018 16:22
what's ARIA?
Lev Karatun
@lkaratun
Mar 20 2018 16:29
tnx
Ismail Hozain
@ismailhozain
Mar 20 2018 17:12
hey yo folks i got to use grid to have my image by my text, how can I do that .It is not working too well https://codepen.io/ismailhozain/pen/vRXJwd?editors=0100
catshark
@catshark
Mar 20 2018 17:23
Hi folks, did anyone else have problems playing the simon sounds provided in the simon game assignment on chrome? They work fine on firefox
Sorin Ruse
@sorinr
Mar 20 2018 17:35
@ismailhozain your css should be like:
.aboutdiv {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas: 
   "image text";
}
.abouttext {
  color:black;
  font-family:$thirdfont;
  font-size:24px;
  grid-area:text;
  justify-self: center;
}
.aboutimage {
  grid-area:image;
  justify-self: center;
}
Nate Mallison
@NJM8
Mar 20 2018 17:38
Hello, can anyone help with some button coloring? I am trying to find out the hover color of a bootstrap button to use it in other elements to match but the dev console doesn't show any changes when I hover over the button
Stephen James
@sjames1958gm
Mar 20 2018 17:39
@NJM8 I believe that you can use devtools to set the hover state on an element
@NJM8 There is a :hov button near the top of the styles tab
Nate Mallison
@NJM8
Mar 20 2018 17:42
Thanks @sjames1958gm I got it. Found the toggle states, hover button
CamperBot
@camperbot
Mar 20 2018 17:42
njm8 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9120 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Nate Mallison
@NJM8
Mar 20 2018 17:43
I did my wikipedia viewer pure css and js, now doing twitch tv with bootstrap and again I find myself spending more time google how to use bootstrap and not really learning anything.
may as well just make it all from scratch
Nate Mallison
@NJM8
Mar 20 2018 17:58
I have a question on my twitch tv project.
The buttons are not going back to their unclicked state after clicking them
ninja is currently streaming, click on his channel from the dropdown then click the link to open the channel on twitch, when you come back to my page it still displays the tooltip and clicked styling
Nate Mallison
@NJM8
Mar 20 2018 18:08
My other question is why the top header does not stay responsive. As it collapses the buttons crowd over each other. I used the same row classes for bootstrap flexbox as I did here: https://www.natethedev.com/FreeCodeCampFrontEndProjects/localWeather/
but it doesn't work
maybe because the twitch tv page uses divs?
Ken Haduch
@khaduch
Mar 20 2018 18:27
@NJM8 - your first question is puzzling - I'm wondering if the events are focus, focusin and focusout, and when it switches the tab to the new tab that it doesn't fire the focusout event? It's so hard to tell exactly what's going on because it seems that the slightest movement on the page sometimes makes it drop the tooltip?
Ken Haduch
@khaduch
Mar 20 2018 18:49
@NJM8 - it looks like you used bootstrap 4 beta-2 on your weather page? Maybe something changed?
Nate Mallison
@NJM8
Mar 20 2018 19:09
@khaduch thanks I fixed the layout stuff. seems silly but it was a struggle to use the bootstrap flex system to get what I want
CamperBot
@camperbot
Mar 20 2018 19:09
njm8 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3808 | @khaduch |http://www.freecodecamp.org/khaduch
Nate Mallison
@NJM8
Mar 20 2018 19:11
I just used the bootstrap flex system inside the containers and then normal css flex for the whole page containers, so I could get the sticky footer to work. IDK why they try to make things so easy in bootstrap but it isn't that way.
Neil
@NNeil1
Mar 20 2018 20:19
Is there anyway I can target "From" via CSS or with a function, without touching the HTML? I need it hidden on a certain page. : https://codepen.io/therighttwo/pen/ZxeByd
Ken Haduch
@khaduch
Mar 20 2018 20:32
@NNeil1 - what do you want to hide - just the word "From:" or the entire paragraph?
Neil
@NNeil1
Mar 20 2018 20:32
Just From:
Ken Haduch
@khaduch
Mar 20 2018 20:33
I don't think so - without any special markup just for that word, I don't know how you can hide just part of the contents of that paragraph?
but let's think about it for a bit...
Neil
@NNeil1
Mar 20 2018 20:38
ya been trying to figure it out for a while now
Ken Haduch
@khaduch
Mar 20 2018 20:40
I'm not sure exactly what you need. Why can't you change the HTML? I have something that will hide the text... I'll post it here, but it is very specific to this case - if other things on the page, then it will be a problem.
Neil
@NNeil1
Mar 20 2018 20:41
Because I'm actually using WordPress, and it's written in PHP the template. Author of the theme, doesn't provide support for customization
Ken Haduch
@khaduch
Mar 20 2018 20:42

@NNeil1 - here is a CSS snippet that just changes the paragraph color to something invisible, so the space for the word is still there, just not seen against the white background. Then set the other elements to have a black color for the text:

p {
  color: rgba(0,0,0,0);
}
ins {
  color: black;
}
del {
  color: black;
}

But it will affect all <p> elements on the page, so maybe it won't work.

How about using javascript?
Neil
@NNeil1
Mar 20 2018 20:42
I'm using a function to replace - with From: , so I'm trying to figure out a way to apply the class to From: with the function now. Maybe this might bring me some joy
JS is fine yeah, not to go with that D:
not to good*
Ken Haduch
@khaduch
Mar 20 2018 20:43
with JS you should be able to modify the inner HTML for that element and just delete the word "From:"?
Neil
@NNeil1
Mar 20 2018 20:44
Yeah I didn't think about JS. Just having some food and then checking it out. I'll let you know how I get on
appreciate the help, thanks @khaduch
CamperBot
@camperbot
Mar 20 2018 20:44
nneil1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3809 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Mar 20 2018 20:58
@NNeil1 - I made a fork of your pen with a really simple JS loop to change the text in that paragraph from "From:" to "FROM:". You could use it for an idea of how to do some manipulation.
Neil
@NNeil1
Mar 20 2018 21:02
Awesome. changing it to nothing, works great!
Gulsvi
@gulsvi
Mar 20 2018 22:17
@NJM8 All HTML buttons will remain in a focused state after they are clicked. You can use .blur() in JavaScript to remove their focus on click:
document.getElementById("myButton").onclick = e => e.target.blur();
Since you're using bootstrap, another alternative is to use a hyperlink instead of a button and style it like a button with the btn class
Gulsvi
@gulsvi
Mar 20 2018 22:23
@Donnie-D Did you get your icons sorted? The FCC Weather API does include an icon code that can be used to create an url to an icon image - it's the Open Weather Map API under the hood, documentation for the icons here: https://openweathermap.org/weather-conditions#How-to-get-icon-URL
So, icon code 09d would end up getting used in a URL like: http://openweathermap.org/img/w/09d.png
(09d.png at the end)
Nate Mallison
@NJM8
Mar 20 2018 23:57
@gulsvi That's why I'm confused, I am using a hyperlink styled like a button. :smile:
    let $display = $('<a>', {
      class: 'btn m-1 results',
      'data-toggle': 'tooltip',
      'data-placement': 'left', 
      title: `Visit ${query} on Twitch TV`,
      href: `https://www.twitch.tv/${query}`, 
      role: 'button', 
      target: '_blank',
      rel: 'noopener'
    });