We Keep Coding

menu don`t collapse after clicking link

I have some bug problem with my collapse menu. When I click on some menu item when menu on mobile screen, menu don`t collapse.
JS CODE:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 460 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
HTML CODE:
<nav class="clearfix">
<ul class="clearfix">
<li>Top</li>
<li>About</li>
<li>Sessions</li>
<li>Contact</li>
<li>Login</li>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
<img style="width:30px; height:30px; margin-top:10px;" src="images/collapse.png">
<div class="logo">
<img src="images/logo.png">
</div>
</nav>

Looks like the only way to trigger the event is with the onclick on the element with the id "pull". Maybe you need to add the same event for every "a" element.
In order to have more control over the "a" element, you can assign an id to each one.
Example(html):
<ul class="clearfix">
<li><a id="aTop" href="#top">Top</a></li>
Example(JS):
var link = $('#aTop');
.
.
.
$(link).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

check this link
http://jsfiddle.net/H3KRk/5/
//$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
});
.nav {
width:1024px;
margin:0px auto 0px auto;
background: #757575; /* Old browsers */
background: -moz-linear-gradient(top, #757575 0%, #474747 47%, #111111 47%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757575), color-stop(47%,#474747), color-stop(47%,#111111), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.nav ul {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.nav ul li {
position:relative;
display:inline;
list-style:none;
margin:0px 13px 0px 0px;
padding:0px 0px 0px 0px;
line-height:40px;
cursor:pointer;
}
.nav ul li ul {
position:absolute;
left:0;
right:0;
width:1024px;
padding:0px 0px 0px 0px;
/*padding:14px 15px 14px 15px;*/
background:#f1f1f1;
}
.nav ul .clicker {
background:none;
}
.nav ul .clicker:hover {}
.nav ul li a {
/*display:block;
padding:8px 10px 8px 40px;*/
color:#ffffff;
text-decoration:none;
background:none;
}
.nav ul li a:hover {
background:#F2F2F2;
}
.nav ul .active {
background:#f00;
}
#contentHolder {
padding:9px 13px 9px 13px;
width:998px;
background:#cccccc;
}
/* Fallbacks */
.nav .no-js ul {
display:none;
}
/*
.nav .no-js:hover ul {
display:block;
}
*/
.nav > .no-js > li:hover > ul {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="nav">
<ul class="no-js">
<li>
<a class="clicker">Offers</a>
<ul>
<div id="contentHolder">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</div>
</ul>
</li>
<li>
<a class="clicker">Offers-2</a>
<ul>
<div id="contentHolder">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</div>
</ul>
</li>
<li><a class="clicker" href="#">All product</a></li>
<li>Glassworks/Artist</li>
<li>Series</li>
<li>Gift guide</li>
<li>About art glass</li>
<li>Outlet</li>-->
</ul>
</div><!-- end - nav -->

You don't have any event on menu link.
$('nav ul li').on('click', 'a', function(){
menu.slideToggle();
})

How to update a odometer value with a button click in Javascript?

<style>
body {
font-family: "Helvetica Neue"
}
#wrapper .counter {
display:inline-block;
font-size:2em;
line-height:1.2em;
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:inline-block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
<div id="sidebar" class="sidebar" style="float:left;">
<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>
<span class="counter"><span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="separator">
<span title=",">,</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="4">4</span>
<hr>
</span>
</span>
<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>
</div>
<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><span class="ssbp-text">Facebook</span><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><span class="ssbp-text">Twitter</span><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><span class="ssbp-text">Linkedin</span><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><span class="ssbp-text">Email</span></div></div> <div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>
<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
</div>
I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.
The following is the script:
<script>
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
// Remove comments to animate odometer
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.

In jquery, binding an event to a click event on a button can be done like so:
HTML:
<button id="mybuttonID">Click me to increment odometer!</button>
JS:
$(document).ready(function() {
// wait for the dom to initialize before binding events
$('body').on('click', '#mybuttonID', animateDigit);
});
Hope this helps!

if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output

jQuery Animate Won't Work (even samples don't)

I'm trying to get a simple jQuery animation to work and I can't seem to make it happen. I'm not sure if I'm overlooking a simple syntax issue or something bigger. The samples I've found online don't seem to work either, so I figured I'd try to get a second opinion.
The relevant portions of the head is as follows:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.menu_ul li').mouseenter(
function() {
$('#menuitem1').animate({
'background-image': 'linear-gradient(to bottom, #1058c4 0%, #1058c4 100%)',
'color' : '#ffffff'
},500);
}
);
$('.menu_ul li').mouseleave(
function() {
$(this).animate({
'background-image' : 'linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%)',
'color' : '#343434'
},500);
}
);
});
</script>
The HTML is as follows:
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
The CSS for it as follows:
.menu_ul li {
padding-top:13px;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
Thanks in advance.

Here's one way to change the background gradient with an opacity change on a secondary element:
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME<span> </span></li>
<li id="menuitem2">PLAYLIST<span> </span></li>
<li id="menuitem3">COMMUNITY<span> </span></li>
<li id="menuitem4">ABOUT US<span> </span></li>
</ul>
jQuery
$('.menu_ul a').mouseenter(
function() {
$(this).siblings('span').animate({
'opacity' : 1
},500);
}
);
$('.menu_ul a').mouseleave(
function() {
$('.menu_ul span').animate({
'opacity' : 0
},500);
}
);
CSS
.menu_ul li {
padding:12px 0;
margin:0;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
position:relative;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
.menu_ul a,
.menu_ul span{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.menu_ul a{
z-index:1;
line-height:55px;
display:block;
}
.menu_ul span{
opacity:0;
z-index:0;
display:block;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle Here
But let's be real here - CSS3 is better. (depending on the browser support needed)
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
CSS
.menu_ul li {
padding:0;
margin:0;
text-align:center;
display:block;
float:left;
width:237px;
}
.menu_ul a{
margin:0;
padding:12px 0;
display:block;
color:#343434;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu_ul a:hover{
color:#fff;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle.

Styling a class after added via jQuery

I am trying to style a button depending on whatever it was clicked or not. To be more precise, I have a button which in the normal state and hover state has some CSS styling ( not important ), and when it's clicked, a certain class is added to it ( in my case selected ).
And if that class it's added another CSS style should be applied to it. Well, I have the JavaScript ( it's more jQuery ) which adds the class I need to the button, and the CSS style. But it seems like nothing is happening.
I will paste some of the code so you can see what I'm using for that, but I'll paste the link to the actual working thing.
/*
The jQuery used for adding the class
I'm using log() to check if anything happens, but only till I make it work
*/
var iqns = $(this).find('.iqn');
$(iqns).each(function() {
var iqn = $(this).parent();
$(iqn).on('click', function() {
if($(this).hasClass('.selected')) {
log('Rmoved / Added Class');
$(this).removeClass('.selected');
$(this).addClass('.selected');
} else {
log('Added Class');
$(this).addClass('.selected');
}
});
});
<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->
<div id="509247" class="product-wrapper">
<div class="product">
<div class="description">
<div class="thumb">
<i class="icon">
<img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
<span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
<img src="assets/gfx/zoom-icon.png" alt="Zoom">
</span>
</i>
</div>
<div class="info">
<div class="sales">
<div class="icon">
<img src="assets/gfx/sales-icon.png" alt="Sales Icon">
</div>
<div class="text">
<p>2</p>
</div>
</div>
<div class="rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
</div>
</div>
</div>
<div class="purchase">
<div class="info">
<i class="icon">
<i class="iqn"></i>
<span class="tooltip">$ 7</span>
</i>
</div>
<div class="proceed">
<a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
</div>
</div>
</div>
</div>
/*
Some of the CSS ( it is actually LESS )
*/
.icon {
position: relative;
margin: 0px auto;
margin-top: 12px;
margin-left: 12.5px;
display: block;
cursor: pointer;
.dimensions(35px, 35px);
.background(#noise-monochrome, #323b43, #242a30);
.border(1px, 1px, 1px, 1px, #242a30);
.border-radius(25px, 25px, 25px, 25px);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
.text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);
.iqn {
position: relative;
margin: 0px auto;
display: block;
.dimensions(35px, 35px);
.background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
}
.tooltip {
position: absolute;
display: block;
top: 0px;
left: 40px;
pointer-events: none;
.dimensions(50px, 35px);
.background(#1f252a);
.border(1px, 1px, 1px, 1px, #1a1f23);
.border-radius(5px, 5px, 5px, 5px);
.font-format(Arial, 16px, normal, bold, normal);
.text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
.opacity(0);
.transition (all, 0.25s, ease-in-out);
}
.tooltip:before {
position: absolute;
top: 7.5px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #1f252a;
content: '';
z-index: 5;
}
.tooltip:after {
position: absolute;
top: 6.5px;
left: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid #1a1f23;
content: '';
z-index: 0;
}
&:hover {
.background(#noise-monochrome, #3c4750, #2c353c);
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
}
&:hover > .tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
&.selected {
.background(#noise-monochrome, #2c353c, #3c4750);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
.tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
}
}
But what I pasted won't be very helpful, probably the link will help more: Anchor ; navigate to the Shop page.
I would appreciate it if someone could help me out with identifying the problem, I'm not so good using the console, perhaps that would help me a lot.

You dont need to set a dot (.) to add a new class, remove and the code should work.
$(this).removeClass('selected');

Jquery: Add class to every second visible element

I'm trying to create a dynamic portfolio gallery where you can hide show items by clicking categories. Everything works apart from adding a class to elements hidden/showing when categories are clicked.
I currently have:
$(document).ready(function() {
$('ul.filter a').click(function() {
$(this).css('outline','none');
$('ul.filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
} else {
$('div.portfolio').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden').addClass("show");
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
}
});
}
return false;
});
});
It's this part of the code that seems to have the problem:
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
Basically, I'm looking to add the class .last to every second "visible" item in my portfolio list.
Anyone?
CSS
/* -------------- Portfolio List ---------------- */
#portfolio-items {
font-size: 11px;
}
#portfolio-items ul, #portfolio-items li {
list-style:none;
}
#portfolio-items .portfolio {
float:left;
width:265px;
height:145px;
margin:0px 60px 50px 0px;
display:block;
}
#portfolio-items .portfolio .portfolio-client {
float:left;
font-size: 11px;
color: #666;
text-decoration: none;
}
#portfolio-items .portfolio.last {
margin-right:0px;
}
#portfolio-items .portfolio img {
border:solid 6px #fff;
-moz-box-shadow: 1px 1px 3px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #999; /* Safari, Chrome */
box-shadow: 1px 1px 3px #999; /* CSS3 */
margin: 0px 0px 5px;
transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-o-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-webkit-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-moz-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
transform-origin: centre; /* in Safari, the origin for transformation */
-o-transform-origin: centre; /* in Firefox, the origin for transformation */
-webkit-transform-origin: centre; /* in Safari, the origin for transformation */
-moz-transform-origin: centre; /* in Firefox, the origin for transformation */
}
#portfolio-items .portfolio img:hover {
-moz-box-shadow: 1px 1px 6px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 6px #999; /* Safari, Chrome */
box-shadow: 1px 1px 6px #999; /* CSS3 */
transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
box-shadow: 0px 0px 20px #ccc;
-o-box-shadow: 0px 0px 20px #ccc;
-webkit-box-shadow: 0px 0px 20px #ccc;
-moz-box-shadow: 0px 0px 20px #ccc;
}
.view-project {
background: url(/themes/cogo/default_site/images/view-project.png) no-repeat right center;
display: block;
float: right;
height: 14px;
width: 87px;
padding-right: 20px;
text-align: right;
}
HTML
<div id="portfolio-items">
<div class="portfolio first cms content-management e-commerce clothing kids shops toys">
<a href="http://ee.dev/portfolio/detail/be-my-bear">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/bemybear-project-254x139.jpg" width="254" height="139" title="Be My Bear" />
</a>
Be My Bear
<span>View Project</span></div>
<div class="portfolio last cms content-management business-services">
<a href="http://ee.dev/portfolio/detail/joloda">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/joloda1-254x139.jpg" width="254" height="139" title="Joloda International Ltd" />
</a>
Joloda International
<span>View Project</span></div>
<div class="portfolio first buddypress cms content-management wordpress business-services coaching events training">
<a href="http://ee.dev/portfolio/detail/nwwn">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/nwwn-project-254x139.jpg" width="254" height="139" title="NWWN" />
</a>
North Wales Women’s Network
<span>View Project</span></div>
<div class="portfolio last e-commerce jewellery shops">
<a href="http://ee.dev/portfolio/detail/italian-world">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/italianworld-254x139.jpg" width="254" height="139" title="Italian World" />
</a>
Italian World
<span>View Project</span></div>
<div class="portfolio first cms content-management drupal designers printers">
<a href="http://ee.dev/portfolio/detail/mms-almac">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/mms-project-254x139.jpg" width="254" height="139" title="MMS Almac" />
</a>
MMS Almac Ltd
<span>View Project</span></div>
<div class="portfolio last cms content-management charity community training">
<a href="http://ee.dev/portfolio/detail/europe-direct">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/europedirect-project-254x139.jpg" width="254" height="139" title="Europe Direct" />
</a>
Ectarc
<span>View Project</span></div>
</div>?
FILTER MENU
<ul class="filter">
<li class="booking-systems">Booking Systems</li>
<li class="buddypress">Buddypress</li>
<li class="cms">CMS</li>
<li class="content-management">Content Management</li>
<li class="drupal">Drupal</li>
<li class="e-commerce">E-Commerce</li>
<li class="silverstripe">Silverstripe</li>
<li class="wordpress">Wordpress</li>
</ul>

You'll need to use the :odd selector:
http://api.jquery.com/odd-selector/
Not exactly sure how to implement it in your code, but probably something like $('.portfolio:odd') or even $('.portfolio:visible:odd').
I'll give it a try in jsfiddle in a second.

$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
would give a "zebra stripes" like effect.

Well just a minor modification then:
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
but you will have to call it every time you hide/unhide any elements.. And you will also have to remove the classes before also.. something like this:
$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
and i think you should be good!