I have a tabs module within (eventually) another tabs module: right now I have the separate just for testing. Everything works find except the first instance of adding class active to the first element of each ui > li > a.
The html is as follows:
{{!-- Outer Tabs --}}
<div class="container ">
<div class="organism video-tabs">
<div id="parent-tabs">
<ul class=" tabs parent-tabs">
<li>
<a href="#">
Warranty Requests
</a>
</li>
<li>
Low Maintenance
</li>
<li>
<a "How To" href="#">Low Maintenance</a>
</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div class="container">
<div class="innercontent">
1
</div>
</div>
<div class="container">
<div class="innercontent">
2
</div>
</div>
<div class="container">
<div class="innercontent">
3
</div>
</div>
</div>
</div>
</div>
{{!-- End Outer Tabs --}}
<div class="container">
{{!-- Start Tabs --}}
<div class="organism video-tabs">
{{!-- Start Tab Nav --}}
<ul class="tabs">
<li> HVAC Systems
<div class="arrow"> <img src="/wp-content/themes/atom-child/assets/build/images/triangle.svg">
</div>
</li>
<li>
Plumbing Systems
<div class="arrow"> <img src="/wp-content/themes/atom-child/assets/build/images/triangle.svg">
</div>
</li>
<li>
Electrical Systems
<div class="arrow"> <img src="/wp-content/themes/atom-child/assets/build/images/triangle.svg">
</div>
</li>
<li>
General Home
<div class="arrow"> <img src="/wp-content/themes/atom-child/assets/build/images/triangle.svg">
</div>
</li>
<li>
Future Video Sets
<div class="arrow"> <img src="/wp-content/themes/atom-child/assets/build/images/triangle.svg">
</div>
</li>
</ul>
{{!-- End Tab Nav --}}
{{!-- Start Tab Content --}}
<div class="tab-content-wrapper">
<div class="container">
<div class="inner-wrapper">
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="320"
height="178" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="320"
height="178" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="320"
height="178" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="container">
<div class="inner-wrapper">2Some content
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus sed mollitia enim omnis nam
velit, harum distinctio ab, ipsam obcaecati ad numquam eius totam rerum consequuntur maiores
dicta similique? Vero!
</div>
</div>
<div class="container">
<div class="inner-wrapper">3Some content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere explicabo nulla impedit nostrum
nisi! Fugit porro minus, ex id quod tempore culpa necessitatibus! In perspiciatis consequuntur
blanditiis atque. Ipsam, error?
</div>
</div>
<div class="container">
<div class="inner-wrapper">4Some content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla minus eos eligendi, eveniet
officia voluptatibus corporis excepturi tempore voluptatum? Doloribus obcaecati adipisci harum
quam autem quaerat necessitatibus laboriosam reiciendis veniam.
</div>
</div>
<div class="container">
<div class="inner-wrapper">5Some content
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam quos, aspernatur delectus
facilis animi labore minima sequi quo dolores at nostrum unde velit sapiente incidunt nesciunt
in explicabo enim? Dolor?
</div>
</div>
</div>
{{!-- End Tab Content --}}
</div>
{{!-- End Tabs --}}
</div>
And here is the js
$('.video-tabs').each(function () {
var $this = $(this);
var $containers = $this.find('.tab-content-wrapper .container');
$(".tabs li a").first().addClass('active');
$(".tabs .arrow").hide();
$(".tabs .arrow").first().show();
$this.find(".tabs li a").click(function (e) {
e.preventDefault();
$this.find('.active').removeClass('active');
$this.find('.arrow').hide();
$(this).next(".arrow").show();
$(this).addClass('active');
var t = $(this).attr("id");
var index = $(this).closest('li').index();
//this is the start of our condition
$containers.hide();
$containers.eq(index).fadeIn("slow");
});
});
It all works fine (adding/removing "active" class) once you start clicking around, however in the first load, it's only adding the active class to the first tab set and not the second. Any tips are appreciated
If I know your mind, your issue is Content Tab in each tab show at the same time, and you want show First Content Tab at First Load. If it's right, just add:
$containers.hide();
$containers.first().show();
At that time, your code look like:
$('.video-tabs').each(function () {
var $this = $(this);
var $containers = $this.find('.tab-content-wrapper .container');
$this.find(".tabs li a").first().addClass('active');//Change here
$(".tabs .arrow").hide();
$(".tabs .arrow").first().show();
//Add here
$containers.hide();
$containers.first().show();
$this.find(".tabs li a").click(function (e) {
e.preventDefault();
$this.find('.active').removeClass('active');
$this.find('.arrow').hide();
$(this).next(".arrow").show();
$(this).addClass('active');
var t = $(this).attr("id");
var index = $(this).closest('li').index();
//this is the start of our condition
$containers.hide();
$containers.eq(index).fadeIn("slow");
});
});
Related
Im making a movie review page, i use a button to change the qualification.
How can i get the name of the movie when i press the button?
<div class="container-movies" id="container-movies">
<div class="movie">
<span class="text1" id="title">Transformers</span>
<p class="text2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore soluta ullam officiis tempore sapiente, nesciunt veniam. Vitae explicabo labore soluta quis, omnis vero nulla, dignissimos necessitatibus repellat perferendis quisquam laboriosam.
</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button id="cal-btn">qualify</button>
</div>
</div>
<div class="movie">
<span class="text" id="title">movie title</span>
<p class="text2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, sint fugit numquam dicta aperiam neque aliquam expedita ipsum sapiente assumenda rerum temporibus fuga similique sed, perspiciatis qui ipsa nihil adipisci.
</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button id="cal-btn">qualify</button>
</div>
</div>
This only sends me the name of the first node:
let cal = document.getElementById("cal-btn");
cal.addEventListener('click', getcal);
You can grab the constent of the id="title" and use it in the getcal function
const movieTitle = document.getElementById("title").innerText
document.getElementById("cal-btn"); will only return one element because ids are unique, you should use a class instead.
For each button, add a listener on click. Then because of the structure, search for the closest parent movie to find the title inside.
for (let btn of document.getElementsByClassName("cal-btn")) {
btn.addEventListener("click", () => {
console.log(btn.closest(".movie").querySelector(".title").textContent)
})
}
<div class="movie">
<span class="title">Transformers</span>
<button class="cal-btn">vote</button>
</div>
<div class="movie">
<span class="title">Another film</span>
<button class="cal-btn">vote</button>
</div>
You cant use the same id over and over again, in this case you should use a class or an custom attribute select all buttons and loop through them and call your function
let calBtns = document.querySelectorAll(".cal-btn");
calBtns.forEach(btn => {
btn.addEventListener('click', ()=>{
alert(btn.closest('.movie').querySelector('.title').innerText)
});
})
<div class="container-movies" id="container-movies">
<div class="movie">
<span class="text1 title">Transformers</span>
<p class="text2">Lorem ipsum</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button class="cal-btn">qualify</button>
</div>
</div>
<hr>
<div class="movie">
<span class="text title">movie title</span>
<p class="text2">Lorem, ipsum</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button class="cal-btn">qualify</button>
</div>
</div>
I have a main section. Under the main section I have 2 columns, one with flipbox and other with tabs. I want to trigger hover on flip box when I clicked tab2. I don't have any clue about the JS but tried few of the fiddle's I found, the closet one to what I want is http://jsfiddle.net/EZ33Y/1/ but I was not able to get it working properly.
What I am trying to achieve is to display image related to tab for e.g Tab1 displays img1 and tab2 displays img2 or trigger hover when tab2 is selected so flip image displays tab2 img2
TIA
$(function(){
$('.tabs label').click(function(){
$('.images img').hide();
$('#tab'+($(this).parent('li').index()+1)+'-img').show();
});
});
/* HTML */
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-fd8fa18" data-id="fd8fa18" data-element_type="column" id="tab1">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-d5d5298 elementor-widget elementor-widget-eael-adv-tabs" data-id="d5d5298" data-element_type="widget" data-widget_type="eael-adv-tabs.default">
<div class="elementor-widget-container">
<div id="eael-advance-tabs-d5d5298" class="eael-advance-tabs eael-tabs-horizontal" data-tabid="d5d5298">
<div class="eael-tabs-nav">
<ul class="eael-tab-top-icon">
<li class="active">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 1 </span>
</li>
<li class="inactive">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 2</span>
</li>
</ul>
</div>
<div class="eael-tabs-content">
<div class="clearfix active">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
<div class="clearfix inactive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a div like this
<div id="news" class="col-sm-6 col-md-4 col-lg-4 pb-70">
<div class="post-prev-img">
<img src="images/blog/post-prev-1.jpg" alt="img">
</div>
<div class="post-prev-title">
<h3>TIME FOR MINIMALISM</h3>
</div>
<div class="post-prev-info">
JULE 10<span class="slash-divider">/</span>JOHN DOE
</div>
<div class="post-prev-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.
</div>
<div class="post-prev-more-cont clearfix">
<div class="post-prev-more left">
READ MORE
</div>
<div class="right" >
<span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span>
<span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span>
<a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
<span aria-hidden="true" class="social_share"></span>
</a>
<ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
<li><span aria-hidden="true" class="social_facebook"></span>
</li>
<li><span aria-hidden="true" class="social_twitter"></span></li>
<li><span aria-hidden="true" class="social_dribbble"></span></li>
</ul>
</div>
</div>
</div>
I need this to be my "skeleton" for my other divs.
Now i want to make a for and append the content of my array inside of it and print every div inside an HTML page. How do i do that?
Thanks
You do this as follows,
make a template in your html and hide using css #template, make a div to show all the items that we are going to dynamically make #list
<div id="list">
</div>
<div id="template">
<div class="col-sm-6 col-md-4 col-lg-4 pb-70">
<div class="post-prev-img">
<img src="{{img}}" alt="img">
</div>
<div class="post-prev-title">
<h3>{{name}}</h3>
</div>
<div class="post-prev-info">
JULE 10<span class="slash-divider">/</span>JOHN DOE
</div>
<div class="post-prev-text">
{{info}}
</div>
<div class="post-prev-more-cont clearfix">
<div class="post-prev-more left">
READ MORE
</div>
<div class="right" >
<span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span>
<span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span>
<a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
<span aria-hidden="true" class="social_share"></span>
</a>
<ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
<li><span aria-hidden="true" class="social_facebook"></span>
</li>
<li><span aria-hidden="true" class="social_twitter"></span></li>
<li><span aria-hidden="true" class="social_dribbble"></span></li>
</ul>
</div>
</div>
</div>
</div>
CSS to hide the template
#template {
display: none;
}
Then make an array of all your needed object data circle it with a loop and replace the data holders.
Then insert the new html into the dom
var assets= [
{
name: "Time for JS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.",
},
{
name: "Time for CSS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
},
{
name: "Time for HTML",
img: "http://via.placeholder.com/350x150",
link: "",
info:"consectetur adipisicing consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
}
];
var html=""
assets.forEach(buildTemplate);
document.getElementById("list").innerHTML=html;
function buildTemplate(item) {
var template = document.getElementById("template").innerHTML;
template = template.replace("{{name}}", item.name);
template = template.replace("{{info}}", item.info);
template = template.replace("{{img}}", item.img);
html+=template;
}
Here it is in action, it's that simple no jquery ultra fast hardcode JS.
https://jsfiddle.net/5yeh38LL/
There is a much easier way use a js template engine there are lots on google but this demonstrates how this is done and how effectively a template system will work.
Try jQuery templates. You write your HTML code inside script tags and in your JS code you can call them and use them as you wish:
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>
Usage:
$("#bookTemplate").tmpl(books).appendTo("#bookContainer");
In my code here, I want to show a story for each tab has its own text and Background Music, The problem here is when i open tab part1 and open the music, then move to tab part2, The music from part1 is still active, And if i started all tabs music all the 3 BGMs will run at the same time, How can i keep 1 tab only active?
$('#myTab a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#part1" role="tab">Part 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part2" role="tab">Part 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part3" role="tab">Part 3</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="part1" role="tabpanel"><b>Story Part 1</b> <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br>
BGM: <br>
<audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio>
</div>
<div class="tab-pane" id="part2" role="tabpanel"><b>Story Part 2</b> <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br>
BGM: <br>
<audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio>
</div>
<div class="tab-pane" id="part3" role="tabpanel">
<b>Story Part 3</b> <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br>
BGM: <br>
<audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio>
</div>
</div>
Sounds like you need to implement another function that stops the music, in order to call this when you're switching tabs.
edit: You may have to manually start each audio element when switching tabs
$('#myTab a').click(function(e) {
e.preventDefault()
musicStop();
$(this).tab('show')
})
function musicStop(){
//stop all audio playing
$.each($('audio'), function () {
$(this).stop();
});
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have website, and I want to "cut" every div#id from .tab-content and add every div to every li only when viewport width is less than 768px.
My HTML page:
<section id="menu">
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul id="menu-nav" class="nav nav-pills text-center">
<li class="active"><h2>About</h2></li>
<li><h2>Services</h2></li>
<li><h2>Contact</h2></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="tab-content">
<div class="tab-pane active" id="about">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I tried to use jquery for every div#ID, but it's not working.
$(document).ready(function(){
if ($(window).width() < 768) {
var divAbout = $('#about').pop();
$(divAbout).appendTo('#menu-nav li:first-of-type');
}
});
I want to have that result on mobile:
<li>
<h2>About</h2>
<div id="about">
...
</div>
</li>
And the same to other divs.
You can use the resize handler and do
var flag;
$(window).on('resize.menu', function () {
var width = $(window).width(),
$ul = $('#menu-nav');
if (width < 768 && flag != 1) {
flag = 1;
$('#menu .tab-content .tab-pane').each(function () {
$(this).appendTo($ul.find('li:has(a[href="#' + this.id + '"])'))
});
} else if (width >= 768 && flag != 2) {
flag = 2;
$ul.find('.tab-pane').appendTo('#menu .tab-content');
}
}).trigger('resize.menu')
Demo: Fiddle
Hope you're looking to develop a responsive web design. Instead of cutting the DOM and adding it to the li tag. Use CSS3 media queries to show and hide elements based on elements width.
But here is an approach for your question:
$(document).ready(function(){
if ($(window).width() < 768) {
$(".tab-content div").each(function(index, ele) {
var id = this.id; // about , contact
$("li a[href='#'"+id+"]").parent().parent().append(this);
// this will match li with a having href="#about" etc
});
}
});