Comments on: A Continuation of the Isotope Tutorial: Highlight the currently active link

By: neomale

neomale — Wed, 05 Jun 2013 15:04:00 +0000

Hi, great tutorials you are writing keep your good job! I already use your “combination filters” and it work great.

2 questions

First
Like i say i use your “combination filters” so how can i apply on my 2 filters this tutorial. I already install it and it work on my first filter but how can i apply it on my second?

Second
My first filter need different data-current background color for each choice. Is this possible or am i dreaming

Thanks for any help
Regards

By: Dylan

Dylan — Wed, 22 May 2013 20:53:00 +0000

This is great, thanks! I have a question though: If the user is not clicking on text, but instead images, how would I change the image on click instead of changing the font color?

By: Alexandre Smirnov

Alexandre Smirnov — Wed, 01 May 2013 21:35:00 +0000

Actually, that’s an even better way to do it. Thanks!
**
[image: Disqus] Settings
A new comment was posted on Design Lunatic —————————— *Curtis Flick*
Awesome tut! I modified the js to make use of the addClass() and removeClass() functionality instead to allow changes to be done is css. I wonder if there’s any potential problem with that?

3:17 p.m., Wednesday May 1
* Reply to Curtis Flick * Moderate this comment by email

Email address: *curtisflick@gmail.com* | IP address: 97.112.160.218

Reply to this email with “Delete”, “Approve”, or “Spam”, or moderate from the *Disqus moderation panel*.

——————————

You’re receiving this message because you’re signed up to receive notifications about activity on threads authored by baldeagle76. You can unsubscribe from these emails, or reduce the rate at which we send them by adjusting your notification settings .
[image: Disqus]

By: Curtis Flick

Curtis Flick — Wed, 01 May 2013 19:17:00 +0000

Awesome tut! I modified the js to make use of the addClass() and removeClass() functionality instead to allow changes to be done is css. I wonder if there’s any potential problem with that?

By: Anonymous

Anonymous — Mon, 07 Jan 2013 19:54:27 +0000

[...] [...]

By: Anonymous

Anonymous — Mon, 26 Nov 2012 13:15:00 +0000

Now it's ok, thank's so much, I lost to change data-filter in title... All All

By: Alexandre Smirnov

Alexandre Smirnov — Sat, 24 Nov 2012 04:10:00 +0000

Have you tried just copy-pasting the code from the ZIP file in the “Download Links” link? I know for a fact that that works, so maybe that will help you.

By: Anonymous

Anonymous — Fri, 23 Nov 2012 11:33:00 +0000

Hi Alexandre,
thank you very much for your reply.

Even if I change as you say (removeClass and addClass) I did not change the situation, the menu remains unchanged and isotope does not work, I think there is an error in the script because the script instead of using your other article (Isotope tutorial) work the animations …

I can not understand where is the error

$ (Document). Ready (function () {
var $ container = $ (‘# content-portfolio’);
tofilter var = ‘*’;

$ Container.isotope ({
filter: tofilter,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false,
}
});

$ Container.attr (‘data-current’, tofilter);

CheckActive ();

$ (‘# Subnav-portfolio a’). Click (function () {
var title = $ (this). attr (‘title’);
var text = $ (this). text ();
if (text == “All”) {
var selector = title;
}
else {
var selector = “.” + Title;
}

$ Container.attr (‘data-current’, selector);

$ Container.isotope ({
filter: selector,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false,
}
});

CheckActive ();

return false;
});

CheckActive function () {

$ (‘# Subnav-portfolio a’). Each (function () {

$ (This). RemoveClass (‘active’);

var title = $ (this). attr (‘title’);
title = ‘.’ + title;

if (title == ‘. *’) {
title = ‘*’;
}

var = $ currentCat container.attr (‘data-current’);

if (title == currentCat) {
$ (This). AddClass (‘active);
}

});
}

});

All

Web

Ebay

By: Alexandre Smirnov

Alexandre Smirnov — Fri, 23 Nov 2012 00:54:00 +0000

Instead of manually defining the color for each link, you could declare a new variable which holds the CSS “color” value of each link, and use that.
var linkColor = $(‘#nav a’).css(‘color’);
$ (‘# nav a’). each (function () {
$ (this). css ({
color: linkColor
});

if (title == currentCat) {
$ (this). css ({
color: ‘# 00FF00′
});

}

});

Another option you have is to create a class, for example “.active”, and apply that whenever the link is active.

$ (‘# nav a’). each (function () {
$ (this). removeClass(‘active’);

if (title == currentCat) {
$ (this). addClass(‘active’);

}

});

By: Anonymous

Anonymous — Fri, 23 Nov 2012 00:33:00 +0000

Hello, thanks for the tutorial, but I can not change some lines of code:
I have already allocated to the menu through css data
li a {text-indent:-9999px; background: url (.. / images / subnav.png) 0 0;}
li a: hover {opacity: 1;}
li.selected to {opacity: 1;}
li.all a {background-position: 0 0;}
li.all a: active {background-position: 0-31px;}
li.all.selected a {background-position: 0-31px;}
li.web a {background-position:-78px 0;}
li.ebay a {background-position:-156px 0;}
and so on …

I just do not understand what I need to change these lines of code:

$ (‘# nav a’). each (function () {
$ (this). css ({
color: ‘# 595959′
});

if (title == currentCat) {
$ (this). css ({
color: ‘# 00FF00′
});

where instead of saying the color, I go get the settings on the file style.css

Could you help me? thanks