issue with input button

Question

I have this search button that open a top bar on screen width less than 1080px but I have a problem on mobile with it... touching the button on mobile, the bar it doesn't appear here you have an example http://cosmoscreativeagency.com/alanic/index.html

this is the functionality:

on screen > 1080px: the white line appears clicking on the search button
on screen <= 1080px: the white top search bar appears clicking on the search button and the white line is set as display: none

snippet below:

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
 var searchTop = document.getElementById('demo-1'); 
 if (window.innerWidth <= 1080) {
  
  document.getElementById('demo-2').addEventListener('click', function(evt) {
      
      document.getElementById('demo-1').style.top = '0px';
  }, true);

  document.getElementById('demo-3').addEventListener('blur', function(evt) {
            document.getElementById('demo-1').style.top = '-60px';
  }, true);

 } else if (window.innerWidth > 1080) {
  document.getElementById('demo-1').style.display = 'none';
 }

}

body {
background-color: black;
}
#demo-1 {
  position: absolute;
  width: 100%;
  height: 60px;
  z-index: 300;
  transition: all 0.5s ease;
  top: -60px; }
#demo-1 input[type="search"] {
  background-color: #ffffff;
  padding-left: 50px;
  padding-right: 40px;
  width: 100%;
  height: 60px;
  color: #000000;
  border: none;
  opacity: 0.9;}
.subheader {
  position: absolute;
  top: 120px;
  width: 100%; }
#demo-2 {
  position: relative;
  display: inline-block;
  padding-right: 50px;
  float: right;
  z-index: 300; }
#demo-2 input[type="search"] {
  background: url(http://localhost/alanic/images/searchbutton.png) no-repeat 9px center;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 10px;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  width: 20px;
  cursor: pointer;
  border: none;
  transition: all 0.5s; }
#demo-2 input[type="search"]:hover {
  background-color: none; }
#demo-2 input[type="search"]:focus {
  width: 200px;
  padding-left: 40px;
  background-color: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: auto; }
@media screen and (max-width: 1080px) {
 #demo-2 input[type="search"]:focus {
    display: none; } }
 #demo-2 input:-moz-placeholder {
  color: transparent; }
 #demo-2 input::-webkit-input-placeholder {
  color: transparent; }
 #demo-2 input:focus::-webkit-input-placeholder {
  color: #fff; }

<form id="demo-1">
  <input id="demo-3" type="search" name="buscar" placeholder="Search">
</form>   
<div class="subheader">
  <form id="demo-2">
    <input type="search" name="search" placeholder="Search">
  </form>
</div>

You know you can do an ``, right? But only if you like *HTML5* ... — Mystical, Jan 09 '17 at 23:57
Adding an event listener *inside* an event handler is generally a mistake. It's called "addEventListener" for a reason: it **adds** a listener, and does not affect any event handlers already registered. — Pointy, Jan 09 '17 at 23:57
@PHPglue `return false` from an event handler registered with `addEventListener()` won't stop the event. You must use `evt.preventDefault()` and, if a form is in use, a submit button should definitely be used. — Scott Marcus, Jan 10 '17 at 00:06
Why do you get the 'target.id' and check if it's the 'demo-2'? you know it's. because the event listener is already on this element .. — Phelipe Rocha, Jan 10 '17 at 00:06
You want the text from the input to show up on the second form? I wouldn't even use 2 forms. Be more specific as to what you want, please. If using a submit with `.addEventListener` you need to `evt.preventDefault()`. Better yet, don't use a submit. — StackSlave, Jan 10 '17 at 00:09
no @PHPglue I never said that, I forgot to put the display none to the #demo-1 form, I just want to show #demo-1 when I make click on #demo-2 submit button and just on screen size less than 1080px — Kenny Amaro, Jan 10 '17 at 00:17
also I wanna hide #demo-1 when is onblur (when we make click outside the input search) — Kenny Amaro, Jan 10 '17 at 00:20
@Pointy ... so what is the best practice or solution in this case — Kenny Amaro, Jan 10 '17 at 00:24
@PHPglue what is so difficult to understand??? "I just want to show #demo-1 when I make click on #demo-2 submit button and just on screen size less than 1080px" please check my answer — Kenny Amaro, Jan 10 '17 at 00:56
I think my deleted answer was the answer, despite the fact that I used a single form. I'm still wondering why you would need another form in the era of AJAX. Just control the `Elemnt.style.display = 'none'` and `Element.style.display = 'block'` depending on the `innerWidth` *(note window is implicit)*. Anyways... if there are this many comments and we can't figure out the answer, we are not the problem. Rephrase the question, please. — StackSlave, Jan 10 '17 at 01:02

score 1 · Answer 1 · edited May 23 '17 at 12:33

Actually when you click on the input button it returns the target.id as blank because it doesn't have id but when you click on form(just near to button) it will display proper id. So what you can do is use currentTarget.id or this.id

See the difference between target and currentTarget: What is the exact difference between currentTarget property and target property in javascript

Check the below snippet in full page.

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
 var searchTop = document.getElementById('demo-1'); 
 if (window.innerWidth <= 1080) {
  
  document.getElementById('demo-2').addEventListener('click', function(evt) {
    var target = evt.target;
          console.log("target = "+evt.target.id)
          console.log("currentTarget ="+evt.currentTarget.id)
    if (this.id === 'demo-2') {
      document.getElementById('demo-1').style.display = 'inherit';
    }
  }, true);

 } else if (window.innerWidth > 1080) {
  document.getElementById('demo-1').style.display = 'none';
 }

}

<form id="demo-1">
 <input type="search" name="buscar" placeholder="Search">
</form>
<form id="demo-2">
  <input type="submit" name="search" placeholder="Search">
</form>

it works just a part of your code thanks! please check my anwer is more what I was looking for I just have an issue, to your code just left the onblur and the issue I post in my answer, can you help me? — Kenny Amaro, Jan 10 '17 at 00:54

StackSlave · Answer 2 · 2017-01-10T02:01:12.227

1

I don't know if this works for you, but here it is:

// external.js
//<![CDATA[
var pre = onload, doc, bod, htm, E; // change var pre if using technique on more that this page
onload = function(){
if(pre)pre(); // handle previous onload

doc = document; bod = doc.body; htm = doc.documentElement;
E = function(id){
  return doc.getElementById(id);
}
var out = E('output'), ipt = E('input');
function solution(){
  var iS = ipt.style, oS = out.style;
  if(innerWidth < 1081){
    iS.display = 'inline-block'; oS.display = 'block';
    out.innerHTML = ipt.value;
  }
  else{
    iS.display = oS.display = 'none';
  }
}
onresize = ipt.onblur = E('btn').onclick = solution;
doc.forms[0].onsubmit = function(){
  return false;
}

}
//]]>

/* external.css */
#output,#input{
  display:none;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <form method='post' action='#' name='form'>
    <input type='text' id='input' placeholder='search' />
    <input type='button' id='btn' value='Search' />
    <div id='output'></div>
  </form>
</body>
</html>

edited Jan 10 '17 at 02:01

answered Jan 10 '17 at 00:37

StackSlave

10,613
2
18
35

I'm not understanding the question, at all. Not clear what you want still. – StackSlave Jan 10 '17 at 00:49
your #input must by hidden on screen > 1080px and I want it to show it when you make click on your #btn on screen <= 1080px also I want to hide the #input when you make click outside the box – Kenny Amaro Jan 10 '17 at 01:36
I hope this is what you're looking for? – StackSlave Jan 10 '17 at 01:56
almost done, just left to hide it onblur event and hide it on screen size > 1080 when you already click on it – Kenny Amaro Jan 10 '17 at 01:56
please check my answer and look the functionality – Kenny Amaro Jan 10 '17 at 02:06
You comments and answer contradict each other. – StackSlave Jan 10 '17 at 02:18

score 0 · Answer 3 · answered Jan 10 '17 at 00:52

This is what I was looking for, but there is still an issue... when I click on the submit button on screen less than 1080px it shows the search input like what I was looking for, that's ok, but when I resize the screen to more than 1080px (without refreshing the code) and I click on the submit button again it shows the input search even when the code says on window.innerWidth > 1080 to display none the input...

My question is, how do I return display:none on screen more than 1080px when I had the screen on less than that?

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
 var searchTop = document.getElementById('demo-1'); 
 if (window.innerWidth <= 1080) {
  
  document.getElementById('demo-2').addEventListener('click', function(evt) {
      document.getElementById('demo-1').style.display = 'inherit';
  }, false);

  document.getElementById('demo-3').addEventListener('blur', function(evt) {
      
            document.getElementById('demo-1').style.display = 'none';
  }, false);

 } else if (window.innerWidth > 1080) {
  document.getElementById('demo-1').style.display = 'none';
 }

}

#demo-1 { 
  display: none;
}

<form id="demo-1">
 <input id="demo-3" type="search" name="buscar" placeholder="Search">
</form>
<form id="demo-2">
  <input type="submit" name="search" placeholder="Search">
</form>

score 0 · Answer 4 · answered Jan 10 '17 at 22:24

You should insert the conditionals inside the click functions. I recommend you check CSS media queries to assign certain styles depending on the screen size.

  window.onresize = function() {
    if (window.innerWidth > 1080) {
      document.getElementById('demo-1').style.display = 'none';
    }
  }


  var searchTop = document.getElementById('demo-1');

  document.getElementById('demo-2').addEventListener('click', function(evt) {
    if (window.innerWidth <= 1080) {
      document.getElementById('demo-1').style.display = 'inherit';
    }
  }, false);

  document.getElementById('demo-3').addEventListener('blur', function(evt) {
    if (window.innerWidth <= 1080) {
      document.getElementById('demo-1').style.display = 'none';
    }
  }, false);

#demo-1 {
  display: none;
}

<form id="demo-1">
  <input id="demo-3" type="search" name="buscar" placeholder="Search">
</form>
<form id="demo-2">
  <input type="submit" name="search" placeholder="Search">
</form>

Hi @Alvaro, Sorry please check the post again I modify it.... is a device compatibilty I have now — Kenny Amaro, Jan 10 '17 at 22:39
@KennyAmaro try to reduce your code to the problem you are having, and explain it with the exact problem in the question. "#example should show #otherexample on click", etc. because it is quite difficult to understand what is not working and how should it work — Alvaro, Jan 10 '17 at 22:52
the code is more bigger is the css... the problem is I think there is something wrong in that code that doesn't make the button works on mobile, or there is something wrong on the javascript code.... I modify the post just to explain the funcionality and I reduce the best I could the css code — Kenny Amaro, Jan 10 '17 at 23:09

issue with input button

4 Answers4

Linked