We Keep Coding

Making HTML Bootstrap elements dynamic using JQuery + React?

I'm completely new to web development so please put up with me, haha.
Here's a brief description of what I'm trying to do:
Make a webpage in HTML, using Bootstrap, that displays lists of items (in the form of a group of Checkboxes, Labels, etc)
Using a combination of JQuery and React, make these elements dynamic.
Now here's a gist of how I'm currently trying to accomplish it.
Example list
<ul class="list-group" id="PortfolioListOfStocks" >
<li class="list-group-item" id="stockTicker0">1</li>
<li class="list-group-item" id="stockTicker1">2</li>
<li class="list-group-item" id="stockTicker2">3</li>
<li class="list-group-item" id="stockTicker3">4</li>
<li class="list-group-item" id="stockTicker4">5</li>
</ul>
I can statically access and edit a set number of these checkboxes (which are going to be tickers) with this react code. Tickers is just an array of Ticker objects, which are just being treated as strings right now:
render: function () {
for (var i=0; i < this.state.tickers.length; i++) {
document.getElementById("stockTicker"+i).innerHTML = this.state.tickers[i];
}
return null;
}
So I can edit and access the checkboxes, great! BUT the problem I'm having is how to start with 0 checkboxes, and only add in checkboxes when needed, and delete checkboxes when not needed, based on the length of the array. So when size = 3, just 3 elements, but when size = 15, a scrollable box of the 15.
I know I can use JQuery/JS to add checkboxes, which can easily be called. It would look something like this
$('#addCheckbox').click(function() {
var text = $('#newCheckText').val();
$('#cblist').append('<input type="checkbox" id = "changeThis" /> ' + text + '<br />');
});
But the problem with this is that I'm not able to create the elements with the Bootstrap format, the checkboxes aren't aligned (they look something like the image below), and the Bootstrap theme is not preserved. I tried to use CSS but it wasn't working out for me.
So overall takeaway, how do I make the number of items present based on the length of the array? I'm really just struggling with the interconnection between HTML and script. Thanks for reading!!

The following should work:
render: function () {
var tickerGroupItems = this.state.tickers.map(function(ticker){
return <li key={ticker.id} className='list-group-item' id={'stockTicker' + ticker.id}>{ticker.name}</li>
});
return(
<ul className="list-group" id="PortfolioListOfStocks" >
{tickerGroupItems}
</ul>
);
}

advanced jquery loop to hide nav

So I doubt this is advanced jquery, but for me it is since I literally just learned it this week. I wrote everything I need actually on here my only problem is, and I know it's because I am new to jquery, but when you click menu, then any one of the nav options, then back, it's not hiding the content or hiding the nav when content is present, even though I wrote it so it should (it works only one time, and since I am new I know this is why, something wrong with my syntax). Any suggestions?
HTML
<script>
$(document).ready(function () {
//$('ul:first').hide();
//$('ul li').hide();
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
/*('h1>').click(function (event) {
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('h1').hide();
});*/
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
$('a.bck').click(function() {
var $aAside = $('aside');
$aAside.animate({
left: 300})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10})
return false;
}); //closes bck click
}); //closes .ready()
</script>
</head>
<body>
<h1 class="menu"><a class="btnDown" href="#"> Main Menu </a></h1>
<nav class="navBar" >
<li><a class="menuShow" href="#"> Assignment 6 </a></li>
<ul>
<li><a class="contentDown" href="#" > Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<h2 id="round"><a class="bck" href="#"> Back </a></h2>
<aside>
<ul>
<li> Interactive media has been apart of my life since as long as I can remember. I have always been fascinated with any form of media including television, video games, handheld games, or websites. However before attending school to study interactive media, I never noticed the little things that can really affect the experience for a user. One item in particular being diegetic elements. Diegetic elements are objects within a media that only the user knows about. For instance, in a video game a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining. These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. We have also been exposed to 'non-diegetic' elements that act just the opposite of diegetic ones. Non-diegetic elements are items inside interactivity that are supposed to be there. This is a way of implementing a diegetic element into the space of the world you create. For example, a non-diegetic element would be the ammo bar being placed on the gun, instead of a static bar on the side of the screen. Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element. </li>
</ul>
<ul>
<li> One ways people have done this is throwing elements in the world that would be believable to the player that they should be there. Instead of throwing a sidebar with your gun ammo and grenade count, it would make sense if a game is placed in modern-time that we would have technology available to put that information on the gun. One of the biggest examples of great uses of non-diegetic elements in the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red, or your player begins to lose the ability to act normal when they are under fire. Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves. The problem is that you can have too much non-diegetic presence that would confuse the user instead of help them which was originally intended. Resident Evil received a lot of harsh criticism for their lack of diegetic presence to help the player finish the game. It was hard for the user to be able to tell when the character was going to die based on their health system. If you received damage your character will hunch over, but it's unclear how much damage you're taking. The user will often die </li>
</ul>
<ul>
<li> without knowing whether or not you should have died, as opposed to a health bar that would show you. Contrary to too much non-diegetic presence, is too much diegetic elements. In titles such as World of Warcraft, or League of Legends, some are simply overwhelmed by the fact that half of the screen is objects that you are supposed to be aware of but until you learn the game they make as much sense as flying pigs. In conclusion, it is best to find that medium for any interactive media that has non-diegetic or diegetic elements. It is different for each occasion, for a first-person shooter the need for diegetic elements is acute, while in a complex game like World of Warcraft it is necessary. Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>

Browsed through your page a little bit and got: Uncaught ReferenceError: i is not defined
then, i noticed, that you are not declaring i in $('nav>li').click(function () {, don't really understand your logics, since it is not working, but fix it.

You can easily use hide(). Ive updated the code (starred line) and now it works. Just an insert example to show how you'd select it, not optimized code.
$('a.bck').click(function() {
var $aAside = $('aside');
**$('aside>ul>li:visible').hide();**
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click

Rotating through divs (hide/fade in) with jQuery

I'm currently in the process of creating a news carousel. On the left panel i have the three titles of each news item, to the right i have an image associated with that news item, and in the bottom right i have three "navigational blocks" for each item.
In my example, when you click a link on the left, it will display the associated content in the larger right hand panel. This also applies for the navigational blocks in the bottom right. If you click one of those, the associated item will be displayed in the larger panel.
The last thing i need to achieve is an auto rotation of these news items. On load, item one will be displayed with "link 1" highlighted, and "block one" of the navigational blocks highlighted. After say, 10 seconds, "link 2" will become highlighted with the "block 2" highlighted and the associated content in the middle being displayed. So on, so forth.
http://codepen.io/anon/pen/wDiGy - Here's a code pen version of it so far.
Code highlighted below:
<div id="title-container">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div id="image-container">
<div class="image1 image" itemID="1">1</div>
<div class="image2 image" itemID="2">2</div>
<div class="image3 image" itemID="3">3</div>
<div id="circular-nav">
<li></li>
<li></li>
<li></li>
</div>
jQuery for selecting each item
$('.image:first').show();
$('.title, .circle-title').click(function(){
$('.image').hide();
var itemID = $(this).attr('itemID');
$('.image[itemID="' + itemID + '"]').fadeIn('fast');
});
I will be changing the HTML to integrate into the CMS i'm using, but the class names won't be changing.
Any assistance would be greatly appreciated.
UPDATE: I've managed to get 99% of the way there by fiddling around with it. I now have one hurdle. I'm using .next() to reach each item. If there are three items and it reaches the end, how do you return to the beginning? (PEN Updated)

Use a setInterval to trigger the tile change/image change function for every 10 seconds.
setInterval(function(){
//Code for changing the tile/image
},10000); //Milliseconds
You can put your existing function in a variable and use it for click as well as for interval. Also, since you're passing some information with the click, you can store the ids in an array and increment/reset counter after all the images have been cycled through.
Update:
Working Fiddle!

http://jsfiddle.net/hc4py/ (with only links stylized, not bullets)
setInterval(function () {
var $cur = $('a.active');
var i = $cur.closest('li').index(); //parent 'li' of first active link
$('.image:visible').hide(); //hide visible image
$cur.removeClass('active');
//if active 'a's parent li is the last one
if ($cur.closest('li').is(':last-child')) {
$('.image').eq(0).fadeIn('fast'); //show first image
$cur.closest('ul').find('li:first-child').find('a.title').addClass('active');
}
else {
$('.image').eq(i + 1).fadeIn('fast');//show next image
$cur.closest('li').next().find('a.title').addClass("active");
}
}, 2000);
.title.active{color:red;}

I found a simple solution which just involved an if statement to check the length of the item. Once it ended, it was able to loop around correctly.
setInterval(function () {
if ($('.image:visible').next().length === 0) {
$('.image').hide();
$('.image:first').fadeIn();
} else {
$('.image:visible').hide().next().fadeIn('fast');
}
}, 2000); //Milliseconds

calling an item, using javascript in boostrap

<ul>
<li><a onClick="showsub('activ')" class="activ">activ</a></li>
<li>.........</li>
</ul>
(option1-selected) option2 option3 ... ...
option1 (option2-selected) option3 ........
The above, is been used by bootstrap, so when the user click on one of each li
it will be active and it will "selected and looks different than the others".
I have the above code, there is two ways to Make this work.
First, it to add a class="Active" using javascript ... or to remove class="" nothing
which will return it to its original
The second way, is to add data-toggle="pill"
<li><a onClick="showsub('activ')" data-toggle="pill">activ</a></li>
Thus, bootstrap whatsoever javascript will make this work automatically. if you just add
data-toggle="pill" then you don't have to add any javascript..
my problem is;
How can I call specific li? and have the data-toggle="pill" works?
for example..
say you have the following
menue
home info contact
(home) (info) (contact)
news articles others about bio admin feedback
my problem, is I want when I click info, to show bio
or when I click home, to show news without clicking news to show information.
I have done this, by using two functions.
first function to call home,info, contact..
then.
if onClick = home
call function show(news):
elif onClick =info
call function show(bio):
this works fine, but it will sometimes looks like this ...
news (articles) others
news contents ... bla bla bla
notice that, articles is selected, but news (contents) are shown instead.
I hope you get the point..
I want when I call show(news) to be able to use data-toggle="pill"
if onClick = home
call function show(news):
& also pill (news) if it is not pill
so the when I call home, news will appear and also it active on the menue
(home active)
(news active) article other
news contents

Try this way
JS CODE:
$('ul li a').removeClass('active');
$('ul li a').eq(<index of the menu which needs to be loaded>).addClass('active');
Note: this may not be the final Solution, its just a prototype of what could become a final solution.
Happy Coding :)

hide show div when multiple nested layers exist

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
I need this code to close the current layer and them open another. These layers exist in the content div and are nested 12 deep.
For instance:
This is in the body of the container(navigation) to control the content container which is nested 12 deep. (I came up with an idea on my own but it wound up closing all layers making my web page disappear)
<li>US News</li>
Hence when the navigation button marked US News is clicked via the above it opens
Now, if I have US News open, and I click on say Politics (the third nested layer, I want USNews (the first nest layer) to close and only Politics to open (noticing of course that Politics is the Third Layer and USNews is the first layer).. and so forth..
I've attempted if else statements but I have been out of this for years now and am just frustrated beyond belief... any help would be greatly appreciated

You can loop all the layers and hide them before. And only then show selected one.
function showlayer(layer){
var Layers=document.getElementsByTagName("div");
for(i=0;i<Layers.length;i++){
if(Layers.getAttribute("class")=="layer"){
Layers.style.display="none";
}
}
document.getElementById(layer).style.display="block";
}
<li onclick="javascript:showlayer('USNews')"><a href="#" >US News</a></li>
<li onclick="javascript:showlayer('UkNews')"><a href="#" >Uk News</a></li>
<li onclick="javascript:showlayer('ArNews')"><a href="#" >Ar News</a></li>
<div id="USNews" class="layer"></div>
<div id="UkNews" class="layer"></div>
<div id="ArNews" class="layer"></div>

Instead of writing the raw Javascript, why not use a library instead.
In JQuery you could move to the correct layer, and hide or show it relatively easily.
(Probably one line of script tbh.)