function to change my .css if the width of the tea is "X"

Question

function to change my .css if the width of the tea is "X"

Navigation

#1 by (1 votes)
#2 by (-1 votes)

-1

Hello. I'm in the learning phase. In an attempt to create a responsive website. I need a .js or .css script. so that when this width in the css (css) is true, run the code. in css.

(thank you for giving any collaboration, knowledge is never d +)

<!-- language: lang-css -->

@media only screen and (max-width: 769px) {
}

$("#input-search").on("focus", function(){

	$("#input-search").css({"width": "120px"});
  
	}).on("blur", function(){

		$("#input-search").css({"width": "80px"});	
    
});

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search" style="width: 80px">
 </div>
 </li>

javascript html5 css css3

asked by anonymous 23.01.2018 / 02:11

2 answers

1

Hello, you do not need a JS script to make your site responsive, this is only possible with CSS. One of the best ways is to use the CSS half queries.

@media(min-width: 768px) {
   body {
     background-color: red;
  }
 }

The above code causes the page to have the red background on screens with at least 768px. This article can help you Introduction about Media Queries , read it.

24.01.2018 / 04:05

Validate mail input using Jquery.MaskedInput and / or Jquery Is it possible to create a 100% cloud service to sign documents with digital certificate?

score -1 · Accepted Answer

Look, your question is a bit confusing, but I think I understand, you want to increase the size of the input, according to the client's viewport.

If this is what you meant, it is as follows.

css does this for you with the popular media querie, since you want to give " responsividade ao layout ", I imagine you did not try, was to put the code inside it, like this:

@media only screen and (max-width: 769px) {  
  #input-search{
    width: 120px !important;
  }
}

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search" style="width: 80px">
 </div>
 </li>

In this specific case, as you are putting a style in-line de 80px , the only way to overwrite css and !important; , which I already advise you to AVOID TO MAXIMUM uses it.

You can also control the focus of the input, using

#input-search{
  width: 80px
}
  
#input-search:focus{
   width: 120px;
}

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search">
 </div>
 </li>

Avoiding the use of JS in this case.

I hope I have helped you.

Hugs.