CODEWITHSUNDEEP
javascriptjquerycssresponsive-design
Leguizamo
Leguizamo

Reputation: 3

How to put an element in a different place (responsive)

I am trying to make a responsive search bar which will be placed in a different place on desktop and mobile. I build two differents search bar with different IDs, with display: none and display: block and with the same jQuery code.

I have one problem: - search input doesn't close anymore if I click on a other part than the search icon. With one search bar, input automatically close when I click anywhere.

With one search bar: codepen.io/anon/pen/Adgpf

With two search bars: codepen.io/anon/pen/ceHmn

Upvotes: 0

Views: 99

Answers (3)

Bharat Ranpariya
Bharat Ranpariya

Reputation: 1253

I had create jsfiddle for the same, check it, may it will help you..

Demo : http://jsfiddle.net/patelbharat001/w0jzzbuy/

Upvotes: 0

Miguel
Miguel

Reputation: 20633

You're triggering this event twice, which inverts isOpen.. and then inverts it with the second click:

submitIcon.click();

so just trigger one of them and you avoid the double inversion:

submitIcon.eq(0).click();

and it works

Demo: http://codepen.io/anon/pen/baekD

This is the simplest solution. Your code could use some refactoring.

Upvotes: 1

HelloWorld
HelloWorld

Reputation: 2330

Try this:

$(document).click(function(){
  if(!$('#sb-search').click()) {
    searchBox.removeClass('sb-search-open');
    isOpen = false;
  }
});

You may need to tweak it for your overall purpose but it solves your issue as seen here.

Upvotes: 0

Related Questions