Goal:
When you click on the button with icon reading-glass a, a text field should be entering from right to left.
After you have pressed the button, the cursor should be located in the text field and to be ready to retrieve input data and a color frame around the button for instance yellow should appear.
When you use to the curser outside of the text field and suddently you press the left button of your mouse, the text field and the yellow color around the button should disappear.
Problem:
I do not now how to create it.
Info:
*I'm using bootstrap and jQuery.
*Today, I do not have a available sourcecode.
What you need is two actions on your button:
show the input field
fire the form
The code below does that. The input will have a zero width on page load. The jQuery functions binds a click event on the button.
When it's clicked it will look if the input field has a width. When not, it will prevent the default action (submitting the form), and instead animates the input to a width of 200px. After that it focuses on the field.
The second time you click on the button, the input won't have zero width, so the buttons acts normal and will submit the form.
Hope it suits you.
$(function() {
$('#search-form button').on('click', function(e) {
var btn = $(this);
var inp = $(this).parent().find("input");
if( inp.width() == 0 ) {
e.preventDefault();
inp.animate({width: "200px"}, 500).focus();
btn.addClass('active-btn');
}
});
});
* {
box-sizing: border-box;
}
body {
background: black;
}
#search-form input {
color: #fff;
height: 50px;
background: #484848;
border: 0;
float: right;
width: 0;
}
#search-form button {
background: #484848;
color: #fff;
width: 50px;
height: 50px;
border: 1px solid #484848;
float: right;
}
#search-form .active-btn {
border: 1px solid #57ABD9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
<button type="submit">🔎</button><input type="text" name="search" />
</form>
I hope something like this:
Note - It is responsive too
DEMO and FULL SCREEN DEMO
HTML
<div id="sb-search" class="sb-search " >
    <form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." type="search" value="" name="search" id="search"/>
<input class="sb-search-submit" type="submit" value=""/>
        <span class="sb-icon-search"><i class="glyphicon glyphicon-search"></i></span>
    </form>
</div>
CSS [if needed]
body{
margin: 40px 60px;
background:#555;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(e){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
$('.sb-search-input').focus();
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
$('.sb-search-input').blur();
isOpen = false;
}
});
});
Related
I am trying to change a menu from a list to a dropdown.
I am using the Mapplic - Custom Interactive Map WordPress Plugin
I found the code for it, but I don't seem to get it to
this.addLevelSwitcher = function() {
if (self.data.levels.length > 1) {
var control = $('<div></div>').addClass('mapplic-level-switcher');
self.data.levels.forEach(function(level, i) {
var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) {
e.preventDefault();
self.switchLevel(level.id);
});
if (level.show) button.addClass('mapplic-selected');
});
this.el.append(control);
self.el.on('levelswitched', function(e, target) {
$('button', control).removeClass('mapplic-selected');
$('button[data-level="' + target + '"]', control).addClass('mapplic-selected');
});
}
}
Also here is the css
/* new switcher */
.mapplic-level-switcher {
position: absolute;
right: 0;
top: 0px;
margin: 12px;
}
.mapplic-level-switcher button {
background-color: #f8f8f8;
border-radius: 0;
color: #888;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 600;
line-height: 20px;
padding: 4px 10px;
text-align: center;
user-select: none;
width: 100%;
border: none;
transition: transform 0.2s;
position: relative;
}
.mapplic-level-switcher button:hover { background-color: #f8f8f8; }
.mapplic-level-switcher button:focus { outline: none; }
.mapplic-level-switcher button.mapplic-selected {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
background-color: #fff;
color: #222;
transform: scale(1.15);
z-index: 100;
}
I am trying to make it more responsive on mobile...
Another thing I was thinking was to hide this menu on mobile and add indiviuals buttons in order to trigger the floor plan.
Any ideas on how could I do any of this?
Thanks
I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>
You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");
$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');
Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");
You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.
In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.
Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>
Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>
I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});
For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>
I have a toggle button to switch the website background color from black to white (and vice versa). It works ok, but I want the slider to move slowly (in 1 second, not instantly) when I click on it. The code:
var change = function() {
var backgr = document.body,
slider = document.getElementById('slider');
if (backgr.style.backgroundColor == 'white') {
backgr.style.backgroundColor = 'black';
slider.style.float = 'right';
} else {
backgr.style.backgroundColor = 'white';
slider.style.float = 'left';
}
}
body {
background-color: black;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
border-radius: 50%;
float: right;
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>
Not sure if you have to animate the background-color or the button so I have animated both with a CSS transition, so keep just what you need.
For the button I've simply changed the margin-right (via calc()) keeping the float: right (which it can't be animated)
Also the JS part is simplified: toggling a class on the body element is enough and you can keep off your style from Javascript so as a result your code is more mantainable.
var body = document.body;
var change = function() {
body.classList.toggle('active');
}
body {
background-color: black;
transition: background-color 1s;
}
body.active {
background-color: white;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
transition: margin 1s;
border-radius: 50%;
float: right;
}
.active #slider {
margin-right: calc(100% - 15px);
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>
Rather than using a button, I'd reskin a checkbox like this. This is handy as it keeps track of its own boolean value.
Then based on whether or not it's checked you can do whatever.
Below I've used transform and transition to animate the sliding you can see this in the CSS.
function toggleChange(e) {
let bodyStyle = document.querySelector('body').style;
if (e.target.checked) {
bodyStyle.background = "#000";
} else {
bodyStyle.background = "#FFF";
}
}
.switch[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 30px;
height: 16px;
background-color: orange;
border-radius: 16px;
}
.switch[type=checkbox]::after {
content: '';
position: absolute;
background: #FFF;
transition: all .2s ease-in-out;
border-radius: 7px;
width: 14px;
height: 14px;
margin: 1px;
}
.switch[type=checkbox]:checked::after {
transform: translateX(14px);
}
<input type="checkbox" onchange="toggleChange(event)" class="switch" />
I hope this is helpful.
Use transition: left 1000ms ease;
and position: relative;
Then change the left property in the script instead of changing float:
var change = function() {
var backgr = document.body,
slider = document.getElementById('slider');
if (backgr.style.backgroundColor == 'white') {
backgr.style.backgroundColor = 'black';
slider.style.left = 0; // NEW LINE
} else {
backgr.style.backgroundColor = 'white';
slider.style.left = "15px"; // NEW LINE
}
}
body {
background-color: black;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
border-radius: 50%;
float: left; /* NEW LINE */
position: relative; /* NEW LINE */
transition: left 1000ms ease; /* NEW LINE */
left: 0; /* NEW LINE */
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>
Instead of float, I think you should use css that can by used with transition. if you place your sldier with a position for example, you can add a transition on the position with a 1sec duration and it will works as you want
I'm working on this codepen to practice working with APIs and search bar animations.
wikiSearch codepen
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>
some of my js
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
How can I access the X button after the search results come in?
On the splash page, the X button works as I want it to - moves right when input is focused and moves back to the left where it is hidden.
My goal is to have this behavior persist, even after the results display, and in addition to refresh to the original splash page.
I've tried adding an active class when it is clicked,delegating to #reset from body, adding an onclick event inline with the html, and using the location reset property, to no avail.
Thanks for any pointers.
You have a z-index management problem. After click on search button the reset button has a z-index value of -1, this means that even you are see the button when you think you click on it you don't.
A way to fix this particular problem could be to remove the z-index attribute in your css file for reset button, also give z-index value to input control like 5 and for the search button like 10 to keep the logic you already have.
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').css("background", "yellow")
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('input').on('focus', function(){
$('.btn-reset').css({
'right': '-22px',
'background-color': 'white'
})
$('.btn-search').css({
'background-color': 'hotpink'
})
})
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
transition: all .3s ease-in-out;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
z-index:5;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
z-index:10;
}
.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
</form>
</div>
<br>
<div id="content">
</div>
So, if I'm getting you, you're looking for how to cause certain effects on the reset button when certain events happen? If I'm getting that, then there are really two events: first, any time the text input loses focus (at which point, you'd hide the reset button, I assume), and second, when the reset button itself is clicked.
Looking at the first case, you'd simply have the on('blur', function(){...}) set on the input, just as you have on('focus', function(){...}) happening right now. When the input is blurred, simply re-hide the reset and toggle the color change back on the search button.
In the second case, you're missing a line to actually clear the contents of the input. Presumably, you'd also want to remove the results of any search if you clear the input, but that's not really a given.
Hope this helps, if not please clarify!
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').addClass("body-with-results");
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('#search').on('focus', function(){
$('.btn-reset').show();
$('.btn-search').css({
'background-color': 'hotpink'
})
}).on('blur', function(){
$('.btn-search').css({
'background-color': '#ccc'
});
})
$('#resetBtn').on('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
$(this).hide();
$('#content').empty();
$('#search').val('');
$("body").removeClass("body-with-results");
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
}
.body-with-results {
background: yellow;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
}
#resetBtn {
display: none;
background: white;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
right: -28px;
top: 0px;
width: 30px;
z-index: 5;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button class="btn btn-reset fa fa-times" id="resetBtn"></button>
</form>
</div>
<br>
<div id="content">
</div>
A few changes have been made to the code. Specifically, what's happening is when the form has been submitted and the body's CSS altered, there is a z-index issue cropping up. Here are the changes made:
The body el style is now being changed by adding/removing a 'body-with-results" class. This is purely cosmetic, as I really don't like hard-coding style changes.
The reset button is no longer a pure reset button, it is now simply a styled button that simulates a reset. When you reset a form, that's all you reset. However, in this case, you want to reset the form, hide the reset element, and clear any results from the contents div. So the reset el now does just that.
Styles on the reset button -- rather than sliding in and out (which could still probably be a thing), I simply set the right/top values in the css, and also fixed the z-index thing. Note that I used the ID of the el rather than the class to set the styles. This was done to properly handle the specificity of the styles (IDs are considered more specific than classes, thus ID styles override class styles).
I removed the code to hide the reset button on blur -- the issue with that becomes, when you try to click on the reset button, the first event is the input blur, which promptly hides the element you just thought you clicked on.
Still trying to track down the wierd suggested results remnant code, but this is a starting point.