Avoid onblur click...thingy

JavaScript
1 
setTimeout(function() {
    $(".search").addClass("inactive");
    $(".search.inactive .search__button").on("click",function(e) {
      e.preventDefault();
      alert("inhere");
      $(".search.inactive").removeClass("inactive").addClass("active");
      $(".search__field").animate({width:"100%"},500).focus();
    });
    $(".search__field").on("blur",function() {
      $(".search.active").removeClass("active").addClass("inactive");
      $(".search__field").animate({width:"0"},500);
    });
  }, 1000);

http:// www.sg is.org/p age.cfm?p=72 49

Basically I’m trying to have it when you click the search on the top right, it expands. That works fine and dandy. But hwen it’s open, and you click it again, it reopens it instead of doing the search. I think this is because the jQuery is searching for the text field to blur, and then resets the width / classes. How can I avoid this behavior?

Ignore why this is in a setTimeout please :wink: .

2

It’s because in the blur, you’re resetting the changing the .search.active back to .search.inactive, which puts you back in the happy loop. Sounds like you need a different lock point for the expand/contract than the button.

Why is this in a setTimeout? :wink:

1 Like
3

Ironincally - found this on versioning - perhaps you can use this approach to replace the expand functionality? :smile:

4

I confess I just clicked on this because of the ambiguous thread title. I’ll leave now. :smiley:

5

What, you don’t appreciate his “thingy” technical term?

6

I do! That’s why I clicked on it. :smiley:

7

\

Yeah, figured as much.

Blame the system, not me :frowning: .

My evil plan worked :smiley: .

I made progress

$(".search__field").addClass("inactive");
    $(".search__button").on("click",function(e) {
      e.preventDefault();
      if($(".search__field").hasClass("inactive")) {
        $(".search__field").removeClass("inactive").addClass("active");
        $(".search__field").animate({width:"100%"},500).focus();
      }
      else {
        $(".search").submit();
      }
    });
    $(".search").on("blur", function() {
      $(".search__field").animate({width:"0"},500);
      $(".search__field").removeClass("active").addClass("inactive");
    });

I have it submitting properly etc. Now I’m just having trouble getting it properly blurred.

8

So close. I just need it to not run that bit of animation on submit. I know it’s that last animation call that’s doing it but nothing I do can stop it…

var clicked=false;
    $(".search__field").addClass("inactive");


    $(".search__button").on("click",function(e) {
      e.preventDefault();
      if($(".search__field").css("width") >= 0+"px") {
        $(".search__field").stop();
        $(".search").submit();
      }
      else {
        clicked=true;
        $(".search__field").animate({width:"100%"},500).focus();
      }
    });


    $(".search__field").on("blur", function() {
      if(clicked==false) {
        $(".search").submit();
      }
      else {
        $(".search__field").animate({width:"0"},500);
        clicked=true;
      }
    });
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.