Programming Logic and Algorithm (using jQuery)

Question

I'm trying to learn how to think in terms of logic when using jquery or programming in general; so far I'm having this issue:

HTML

<div id="content">
   <a href="#" class="blog">Blog</a>
   <a href="#" class="portfolio">Portafolio</a>
   <div id="portfolio">
       <ul>
         <li>Item Portafolio</li>
         <li>Item Portafolio</li>
         <li>Item Portafolio</li>
       </ul>
   </div>
   <div id="blog">
       <ul>
         <li>Item Blog</li>
         <li>Item Blog</li>
         <li>Item Blog</li>
       </ul>
   </div> 
</div>

jQuery

   (function() {

        var blog = $('#blog'),
                portfolio = $('#portfolio');

        blog.hide();
        portfolio.hide();

        $.fn.fadeSlideToggle = function(speed, fn) {
          //fadeToggle = opacity
          //slideToggle = height
          return $(this).animate({
              "height" : 'toggle',
              "opacity" : 'toogle'
          }, speed || 400, function() {
              $.isFunction(fn) && fn.call(this);
          });

        };

        $('a').on('click', function(e) {
            e.preventDefault();
            var myString = "#" + $(this).attr('class');

                blog.hide(300);
                portfolio.hide(300);
                $(myString).fadeSlideToggle(800);

        });

    })();

Check the jsfiddle

Basically, it works fine, when you click the blog button, it display the blogs div, when you click the portfolio button it displays the portfolio div, however, problem begins when I click blog and then click blog again, same with the other, my logic hide the divs and show it again, I just want to find a logic that allows me to do nothing if I click the same anchor tag several times and only change if I click other.

Any help??

Thanks in advanced.

You should change to another title. Pick any random SO question: I bet it is about "programming logic and algorithm" too. — rsenna
– rsenna, Commented Jan 8, 2014 at 3:13

Adam Merrifield · Accepted Answer · 2014-01-08 03:13:40Z

1

I would do something like this.

Changed myString to the jquery element.
Fixed the word toogle for opacity animate value
Used an if around hiding and running fadeSlideToggle to check that the element exists and that it is currently hidden (if it's not hidden then it will hide it and show it again)

Added stop so that if you click the buttons fast it will not execute the animation as many times as you pressed it.

(function(){
var blog = $('#blog');
var portfolio = $('#portfolio');

blog.hide();
portfolio.hide();

$.fn.fadeSlideToggle = function(speed, fn){
    //fadeToggle = opacity
    //slideToggle = height
    return $(this).animate({
        "height": 'toggle',
        "opacity": 'toggle'
    }, speed || 400, function(){
        $.isFunction(fn) && fn.call(this);
    });
};

$('a').on('click', function(e){
    e.preventDefault();
    var myDiv = $("#" + $(this).attr('class'));
    if(myDiv.length && myDiv.is(':hidden')){
        blog.hide(300);
        portfolio.hide(300);
        myDiv.stop(true, true).fadeSlideToggle(800);
    }
});
})();

answered Jan 8, 2014 at 3:13

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andresmijares Over a year ago

worked like charm, but could you pls tell me why myDiv.lenght??? validate if it is blank?

Adam Merrifield Over a year ago

@andrewkthx the length property of a jQuery object tells you how many objects match the css query. Basically it is making sure the element $("#" + $(this).attr('class')) is found on the page.

andresmijares Over a year ago

Thanks for the answer, but now I come to a different doubt, if we remove that condition it works perfectly, so how necessary is it??? just to know, I'm just trying to learn :)

Adam Merrifield Over a year ago

@andrewkthx The condition makes sure that nothing happens if it's not supposed to. If you leave the condition off what is happening is the div that is open starts to hide and then the stop(true, true) stops the hide in the process and shows it due to the fadeslidetoggle. I wouldn't say this is a good idea as 2 actions are being preformed for no reason.

Hopeful Llama · Accepted Answer · 2014-01-08 03:13:50Z

0

Let's check for the opacity of the div, before we execute the animation, as such:

if(!$(myString).is(":visible")){
    blog.hide(300);
    portfolio.hide(300);

    $(myString).fadeSlideToggle(800);
}

Check the jsFiddle here: jsFiddle.

answered Jan 8, 2014 at 3:13

Hopeful Llama

7545 silver badges26 bronze badges

Collectives™ on Stack Overflow

Programming Logic and Algorithm (using jQuery)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related