CSS place div on image fullscreen - css

I'm making an HTML5 game using Tululoo.
I want to play the game in fullscreen. I used CSS to display the game in fullscreen. There is an image beneath the Tululoo game (div) where I want to display the score. I gave the scores an X and Y position, to be on top of the image.
When I activate fullscreen, the tululoogamewill be centered in the middle of the page. Now I want the score image to be placed beneath the game, and the scores to be placed at the exact same point on the image, as I did when the game was not in fullscreen and at the left top of the page. I can´t give an X and Y position to the scores, because of the difference in screen sizes.
How do I need to solve this?
Here's my HTML:
<html lang='en'>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var scoreteen = 0;
var scoremutant = 0;
var fullscreenteller = 0;
window.onload = function () {
document.getElementById('tululoogame').style.display = 'none';
document.getElementById('scoreteen').style.display = 'none';
document.getElementById('scoremutant').style.display = 'none';
}
function laatgamezien() {
document.getElementById('tululoogame').style.display = 'block';
document.getElementById('play').style.display = 'none';
document.getElementById('scoreteen').style.display = 'block';
document.getElementById('scoremutant').style.display = 'block';
}
function launchFullscreen(element) {
laatgamezien();
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function dumpFullscreen() {
console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}
document.addEventListener("fullscreenchange", function(e) {
console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
console.log("msfullscreenchange event! ", e);
});
function puntvoorteen(){
if (NaN === (scoreteen)) {
scoreteen = 0;
}
scoreteen++;
tekst = scoreteen;
document.getElementById("scoreteen").innerHTML = tekst;
}
function puntvoormutant(){
if (NaN === (scoremutant)) {
scoremutant = 0;
}
scoremutant++;
tekst = scoremutant;
document.getElementById("scoremutant").innerHTML = tekst;
}
</script>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta charset='utf-8' />
</head>
<body style='background: black; margin: 0; padding: 0; overflow: hidden;'>
<div id="play">
<img src="afbeeldingen/playbutton.png" width="180" height="180" onclick="launchFullscreen(document.documentElement);" />
</div>
<div id='tululoogame'></div>
<img src="afbeeldingen/opzetscore.png" width="1024" height="98" id="scorepicture">
<div id="scoreteen"> </div>
<div id="scoremutant"> </div>
<script type='text/javascript' src='game.js'></script>
</body>
</html>
And here is my CSS:
#scoreteen {
position:absolute;
color:white;
left: 680px;
top: 670px;
font-size: 30px;
}
#scoremutant {
position:absolute;
color:white;
left: 320px;
top: 670px;
font-size: 30px;
}
#play {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#tululoogame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height: 100vh;
width: 100vw;*/
}
#scorepicture {
}
And some screenshots:
Game not in fullscreen
Game in fullscreen

Related

HTML CSS how to divide ta

I need your help
I have this html code :
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p><img src=""/><span id="image"><img src=""/></span><span id="more">Lorem Ipsum </span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("image");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
This finally would be working. I have used a file from my github repo to make the example working. But you can always that path.
// You can replace your whole JS with this code
fetch("https://raw.githubusercontent.com/ArunBohra33/json-data/main/clickable-pic") //file json objects
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log("error: " + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.results.length; i++) {
var img = document.createElement("img");
// New code
// Add a id to the image
img.setAttribute("id", "popup-image" + (i + 1));
img.src = data.results[i].picture.large;
img.classList.add("popup-img");
img.setAttribute("data-data", JSON.stringify(data.results[i]));
mainContainer.appendChild(img);
// Old code
var div = document.createElement("div");
div.innerHTML = "first: " + data.results[i].name.first + " First Name :" + data.results[i].name.last;
mainContainer.appendChild(div);
// if (i == data.results.length - 1) clickOnImg();
}
for (let i = 0; i < data.results.length; i++) {
document.querySelector(`#popup-image${i + 1}`).addEventListener("click", function () {
var firstName = data.results[i].name.first;
var lastName = data.results[i].name.last;
showData(firstName, lastName, i + 1);
});
}
}
// This function shows the modal with data in it
function showData(firstName, lastName, index) {
var popupBox = document.createElement("div");
popupBox.style.display = "flex";
popupBox.setAttribute("id", "popupBoxOverlay_{i}");
popupBox.classList.add("popupBox");
popupBox.innerHTML = `<div class="modal">
<span class="cross-btn-${index - 1}">×</span>
<div class="fname">
<label>FirstName: </label>
<span class="firstName${index - 1}">${firstName}</span>
</div>
<div class="lname">
<label>LastName: </label>
<span id="lastName${index - 1}">${lastName}</span>
</div>
</div>`;
document.body.prepend(popupBox);
var crossBtn = document.querySelector(".cross-btn-" + (index - 1));
crossBtn.addEventListener("click", function () {
popupBox.remove();
});
}
/* // CSS CODE */
img {
width: 200px;
}
.popupBox {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
height: 100vh;
width: 100vw;
/* z-index: 100000; */
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: flex;
flex-direction: column;
min-width: 60%;
background: #fff;
border-radius: 8px;
position: relative;
padding: 2rem;
}
[class^=cross-btn] {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
<div class="album py-5 bg-light">
<div class="container">
<br>
<h1>Persons</h1><br>
<div class="row">
<div class="card-group">
<div id="myData"></div>
</div>
</div>
</div>
</div>

CSS image over JS animated image

I created following simple website. I have Starfield and galaxy pictures. Starfield is animated by JS code. Stars are moving. But when I place Galaxy over starfield with CSS code stars stop moving.
Below I placed JS code and HTML code without placing galaxy over starfield. How can I place one over another with stars moving?
Regards
Piotr
<head>
<meta charset ="utf-8">
<title> Galaktyka</title>
<script src ="Code17.js"></script>
<style>
#galaxy{
display: block;
margin-left: 0;
margin-top: 0;
}
#star{
position: relative;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
window.scrollTo(0,0);
}
</script>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
<img id="star" src="starfield.jpg">
</body>
And below JS
window.onload = function(){
let image = document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}
var motion = true;
function move() {
if(motion) {
let image = document.getElementById("star");
imageLeft = imageLeft + 1;
image.style.left = imageLeft + "px";
if (imageLeft == 0) {
motion = false;
} else {
let image = document.getElementById("star");
imageLeft = imageLeft - 1;
image.style.left = imageLeft + "px";
}
if (imageLeft == -175){
motion = true;
}
}
}

How to show Captions in an external container using JWPlayer v8

Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.
Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?
Problem: the JW player 608 live captions are not formatted cleanly.
To solve this, disable the JW caption display and format our own window, named "ccbuffer"
<style type="text/css">
.jw-captions {
display: none !important;
}
#ccbuffer {
border: 2px solid white !important;
border-radius: 4px;
background-color: black !important;
display: flex;
height: 120px;
margin-top: 6px;
font: 22px bold arial, sans-serif;
color: white;
justify-content: center;
align-items: center;
}
</style>
Here is where I show the player, and ccbuffer is a div right below it
<div id="myPlayer">
<p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
Loading video...
</p>
</div>
<div id="ccbuffer" />
DOMSubtreeModified is deprecated. Use MutationObserver, which is less stressful on the client.
Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.
<script>
var observer;
jwplayer().on('captionsChanged', function (event) {
if (event.track == 0) {
observer.disconnect();
$('#ccbuffer').hide('slow');
}
else {
$('#ccbuffer').show('slow');
// select the target node
var target = document.querySelector('.jw-captions');
// create an observer instance
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
});
$(document).ready(function () {
$('#ccbuffer').hide();
});
</script>
So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.
Final Solution: External Captions that are draggable/resizable
All credit to #Basildane, I worked out how to extenalize the captions with VOD, and to make them draggable and resizable, with CSS experimentation for ADA consideration:
<!DOCTYPE html>
<html>
<head>
<title>JW External Captions</title>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/jwplayer/v8.10/jwplayer.js"></script>
<style type="text/css">
#myPlayer {
margin-bottom:5px;
}
.jw-captions {
display: none !important;
}
#ccbuffer {
color: white;
background-color: black;
opacity:.7;
font: 22px bold san-serif;
width: 100%;
padding: 15px;
height: 100%;
position:relative;
}
.night {
color:silver !important;
background-color: black !important;
opacity:1 !important;
border-color:silver !important;
}
.highcontrast {
color:white ! important;
background-color: black !important;
opacity:1 !important;
border-color:white !important;
}
.highcontrast2 {
color:black !important;
background-color: yellow !important;
opacity:1 !important;
border-color:black !important;
}
.highcontrast3 {
color:yellow !important;
background-color: black !important;
opacity:1 !important;
border-color:yellow !important;
}
#ccContainer {
position: absolute;
z-index: 9;
border: 1px solid inherit;
overflow: hidden;
resize: both;
width: 640px;
height: 180px;
min-width: 120px;
min-height: 90px;
max-width: 960px;
max-height: 300px;
}
#ccContainerheader {
padding: 3px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border:1px solid;
}
</style>
</head>
<body>
<h3>JW Draggable Captions Container</h3>
<div id="PlayerContainer" style="width:401px;">
<div id="myPlayer">Loading video...</div>
</div>
<div id="ccContainer">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div style="float:right;">
<form id="myform">
<select id="ccFontFamily">
<option value="sans-serif">Default Font</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive </option>
</select>
<select id="ccFontSize" style="">
<option value="22">Default Size</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
</select>
<select id="ccContrast" style="">
<option value="ccdefault">Default Contrast</option>
<option value="night">Night</option>
<option value="highcontrast">High Contrast</option>
<option value="highcontrast2">Black/Yellow</option>
<option value="highcontrast3">Yellow/Black</option>
</select>
<button id="ccFontReset">Reset</button>
</form>
</div>
<div id="ccContainerheader">
Captions (click to move)
</div>
<div id="ccbuffer"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
jwplayer.key = 'xxxxxxxxxxxxxxxxxxx';
jwplayer('myPlayer').setup({
width: '100%', aspectratio: '16:9', repeat: 'false', autostart: 'false',
playlist: [{
sources: [ { file: 'https:www.example.com/video.mp4'}],
tracks: [ { file: 'https:www.example.com/video-captions.vtt', kind: 'captions', label: 'English', 'default': true } ]
}]
})
// External CC Container
$('#ccContainer').hide();
var position = $('#myPlayer').position();
var width = $('#PlayerContainer').outerWidth();
ccTop = position.top;
ccLeft = (width+50)+'px'
$('#ccContainer').css({'top':ccTop, left:ccLeft });
var observer;
jwplayer().on('captionsList', function (event) {
ccObserver(event);
});
jwplayer().on('captionsChanged', function (event) {
ccObserver(event);
});
videoplayer.on('fullscreen', function(event){
if(event.fullscreen){
$('.jw-captions').css('display','block');
}else{
$('.jw-captions').css('display','none');
}
});
$("#ccFontFamily").change(function() {
$('#ccbuffer').css("font-family", $(this).val());
});
$("#ccFontSize").change(function() {
$('#ccbuffer').css("font-size", $(this).val() + "px");
});
$("#ccContrast").change(function() {
$('#ccContainer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccContainerheader').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccbuffer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('select').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccFontReset').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
});
$('#ccFontReset').click(function() {
ccFontReset();
});
function ccFontReset(){
$("#ccFontFamily").val($("#ccFontFamily option:first").val()).trigger('change');
$("#ccFontSize").val($("#ccFontSize option:first").val()).trigger('change');
$("#ccContrast").val($("#ccContrast option:first").val()).trigger('change');
}
ccFontReset();
});
function ccObserver(event){
if (event.track == 0) {
$('#ccContainer').hide('slow');
$('.jw-captions').css('display','block'); // VERY important
if (observer != null){
observer.disconnect();
}
}
else {
$('#ccContainer').show('slow');
$('.jw-captions').css('display','none'); // VERY important
var target = document.querySelector('.jw-captions');
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
}
}
// External CC Container - Make the DIV element draggable:
dragElement(document.getElementById("ccContainer"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>

Non clickable background with AngularJS loading bar

I am trying to set non-clickable loading bar and everything looks good but I can still click on the button. You can see the same on plnkr.
https://plnkr.co/edit/4eh6ibG45JnLB6qYktxn?p=preview
I checked that both of the bellow div has attribute "pointer-events: none" but its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<style>
#loading-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 11002;
}
#loading-bar-spinner {
display: block;
position: fixed;
z-index: 11002;
top: 50%;
left: 50%;
margin-left: -15px;
margin-right: -15px;
}
</style>
<div ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script>
var LoadingBarExample = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
.config(function (cfpLoadingBarProvider) {
//cfpLoadingBarProvider.includeSpinner = false;
//cfpLoadingBarProvider.includeBar = false;
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Loading...</div>';
// //cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
// //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
});
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.startLoading = function () {
cfpLoadingBar.start();
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
};
});
</script>
</body>
</html>
loading-bar
loading-bar-spinner
You can handle this with angularjs way, just add ng-disabled="loading" to make the button disabled and enabled based on the loading value
<button ng-disabled="loading" ng-click="startLoading()">startLoading</button>
<button ng-disabled="loading" ng-click="completeLoading()">completeLoading</button>
and controller as,
LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.loading = false;
$scope.startLoading = function () {
cfpLoadingBar.start();
$scope.loading =true;
};
$scope.completeLoading = function () {
cfpLoadingBar.complete();
$scope.loading =false;
};
});
DEMO
EDIT
If you want to disable the whole form with a single way, use fieldset instead of div and use ng-disabled
<fieldset ng-disabled="loading" ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<button ng-click="startLoading()">startLoading</button>
<button ng-click="completeLoading()">completeLoading</button>
</fieldset>

CSS Style Positioning Issue

I have created one AngularJs directive to clear the input field. I want the "close" icon to be placed inside the respective input element. But its going out of input field.
Here is the plnkr -
https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview
Note: Please check the plnkr preview by resizing it.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
display: inline-block
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>
</html>
As input tags are not container tag, you need to wrap input tag and close tag in a div.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
.wrap{position:relative;}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<div class="wrap">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
</div>
<br>
<div class="wrap">
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</div>
</body>
</html>
Change your .wrapper class like this:
.wrapper {
position: relative;
display: inline-block;
}

Resources