Nic727 Posted February 2, 2021 Share Posted February 2, 2021 Hi, I'm creating a search form that is appearing full screen when clicking on a "search" icon. The code I have for the HTML is : <!--SEARCH OVERLAY--> <div class="search-overlay"> <i class="close-search fas fa-times"></i> <form> <input type="search" id="search" name="search" class="searchbox" placeholder="Rechercher sur le site..."> </form> </div> and the JQuery // Search bar if($(".search-icon").click(function(){ $(".search-overlay").addClass("open-search"); $(".searchbox").focus(); })); if($(".close-search").click(function(){ $(".search-overlay").removeClass("open-search"); })); What I don't understand is that the .focus() is not working at all, but the rest of the code is correct. I tried with a console.log and it just seems to pass through this line like if it doesn't exist. I tried everything like setTimeOut, placing the focus in another function, etc. Thank you for your help Link to comment Share on other sites More sharing options...
dsonesuk Posted February 2, 2021 Share Posted February 2, 2021 Jquery click event to add class and focus, all within a IF condition? Thats a new one! So basically it will return false or true then ...........................................................................................what! Do i do now??? ......................................still waiting.........................................oh i give up! Someone needs coffee. Link to comment Share on other sites More sharing options...
Nic727 Posted February 3, 2021 Author Share Posted February 3, 2021 (edited) Hi, I removed the if condition, because like you mention, I don't think it was useful for this action. However, I don't understand what you mean by true or false... Well, I understand what it means, but I don't understand why my focus() is returning false (I guess since it's not focusing). From every websites I visited, they are always using .focus() the exact same way I do... It even worked two days ago when I was testing another kind of search bar... ---- Edit It works now when I add this setTimeout(function(){ $('.searchbox'). focus (); }, 500); I don't know the reason it need a timeout, but now it works. Edited February 3, 2021 by Nic727 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2021 Share Posted February 3, 2021 All if condition, either give a true or false a=1; if(a > 0) true if(a ==0) false. it determines if the code following it in curly braces is run or filtered more with elseif or else, which usually capture the alternate result, true against if condition false, false against if condition true. The click event on its own determines what should happen to other elements manipulation on being clicked. A if condition would only be used within the click events own anonymous function. Like function(){ if($(".search-overlay").hasClass("open-search")){ $(".search-overlay").removeClass("open-search"); } } The only problem i see is if there is multiple search box classes existing, so it would be better to use id reference instead. Link to comment Share on other sites More sharing options...
Nic727 Posted February 4, 2021 Author Share Posted February 4, 2021 Ok thank you. I only have one search box on my website. That's why I don't really use else if in my code. The focus should only be activated automatically when clicking the button/icon. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now