I need to print details of an employee on a roll paper. I have a thermal printer. My requirement is to print the details in a width of 7.4cm and height of 10.8cm.
I am using ngx-print and to trigger the print functionality. As soon as I select my printer it chooses a default page size of 80(72.1) X 210mm. Upon printing it only prints on the last end of the page.
I have used #media print and also #page inside #media print. However, I have found that writing anything inside the media part does not have any effect. My goal is to have a better print quality. I have increased the font size to xx-large and made everything bold to make sure it is more visible to the eyes.
Yet, nothing works.
P.S. - Printing it using a Laser printer on A4 works perfectly. But if I try to print on a card(glossy paper), half of the things are cut.
HTML
<!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>Document</title>
</head>
<body>
<div class="card">
<div id="employee-table" class="card-header">
<div class="card-title m-0">
</div>
<div id="printArea">
<h3 class="text-center font-weight-bolder mb-0"><u>GRSE ENTRY PERMIT</u></h3>
<div class=" container my-2" style="background-color: LightGray;">
<div class="row">
<div class="col-2">
<div class="d-flex align-items-center justify-content-center mt-4 font-weight-bolder">MAIN</div>
<img [src]="profileImage" class=" img-fluid mx-auto d-block img-thumbnail" alt="Employee Image">
<p class="text-center mx-3">{{userData.employee_id}}</p>
</div>
<div class="col pt-6 pb-4">
<div class="pt-2" id="contractor"> <strong>Contractor: {{userData.user_data.vd_company_name}}</strong></div>
<!-- <hr> -->
<div> <strong>Contractor Employee Name: {{userData.user_data.cl_name}}</strong></div>
<!-- <hr> -->
<div><strong>Father Name: {{userData.user_data.cl_father_name}}</strong></div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"> <strong>Age: {{userData.user_data.cl_age}} {{userData.user_data.dob}}</strong>
</div>
<div class="col pb-2"> <strong>Blood Grp: {{userData.user_data.cl_blood_group}}</strong></div>
</div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"><strong>Category: {{userData.user_data.cl_category}}</strong></div>
<div class="col pb-2"><strong>Designation: {{userData.user_data.cl_designation}}</strong> </div>
</div>
<!-- <hr> -->
<div class="row">
<div class="col-3 pb-2"><strong>PCC No.: {{userData.user_data.cl_pcc_number}}</strong></div>
<div class="col pb-2"><strong>PCC valid upto: {{userData.user_data.cl_pcc_validity}}</strong> </div>
</div>
<!-- <hr> -->
<div><strong>ESI: {{userData.user_data.cl_esino}}</strong> </div>
<!-- <hr> -->
<div> <strong>Emergency No.: {{userData.user_data.cl_emergency_number}}</strong></div>
<!-- <hr> -->
<div><strong>Phone: {{userData.user_data.cl_phone}} </strong></div>
<!-- <hr> -->
<div> <strong>Address : {{userData.user_data.cl_permanent_address}}</strong></div>
</div>
</div>
<input type="text" class="signature" />
<div id="signaturetitle">Signature: </div>
</div>
</div>
</div>
<button class="btn btn-success text-black" [useExistingCss]="true" printSectionId="printArea" ngxPrint> Download ID
Card</button>
</div>
</body>
</html>
CSS
#media print {
#printArea{
align-items: center;
}
.signature {
border: 0;
border-bottom: 1px solid rgb(3, 3, 3);
width: fit-content;
float: right;
background-color: lightgray
}
#signaturetitle {
text-align: right;
font-weight: bold;
font-size: 150%;
}
#page{
size: 10.8cm 7.4cm portrait;
margin: 0;
}
div {
color: aquamarine;
font-size: xx-large;
font-family: 'Times New Roman', Times, serif;
}
}
.signature {
border: 0;
border-bottom: 1px solid rgb(3, 3, 3);
width: fit-content;
float: right;
background-color: lightgray
}
#signaturetitle {
text-align: right;
font-weight: bold;
font-size: 150%;
}
#printArea{
align-items: center;
inset-block: 0;
}
Related
I am trying to change the background color based on if the current hour is past, present, or in the future.
Use case: I am building a day planner using moment.js. Every hour has its own field, ie: 8am, 9am, 10am. If the current time is 10:15am, I want 9am to be gray, 10am to be red, and 11am - 6pm to be green.
I am able to grab the current hour by using console.log(currentTime)
I am just trying to figure out how to build the function that changes the class background color. Any help would be greatly appreciated.
//current date and time
$("#currentDay").text(moment().format('ddd, MMM Do'));
//currentTime to determine if the hour matchs for color
var currentTime = moment().format('H');
console.log()
//todo project
// Use window.localStoirage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler || '{}'); // now an Object
// double click makes calendar content editable
$(".textData").dblclick(function () {
$(this).addClass('d-none')
$(this).siblings("input").removeClass("d-none");
});
$(".btn").dblclick(function () {
console.log(this);
console.log($(this).attr("id"))
var id = $(this).attr("id")
var time = id.slice(0,3)
console.log(time)
var timeInputId = time + "Input";
});
// save makes edit end
// set active time
// make background color of / past hours gray / current hour red / future hours green
var hourPast = hourPast < currentTime;
var hourNow = currentTime;
var hourFuture = hourFuture < currentTime;
// if currentTime > hourNow make background color gray//
var hourNow = currentTime;
console.log(hourNow)
console.log(currentTime)
function backgroundColorEdit(){
if (hourNow == currentTime){
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#ff0000";
}else if (hourNow < currentTime){
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#d3d3d3";
}else
{
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#90ee90";
}
}
// if currentTime = hourNow make background color Red //
// if currentTime < hourNow make background color green //
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea{
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description{
white-space: pre-wrap;
}
.time-block{
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.red {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Timeblocks go here -->
<div class="row">
<div class='col-2 hour'> 9am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 9amSpan">text here </span>
<input id="9amInput " class="d-none border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="9amButton" class="btn btn-primary mb-2 am9Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 10am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 10amSpan">text here </span>
<input id="10amInput" class="d-none border-0 form-control textarea bg-transparent am10Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="10amButton" class="btn btn-primary mb-2 am10Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 11am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 11amSpan">text here </span>
<input id="11amInput" class="d-none border-0 form-control textarea bg-transparent am11Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="11amButton" class="btn btn-primary mb-2 am11Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 12pm
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 12pmSpan">text here </span>
<input id="12pmInput" class="d-none border-0 form-control textarea bg-transparent pm12Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="12amButton" class="btn btn-primary mb-2 pm12Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 1pm
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 1pmSpan">text here </span>
<input id="1pmInput" class="d-none border-0 form-control textarea bg-transparent pm1Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="1pmButton" class="btn btn-primary mb-2 pm1Button">Save</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here's an idea (using a much-simplified version of your markup) that uses 24-hour time to do the comparisons like you were thinking.
Each row gets an id indicating which hour it represents, making it easy to compare the corresponding hour to the current hour.
const rows = document.getElementsByClassName("row");
let currentHour = parseInt(moment().format('H'));
Array.from(rows).forEach(row => {
let
rowIdString = row.id,
rowHour;
if (rowIdString) {
rowHour = parseInt(rowIdString);
}
if (rowHour) {
// Compares row id to current hour and sets color accordingly
if (currentHour === rowHour) {
setColor(row, "red");
} else if ((currentHour < rowHour) && (currentHour > rowHour - 6)) {
setColor(row, "green");
} else if ((currentHour > rowHour) && (currentHour < rowHour + 6)) {
setColor(row, "lightgrey");
} else {
setColor(row, "white");
}
}
});
function setColor(element, color) {
element.style.backgroundColor = color;
}
.row {
padding: 0.5em;
margin-bottom: 0.4em;
border: 1px solid gray;
border-radius: 0.5em;
}
<html lang="en">
<body>
<div class="row" id="9">
<span> 9am </span>
<span> -- text here -- </span>
<button id="9amButton">Save</button>
</div>
<div class="row" id="10">
<span>10am </span>
<span> -- text here -- </span>
<button id="10amButton">Save</button>
</div>
<div class="row" id="11">
<span>11am </span>
<span> -- text here -- </span>
<button id="11amButton">Save</button>
</div>
<div class="row" id="12">
<span>12pm </span>
<span> -- text here -- </span>
<button id="12pmButton">Save</button>
</div>
<div class="row" id="13">
<span> 1pm </span>
<span> -- text here -- </span>
<button id=" 1pmButton">Save</button>
</div>
<div class="row" id="14">
<span> 2pm </span>
<span> -- text here -- </span>
<button id=" 2pmButton">Save</button>
</div>
<div class="row" id="15">
<span> 3pm </span>
<span> -- text here -- </span>
<button id=" 3pmButton">Save</button>
</div>
<div class="row" id="16">
<span> 4pm </span>
<span> -- text here -- </span>
<button id=" 4pmButton">Save</button>
</div>
<div class="row" id="17">
<span> 5pm </span>
<span> -- text here -- </span>
<button id=" 5pmButton">Save</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>
</html>
As an all-time JS beginner, I'm trying to show a different popup each time on button click.
Tried a bunch of different things but nothing worked so far...
Each popup div has a class "pop" + a number afterward, so "pop1", "pop2"... On click, I want to show a different popup in random order.
HTML:
<div class="button">
<img class="" src="images/button.png">
</div>
<div class="pop1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop1 -->
<div class="pop2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop2 -->
my jQuery so far to show/hide the popup:
//show popup on click with a delay
setTimeout(function(){
$(".pop").removeClass("hide");
$(".pop").addClass("show");
$(".pop").show();
$(".success-msg").show();
}, 3800);
Trying to add new jQuery code to randomize the popup by allowing a different popup show:
$('.button ').click(function () {
class_is=$(this).attr('class').match(/block-[0-2]/,'');
$('.pop div').each(function() {
if($(this).attr('class').indexOf(class_is)!==-1) {
$(this).toggleClass('show');
$(this).siblings().removeClass('show');
}
})
});
Every advice is welcome.
Thanks
That could be done using just removeClass()/addClass() with the help of rand() to generate random numbers, like :
Simple solution :
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
var random = Math.floor(Math.random() * global_selector.length) + 1;
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.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="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>
Non-successive random solution (Avoiding successive random numbers):
var random = 1;
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
random = generateNonSuccessiveRand(1, global_selector.length, random);
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
function generateNonSuccessiveRand(min, max, previous) {
var rand = Math.floor(Math.random() * max) + min;
while (rand === previous) {
rand = Math.floor(Math.random() * max) + min
}
return rand;
}
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.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="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="error-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="info-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>
There is a million ways to achieve this... Basically, you need a way to identify which 'pop' you want to display, obviously lol.
Here is a simple pen showing the most basic way of doing it. It uses a variable to keep a count of each time the button div is clicked and used as the index to determine which 'pop' to show.
https://codepen.io/jthomas077/pen/BOemQQ
var popCntr = 0;
$('.button').on('click touchend', function (e)
{
$('.pop').hide().eq(popCntr).show();
popCntr++;
$('.pop-cntr').html(popCntr);
e.preventDefault();
});
So I have the next code:
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
// div[i].style.display = "";
} else {
li[i].style.display = "none";
//div[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
* {
box-sizing: border-box;
}
#networdapp {
display: none;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" type="search" placeholder="Search">
</form>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Adele</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Agnes</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Billy</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Bob</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
What I want to do is to display some divs depending on the input from that input box.What I've done so far is to display only the "li" tags but what I actually want is to display the entire div not only the "li" depending on the input data the divs must be displayed or not.
Shown above is my code right now.
Thank you in advance!
While you are showing your "LI", there you can show it's parent DIV by using "parentElement". Please check below snippet.
Your code
li[i].style.display = "none";
li[i].style.display = "";
New Code
li[i].parentElement.style.display = "none";
li[i].parentElement.style.display = "";
Thank you all for help!Problem solved now.I just used a JQuery parser for div and everything worked pretty well.
You should tidy up your html with respect of the repeated IDs and the <li>s not being direct children if <ul>.
Having done that #Ambuj Khanna's advice should be helpful. You might have to apply parentElement repeatedly.
It occurred to me that the whole operation is something that could have been done using jQuery in two lines:
var flt=$('#myInput').val().toUpperCase();
$('#myUl>div').each(function(i,div){$(div).toggle($('li',div).text().toUpperCase()==flt)})
The above should make the top level divs - just below your <ul#myUl> - visible and hide all others. However, the element below a <ul> should always be a <li> element.
Hi i hope you could help me, i have a progress bar whith some PNG pin icons that have to change from active pin image to inactive pin image depending of the color of another div here is what im doing, but it doesnt seem to work, i learning JavaScript and Jquery so i don't know if im doing something wrong.
Thanks :)
<!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">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.quadrant {
border-radius: 5px;
border: .5px solid #d8d8d6;
padding: 10px;
margin-bottom: 20px;
}
.quadrant > p {
text-align: center;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 20pt;
color: #ffffff;
font-weight: 700;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.progress {
width: 100%;
height: 25px;
background-color: #F1F1F1;
box-shadow: 1px 1px 1px 1px #d8d8d6;
}
.bar {
width: 25%;
height: 25px;
background-color: #003E8B;
}
.number {
border-radius: 10px;
border: 5px solid #ffffff;
height: auto;
margin-left: auto;
margin-right: auto;
color: #ffffff;
font-weight: 700;
text-align: center;
margin-top: 10px;
padding-top: 15px;
}
.number:hover {
opacity: 0.8;
}
.number > p {
font-size: 12px;
}
.color-pin {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col--xs-12">
<div class="row">
<h3>Diagnostico en</h3>
</div>
<br><br>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="quadrant" style="background-color: #009BF3;">
<img src="icons/instutucional.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>20%</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #007305;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #EA8C1C;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #21AAA0;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<!---<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">--->
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_economico.png" class="color-pin" id="economico">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_social.png" class="color-pin" id="social">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_naturaleza.png" class="color-pin" id="naturaleza">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="progress">
<div class="bar">
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<h2>Consejos de Uso</h2>
<p>Comienza por contestar primero todas las variables y después sube las evidencias conforme las obtengas.</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img src="icons/institucional.png" width="50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #007305; cursor: pointer;">
<p>2</p>
<img src="icons/economico.png" width="50%">
<p>Desarrollo Económico Sostenible</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #EA8C1C; cursor: pointer;">
<p>3</p>
<img src="icons/social.png" width="50%">
<p>Desarrollo Social Incluyente</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #21AAA0; cursor: pointer;">
<p>4</p>
<img src="icons/natural.png" width="50%">
<p>Desartrollo Ambiental Sostenible</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
var color= $"btn-institucional");
if( color.css('background-color') == "rgb(216,216,214)"){
document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
} else {
document.getElementById("institucional").src = "icons/pin_insitucional.png";
}
</script>
</body>
</html>
Two issues I found:
You forgot to add the id institucional to your img dom. It should be:
document.getElementById("btn-institucional").style.backgroundColor gives you the color in rgb, not in hex. In your code, the value it returns is rgb(216, 216, 214)
You can use a rgb2hex utility function:
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
source
Here's an example:
console.log(document.getElementById("btn-institucional").style.backgroundColor); // returns rgb(216, 216, 214)
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
let backgroundColor = rgb2hex(document.getElementById("btn-institucional").style.backgroundColor)
if( backgroundColor == "#d8d8d6") {
document.getElementById("institucional").src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
}
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img id="institucional" src="institucional" src="https://www.w3schools.com/howto/img_fjords.jpg" width= "50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>
.style.backgroundColor returns an rgb( string, not a #xxxxxx string. You'll have to parse the rgb( string's numbers and turn them into the appropriate hex string, like so:
const rgb = document.getElementById("btn-institucional").style.backgroundColor;
const rgbNums = rgb.match(/\((.+)\)/)[1].split(', ');
const rgbHex = rgbNums.map(num => {
const numStr = Number(num).toString(16);
if (numStr.length === 1) return '0' + numStr;
return numStr;
});
const hexStr = '#' + rgbHex.join('');
console.log(hexStr);
if(hexStr == "#d8d8d6"){
console.log('set src');
document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
}
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img src="icons/institucional.png" width= "50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>
You have a syntax error here: var color= $"btn-institucional");.
It should be: var color= $("btn-institucional");.
And, when you get the background-color CSS property value, it comes back as an rgb string with spaces after each comma:
// Notice that there will be spaces after each comma in the result
console.log($("div").css("color")); // rgb(255, 255, 0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>
You can either adjust the rgb string you are comparing it to or simply extract the value of the style attribute, which will come back as the hex value it was written into the HTML with:
// This is a bit longer, but shows that you can get the original hex value
// Get the "style" attribute, split its value where the colon is and return the second part of the
// resulting array.
console.log($("div").attr("style").split(":")[1]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>
I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}
Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.
You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>