MDL floating label textfields: forcing the label to float - javascript

This HTML file is supposed to write "New text" into the the textfield when the "ADD TEXT" button is clicked. Does anyone know how to make it so that the label of the textfield floats when the button is clicked on, as opposed to doing this?
Thanks.
textbox.html
<!--Template page for all other pages-->
<!--Based MDL items -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textfield Demo</title>
<!-- Import MDL libraries -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="js/config.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell--10-col" style="text-align:center; height:60vh">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="search-bar">
<label class="mdl-textfield__label" for="search-bar">Text...</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
id="button" onclick="addText()">Add Text</button><br>
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
</div>
</main>
</div>
<script src="textbox.js"></script>
</body>
</html>
textbox.js
function addText() {
let searchBar = document.getElementById('search-bar');
let text = 'New text';
searchBar.value = text;
}

You need to "focus" (reference) on the input first to have the proper animation from Material Design and since it's expected to have the is-dirty class you also need to add it to the parent.
function addText() {
let searchBar = document.getElementById('search-bar');
// These two lines:
searchBar.focus();
searchBar.parentElement.classList.add("is-dirty");
let text = 'New text';
searchBar.value = text;
}

Related

Why am i getting undefined in the console log instead of the input value?

I am trying to get the input value as my result but after clicking on the button I am getting 'undefined' as the console result. Please help to understand the reason. Sharing the HTML and js code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox');
console.log(searchBox.value)
}
You are using a class for multiple elements which is why undefined is shown. Among many ways, I will discuss two here, you have to either use indices with classes if using queryselector to get the correct element or use an ID to select the input element. Here I have used ID to get the input searchbox. See the following code:
const moviesearchEngine = () => {
let searchBox = document.querySelector('#searchBoxInput');
console.log(searchBox.value)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" id="searchBoxInput" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID">Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
Your div <div class="searchBox"> also contain a class "searchBox" so it selected that.
Fixed: Add an input selector after class selector.
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox input');
console.log(searchBox.value)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>

toggleClass Each element One By One jQuery

Problem is that I'm using an array that has more than one element. So, on the toggle, the last class gets passed and functionality given for the last element gets integrated and all starting elements were just added but didn't show any functionality.
I need that each element first to show functionality then toggled to another class.
var arrayOfButtonId = [];
$(".buttons-container").click(function (e) {
var clickedItemId;
// if (e.target !== e.currentTarget) {
clickedItemId = e.target.id;
arrayOfButtonId.push(clickedItemId);
console.log(arrayOfButtonId);
var counter = 0;
arrayOfButtonId.forEach((id) => {
console.log(id, counter++);
setTimeout(() => {
$(".sample-display").toggleClass(id,);
}, 4000);
});
});
For this, In HTML I have Various buttons which can pass the value to js . So that value gets added one by one with some time delay till one function shows its work properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample HTML</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
</head>
<div class="card col-md-6 offset-md-3 shadow text-center animate__animated">
THis is for Sample.
</div>
<div
class="
container-fluid
buttons-container
col-md-3
alert-primary
text-dark
rounded
"
>
<!-- Animation for Attention Makers -->
<div class="card col-md-12 my-md-2 py-md-2">
<span class="text-capitalize font-weight-bold text-center"
>Attention Maker</span
>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Flash"
id="animate__flash"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Bounce"
id="animate__bounce"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Tada"
id="animate__tada"
/>
</div>
</div>
<!-- script Start-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- script End-->
<script src="./js/main.js"></script>
<body></body>
</html>

My code of javascript Show and hide does not work?

I am doing a task of shwoing and hiding container1 of confused why my code does not work
My task is :
to click on button of show (will display container1)
And button of hide (Hiding the container1)
this is the html
function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button oneclick="Show()">Hide London</button>
<button oneclick="Hide()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>
You have typo it should be onclick not oneclick.
function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button onclick="Hide()">Hide London</button>
<button onclick="Show()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

Angular JS "pageslide-directive"

i am fresher to angular Js. i want to use pageslide-Directive. Below i have shared the sample template. How to load that content dynamically in that panel.. Please suggest.
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Ng-pageslide : AngularJS sliding panel for serving additional content" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="angular-pageslide-directive.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css">
<title>AngularJS Pageslide directive demo</title>
<style>
.ng-pageslide {
background: #eee;
}
</style>
<script>
var app = angular.module("app", ["pageslide-directive"]);
</script>
</head>
<body >
<!-- MAIN CONTENT -->
<div ng-app="app" ng-controller="test" id="" class="outer" style="padding:20px">
<a class="large button" pageslide ps-side="right" ps-speed="0.5" ng-click="profile_action('')" href="#demo-right">Open Demo</a> <div style="padding:20px" id="demo-right">
{{ NAME}}
<a id="demo-right-close"i class="button" >Close</a>
</div>
</div>
</body>
You have to add an controller to the panel and use it to load your content to the panel's items

Categories