These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Aug 2018
Stevie
@StevieBland
Aug 07 2018 01:29
Serious question, should i am 9 days into code, should i add beginner projects to my portfolio?
Slade
@Reaperoot_gitlab
Aug 07 2018 01:41
https://codepen.io/GRIMROOT/pen/rrdPEm via @CodePen im working on my home page and the linear gradient wont adjust with the height of the page. please help
looking at .25 view you will see what i mean
Ashan Mohammed
@AshanMohammed
Aug 07 2018 04:06
hey guys
How to make the navbar border to start from 0px left?
https://codepen.io/ashan_zeroxster/pen/EpeQzx?editors=1100
Ashan Mohammed
@AshanMohammed
Aug 07 2018 04:12
@newmoon Wow. It worked. Thanks mate :)
I finished the project "Build a Tribute Page"!Can my code become more better?
Barbara Pentoney
@flyfishingbarbara
Aug 07 2018 16:59
gmorn peeps- can i publish a pen on github..?? thns
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:09
Hello
I have a very tiny jquery question
just a bit confused
newmoon
@newmoon
Aug 07 2018 17:11
@A-Gallad what's the question?
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:12
@newmoon ..So its basically about using toggle function multiple times. let me get you code snippet
newmoon
@newmoon
Aug 07 2018 17:12
kk
image.png
@a90100 Small issue on medium screen size. Put your <ul> in a new row to fix it.
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:13
                                <button><i class="fa fa-chevron-down"></i> -1</button> 
                                <button id="showInput" class=" btn-success btn-sm"><i class="fa fa-edit"></i></button> 
                                <div class="qInputDiv"> 
                                    <input id="qInput" type="number" name="#"> <a class="btn btn-sm" id="qInputA" href="#"><i class="fa fa-check"></i></a> </div>
                                </td>
here is the html
```<script type="text/javascript">
                $("#showInput").click(function() {
                    $("#qInput").toggle();
                    $("#qInputA").toggle();
                });


            </script>```
so that works
I just have multiple buttons in a table, like in each row there is a button
so I want to create some sort of a helper function to use for all buttons
@newmoon
newmoon
@newmoon
Aug 07 2018 17:17
Okay, yeah, the showInput button currently toggles both items in your qInputDiv. What did you want the helper function to do?

You can simplify that jQuery, by the way:

$("#showInput").click(function() {
  $("#qInput, #qInputA").toggle();
});

Or use $(".qInputDiv").toggle(); to toggle the entire div that contains those two elements.

Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:20
Untitled.jpg
I didnt know that :D Thanks
ok so in that picture, I have these buttons with edit icons ..This is the showInput btn
when I click the first one(green) it works
and it toggles whats inside the div
but the other two don't work
I know thats because they have the same Id
Barbara Pentoney
@flyfishingbarbara
Aug 07 2018 17:23
hi peeps- a general ques.... can i have a "pen" from codepen on my github account...??
newmoon
@newmoon
Aug 07 2018 17:24
@flyfishingbarbara Quick answer, yes. :) there's an export button at the bottom, right of codepen. You then upload those files to github and create a gh-pages branch to view it as a website.
@A-Gallad Duplicate IDs will create problems, but I'm still not 100% clear on the goal of your helper function.
Can you share a codepen with your HTML?
Barbara Pentoney
@flyfishingbarbara
Aug 07 2018 17:25
@newmoon thnks! for info
newmoon
@newmoon
Aug 07 2018 17:36
@A-Gallad Without more HTML, it's hard to give exact code, but I'm guessing you want to look into .closest(), .next(), and .prev() in jQuery. For example: https://codepen.io/anon/pen/XBxKLj?editors=1010
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:36
@newmoon I want to know how can I make the rest of the buttons work not only the first one
<tbody>
                        <tr style="background-color: blue; color:white;">
                            <td colspan="5">
                                <button class="btn btn-link"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="#demo1">PEDO - Click to Expand
                                </button>
                            </td> 
                        </tr>


                        <tr id="demo1">
                            <th scope="row"><img src="https://placeholdit.co//i/50x50?"></th>
                            <td>MetaPaste</td>
                            <td>3</td>
                            <td>11</td>
                            <td>
                                <button><i class="fa fa-chevron-down"></i> -1</button> 
                                <button id="showInput" class=" btn-success btn-sm"><i class="fa fa-edit"></i></button> 
                                <div class="qInputDiv"> 
                                    <input id="qInput" type="number" name="#"> <a class="btn btn-sm" id="qInputA" href="#"><i class="fa fa-check"></i></a> </div>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><img src="https://placeholdit.co//i/50x50?"></th>
                                <td>Gloves</td>
                                <td>15</td>
                                <td>22</td>
                                <td><button><i class="fa fa-chevron-down"></i> -1</button> <button id="showInput" class=" btn-primary btn-sm"><i class="fa fa-edit"></i></button> <div class="qInputDiv"> <input id="qInput" type="number" name="#"> <a id="qInputA" href="#"><i class="fa fa-check"></i></a> </div>
                                </tr>
                                <tr>
                                    <th scope="row"><img src="https://placeholdit.co//i/50x50?"></th>
                                    <td>Suction</td>
                                    <td>30</td>
                                    <td>3</td>
                                    <td><button><i class="fa fa-chevron-down"></i> -1</button> <button id="showInput" class=" btn-primary btn-sm"><i class="fa fa-edit"></i></button> <div class="qInputDiv"> <input id="qInput" type="number" name="#"> <a id="qInputA" href="#"><i class="fa fa-check"></i></a> </div>
                                    </tr>
                                </tbody>
Im not using codepen for the time being sorry
thats the html
newmoon
@newmoon
Aug 07 2018 17:42
@A-Gallad Start by removing your duplicate IDs and replacing them with class names instead.
You can then use the code I gave above to toggle the next .qInputDiv
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 17:43
that makes perfect sense .... let me try :D Thank you very much
newmoon
@newmoon
Aug 07 2018 18:01
@A-Gallad I also just noticed, you have some missing </td> elements. Confirmed though, the code above should work fine. Codepen updated: https://codepen.io/anon/pen/XBxKLj?editors=0010
Ahmed Al-Gallad
@A-Gallad
Aug 07 2018 18:02
@newmoon thank you very much I really appreciate it :)
newmoon
@newmoon
Aug 07 2018 18:07
no problem :)
Barbara Pentoney
@flyfishingbarbara
Aug 07 2018 18:18
@newmoon thnks for reply to a inquery about the diff between using the id attribute and the value attribute. so you are saying if i want to do anthing js related to those radio buttons i would need the value attribute...?? correct? thns again!
newmoon
@newmoon
Aug 07 2018 18:39
@flyfishingbarbara value attribute tells us what the value of those radio buttons are - there are lots of other ways to do it too, but the value attribute is probably the most common way.
name attribute is another way, or custom data- attributes if desired
glitz20
@glitz20
Aug 07 2018 18:46
I want to show the content only if a user is logged in in react. Any tutorials, guide on that?
Connor
@cresharper
Aug 07 2018 19:13
How do you get owl carousel working with ULs?
I was under the impression that this would make 3 columns of lists, then have the slider slide by 3 but everything is in one column and everything slides away. What am I doing wrong?
Moisés Man
@moigithub
Aug 07 2018 19:18
did u checked the documentation ? /demos @cresharper (never used)
"You don't need any special markup. All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element <div class="owl-carousel">. "
my div is #main
div name/class/id is irrelevant
Christopher McCormack
@cmccormack
Aug 07 2018 19:29
@cresharper works fine if you follow the directions you just posted:
<div id="menu" class="owl-carousel">
Mark Kubik
@KUBIX90
Aug 07 2018 19:58
Hi
Can someone please explain why my imgIndex value returns as undefined?
Christopher McCormack
@cmccormack
Aug 07 2018 19:59
@KUBIX90 not without seeing your html
@KUBIX90 you're using classes as your selector, sure you don't want querySelectorAll?
Mark Kubik
@KUBIX90
Aug 07 2018 20:00
@cmccormack hmm hold on may have spotted something will come back in a bit
@cmccormack Would I not have to loop through the array if i used querySelectorAll?
Christopher McCormack
@cmccormack
Aug 07 2018 20:03
@KUBIX90 yeah
@KUBIX90 but if you're using classes I imagine you would have more than one of that element
if you ever move something around in html you could accidentally break your whole app. If you only have a single item you may want to use id instead
newmoon
@newmoon
Aug 07 2018 20:07
@KUBIX90 Put it in a codepen please
Christopher McCormack
@cmccormack
Aug 07 2018 20:08
@KUBIX90 no? not sure what exactly you mean
Mark Kubik
@KUBIX90
Aug 07 2018 20:08
I may have solved it, just going to try something. Apologies for the mess. I usually put stuff in codepen, but can't get it working atm
Deleted the post to make the feed a bit clearer
Pagnito
@Pagnito
Aug 07 2018 21:24
I have a question. If i have a client, do i create a hosting account for them which they will pay for? and then upload the site on there? this is for simple webpages
Kudzu
@czhower
Aug 07 2018 22:09
Depends totally on the arrangment with your client.