Develop Reference

Change background color of selected div onclick not working?

I'm trying to make a form's selected element change its background color upon click. When the page initially loads the first option is selected. I'm trying to figure out what is wrong with the code I have, because it loads CORRECT when its viewed in our page editor (we're using wordpress & elementor to build our pages and running this as custom html code), but doesn't not load correctly on a "live" page.
I've researched for other methods of doing this without much success, and am especially confused considering the page works - but only when viewed as an admin inside a page editor (elementor).
https://jsfiddle.net/ncLk85mb/
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].className = "item";
}
el.className = "item highlight";
}
Above is the code I'm attempting to use to do the highlighting. I've pasted the entirety of what we've got so far into jsfiddle at the link above.

You don't need to add another function to add or remove highlight class. You already trigger click event on your div element so you have to just modify it like below -
$(".item").on('click', function() {
$('.item').removeClass('highlight');
$(this).addClass('highlight');
var item = $(this).find('input');
item.trigger("click");
if (item.prop("checked")) {
item.prop('checked', true);
} else {
item.prop('checked', false);
}
});
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$("input[name=submit]").on('click', function() {
var redirect = $('input[name="product"]:checked').val();
window.location.href = redirect;
});
/*Funnel Template - Step 2 - Order Form */
.main-panel {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
min-height: 320px;
width: 100%;
}
.main-panel h2 {
font-size: 26px;
text-align: left;
margin: 0;
font-weight: bold;
}
.main-panel .item {
margin: 15.4px 0;
padding: 8px 0;
min-height: 60px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.main-panel .item p {
margin: 0;
}
.main-panel .selection {
float: left;
width: 10%;
}
.main-panel .left-section {
float: left;
width: 46%;
}
.main-panel .right-section {
float: right;
width: 37%;
margin-left: 5%;
text-align: right;
}
.main-panel .item.highlight {
background-color: #ffc500;
z-index: 0;
border-radius: 5px;
}
.main-panel .item input[type='checkbox'] {
opacity: 0;
z-index: 2;
width: 18px;
height: 18px;
margin: 0;
}
.main-panel .item span::after {
opacity: 1;
z-index: 1;
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
left: 10px;
border: 2px solid #172969;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
line-height: 1.1em;
}
input[type="checkbox"]:checked+span:after {
font-family: 'FontAwesome';
content: "\f00c";
background-color: #172969;
color: #fff;
}
input[type=button] {
font-size: 18px;
font-weight: 600;
font-family: Noto Sans, sans-serif;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
width: 100%;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-panel">
<form>
<h2 style="text-align:center;">CHOOSE YOUR PACKAGE!</h2>
<div id="menu1">
<div class="item highlight">
<div class="selection"><input type="checkbox" class="styled" name="product" value="#link1" checked="checked" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="link#2" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="#link3" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="#link4" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
</div>
<input type="button" name="submit" value="Click Now!" />
</form>
</div>
JSFiddle Link

Use setAttribute:
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].setAttribute("class", "item");
}
el.setAttribute("class", "item highlight");
}

Use element.classList.add() instead.
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].classList.add("item");
}
el.classList.add("item");
el.classList.add("highlight");
}

CSS select field and text position

I'm developing a multi-platform app using Ionic v1.
The problem is with CSS, this is the page that I want to perform in graphical purpose:
In particular I want to center vertically the input list in the red circle: I want to align them with the caption to the left.
I want also to center vertically the text in the second circle, aligning with the red button.
This is the html and CSS code of that page:
app.controller('Wallet_management_Ctrl',['$scope','$http','Lang', function($scope,$http,Lang) {
var binance = localStorage.getItem("binance");
binance = (binance) ? JSON.parse(binance) : [];
$scope.binance = binance;
var coinmarketcapsymbol = localStorage.getItem("Coinmarketcap");
coinmarketcapsymbol = (coinmarketcapsymbol) ? JSON.parse(coinmarketcapsymbol) : [];
$scope.coinmarketcapsymbol = coinmarketcapsymbol;
var symbolsBitfinex = localStorage.getItem("symbolsBitfinex");
symbolsBitfinex = (symbolsBitfinex) ? JSON.parse(symbolsBitfinex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBitfinex = symbolsBitfinex;
var symbolsBittrex = localStorage.getItem("Bittrex");
symbolsBittrex = (symbolsBittrex) ? JSON.parse(symbolsBittrex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBittrex = symbolsBittrex;
var symbolsPoloniex = localStorage.getItem("Poloniex");
symbolsPoloniex = (symbolsPoloniex) ? JSON.parse(symbolsPoloniex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsPoloniex = symbolsPoloniex;
var symbolsCryptopia = localStorage.getItem("Cryptopia");
symbolsCryptopia = (symbolsCryptopia) ? JSON.parse(symbolsCryptopia) : [];
//console.log(symbolsBitfinex);
$scope.symbolsCryptopia = symbolsCryptopia;
var language = Lang.getlang();
$scope.showlang = language;
if (language=="ita"){
$scope.title= "Gestione Wallet"
}
if (language=="en"){
$scope.title= "Wallet management"
}
var weblist = ["Binance","Bitfinex","Bitstamp","Bittrex", "Coinmarketcap","Cryptopia","Poloniex"];
var BitstampList = ["bch", "btc", "eth", "ltc", "xrp"];
$scope.weblist = weblist;
$scope.symbolsBitstamp = BitstampList;
var walletlist = localStorage.getItem("walletlist");
walletlist = (walletlist) ? JSON.parse(walletlist) : [];
// console.log(walletlist);
var item = [];
if (walletlist === null)
var walletlist = [];
$scope.walletlist = walletlist;
$scope.add = function() {
if($scope.site == null || $scope.currency == null || $scope.amount == null || $scope.price == null){
if (language=="ita"){
alert("Devi riempire tutti i campi");
};
if (language=="en"){
alert("Fill in all the labels");
};
}
else{
if ($scope.amount == 0 || $scope.price == 0){
if (language=="ita"){
alert("La quantità o il prezzo non possono essere nulli");
};
if (language=="en"){
alert("The amount or the price can't be null");
};
}
else{
item = [$scope.site,$scope.currency,$scope.amount, $scope.price];
walletlist.push(item);
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
$scope.site = null;
$scope.currency = null;
$scope.amount == null;
$scope.price == null;
}
}
};
$scope.delete = function(item) {
var index = walletlist.indexOf(item);
if (index > -1) {
walletlist.splice(index, 1);
}
window.localStorage.removeItem("walletlist");
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
//location.reload();
};
$scope.showBitfinex = function() {
if ($scope.site == "Bitfinex"){
return true;
}
else
return false;
};
$scope.showBinance = function() {
if ($scope.site == "Binance"){
return true;
}
else
return false;
};
$scope.showCoinmarketcap = function() {
if ($scope.site == "Coinmarketcap"){
return true;
}
else
return false;
};
$scope.showBittrex = function() {
if ($scope.site == "Bittrex"){
return true;
}
else
return false;
};
$scope.showPoloniex = function() {
if ($scope.site == "Poloniex"){
return true;
}
else
return false;
};
$scope.showCryptopia = function() {
if ($scope.site == "Cryptopia"){
return true;
}
else
return false;
};
$scope.showBitstamp = function() {
if ($scope.site == "Bitstamp"){
return true;
}
else
return false;
};
$scope.$on('$ionicView.leave', function() {
location.reload();
});
}]);
/* Empty. Add your own CSS if you like */
/* Utilities */
* {
font-family: 'Comfortaa';
}
.pane {
background-color: #E8EAF6;
}
/*menu laterale img in alto*/
.menu .bar.bar-header.expanded {
background-image: url('../img/menu.jpg');
background-size: 120%;
background-position: 0%;
transition: all .5s ease-in-out;
}
/*menu laterale img in alto*/
.menu.menu-left * {
background-color: #303F9F;
font-weight: bold;
font-family: 'Comfortaa';
font-size: 1.05em;
color: white;
}
.nav-bar-block,
.bar {
background-color: #303F9F !important;
font-family: 'Comfortaa';
font-weight: bold;
}
.link {
color: #116262;
font-weight: bold;
}
h4 {
color: #283593;
font-size: 1.875em;
margin-bottom: 16px;
}
h4:first-child {
border-top: none;
padding-top: initial;
}
h3 {
color: #283593;
font-size: 1.4em;
margin-bottom: 16px;
}
h3:first-child {
border-top: none;
padding-top: initial;
}
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.no-border {
border: none;
}
.static {
position: static;
}
.bold {
font-weight: bold;
}
.border-top {
border-top: solid 1px #ccc;
padding-top: 30px;
}
.blue-grey-900 {
background-color: #263238 !important;
color: #fff;
}
/* Menu */
.menu.menu-left * {
font-weight: bold;
}
.item-radio input:checked~.item-content {
background: transparent;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
.item.item-radio .radio-icon {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.item.item-radio:active .radio-icon {
opacity: 0;
transform: scale(1.6);
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.directions.button-bar {
margin: 0 auto;
width: 33.333%;
}
.directions.button-bar button {
line-height: 26px;
}
.ion-arrow-right-c.top-left:before {
transform: rotate(-135deg);
}
.ion-arrow-right-c.top-right:before {
transform: rotate(-45deg);
}
.ion-arrow-right-c.bottom-left:before {
transform: rotate(-225deg);
}
.ion-arrow-right-c.bottom-right:before {
transform: rotate(45deg);
}
#modal {
background-color: #ef4e3a;
border-radius: 100%;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.2);
position: fixed;
height: 50%;
bottom: 0;
opacity: 0;
width: 700px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.expand #modal {
background-color: #DBDBDB;
border-radius: 0;
border-top: solid 4px #ef4e3a;
opacity: 1;
z-index: 9;
}
/* CODE */
.code {
color: #333;
font-family: monospace;
padding: 10px;
white-space: pre;
}
.code-wrapper {
padding-bottom: 30px;
padding-top: 15px;
}
.code-wrapper::before {
color: #1B5E20;
font-family: "Ionicons";
speak: none;
font-size: 18px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: '\f216 ';
}
.code-wrapper.active::before {
content: '\f207 ';
}
.code-wrapper .toggle {
color: #4CAF50;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 10px 8px;
text-decoration: underline;
}
.code-wrapper .code {
opacity: 0;
margin-top: -20px;
height: 0;
overflow: hidden;
position: absolute;
transition: 0.1s all ease-in-out;
z-index: 9999999999;
}
.code-wrapper.code-wrapper-last .code {
position: relative;
}
.code-wrapper.active .code {
background: #f9f9f9;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
left: 16px;
height: initial;
margin-top: 15px;
padding: 15px;
right: 16px;
opacity: 1;
transition: 0.3s all ease-in-out;
width: initial;
}
.popover {
left: initial !important;
right: 16px !important;
top: 16px !important;
}
.platform-android .popover {
margin-top: 10px;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
div.relative {
position: relative;
left: -30px;
}
.round-button {
width: 25%;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #cfdcec;
overflow: hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #30588e;
}
.round-button a {
display: block;
float: left;
width: 100%;
padding-top: 50%;
padding-bottom: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
}
/* SlideShow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
/* Select styles */
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<ion-view ng-model="title" view-title={{title}}>
<ion-content ng-controller="Wallet_management_Ctrl">
<br /><br /><br />
<label class="item item-input notIE item-select">
<div ng-if="showlang == 'en'" class="input-label" ng-model="weblist">Site</div>
<div ng-if="showlang == 'ita'" class="input-label" ng-model="weblist">Sito</div>
<select ng-model ="site">
<option ng-repeat="item in weblist" >{{item}}</option>
</select>
</label>
<label class="item item-input item-select">
<div ng-if="showlang == 'en'" class="input-label" >Currency</div>
<div ng-if="showlang == 'ita'" class="input-label" >Valuta</div>
<select ng-model="currency" >
<option ng-if = "showBitfinex()" ng-repeat="item in symbolsBitfinex" >{{item}}</option>
<option ng-if = "showBinance()" ng-repeat="item in binance" >{{item}}</option>
<option ng-if = "showCoinmarketcap()" ng-repeat="item in coinmarketcapsymbol" >{{item.symbol}}</option>
<option ng-if = "showBittrex()" ng-repeat="item in symbolsBittrex" >{{item}}</option>
<option ng-if = "showPoloniex()" ng-repeat="item in symbolsPoloniex" >{{item}}</option>
<option ng-if = "showCryptopia()" ng-repeat="item in symbolsCryptopia" >{{item}}</option>
<option ng-if = "showBitstamp()" ng-repeat="item in symbolsBitstamp" >{{item}}</option>
</select>
</label>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Amount</span>
<span ng-show="showlang == 'ita'" class="input-label">Quantità</span>
<input ng-show="showlang == 'en'" type="number" placeholder="Amount" min="0" ng-model="amount">
<input ng-show="showlang == 'ita'" type="number" placeholder="Quantità" min="0" ng-model="amount">
</label>
</div>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Price in $ </span>
<span ng-show="showlang == 'ita'" class="input-label">Prezzo in $ </span>
<input ng-show="showlang == 'en'" type="number" step="0.01" placeholder="Price in $" min="0" ng-model="price">
<input ng-show="showlang == 'ita'" type="number" step="0.01" placeholder="Prezzo in $" min="0" ng-model="price">
</label>
</div>
<div class="col text-center">
<button ng-show="showlang == 'en'" class="button button-block button-positive" ng-click="add()">Add</button>
<button ng-show="showlang == 'ita'" class="button button-block button-positive" ng-click="add()">Aggiungi</button>
</div>
<ion-item-group>
<ion-divider color=#9FA8DA>
<ion-item ng-if="showlang == 'en'" class="row">
<h3 class="col" align="center">Site</h3>
<h3 class="col" align="center">Currency</h3>
<h3 class="col" align="center">Amount</h3>
<h3 class="col" align="center">Purch. P. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item ng-if="showlang == 'ita'" class="row">
<h3></h3>
<h3 class="col" align="center">Sito</h3>
<h3 class="col" align="center">Valuta</h3>
<h3 class="col" align="center">Qnt.</h3>
<h3 class="col" align="center">P. Acq. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item class="row" ng-model="walletlist" ng-repeat="item in walletlist">
<div class="col" align="center">{{item[0]}} </div>
<div class="col" align="center">{{item[1]}} </div>
<div class="col" align="center">{{item[2]}} </div>
<div class="col" align="center">{{item[3]}} </div>
<div class="col" align="center"><button class="button button-assertive button-small, ion-ios-trash" ng-click="delete(item)"></button></div>
</ion-item>
</ion-divider>
</ion-item-group>
</ion-content>
</ion-view>
A think that I should modify CSS file, but I don't know how I can do! I tried with some similar mistakes solved, but I didn't solve the problem

Function keeps resetting itself without being called

I am trying to make a number guessing game. Unfortunately, the count/guessNo variable keeps resetting itself, indicating that the newGame function is being ended prematurely. This appears to happen primarily when switching from one guess number to another. Please do not recommend changes to my HTML; this is for an online bootcamp and we are required to use the supplied HTML. Here's my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
newGame();
});
//call newGame when user enters number and presses enter
function newGame() {
var guessNo = 0;
var x = Math.floor(Math.random() * 100) + 1;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
$('.new').click(function(){
newGame();
});
}
function guesser(x,guessNo) {
//jQuery
var guess = parseInt(document.getElementById("userGuess").value, 10);
var y = Math.abs(x-guess);
var r = "";
//switch statement
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
guessNo += 1;
//jQuery
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = guessNo;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
return guessNo;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
}

Solved. So basically, the problem that I ran into was that the submit button in my original code kept resetting the entire page instead of just processing the information in the textboxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<!-- should not be submit -->
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
CSS:
clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0,0,0,0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong{
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px,
rgb(26, 31, 52) 2px 2px,
rgb(26, 31, 52) 3px 3px,
rgb(26, 31, 53) 4px 4px,
rgb(26, 32, 53) 5px 5px,
rgb(27, 32, 53) 6px 6px,
rgb(27, 32, 54) 7px 7px,
rgb(27, 32, 54) 8px 8px,
rgb(27, 32, 54) 9px 9px,
rgb(27, 33, 55) 10px 10px,
rgb(27, 33, 55) 11px 11px,
rgb(28, 33, 55) 12px 12px,
rgb(28, 33, 56) 13px 13px,
rgb(28, 34, 56) 14px 14px,
rgb(28, 34, 56) 15px 15px,
rgb(28, 34, 57) 16px 16px,
rgb(29, 34, 57) 17px 17px,
rgb(29, 34, 57) 18px 18px,
rgb(29, 35, 58) 19px 19px,
rgb(29, 35, 58) 20px 20px,
rgb(29, 35, 58) 21px 21px,
rgb(29, 35, 59) 22px 22px,
rgb(30, 35, 59) 23px 23px,
rgb(30, 36, 59) 24px 24px,
rgb(30, 36, 60) 25px 25px,
rgb(30, 36, 60) 26px 26px,
rgb(30, 36, 60) 27px 27px,
rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder { /* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder { /* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
Javascript:
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
gameState = {};
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
$('#guessButton').click(function(){
guesser();
console.log("test");
});
$('.new').click(function(){
newGame();
});
});
function newGame() {
gameState.guessNumber = 0;
gameState.number = Math.floor(Math.random() * 100) + 1;
}
function guesser() {
//jQuery
event.preventDefault();
var x = gameState.number
var guess = parseInt($('#userGuess').val());
var y = Math.abs(x-guess);
var r = "";
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
gameState.guessNumber ++;
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = gameState.guessNumber;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
//return guessNo;
}

Append does not work for appending text to an element

Similar to this question:
jQuery append fadeIn
But the solution isn't working for me.
Basically trying to ask the user their name and then append a greeting below.
Preferably on a fade in, I've tried a few solutions I came across here but to no avail.
The "document.name_form..etc) works fine when called inside an alert as well.
Can anyone see where I'm going wrong?
function doit() {
$('#item2').append( document.name_form.fname.value +"U WOT");
}
(The function doit gets triggered from the html forms "onSubmit", and has triggered alerts etc successfully)
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

.append() should be used to add new DOM elements. To add text to an existing element, use .text.
function doit(e) {
e.preventDefault();
$('#item2').text( function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
});
}
You also have to use preventDefault() to prevent the form from being submitted. To match this, I changed the <form> to:
<form name="name_form" action="" onSubmit="doit(event)">
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit(e) {
e.preventDefault();
$('#item2').text(function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val() + "U WOT";
});
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(event)">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>
Actually, your append() DOES work. You had two problems in your fiddle:
You had onLoad selected. This causes all the code to be inside a window.onload function, so it wasn't in the global scope, which is needed for functions used in onsubmit attributes. Using No wrap fixes this.
You weren't preventing the default submission. Beside the way I did this above, you can also do it by simply returning false in the onsubmit:
onsubmit="doit(); return false;"
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(); return false">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

I think the problem is that the function doit is not available when you bind onsubmit.
You can try to declare doit like a variable:
doit = function(){
By the way, if you don't want to submit really the form you can bind onclick instead of onsubmit.
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
doit = function() {
$('#item2').append(document.name_form.fname.value + "U WOT");
return false;
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="#" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

Collapsible search button without using collapsible header

With JQM, I am trying to achieve the following header design
|[Home] Company------------------------------[Search][Filter]
[list of items]
Home button and company tille left aligned and the Search and Filter right aligned.
When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.
Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?

The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.
Code -:
$(document).on("click", "#search-button", function(event)
{
$("#searchtickets").toggle();
});
.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
margin-right: 50px !important;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1 class="company">Company</h1>
<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>
<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>

I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
/* search input field */
input[type=search] {
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* placeholder */
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
<h3>Try this</h3><br/>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Or this</h3>
<form id="demo-b">
<input type="search" placeholder="Search">
</form>
And u can also do this by this way of using a small JS-
$(function() {
$('.srch-button').click(function(){
var $wrapper = $('.srch-wrapper'),
isOpen = $wrapper.hasClass('open');
$wrapper.toggleClass('open')
.find('.srch-input')[isOpen ? 'blur' : 'focus']();
// remove this - onyl for demo
return false;
});
})
body {
padding: 10px 20px;
background-color: #343434;
color: #fff;
}
.center {
padding: 60px;
max-width: 400px;
margin-left: 200px;
}
.srch-form {
position: relative;
width: 44px;
}
.srch-wrapper {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 40px;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.srch-wrapper.open {
width: 200px;
}
.srch-input {
position: relative;
background-color: transparent;
height: 44px;
line-height: 26px;
padding: 5px 10px 5px 32px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 100px;
margin: 0;
width: 100%;
}
.srch-input:focus {
outline: none;
border-color: #aaa;
}
.srch-button {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: #ddd;
width: 44px;
height: 44px;
text-align: center;
}
.srch-button:focus {
outline: none;
}
.srch-input:focus + .srch-button,
.srch-button:hover {
color: #aaa;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div class="center">
<form action="" class="srch-form">
<div class="srch-wrapper open">
<input type="text" class="srch-input" placeholder="Search..." />
<button class="srch-button" type="submit">
<em class="icon-search"></em>
</button>
</div>
</form>
</div>