Pen: https://codepen.io/bencarp/pen/WpbEoj
As u can see by default the Online button is focused. I would like there to be an option to change and select the Offline button or search button, but that in any case one of the three buttons will be selected. At the moment when you click anywhere on the page the 3 buttons are not selected anymore. Any suggestions?
Also, I wanted to link the whole row for each channel. I decided to do that by using this code:
var aOpen = <a href="${basicUrl}${channelsData[i].name}">
var aClose =’'
let htmlh= <div class="row ${channelsData[i].stream}"> <div class="col-md-2 displayName">${aOpen}${channelsData[i].displayName}${aClose}</div> <div class="col-md-2">${aOpen}<img class="img-responsive" src=${channelsData[i].logoUrl}>${aClose}</div> <div class="col-md-8 bio">${aOpen}${channelsData[i].bio}${aClose}</div> </div>
Legitimate?
To have only one button focused in a button group, the answer is here http://getbootstrap.com/javascript/#buttons-checkbox-radio.
You have three links in each row, one for the title, one for the image, and one for the description. Remove those links and add only one link outside the div tag with the class row.
Let me know if it worked or if you need anymore help. 
Thank you Bhavik !
Your suggestion works. However, I’m currently receiving this error:
Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
I did import the Bootstrap JS library.
And also, I can’t get the functionality action I would like when clicking the offline button.
$('#offline').click(function(){
debugger;
$('.streamFalse').css('display', 'block')
$('.streamTrue').css('display', 'none')
})
Can you help?
THANKS, BEN
For the second problem, your buttons don’t have an id.
Edit: On the label tag, not on the input.
And for the first problem, Bootstrap 4 needs tether, so you need to include tether.min.js before you include bootstrap.min.js
Thanks Bhavik !
This again solved the problem. But how can I figure it out myself? Why should the id be on the label in order for the .click function to work?
Google can solve your problems because 99% of your problems will have already been asked somewhere. There will be a few results on Google that link to Stack Overflow which is extremely helpful and a must for every developer.
If you had copied and pasted the error, “Uncaught Error: Bootstrap tooltips require Tether” into Google, there would have a been a solution to fix your error so always search on Google before asking which will make it easier for you because you don’t have to wait for someone to reply.
I don’t really know how to explain why it should be on the label instead of the input but I’ll try my best. With click events and links, the selected id or class should be on the outer most html element of the button being clicked. Your button started with the label element, not with the input element, so the id should be on the label. I hope this makes sense. If I think of a better way of explaining, then I will come back and edit.
Thank you so much for your devotion !!
I do have a few follow up issues.
- One of the requirements is to present info about what is currently streaming. For each of the channels I send a Http request for the channels data and stream data. Unfortunately there is no additional data about the stream. Any suggestions?
- The last requirement is unclear:
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
What is brunofin?
It’s just the name of a twitch streamer, dude. Just mockup data for you to use and check if your project is working.
Yes as Gregory said, brunofin and comster404 are usernames of twitch accounts which have been closed.
Help!! Can anybody help me? I am using bootstrap.min.js in my web project. and I have this problem. On the page I use a Button as Menu button. When I press a button, a menu opens. Next when I click on the item of menu, the page scrolls to the selected item/page. If the the mentioned anchor is on the another page everything is ok, but when the page only scrolls down, the menu remains opened. And this the problem… is there possible to configure bootstrap.css to close the menu or have I to reprograme bootstrap.min.js to close it?
Thanks for help, I am only begginer in using css/js/jquery problematic.
https:/uploads/default/original/2X/4/470db50cc014204906db4a54e53a7442df544643.gif
Yes, it is possible. However, if you are just doing it to learn, I won’t waste time on it. It will be very easy to accomplish this when moving to newer technologies such as ReactJS.
Looking back I wouldn’t spend time trying to perfect projects in Bootstrap and JQuery. Also, your question might get more attention from the community if you post such a message in a new thread (instead of replying to an old thread).
Cheers.