I'm currently building a slider using Slick.JS alongside some SVG illustrations and I was wondering what the process would be to get the elements of the SVG to change fill colour when the relevant slide is active.
JS Fiddle below should show where I am at the moment:
http://jsfiddle.net/twqvchj6/5/
$('.tugslider').on('afterChange', function() {
var dataId = $(this).slick('slickCurrentSlide');
var slideno = $('a[data-slide]').data('slide');
if(dataId == slideno + 1){
}else{
};
});
Currently I have a blank IF statement that I believe is the correct foundation, but I cannot figure out how to target each of the segment elements individually based on their data-slide number. I had a fill change in here previously changing CSS but it only changed the first segment.
Any help appreciated
Cheers!
You are on the right track, only a few points should be adjusted:
1 - Using slick afterChange event inner declaration, you can receive the currentSlide param;
2 - You can use $("[data-slide='" + dataId + "']") to get the element referenced with index that you have (currentSlide), with this, create a control that manipulates your svg based on a class:
var dataId = currentSlide;
var svgs = $('a[data-slide]');
var slideno = $("[data-slide='" + dataId + "']");
svgs.find('.active').removeClass('active');
slideno.find('path').addClass('active');
3 - Slides index start in 0, update your HTML data-slide;
4 - Also, your HTML is not closing </ul> tag.
Final findle: http://jsfiddle.net/sparhawk_odin/u8vfgosp/
Related
I have several div elements with incremental IDs (e.g. div0, div1, div2 (I know this is bad practice - I'm developing a dynamic CSV-to-HTML converter for Outlook calendar exports)) and I'd like to switch between them using jQuery linked to forward/back buttons . What I'm trying to do is as follows (in meaningless pseudo-code):
int pos = 0
forward.onclick
hide ("#div"+pos)
pos++
show ("#div"+pos)
back.onclick
if pos != 0
hide ("#div"+pos)
pos--
show ("#div"+pos)
Since I know next to nothing about jQuery, my questions are 1. What would the syntax be for implementing the above example (assuming I'm on the right track), and 2. Is there a way in jQuery to somehow check for an upper boundary so the counter doesn't increase above the number of divs?
If you want to know how many divs you have in jQuery, select them and take the length of your selection:
$('.div').length
You could even just use that selection to cycle through which divs to show:
var $divs = $('.div');
var upperLimit = $divs.length - 1;
var index = 0;
// on arrow click
$($divs[index]).hide();
index++ (or index--, depending on the arrow)
$($divs[index]).show();
int is not a data type in JavaScript. Use var. Declaration would be var pos = Number(0). To prevent exceeding the boundaries of number of divs, declare a variable with the number of divs you have, and inside your hide and show calls, use pos℅divLength instead of pos. Suppose you have total divs as 4, you will never exceed div3 this way. It will iterate from div0 to div3. Refer this to learn how to use show and hide methods.
Here's a demo.
var index = 0;
$('#div' + index).show();
$('#next').click(function () {
index++;
$('#back').prop('disabled', false);
if (index === fakeData.length - 1) {
$('#next').prop('disabled', true);
}
$('.items').hide();
$('#div' + index).show();
});
$('#back').click(function () {
index--;
$('#next').prop('disabled', false);
if (index === 0) {
$('#back').prop('disabled', true);
}
$('.items').hide();
$('#div' + index).show();
});
The above code will disable and enable the next and back buttons based on whether you are at the beginning or the end of your list of data. It hides all elements and then shows the specific one that should be shown.
I am trying to change the background image of a section based on whatever slide has a particular classname.
I have an unordered list that is genereated with a loop
<ul class="tes-image-links">
<li>http://exampleimg1.jpg</li>
<li>http://exampleimg2.jpg</li>
<li>http://exampleimg3.jpg</li>
</ul>
I also have some javascript to change the background image of the section the unorderd list is contained in. The url for the background image depends on which div has the class name cycle-slide-active
var cycleSlide = $('.cycle-slideshow').find('.cycle-slide');
for (i = 0; i < cycleSlide.length; i++) {
if (cycleSlide.eq(i).hasClass('cycle-slide-active')){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
apimglink = apimglink.replace("http://localhost", "");
$('.ap-testimonial').css('background-image', 'url(' + apimglink + ')');
console.log(apimglink);
} //End If
}; //End For
The above code gives me the right background image for whatever slide is first loaded, but after the slide changes nothing else happens.
I need help Executing the above code whenever cycleSlide.className for any cycleSlide element is changed.
Thank you all in advanced.
I am trying to edit a script that changes the images of a div as shown below, to change the background-image property of #header.
As you can see in my fiddle here, http://jsfiddle.net/HsKpq/460/ I am trying to show the images into the $('#header').css('background-image',..................).fadeTo('slow',1);
How can I do this? I guess I have to change some other parts too..
var img = 0;
var imgs = [
'http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg',
'http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg',
'http://www.istockphoto.com/file_thumbview_approve/9712604/2/istockphoto_9712604-spring-sunset.jpg'
];
// preload images
$.each(imgs,function(i,e){var i=new Image();i.src=e;});
// populate the image with first entry
$('img').attr('src',imgs[0]);
var opacity = 0.1; // change this for minimum opacity
function changeBg() {
$('img').fadeTo('slow',opacity,function(){
$('#header').css('background-image',..................).fadeTo('slow',1);
});
}
setInterval(changeBg,5000);
You need a couple of fixes:
Use a simple increment to keep track of the current image.
typo: "images" -> "imgs"
$("img") doesn't select anything, so the JQuery fadeto "complete" callback is never fired (I assume you meant to fade the div itself)
you need "url('http://...')" for the "background-image" CSS property
function changeBg() {
if (i >= imgs.length) i=0;
$('#header').fadeTo('slow',opacity,function(){
var val = "url('" + imgs[i++] + "')";
console.log(val);
$('#header').css('background-image',val).fadeTo('slow',1);
});
}
Here is the updated demo.
I'd like to add simple pagination to this existing script:
http://sixrevisions.com/demo/slideshow/final.html
So basically it would count the number of <div class="slide"> instances and then generate a list (e.g. 1 - 2 - 3 - 4) and each has a hyperlink to that specific slide.
I'm not so hot with Javascript so would love some help with this.
Can someone show me how to achieve this?
Many thanks for any pointers :-)
Basically, you want to add a link element for each slide using the variable numberOfSlides, then add closure to the bindings on those links. You can reuse the animation calculation by assigning the counter variable to each link as it's created.
for(i = 0; i < numberOfSlides; i++) {
(function() {
var slideIndex = i;
var slideLabel = i + 1;
var x = $('<a id="slide' + slideLabel + '"href="javascript:void(0);" class="paginatorLink">' + slideLabel + '</a>'); //Format your links here
x.click(function() {
currentPosition = slideIndex;
// Hide / show controls
manageControls(currentPosition);
$('#slideInner').animate({
'marginLeft': slideWidth * -slideIndex
});
});
$('#slideshow').append(x);
})();
}
Here's a fiddle: http://jsfiddle.net/radiatorsounds/aQb6P/
I have two progressbars using jQuery UI in single div (by subdividing the div). I also managed them to draw vertically using a modified version of the jQuery UI progressbar code (drawn from this forum thread). But they don't get drawn next to each other as expected.
Here's the code where I'm setting them up:
function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
first= $("<div>").addClass("first").appendTo(target);
second= $("<div>").addClass("second").appendTo(target);
}
first.progressbar({value: self,orientation: 'vertical'});
second.progressbar({value: average,orientation: 'vertical'});
}
Can anybody please tell me how can I style them so that they show next to each other?
If they are wrapped in a div, then you could try float:left, or possibly even display:inline. If you are floating them and it messes up your page layout, try wrapping them in a div with overflow:auto
function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
first= $("<div style='float:left'>").addClass("first").appendTo(target);
second= $("<div style='float:left'>").addClass("second").appendTo(target);
}
first.progressbar({value: self,orientation: 'vertical'});
second.progressbar({value: average,orientation: 'vertical'});
}
Actually the ans was right there... easy one. all i had to do is set css of both objs (first,second)
e.g to place second progress bar at any place
second.progressbar({value: average,orientation: 'vertical'});
second.css({"position":"absolute","left":"30px"});
and so on... for other css values