I am using Basic JQuery Slider, How can I get the active/current number, I am using multiple sliders.
var bannerslides = $('#banner-slides').bjqs({
animtype : 'slide'
});
var bannerslides2 = $('#banner-slides2').bjqs({
animtype : 'slide'
});
EDIT
$scope.update = function() {
//Need to get slider number here, like
console.log(bannerslides.index());
}
HTML:
<div id="banner-slides">
<ul class="bjqs>
<li>
...
</li>
<li>
...
</li>
</ul>
I actually need it in on a click event of button to decide an action.
Modified plugin to get current slide number.
Just added a function to return active/current slide.
Above the init(); return this; at the end of the file bjqs-1.3.js
Add the following function.
this.getactiveslide = function() {
return state.currentindex;
};
And called this console.log(bannerslides.getactiveslide());
Hope this helps and saves someones time in future.
Related
The comparison table I am using is here:
https://codepen.io/adrianjacob/pen/KdVLXY
When I duplicate the tables and the viewer goes mobile responsive; the buttons are only working for the first table.
Is there any classes or such I can add to the JavaScript and HTML so I can make each group of buttons specific to their table?
Button code:
<ul>
<li class="bg-purple">
<button>Self-Employed</button>
</li>
<li class="bg-blue">
<button>Simple Start</button>
</li>
<li class="bg-blue active">
<button>Essentials</button>
</li>
<li class="bg-blue">
<button>Plus</button>
</li>
JavaScript code:
// DIRTY Responsive pricing table JS
$( "ul" ).on( "click", "li", function() {
var pos = $(this).index()+2;
$("tr").find('td:not(:eq(0))').hide();
$('td:nth-child('+pos+')').css('display','table-cell');
$("tr").find('th:not(:eq(0))').hide();
$('li').removeClass('active');
$(this).addClass('active');
});
// Initialize the media query
var mediaQuery = window.matchMedia('(min-width: 640px)');
// Add a listen event
mediaQuery.addListener(doSomething);
// Function to do something with the media query
function doSomething(mediaQuery) {
if (mediaQuery.matches) {
$('.sep').attr('colspan',5);
} else {
$('.sep').attr('colspan',2);
}
}
// On load
doSomething(mediaQuery);
I'd really appreciate any help, thanks for your time.
The problem is that your jQuery targets are currently too generic, so when you have multiples, it only finds content from the first one and puts it in both. What your script does is update both tables.
I've forked the Codepen, added a second table, and tweaked a couple of values on our comparison table, so you should see different things in each (and each set of tabs acts separately)
https://codepen.io/CapnHammered/pen/QzBbqN
Key part you're missing is some form of parent selector - in this case, we've used an article tag to wrap our table:
$( "ul" ).on("click", "li", function() {
var pos = $(this).index()+2;
$parent = $(this).closest('article');
$parent.find("tr").find('td:not(:eq(0))').hide();
$parent.find('td:nth-child('+pos+')').css('display','table-cell');
$parent.find("tr").find('th:not(:eq(0))').hide();
$parent.find('li').removeClass('active');
$(this).addClass('active');
});
Try this:
$("ul").on("click", "li", function(e) {
var $clicked = $(e.currentTarget); // This will give you the clicked <li>
var $ul = $clicked.parent();
var $table = $ul.next(); // Only works if the table immediately follows the <ul>
var pos = $clicked.index() + 2;
$table.find("tr").find("td:not(:eq(0))").hide();
$table.find("td:nth-child(" + pos + ")").css("display", "table-cell");
$table.find("tr").find("th:not(:eq(0))").hide();
$clicked.siblings().removeClass("active");
$clicked.addClass("active");
});
Basically, when you click a <li> you should search the next table and show/hide the information only on that table. Before you were selecting all <tr> elements so it would affect all tables in the page.
EDIT: after re-reading your question this sentence left me confused:
When I duplicate the tables and the viewer goes mobile responsive; the buttons are only working for the first table.
When I try to duplicate the tables in your codepen the buttons work for both tables, not sure if I'm understanding your problem.
I am trying to disable the autoscroll function in my slider on hover, and similarly when I move the mouse away, begin the slider once again. The data attribute isn't getting updated. Even though it's showing in console.
HTML code:
<div id="featured" class="swiper-container gloria-sliders events-list-carousel swiper-container-horizontal swiper-container-undefined" data-item="3" data-column-space="1" data-sloop="true" data-aplay="4000">
As you can see, it is setting the data attribute data-aplay to 4000 by default.
Attaching script below:
<script>
$("#featured").hover( function () {
console.log('hover');
var featured = $('#featured').data('aplay','false');
console.log($('#featured').data('aplay'));
}, function() {
console.log('not hovered');
$('#featured').data('aplay','4000');
console.log($('#featured').data('aplay'));
});
</script>
When I hover, it displays:
hover
false
But it doesn't update the data-aplay value, also when I remove the hover it displays
not hovered
4000
If any additional info is required, please let me know. Any help will be greatly appreciated. Thank You
UPDATE
var stopScroll = setInterval(function(){ $(".metalhead").click(); }, 4000) ;
$('.oswald, .image a').click(function() {
clearInterval(stopScroll);
});
$('#featured').mouseover(function(){
clearInterval(stopScroll);
}).mouseout(function(){
stopScroll = setInterval(function(){ $(".metalhead").click(); }, 4000) ;
})
I am using setInterval and clearInterval now. It is working to some extent. But still not accurate
<i class="fa fa-angle-right metalhead" id="scroll" aria-hidden="true"></i>
So what I am doing now is adding a function to click on the right arrow every 4 seconds. So on mouseover I am using clearInterval to remove the timer and on mouseout using setInterval to revert back to 4 seconds.
I have also added another function, which stops the slider when a particular item is clicked. Still not confident it is working correctly though.
I do believe it is changing the data property properly, only that does not update the view of the attribute, try something like this:
$(document).ready(function() {
var featured=$('#featured');
featured.hover( function () {
console.log('hover');
featured.data('aplay','false');
featured.removeAttr('data-aplay')
console.log(featured.data('aplay'));
}, function() {
console.log('not hovered');
featured.attr('data-aplay', '4000')
featured.data('aplay','4000');
console.log(featured.data('aplay'));
});
});
I have created a 3 x 2 grid of squareish buttons that are monotone in colour. I have a slidetoggle div that pops down inbetween both rows of 3 and as it does so it pushes the content down of the rest of hte page, this is all working perfectly so far.
But i have made a class (.active) thats css is the same as the :hover state so that when i hover over a button the coloured version replaces the monotone version, however i have tried to add some js to make the colour (.active) stay on once i have clicked on a certain button so that you can see which button (product) the slidedown div relates to and the rest are still in monotone around it...
The .active code below works perfectly to turn the bottons colour on and off when you click that one button, but i have set it up so that if one button's div is open and you click on a different one, the open one closes and then the new one opens. This feature however throws off the balance of the code i have for the .active state here. When you have say button 1 open and you click button 1 to close, this works fine, the color goes on and then off, but if yo uhave button 1 open and click on button 2, button 1's div closes and opens button 2's div but then botton 1 stays in colour as button 2 turns to colour. the order is thrown off...
I need to add some js to say, that only one button can be in color (.active) at a time, or that if one is .active it must be turned off before the new one is turned on... Please help :)
$(document).ready(function(){
$("a.active").removeClass('active'); //<<this .active code &
$("#product1").click(function(){
if($(this).parent('a').hasClass('active')){ //<<<this .active code
$(this).parent('a').removeClass('active'); //<<
}else{ //<<
$(this).parent('a').addClass('active'); //<<
} //<<
$("#product2box").slideUp('slow', function() {
$("#product3box").slideUp('slow', function() {
$("#product4box").slideUp('slow', function() {
$("#product5box").slideUp('slow', function() {
$("#product6box").slideUp('slow', function() {
$("#product1box").stop().slideToggle(1000);
//do i need
//something here??
});
});
});
});
});
});
And here is the HTML
<div id="row1">
<a href="#!" class="active"><span id="product1">
<div id="productblueheader">
<div id="productlogosblue1"></div>
</div>
<div id="productstitle">Stops all spam and unwanted email.</div>
<div id="producttext">With over 8 million users ******* is the leading in anit-spam software on the market today! Sort all your spam issues in one place now!</div>
</span></a>
<a href="#!" class="active"><span id="product2">
<div id="productblueheader">
<div id="productlogosblue2"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">In todays world, we won’t enter personal details in to untrusted websites, but we send personal information via regular (insecure) email all the time.</div>
</span></a>
<a href="#!" class="active"><span id="product3">
<div id="productblueheader">
<div id="productlogosblue3"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">****** is a revelation in security and ease of use. Get the best protection against viruses, spyware, scam websites and other threats.</div>
</span></a>
</div>
(then the same for row2 products 4-6)
you use .each() method of jquery and find .active class to remove it,
and then add .active class.
$(this).parent('a').each(function(){
$(this).removeClass('active');
});
$(this).parent('a').addClass('active');
This ought to work, but I couldn't test it without the relevant HTML:
$(document).ready(function () {
$("#product1").click(function () {
$("a.active").removeClass('active');
$(this).parent('a').toggleClass('active'));
$("#product2box").slideUp('slow', function () {
$("#product3box").slideUp('slow', function () {
$("#product4box").slideUp('slow', function () {
$("#product5box").slideUp('slow', function () {
$("#product6box").slideUp('slow', function () {
$("#product1box").stop().slideToggle(1000);
});
});
});
});
});
});
});
Also, there would probably be a better way to write all those sliding up functions. Do they really need to go on by one by the way?
$(document).ready(function() {
$(".producthandler").click(function() {
var ctx = $(this);
var productboxId = ctx.children().eq(0).attr("id");
ctx.toggleClass('active');
$("#" + productboxId + "box").stop().slideToggle(1000);
$(".producthandler").each(function() {
var ctx = $(this);
var producthandlerId = ctx.children().eq(0).attr('id');
if (productboxId !== producthandlerId) {
ctx.removeClass('active');
$("#" + producthandlerId + "box").slideUp(1000);
}
});
});
});
I am trying to create a news slider that consists of a big slide area (picture and heading) and a second area to the left which contains a simple list of all the slides.
I've managed to get the slider to work so that you can click on one of the list items and this then changes the slide.
However, I'd also like the slider to animate by default through all the slides. I'd like clicking on a list item to override the animation and make the animation loop go to the point in the loop at which the current slide is at. So if the user clicks slide 2, the next slide to be animated to will be slide 3. I'd also like hovering over a slide to pause the animation.
Any ideas how I can achieve the animation/hover part? I am new to jQuery so pretty confused.
This is what I've come up with so far:
var $newsitem = jQuery('.featured-news');
var $newsitem1 = jQuery('.featured-news.item-1');
var $newsitem2 = jQuery('.featured-news.item-2');
var $newsitem3 = jQuery('.featured-news.item-3');
var $newslistitem1 = jQuery( '.newslist.item-1' );
var $newslistitem2 = jQuery( '.newslist.item-2' );
var $newslistitem3 = jQuery( '.newslist.item-3' );
// click actions
$newslistitem1.click(function () {
$newsitem.hide();
$newsitem1.fadeIn();
});
$newslistitem2.click(function () {
$newsitem.hide();
$newsitem2.fadeIn();
});
$newslistitem3.click(function () {
$newsitem.hide();
$newsitem3.fadeIn();
});
// timed actions
animate();
function animate() {
$newsitem1.delay(4000).hide();
$newsitem2.delay(4000).fadeIn();
$newsitem2.delay(4000).hide();
$newsitem3.delay(4000).fadeIn();
}
HTML:
<ul>
<li class="newslist item-1">
News item 1
</li>
<li class="newslist item-2">
News item 2
</li>
<li class="newslist item-3">
News item 3
</li>
</ul>
<ul>
<li class="featured-news item-1">
<img src="http://placehold.it/350x150">
<br>News Story 1
</li>
<li class="featured-news item-2" style="display: none">
<img src="http://placehold.it/350x150">
<br>News Story 2
</li>
<li class="featured-news item-3" style="display: none">
<img src="http://placehold.it/350x150">
<br>News Story 3
</li>
</ul>
And here's a fiddle:
http://jsfiddle.net/HdDG6/
here is how I modified your code :
First, setup global variables :
var $newsitem = $('.featured-news');
// global variable of the current slide
var current = 0;
// global variable interval, which will call "nextSlide" func every 3s
var interval = setInterval(nextSlide, 3000);
I updated your slide list click function so it become general. You won't need to setup every slide click event now :
// attach event to every list item
$('.newslist').click(function () {
// clear the interval
clearInterval(interval);
// set it back to reset the timer
interval = setInterval(nextSlide,3000);
// set current slide var to .newslist item index (0, 1, 2,...)
current = $(this).index();
// hide every shown item
$newsitem.hide();
// show item which index = current slide index
$newsitem.eq(current).fadeIn();
});
Then I created the nextSlide function which will increment current before hiding every slides and showing the current one as $('.newslist').click function
function nextSlide () {
// if current slide is the last one, go back to the first, else increment
if (current == $newsitem.length - 1) {
current = 0;
} else {
current++;
}
// hide every slides and show the good one
$newsitem.hide();
$newsitem.eq(current).fadeIn();
}
Then I finally set the hover event, which simply clear the timer when mouse enter .featured-news and set it back on mouse leave :
$('.featured-news').hover(function(ev){
clearInterval(interval);
}, function(ev){
interval = setInterval(nextSlide,3000);
});
Here is a working fiddle : DEMO
This way you can add as many slides as you want without changing the code. You can also bind nextSlide function to any button or control (like arrow keys or a "next slide" button).
Hope I helped you :)
What I want is when I click an anchor it will add a class.
My markup:
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
Say If I clicked the class="promo-call" it will add class active-call and when I clicked promo-text, it will add class active-text.
Just to be clear on what's on my mind:
E.g:
When clicked promo-call
When clicked promo-text
When clicked promo-data
And so on...
Also when an anchor is active the rest must be inactive, will return to their original class.
I have this code right now:
Just a trial and error. For now I'm just playing the two anchor: class: promo-call & promo-text. What's odd is I have to click twice the button for the background image to show.
jQuery(document).delegate(".promo-call","click",function(e){
jQuery(".promo-text").removeClass("active-text");
jQuery(".promo-call").addClass("active-call");
});
jQuery(document).delegate(".promo-text","click",function(e){
jQuery(".promo-text").addClass("active-text");
jQuery(".promo-call").removeClass("active-call");
});
FYI: I'm using Jquery-Mobile.
try this:
var promobtt = $('a[class^="promo"]');
promobtt.on('click', function(evt) {
evt.preventDefault();
promobtt.removeClass('active-text active-data active-call ...');
$(this).addClass(this.className.replace(/^promo/, "active"));
});
Note that here promobtt.removeClass('active-text active-data active-call ...'); you have to list all active classes you need to use.
Otherwise you should provide one unique "active" class (e.g. active) instead of <n> different active classes: if you're doing this only for a matter of styling you could style you links anyway with one class doing like so.
.promo-text { ... }
.promo-text.active { ... }
.promo-data { ... }
.promo-data.active { ... }
and so on. This would simplify both css code and javascript code because following this way you would only need a toggleClass('.active') applied to all links.
$('a[class^="promo"]').on('click', function() {
$.each('a[class^="promo"]', function() {
$(this).attr('class','');
});
var currentClass = $(this).attr('class');
if(currentClass)
{
var startClass = string.split('-');
if(startClass.length > 1)
{
$(this).toggleClass('active-' + startClass[1]);
}
}
});
Note that this will only work for single-classed elements as in your example.
With .toggleClass("promo-call") you can get this result