jQuery get selector in qiucker and precise way and get code simple

Question

Hi...

This is my first post... and.. I'm just lov to use jQuery. I need to get this code as simple and fast as jQuery those.. So..

Thanks in advance.

// plug in... ahhh... i'm so shamed

jQuery.fn.fadeSliderToggle = function(settings) {

       settings = jQuery.extend({

                  speed:500,

                  easing : "swing"

       }, settings)

if( $(this).css('opacity') == "0" )

{

       $(this).next().next().hide();

       $(this).next().next().css({ width: 195 });

       $(this).animate({

                  opacity: 1,

                  marginLeft: '0',

       }, settings.speed, settings.easing).css({'display':'block'});

       $(this).next().next().fadeIn();

       $(this).next().next().children('p:eq(0)').css({'display':'none'});

 } else {

       $(this).next().next().hide();

       $(this).animate({

                  opacity: 0,

                  marginLeft: '-250',

       }, settings.speed, settings.easing);

       $(this).next().next().css({ width: 430 });

       $(this).next().next().children('p:eq(0)').css({'display':'block'});

       $(this).css({'display':'none'});

       $(this).next().next().fadeIn();

   }

}; 

CALL:

$('a.techinfo_link').click(function(){

           // get the DIV with ID="techinfo"

           $(this).parent().parent().prev().prev().fadeSliderToggle();

           return false;

 });

Css:

/* root element for scrollable items */
.items_scroll { 
    position:absolute;

    /* this time we have very large space for height */ 
    height:20000em; 
    margin: 0px;
}

/* single scrollable item */
.items_scroll div {
    float:  left;
    border-bottom:1px solid #ddd;
    padding:15px;
    font-size:12px;
    height:190px;
    cursor: default;
    opacity: 0.65;
    display: inline;
}
/* elements inside single item */
.items_scroll img {
    float:left;
    margin: 0;
    border: 0 none;
    outline: 0 none;
    height:187px;
    width:250px;
    opacity: 1;
    cursor: pointer;
}

div.techinfo {
        float:left;
        height:175px;
        width:200px;
        margin-left: -250px;
        opacity:0;
        display:none;
    }
    div.img_wrapper {
        position: relative;
        float:left;
        width: 250px;
        height: 187px;
        display:inline;
        line-height: 187px;
        margin: 0; padding: 0; outline: 0; border: 0 none;
    }
    div.opis {
        float: right;
        height: 160px;
        width: 430px;
        border: 0 none;
        margin: 20px 20px 0px 20px;
        padding: 0;
        cursor: pointer;
    }

<div class="items_scroll">

                <div>
                    <div class="techinfo">
                        <h4>Title</h4>
                        <em>some text</em>
                        <h4>Title</h4>
                        <em>some text</em>
                        <h4>e-mail</h4>
                        <em>[email protected]</em>
                    </div>
                    <div class="img_wrapper">
                        <a href="ajax1.html" rel="#yesno">
                            <img src="images/front/1.png" width="250" height="156" alt="1" />
                        </a>
                    </div>
                    <div class="opis">
                        <h3>1. Barcelona Pavilion</h3>
                        <strong>
                            The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe 
                            and built for the International Exposition in 1929.
                        </strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
                            understanding of space, but also for modeling new opportunities for an exciting 
                            association of free art and architecture. 
                        </p>
                        <p>
                            <a href="#" class="techinfo_link">Technical info</a> &nbsp; <a href="ajax1.html" rel="#yesno">Project details</a>
                        </p>
                    </div>
                </div>
</div>

Sorry for missing html... i think i get this thing with a replacing with variables... but.. stil is so big.. in this way it's working in all browsers... at least on MAC OS X.

problem is get that div with id="techinfo", scroll it to the right with fadeIn, and in same time fadeOut the all div with class="opis", hide first paragraph in that DIV, shrink the div with class="opis" and fadeIn that div. And the all thing in revers... ahhhh...

I ADD A TEST PAGE.. :-)

TEST PAGE

Answer 1

Well in order to really help you, you have to provide the relevant HTML code as well, otherwise, we don't know where $(this).next().next().hide(); is referring too.

The second code snippet can be improved this way (at least readability, I don't know about performance):

$('a.techinfo_link').click(function(){

           // get the DIV with ID="techinfo"
           $('#techinfo').fadeSliderToggle();
           return false;
});

Basically you should give all important elements or elements you want to have some actions on either classes or IDs.
Then you can refer to them with $('.class') resp $('#id') instead of traversing through the tree.

Btw. I guess traversing the tree inside a plugin is very bad design as you normally don't know how the actual DOM tree looks like at the point where you call the plugin.

Answer 2

Here's 1 tip. Cache your frequently used variables at the top of your plugin:

var $this = $(this),
    $next = $this.next().next();

That speeds up things a lot. Every time you do $(this) you're calling a function. Andby storing a reference to $this.next().next() you're also avoiding a bunch of calls. What is that next().next() thing by the way??

Another one.. for legibility use .hide() or .show() instead of css({'display':'none'}); and css({'display':'block'});.

It's hard for us to know what your plugin is supposed to be doing though, without the html or an explanation.

Also, don't use magical numbers. All those widths should be part of the settings object that you pass to the plugin.

Answer 3

Introducing some comments and variables would help. I have also moved the $(this).next().next() call so it happens in one place. This helps readability and efficiency.

jQuery.fn.fadeSliderToggle = function(settings) {
  settings = jQuery.extend({
    speed:500,
    easing : 'swing'
  }, settings);

  var opis = $(this).next().next();

  if($(this).css('opacity') == '0') {
    // show it

    opis.hide();
    opis.css({ width: 195 });
    $(this).animate({
      opacity: 1,
      marginLeft: '0',
    }, settings.speed, settings.easing).css({'display':'block'});
    opis.fadeIn();
    opis.children('p:eq(0)').css({'display':'none'});
  } else {
    // hide it

    opis.hide();
    $(this).animate({
      opacity: 0,
      marginLeft: '-250',
    }, settings.speed, settings.easing);
    opis.css({ width: 430 });
    opis.children('p:eq(0)').css({'display':'block'});
    $(this).css({'display':'none'});
    opis.fadeIn();
  }
}; 

Some of the calls you're making (hide, fadeIn) seem redundant. I think you might be able to simplify this more. Consider reading the book Refactoring. It provides good advice on how to improve code systematically.

By the way, it is generally considered good JavaScript style to always write semicolons after statements, even if they are not strictly necessary.

Answer 4

Change your classes to divs:

<div id="techinfo">

your CSS to reference them correctly:

#techinfo {
   ... css
}

and then reference them directly:

document.getElementById('techinfo')
//aka
$('techinfo')

That should speed things up a lot.