Develop Reference

Generate array of elements within a div using JS/PHP

Im working on a travel website where the users have an option to plan their own trip. They will be preseted with an input box where they can choose how many days their trip is going to last. However im struggeling to find out how to create an array of elements corresponding to the amount of days they select. For example if they select "4" days then 4 boxes with uniqe titles and buttons will appear. Im open to work in php or javascript, thank you for the help!
Example of what the code should produce.
Jsfiddle
<input type="number"> <!-- input days -->
<div class="container"> <!-- Bootstrap Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col" style="background-color: red; height: 6em;"> <!-- Day container -->
<h1 class="title">Day 1</h1> <!-- Title with UNIQE name -->
<button>Select trip</button> <!-- Button -->
</div> <!-- End of day container -->
<div class="w-100" style="height: 2em;"></div> <!-- Spacing -->
<div class="col" style="background-color: red; height: 6em;">
<h1 class="title">Day 2</h1>
<button>Select trip</button>
</div>
<div class="w-100" style="height: 2em;"></div>
<div class="col" style="background-color: red; height: 6em;">
<h1 class="title">Day 3</h1>
<button>Select trip</button>
</div>
<div class="w-100" style="height: 2em;"></div>
<div class="col" style="background-color: red; height: 6em;">
<h1 class="title">Day 4</h1>
<button>Select trip</button>
</div>
</div> <!-- End of row -->
</div> <!-- End of container -->

You may use insertAdjacentHTML to generate your form, kindly take a look the below example:
document.getElementById('gen').addEventListener('click', function() {
var days = document.getElementById('days').value;
var trips = document.getElementById('trips');
trips.innerHTML = '';
for (let i=0; i<days; i++) {
trips.insertAdjacentHTML('beforeend', '<div id="day'+(i+1)+'"><h1 class="title">Day '+(i+1)+'</h1><button>Select Trip</button></div>');
}
});
<input type="text" id="days" style="width:20px;" value="1"><button id="gen">Enter</button>
<div id="trips"></div>

Tab content not hiding jQuery

So I'm trying to create a set of tabs, however, the content isn't hiding when I move tabs it just gets stacked.
Here is my code
HTML
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>
JS
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
$('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
Active is being placed on the tab and the content is showing, however, I can't seem to make the previous tab content to disappear.
So any help or a solution would be helpful.
Thanks.

I'd create a reference to the current shown panel every time that click function is run, and hide the previous if it exists.
let current = null;
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
current = $('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
if (current) {
current.hide();
}
current = $(target);
//link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>

Your problem is in the .show() when you first start the page, this adds some inline code to the element display: block;, which overrides your styling for the panels (i.e. hiding those without .active) because inline styles are prioritised over class stylings.
You can simplify your code a little if you would like, I've provided some code below that has the same functionality you are aiming for. This works for any number of tabs on a page, but does not let you have a tab group within another (i.e. as a child). It does require you to add the class .feature-tabs-wrapper in a parent div that wraps both the menu links and the panels (see the third line of the demo HTML below).
Let me know if you needed something else.
Demo
// Activate the first panel for any tab setup on the page
$(".feature-tabs-wrapper").each(function() {
$(this).find(".tab-panel").first().addClass("active");
})
// Add click event to the tab links
$(".feature-tabs > li > a").click(function() {
// Remove active panel from any of the associated tabs
$(this).closest(".feature-tabs-wrapper").find(".tab-panel.active").removeClass("active");
// Get id of tab panel to be activated
var tabID = $(this).attr("href");
// Activate that tab panel
$(tabID).addClass("active");
});
.tab-panel {
display: none;
}
.tab-panel.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container feature-tabs-wrapper">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>

this code work for me
u can try it
code html
<section class="product-features">
<section class="container">
<ul class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</ul>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel active">
a
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel hidden">
b
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel hidden">
c
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
code jquery
(function () {
var $tabNavigation = $(".feature-tabs a");
if ($tabNavigation.length > 0) {
$tabNavigation.on("click", function (e) {
$('body').find('.feature-tabs li').each(function (index, value) {
$(value).removeClass('active');
})
$(this).tab("show");
$('body').find('.tab-panel').each(function (index, value) {
if (!$(value).hasClass('active')) {
$(this).addClass('hidden');
} else {
$(this).removeClass('hidden');
}
})
e.preventDefault();
return false;
});
}
})();

Getting text of next sibling with jQuery

I am trying to get the next Section Project Title .section .project-title and echo it out.
My markup has been stripped back for ease of reading here but it is there in structure. I am able to grab the section project title under the .section.active div but not sure on how to grab the next project title?
Please note that the .active class changes when the user scrolls down the page to each section, so I also need it to be dynamic.
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div> <!-- .section -->
</div> <!-- #fullpage -->
I did try something along these lines with no luck:
var indexNext = jQuery('.section.active').parent().siblings().find('project-title').html();

You could get the current active section:
var currentSection = jQuery('.section.active');
Get the next section:
var nextSection = $(currentSection).next();
Find its project title:
var projectTitle = $(nextSection).find(".project-title");
And print it out:
console.log(projectTitle.html());
Obviously you could put all in one line:
var nextTitle = jQuery('.section.active').next().find(".project-title").html();
See following complete example, please:
var currentSection = jQuery('.section.active');
var nextSection = $(currentSection).next();
var projectTitle = $(nextSection).find(".project-title");
console.log(projectTitle.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->
I hope it helps you, bye.

You can use:
$('.section.active + .section .project-title').text();
I've used a CSS selector to select the .project-title element of immediate next sibling. As it is a pure CSS selector so it is more efficient than jQuery's .next() method.
You can check the existence of next section if you want. All you need to do is to add a check like this:
if($('.section.active + .section').length) {
$('.section.active + .section .project-title').text();
}
Working Demo:
alert($('.section.active + .section .project-title').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->

You can use next method
$('.section.active').next().find('h1').text();
Working demo : https://jsfiddle.net/gaq23jbL/4/

z-index issue whilst using scrollmagic

I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;
As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.
http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes!
Any help would be greatly appreciated.
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button 2
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>

So... I just added:
#pinned-trigger1 {
position-events: none;
}
And voila!!

How do I prevent two divs from jumping around my webpage when it first loads?

Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>

If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}