SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help Cleaning Up Code

    I have the following JavaScript:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    
    $(".apply").hide();
    $("img.step1").hover(function(){
    $(".apply").slideToggle("fast");
    },function(){
    $(".apply").slideToggle("fast");
    });
    
    $(".telephone").hide();
    $("img.step2").hover(function(){
    $(".telephone").slideToggle("fast");
    },function(){
    $(".telephone").slideToggle("fast");
    });
    
    $(".required_docs").hide();
    $("img.step3").hover(function(){
    $(".required_docs").slideToggle("fast");
    },function(){
    $(".required_docs").slideToggle("fast");
    });
    
    $(".personal_interview").hide();
    $("img.step4").hover(function(){
    $(".personal_interview").slideToggle("fast");
    },function(){
    $(".personal_interview").slideToggle("fast");
    });
    
    $(".notification").hide();
    $("img.step5").hover(function(){
    $(".notification").slideToggle("fast");
    },function(){
    $(".notification").slideToggle("fast");
    });
    
    $(".positions").hide();
    $("img.step6").hover(function(){
    $(".positions").slideToggle("fast");
    },function(){
    $(".positions").slideToggle("fast");
    });
    
    
       });
     </script>
    It works and works fine but I would like to think that there is a way to set this as a single function that would pass something to it to tell it to work for the correct section. The classes (ie .positions) are paragraph classes and when you hover over a section of an image it shows you the text in that particular paragraph. This uses the jQuery library if that makes a difference.

    I am not sure how to do that and my futile attempts have not worked the way I would like them to.

    Any help would be appreciated,

    Dan

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't use jquery so I can't give you an example that uses it.

    Normally such page elements have the same structure, for example:

    Code:
    <div id="positions">
      <img src="icon.gif" />
      <p class="intro">Ipsum Lorem...</p>
      <a href="fullstory.html">Click to read full story</a>
    </div>
    <div id="notification">
      <img src="icon2.gif" />
      <p class="intro">Ipsum Lorem...</p>
      <a href="fullstory2.html">Click to read full story</a>
    </div>
    So, since they all have the same basic structure, we can do the following:
    Code:
    function doSomething(myDiv) {
      var div = document.getElementById(myDiv);
      var theImg = div.getElementsByTagName("img")[0]; // get the first image that occurs in our div
      var theLink = div.getElementsByTagName("a")[0]; // get the first link that occurs
    
      // do stuff with the elements
      theLink.className = "new_class";
      theImg.hover(myHoverFunc);
      theDiv.hide();
    }
    
    doSomething("positions");
    doSomething("notification");
    // etc
    So - I only reference one element by ID and the rest are located within said element. This reduces the number of IDs I have to assign (in some cases you dont need any) and makes script maintenance a lot simpler.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why do you pass the same anonymous function to each hover() function twice?

  4. #4
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles,

    It is the syntax of the statement. See it here if you are interested - http://docs.jquery.com/Events/hover#overout if you are familar with jQuery and can leave it out please let me know.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see, one is the mouseover and the other is the mouseout event. Makes sense now.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Here is some tested code that removed much of the duplication.

    Code javascript:
    function slide() {
    	$($(this).attr("target")).slideToggle("fast");
    }
    function initHover(hover, target) {
        $(target).hide();
        $(hover).attr("target", target);
        $(hover).hover(slide, slide);
    }
    initHover("img.step3", ".required_docs");
    initHover("img.step4", ".personal_interview");
    initHover("img.step5", ".notification");
    initHover("img.step6", ".positions");
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •