We Keep Coding

Populating HTML Table Data without Repetition

How can I populate multiple tables without copy and pasting code.
For instance loop through an array and assign
<p>AMD</p>
without copy and pasting the code below. Maybe looping and incrementing an id written in javascript. I just dont know how to go about it.
<div class="chat-history">
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix" onclick=alert("test")>
<span class="chat-time"></span>
<h5></h5>
<p>AMD</p>
</div> <!-- end chat-message-content -->
I tried this im still working on it not fully understanding yet.
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div id="company" class="chat-message-content clearfix" onclick=alert("hush")>
<span class="chat-time"></span>
<h5></h5>
<p >DCTH</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<script>
for (i = 0; i < 10; i++) {
document.getElementById("company").innerHTML+= "<p>TEST</p>"
}
</script>

your items can go inside a div and then through script you should insert your items in a <p> tag. added a sample script below:
<div class="chat-history">
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix" onclick=alert("hush")>
<span class="chat-time"></span>
<h5></h5>
<div id="company"></div>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<script>
var company = ["AMD", "APPLE"];
company.forEach(function(i) {
document.getElementById("company").innerHTML+= "<p>" + i + "</p>";
});
</script>

JS: fullpage.js moveTo() among different section

CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->

Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.

Jquery Fade transition doesn't look right

I have a simple fade transition that hides the current div, while un-hiding the div below it. However the transition doesn't look right as when the fade is happening it briefly shows all the div's. I'm new to using jQuery so could anyone show me how i could polish this up a bit to make it look better when the fade transition takes place?
p.s i know the jQuery could be coded better, but again I'm pretty new to jQuery so if anyone has a better way of coding this let me know.
Thanks.
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
jQuery:
$(document).ready(function(){
$("#buttonone").click(function(){
$("#home").fadeOut();
});
});
$(document).ready(function(){
$("#buttontwo").click(function(){
$("#portfolio").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#aboutfour").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#about").fadeOut();
});
});
$(function() {
$('#portfolio').addClass('hidden').hide();
$('#buttonone').click(function() {
if ($('#portfolio').hasClass('hidden')) {
$('#portfolio').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#about').addClass('hidden').hide();
$('#buttontwo').click(function() {
if ($('#about').hasClass('hidden')) {
$('#about').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#contact').addClass('hidden').hide();
$('#buttonthree').click(function() {
if ($('#contact').hasClass('hidden')) {
$('#contact').removeClass('hidden').fadeIn(1000);
}
});
});

How about you add each button class="button" attribute, and run the following jQuery:
$('.button').click(function() {
if($(this).hasClass("hidden"))
{
//if already hidden, do you want to display it back?
$(this).removeClass("hidden");
}
else{
$(this).parent().parent().next().fadeIn(1000);
$(this).addClass("hidden");
$(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay?
}
}
});
So, when a button is clicked the div containing that button will be hidden, and the next div will be showed, is that right? Then, at the beginning, only the first one will be displayed? I am not clear about the functionality.
UPDATE
I got it working finally. There you go: https://jsfiddle.net/ev64mqsp/
note that I included one extra div for Home div to make all main content divs have the same structure.
$('.button').click(function() {
if($(this).next().hasClass("hidenext"))
{
$(this).parent().parent().fadeOut(1000)
$(this).parent().parent().next().removeClass("hidenext");
}
else{
$(this).parent().parent().fadeOut(1000);
$(this).parent().parent().next().addClass("hidenext");
}
});
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<div>
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button class="button" id="buttonone" type="button">Click Me!</button>
</div>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button class="button" id="buttontwo" type="button">Click Me!
</button>
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button class="button" id="buttonthree" type="button">Click Me!</button>
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button class="button" id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

Class hidden (supposed to have display:none) should be added when fadeOut() finish for a good animation. If you want to mantain div position you may use visibility:hidden removing display:none given by fadeOut()
$(document).ready(function(){
$("body > div").not("#home").addClass("hidden");
$("button[type=button]").click(function(){
if ($(this).parent().attr('id') == 'home') {
$(this).parent().fadeOut(1000,function(){
$(this).addClass('hidden');
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
});
} else {
$(this).parent().parent().fadeOut(1000,function(){
$(this).addClass('hidden');
if ($(this).next().hasClass('panel')) {
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
}
});
}
});
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

Twitter Bootstrap Carousel Misaligning each Slide Transition

I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->

You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)

next and prev button for different categories of images

<script type="text/javascript">
$(document).ready(function () {
var divs = $('.mydivs>div');
var now = 0; // currently shown div
divs.hide().first().show();
$("button[name=next]").click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // or .css('display','block');
//console.log(divs.length, now);
});
});
</script>
This is my first time developing a mobile apps and I am really slow in all this coding stuff.so my problem is, I have the above code to view previous and next image in my app.it works fine but when I have different categories of gallery need to be shown (eg: animals category,plants category,etc), and inside each categories, there are few images need to be displayed and can be controlled using the prev and next button (eg: animals [24 images], plants[20 images]), I encounter some problem.problem now is that the script only works on the first categories(eg:animals)..but when I want to view images in other categories (eg: plants), there seems to have problem with the counter. I need to click a few times the next button before the first images from the plant categories appear.
This is my related HTML and CSS for the above code:
HTML:
<body>
<!-- *************HOME PAGE**************** -->
<div data-role="page" id="home" data-title="home">
<div data-role="header">
<h1>Menu Utama</h1>
</div><!-- /header -->
<div><img id="Logo" src="images/logo.png"> </div>
<div data-role="content" class="content-primary">
<ul data-role="listview" data-inset="true">
<li><a href="#animal">
<img src="images/animal-thumbnail.png" />
<h3>category:animal</h3>
<p>view animals </p>
</a></li>
<li><a href="#plant">
<img src="images/plant-thumbnail.png" />
<h3>category:plant</h3>
<p>view plants</p>
</a></li>
</ul>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY ANIMAL PAGE**************** -->
<div data-role="page" id="animal" data-title="animal">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/animal1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/animal3.png" alt="photo" /></div>
</div>
</div> <!--/content-->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- *************CATEGORY PLANT PAGE**************** -->
<div data-role="page" id="plant" data-title="plant">
<div data-role="header">
.
.
.
</div><!-- /header -->
<div data-role="content">
<div class="mydivs">
<div><img id="ContentPic" src="content-pic/plant1.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant2.png" alt="photo" /></div>
<div><img id="ContentPic" src="content-pic/plant3.png" alt="photo" /></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button name="prev" alt="Previous Tab"><img class="ContentPic" src="images/prev.png" /></button></li>
<li><button name="next" alt="Next Tab"><img class="ContentPic" src="images/next.png" /></button></li>
</ul>
</div> <!-- nav bar -->
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- ************* END **************** -->
</body>
css
.mydivs {
height:100%;
width: 100%;
}
.mydivs>div {
width : 100%;
}

Try
$(document).ready(function () {
$('.mydivs').children().hide().filter(':first-child').show().addClass('current');
$("button[name=next]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $next = $current.next();
if(!$next.length){
$next = $current.parent().children().first();
}
$next.show().addClass('current'); // show next
});
$("button[name=prev]").click(function (e) {
var $current = $(this).closest('[data-role="footer"]').prev().find('.current').removeClass('current').hide(), $prev = $current.prev();
if(!$prev.length){
$prev = $current.parent().children().last();
}
$prev.show().addClass('current'); // show next
});
});
Demo: Fiddle