Jump to content



Photo

2nd menu option with jQuery


  • Please log in to reply
7 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 21 January 2013 - 19:13

http://www.romabio.c...ts/preview.html <--- My Example /

http://www.redbox.com/movies <--- What I'm trying to do /

http://www.neowin.ne...uery-quicksand/ <--- First post about this /





If you remember, I was trying to get quicksand working and someone help me with doing a short jQuery code to do the same thing. Well, everything is working great with just doing one menu but now. I would like to add on to it so that their is a second option for the user to select. I provided the link to My Example. I don't know how to right the code in jQuery so that the user can also sort the list in to Interior or Exterior like they did in the Redbox movie list. I don't think it would be really hard for someone that knows jQuery to quickly right the code for me. I'm more of a front-end web designer and then a back-end one.

I put the code below but not all of the product DIV code because it's mostly the same thing just the li class and h1 is different.






<div id="dropdown">
<ul class="filter">
<li>Product Information List
	 <ul>
		    <li class="current"><a href="#">All Products</a></li>
		    <li><a href="#">Limewash Products</a></li>
		    <li><a href="#">Slaked Lime Plasters</a></li>
		    <li><a href="#">3.5 NHL Cements</a></li>
		    <li><a href="#">Potassium Silcate Paints</a></li>
		    <li><a href="#">Silossanic Paints</a></li>
		    <li><a href="#">Stain &amp; Varnishes</a></li>
		    <li><a href="#">Specialty Products</a></li>
  </ul>
</li>
</ul>
</div>
<div id="dropdown2">
    <ul class="filter">
	    <li class="current"><a href="#">All</a></li>
	    <li id="drop2"><a href="#">Interior</a></li>
	    <li id="drop3"><a href="#">Exterior</a></li>
    </ul>
   
</div>
</div>




<ul class="items">

                <li class="Limewash Products">
                    <a href="#"><div class="science-list shadow horizontal">
                        <img src="http://placehold.it/300x159" alt="" longdesc="" />
                        <h1>BioCalce Classico</h1>
                    </div></a>
                </li>

                <li class="Limewash Products">
                    <a href="#"><div class="science-list shadow horizontal">
                        <img src="http://placehold.it/300x159" alt="" longdesc="" />
                        <h1>BioCalce Classico A</h1>
                    </div></a>
                </li>

</ul>






<script type="text/javascript">
$('.filter li a').click(function() {
 
  $(this).css('outline','none');
  $('.filter .current').removeClass('current');
  $(this).parent().addClass('current');

  var filter = $(this).text();
  if(filter == 'All Products') {
   $('.items li.hidden').fadeIn('normal').removeClass('hidden');
  } else {
   $('.items li').each(function() {
    if(!$(this).hasClass(filter)) {
	 $(this).fadeOut('normal').addClass('hidden');
    } else {
	 $(this).fadeIn('normal').removeClass('hidden');
    }
   });
  }

  return false;
});

</script>



#2 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 22 January 2013 - 14:53

Can anyone help em with this?

#3 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 23 January 2013 - 15:07

Please can anyone help me with this. I can pay you for it.

#4 palenous

palenous

    Neowinian

  • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 24 January 2013 - 22:50

I can probably help you with this, but I'm not entirely sure what you are trying to accomplish...which part of the redbox menu are you trying to mimic? Is it the sorting functionality?

#5 palenous

palenous

    Neowinian

  • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 25 January 2013 - 02:35

Alright, I figured it out. It's kind of sloppy, but it gets the desired effect. You will still need to add in the Interior or Exterior class to each of your products, and change the class name for the second menu to "filter_2" for it to work. Other than that, you shouldn't have any issues. Here is the jQuery:

$('.filter li a').click(function() {
 
  $(this).css('outline','none');
  $('.filter .current').removeClass('current');
  $(this).parent().addClass('current');

  var filter = $(this).text();
	    var filter_2 = $('.filter_2 .current').text();
  if(filter == 'All Products') {
		    if (filter_2=='All') {
			    $('.items li.hidden, .items h2.hidden').fadeIn('10000').removeClass('hidden');
		    }
		    else {
			    $('.items li, .items h2').each(function() {
				    if (!$(this).hasClass(filter_2)) {
					    $(this).fadeOut('10000').addClass('hidden');
				    }
				    else {
					    $(this).fadeIn('10000').removeClass('hidden');
				    }
			    });
		    }
  }
	    else {
   $('.items li, .items h2').each(function() {
			    if (filter_2=='All') {
				    if (!$(this).hasClass(filter)) {
					    $(this).fadeOut('10000').addClass('hidden');
				    }
				    else {
					    $(this).fadeIn('10000').removeClass('hidden');
				    }
			    }
    else if(!$(this).hasClass(filter)) {
	 $(this).fadeOut('10000').addClass('hidden');
    }
			    else if (!$(this).hasClass(filter_2)) {
				    $(this).fadeOut('10000').addClass('hidden');
			    }
			    else {
	 $(this).fadeIn('10000').removeClass('hidden');
    }
   });
  }

  return false;
 
});
    $('.filter_2 li a').click(function() {
	    $('.filter_2 .current').removeClass('current');
	    $(this).parent().addClass('current');
	    var filter_2 = $(this).text();
	    var top_filter = $('.filter .current').text();
	    $('.items li, .items h2').each(function() {
		    if (top_filter=='All Products') {
			    if (filter_2=='All') {
				    $('.items li.hidden, .items h2.hidden').fadeIn('10000').removeClass('hidden');
			    }
			    else if (!$(this).hasClass(filter_2)) {
				    $(this).fadeOut('10000').addClass('hidden');
			    }
			    else {
				    $(this).fadeIn('10000').removeClass('hidden');
			    }
		    }
		    else if (filter_2=='All') {
			    if (!$(this).hasClass(top_filter)) {
				    $(this).fadeOut('10000').addClass('hidden');
			    }
			    else {
				    $(this).fadeIn('10000').removeClass('hidden');
			    }
		    }
		    else if (!$(this).hasClass(top_filter)) {
			    $(this).fadeOut('10000').addClass('hidden');
		    }
		    else if (!$(this).hasClass(filter_2)) {
			    $(this).fadeOut('10000').addClass('hidden');
		    }
		    else {
			    $(this).fadeIn('10000').removeClass('hidden');
		    }
	    });
    });


#6 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 25 January 2013 - 17:27

When I add the Interior and Exterior in the Class then Dropdown list function no longer work.

#7 palenous

palenous

    Neowinian

  • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 26 January 2013 - 01:01

Just in case someone was curious, the problem is solved now. I'll post the final code later in case someone wants to see it.

#8 palenous

palenous

    Neowinian

  • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 26 January 2013 - 05:03

Here is the final and working code in case anybody wanted to see the solution:

$('.filter li a').click(function() {

$(this).css('outline','none');
$('.filter .current').removeClass('current');
$(this).parent().addClass('current');
var filter = $(this).text();
    var filter_2 = $('.filter_2 .current_2').text();
    if(filter == 'All Products') {
	    if (filter_2=='All') {
		    $('.items li.hidden, .items h2.hidden').fadeIn('10000').removeClass('hidden');
	    }
	    else {
		    $('.items li, .items h2').each(function() {
			    if (!$(this).hasClass(filter_2)) {
				    $(this).fadeOut('10000').addClass('hidden');
			    }
			    else {
				    $(this).fadeIn('10000').removeClass('hidden');
			    }
		    });
	    }
}
    else {
  $('.items li, .items h2').each(function() {
		    if (filter_2=='All') {
			    if (!$(this).hasClass(filter)) {
				    $(this).fadeOut('10000').addClass('hidden');
			    }
			    else {
				    $(this).fadeIn('10000').removeClass('hidden');
			    }
		    }
   else if(!$(this).hasClass(filter)) {
    $(this).fadeOut('10000').addClass('hidden');
   }
		    else if (!$(this).hasClass(filter_2)) {
			    $(this).fadeOut('10000').addClass('hidden');
		    }
		    else {
    $(this).fadeIn('10000').removeClass('hidden');
   }
  });
}
return false;

});
$('.filter_2 li a').click(function() {
    $('.filter_2 .current_2').removeClass('current_2');
    $(this).parent().addClass('current_2');
    var filter_2 = $(this).text();
    var top_filter = $('.filter .current').text();
    $('.items li, .items h2').each(function() {
	    if (top_filter=='All Products') {
		    if (filter_2=='All') {
			    $('.items li.hidden, .items h2.hidden').fadeIn('10000').removeClass('hidden');
		    }
		    else if (!$(this).hasClass(filter_2)) {
			    $(this).fadeOut('10000').addClass('hidden');
		    }
		    else {
			    $(this).fadeIn('10000').removeClass('hidden');
		    }
	    }
	    else if (filter_2=='All') {
		    if (!$(this).hasClass(top_filter)) {
			    $(this).fadeOut('10000').addClass('hidden');
		    }
		    else {
			    $(this).fadeIn('10000').removeClass('hidden');
		    }
	    }
	    else if (!$(this).hasClass(top_filter)) {
		    $(this).fadeOut('10000').addClass('hidden');
	    }
	    else if (!$(this).hasClass(filter_2)) {
		    $(this).fadeOut('10000').addClass('hidden');
	    }
	    else {
		    $(this).fadeIn('10000').removeClass('hidden');
	    }
    });
});




Click here to login or here to register to remove this ad, it's free!