Develop Reference

Slick.js Custom Paging hook and CSS

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/

I need help switching background images with jQuery

I have an unordered list of img url's that are generated with from a custom post type in wordpress.
I have a slider and am using the number of slides to determine which Image url I want as the background for my element.
Sample of generated list:
<ul class="tes-image-links">
<li>http://img-url1</li>
<li>http://img-url2</li>
<li>http://img-url3</li>
</ul>
Sample of my jQuery
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial.img-back').css("background" , "'url('"+apimglink+"') !important'" );
}
});
When I use console.log() it spits out the right text that is in the <li> tag, but I can't seem to get this to work.

Remove single quotes and !imprtant from background properties. Also dont forget to wrap your function in a DOM ready function
$(document).ready(function(){
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial .img-back').css("background" , "url('"+apimglink+"')" );
}
});
})

The previous code is giving me issues and I could not get it to show the image with .each().
Using a for-loop I was able to get the Section to use the URL as a background based on the slide number:
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
Thank you all for your help.

How to change the css attribute of #header using jQuery and an array of images?

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.

Need to fix JavaScript so that the array begins at the right position

Hi I have got a jsFiddle to share but never used it before so I hope I did it right..
http://jsfiddle.net/Mayron/3V62C/
I also have these screen shot to better show what I mean:
http://i.imgur.com/NgQk5P2.jpg
I have a table of images in the gallery page and when you click on an image it opens up a frame that shows a blank but much larger image which gains the source of the smaller image you clicked on. That works fine but I have all the images in the gallery listed in an array and the large frame has three buttons on it: previous, close and next. So far the JavaScript code allows you to click next and previous to go through them but it always begins the journey from array[0] and that is no good if you click to view the 6th one in the list from the gallery page first for example.
I hope that makes sense if not then let me know!
The issue is with this line that causes it to begin from the first image:
currentIndex = 0;
How can I change this so that the currentIndex number is the image that the user first clicks on?

There are several ways but that really depends on what you use and how clean you want your code to look. I put a hidden input in each of my divs and retrieve it with JQuery's $("input", $(this).parent()).val();
You could also use Jquery's index. http://api.jquery.com/index/
You could have it in a class and retrieve the class of the clicked item (same idea as having an ID for each image)
On click you can have a selector added in the class attribute then you can use a for-each to count how many images go through before you hit that class in your image order.
You could also do showLarge(this, index#) and set the index that way. I cannot get your JS fiddle to work though.
Do this for every image line:
<td><a href="#" onclick="javaScript:showLarge(this,1);" ><img class="imgBorder" id="image1" src="Media//Gallery//img_1.jpg" alt="Gallery Image 1" /></a>
</td>
This puts onclick in anchor tag and adds an id in the image tag named image1 (1 is the number you put in the anchor tag 2nd param)
In javascript, do:
function showLarge(img, index) {
var largeFrame = document.getElementById("zoomedIn");
largeFrame.style.visibility = 'visible';
var largeImage = document.getElementById("largeImage");
src = document.getElementById("image"+index);
largeImage.src = src.src;
currentImage = index;
}
This gets the image by id according to index clicked
For the next+prev button do:
function changeImage(direction) {
index = parseInt(currentIndex) + parseInt(direction);
if (index < 1) {
index = 1; // or use imgArray.length to rotate round
}
if (index > imgArray.length) {
index = imgArray.length; // or use 0 to rotate round
}
src = document.getElementById("image"+index);
document.getElementById('largeImage').src = src.src;
currentIndex = index;
}

Try something like this:
function findIndex(src) {
for (i = 0; i = imgArray.length; i++)
if (imgArray[i].src == src) {
currentIndex = i;
return;
}
}
function showLarge(img) {
var largeFrame = document.getElementById("zoomedIn");
largeFrame.style.visibility = 'visible';
var largeImage = document.getElementById("largeImage");
largeImage.src = img.src;
findIndex(img.src);
}
It will update the currentIndex value.
I've updated your jsfiddle: http://jsfiddle.net/RN4bN/
But I can't run it, so try directly on your code.

Put an ID on each of them which is the number of it from the array, then when it is clicked change the currentIndex to that.

Table of content like JavaScript-Garden

I want to create a table of content similar to JavaScript Gardens. How do they determine which section is currently active and do you have any recommended JavaScript libraries that imlpement this behavior?
Edit: So the thing I am asking for is how to know which section currently is active on the screen while the user is scrolling so that I can highlight that section in the table of content.

You can detect when an element enters the viewport of your browser, and then highlight the corresponding menu entry.
By using Firebug in Firefox, you can see that they use the scrollTop property of the window to know what the user is looking at.
highlight: function () {
// get the scroll height
var scroll = this.page.window.scrollTop(),
articleID = this.names[this.names.length - 1].id;
// while our item are above the viewport, we enumerate
for (var i = 0, l = this.names.length; i < l; i++) {
if (this.names[i].offset > scroll) {
articleID = this.names[i - 1].id;
break;
}
}
// we've got the content to highlight, let's add classes and expand menu-entries
var sectionID = articleID.split('.')[0],
page = this.page,
nav = page.nav;
if (sectionID !== page.section) {
nav.filter('.nav_' + page.section).removeClass('active');
nav.filter('.nav_' + sectionID).addClass('active');
this.expand(sectionID);
page.section = sectionID;
}
if (articleID !== page.article) {
nav.find('a[href="#' + page.article + '"]').removeClass('active');
nav.find('a[href="#' + articleID + '"]').addClass('active');
page.article = articleID;
this.mobile(articleID);
}
}
During the initialization they find out what each part takes in height
init: function(attribute) {
this.heights = this.page.nav.find('ul').map(function(idx, ele) {
return $(this).outerHeight();
}).get();
From these two pieces of info, they can highlight the correct entry to what the user is looking at, by attaching the function to the scroll, resize, etc... events of the window.

You can do that via html and css. They use a hover style for each entry and then link to html content via named anchors. You can see that in the address bar when you click on link.
E.g.:
TOC Entry:
<code>hasOwnProperty</code>
Content Body:
<a name="object.hasownproperty"></a>
<!-- HTML Content here -->
Of course, if you want nice animation and stuff, use something like
http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/ or http://css-plus.com/2011/03/plusanchor-jquery-plugin/
Update:
To Achieve highlighting (pseudocode):
Keep a tab of all your sections
Attach an onscroll event handler to the body
onscroll, check the scrollTop to each section's top
If match found, remove highlight class from previous TOC entry and add it to new TOC entry.
You can name your TOC anchors such a way that they match the section's id. Then you can easily retrieve corresponding TOC entry by just saying #id and add your class to it.