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();
});
}
Related
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 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");
});
});
How can i set the code using Javascript or JQuery to load one tab only per time, In this code all the tabs all loaded in one time and that takes too much Memory at the same time, Specially when the Story is longer than 2000 letter, So with three parts, the page would load 6000 letter at the same time, I want to only load one part, And when i switch to another Tab, the previous tab would disappear and only show the new tab with 2000 letter only.
<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>
My database is
[ Title -- Part1 -- Part2 -- Part3 ]
[Part 1 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
[Part 2 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
[Part 3 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
Please give me just a one example about how to do it on two tabs at least, I've checked this code but i realized that If it is loaded once, It stays loaded
You can add a placeholder data-src and when the user clicks on the tab switch the src:
<audio id="sound1" preload="auto" data-src="http://www.jezra.net/audio/skye_boat_song.ogg" controls></audio>
$(".nav-tabs a").click( function () {
var tab = $(this).attr('href');
var $el = $(tab).find('audio');
var src = $el.data('src');
$el.attr('src', src);
})
https://jsfiddle.net/vtu8pz6y/
If you want to dynamically play, pause, etc:
$el[0].play()
$el[0].pause()
More info here
I am using sliderPro Slider to make a slider, exactly like in this examples page, so the HTML code looks like below:
<div id="example2" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image1_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg" />
</a>
<p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image2_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg" />
</a>
<p class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image3_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg" />
</a>
<p class="sp-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image4_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg" />
</a>
<p class="sp-caption">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image5_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg" />
</a>
<p class="sp-caption">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image6_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image6_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg" />
</a>
<p class="sp-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image7_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg" />
</a>
<p class="sp-caption">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image8_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg" />
</a>
<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image9_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image9_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg" />
</a>
<p class="sp-caption">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image10_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image10_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg" />
</a>
<p class="sp-caption">Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
And the jQuery init code is like below:
$( document ).ready(function( $ ) {
$( '#example2' ).sliderPro({
width: '20%',
height: 500,
aspectRatio: 1.5,
visibleSize: '100%',
forceSize: 'fullWidth'
});
Now I was given this link and was told that the images from that page should display in the slide instead of the images I am using right now. That's an Instagram account, so how do I integrate Instagram into my slider?
You should use the Instagram API to request media data for that user account.
You will get a response in JSON which you can easily parse to extract the image urls for your slider.
If you perform a GET to the endpoint below with a valid USER-ID and ACCESS-TOKEN it will return the user's most recent media in JSON. More here
https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=ACCESS-TOKEN
Another way is to use the embed endpoint.
If you perform a GET on a url like below it will return media data about that USER-ID account in JSON. More here Embedding For Developers
https://www.instagram.com/USER-ID/media/
Other options include using a javascript or jquery plugin that handles most of this stuff for you but I'm sure you would have googled it if you needed that.
I am appending a html in to a div . But this is not working. please help me
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
i want append some html content in to a div. attId will generate dynamically. That generate successfully. i only know attId. other elements are same so i can only use attr.
var attId = 1;
var anchor = document.querySelector('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
try this, because you're trying to get the children of the link and it does not have.
var anchor = $('.normal_p').closest("li");
anchor .html($(this).html());
or
var anchor = $('.tab').children();
anchor .html($(this).html());
Appending a whole html to a div sound somehow and moreso why querySelector() in jQuery, the question is not clear, perhaps you post chunk of code that well describe what you mean
From what you posted
//assuming there is a var attId as 1
var attId = 1
var anchor =$('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
Although what you are trying to insert into the list items is not clear, but I hope this helps