Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using mouseover mouseout slow to react

    I pretty sure just looking at this that there must be a simpler way of executing this.

    I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight

    Code:
    <div id="apply_row" class="rotate_color highlight">
      milk
    </div>
    <div id="apply_row" class="rotate_color highlight">
      coffee
    </div>
    <div id="apply_row" class="rotate_color highlight">
      cheese
    </div>
    And I have the javascript written to give a different color for dd and :even and to add a highlight color when user puts the mouse over.

    Code:
    $(document).ready(function()
    {
      	//alternate div colors
    	$("div.rotate_color:odd").css("background-color", "#FFFFFF");
    	$("div.rotate_color:even").css("background-color", "#F9F5E8");
            
            //highlight and return back to original color on mouseout
    	$("div.highlight").mouseover(function(){
       		$(this).css("background-color", "#F6E9D0");
      		$("div.highlight").mouseout(function(){
      			//clear background color to none
      			$(this).css("background-color", "");
                            //change back to original
      			$("div.rotate_color:odd").css("background-color", "#FFFFFF");
    			$("div.rotate_color:even").css("background-color", "#F9F5E8");
    		});
      	});
    	
    
      
    });
    This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why).

    Any suggestions???


    Thanks,
    Daniel

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Why are you setting the mouseout during mouseover? I think that's where it's slowing down. Move the mouseover out and it will be faster.


    BTW, id should be unique in a document. You have 3 divs with id=apply_row

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah, yeah that helped, i just didn't even see that.

    im changing out the ID's for classes, was a weird transition from some old code to new

    thanks!


  •  

    Posting Permissions

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