Develop Reference

Is there a way in CSS, JS, or JQuery to change all font sizes of an element by a specific factor (e.g. 1/2 of what the CSS says)?

I'm working on a report where the worker goes through it on the PHP website and then prints it out once completed. That is all fairly simple; however, when it prints, I'm going to want the size to be smaller than on the 46" widescreen the worker uses so that the tables fit on each page cleanly...
My normal CSS looks like this:
div#reportPage {
display: flex;
flex-direction: column;
align-items: center;
}
table#report {
border-collapse: collapse;
margin-bottom: 25px;
}
table#report>thead>tr>th,
table#report>tbody>tr>td {
border: 1px solid white;
padding: 5px;
}
table#report>thead>tr>th.pt {
font-size: 1.25em;
}
th.dn::after {
white-space: pre;
content: "\A Alt Name";
font-size: 0.8em;
font-style: italic;
}
th.prov>p {
font-size: 0.8em;
font-style: italic;
margin: 0px;
padding: 2px;
}
PHP/HTML
function weeklyTable($patient)
{
include "system/connect.php";
try {
$regData = $conn->query("SELECT * FROM `medications` WHERE `status` = 1 AND `patient` = '$patient' AND `type` = 1 ORDER BY `name` ASC")->fetchAll();
echo "<table id='report'>";
echo "<thead><tr><th colspan=99 class='pt'>$patient - Standard Meds</th></tr>
<tr><th class='dn'>Drug Name</th><th>Rx #</th><th class='prov'>Provider<p>Department</p></th><th>Dose/Pill</th>
<th>Q/F</th><th>TOD</th><th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr></thead>";
foreach ($regData as $rx) {
if ($rx['type'] == 1) {
}
}
echo "</table>";
$regData = $conn->query("SELECT * FROM `medications` WHERE `status` = 1 AND `patient` = '$patient' AND `type` = 2 ORDER BY `name` ASC")->fetchAll();
echo "<table id='report'>";
echo "<thead><tr><th colspan=99 class='pt'>$patient - Advanced Meds</th></tr>
<tr><th class='dn'>Drug Name</th><th>Rx #</th><th class='prov'>Provider<p>Department</p></th><th>Dose/Pill</th>
<th>Q/F</th><th>TOD</th><th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr></thead>";
foreach ($regData as $rx) {
if ($rx['type'] == 1) {
}
}
echo "</table>";
$regData = $conn->query("SELECT * FROM `medications` WHERE `status` = 1 AND `patient` = '$patient' AND `type` = 3 ORDER BY `name` ASC")->fetchAll();
echo "<table id='report'>";
echo "<thead><tr><th colspan=99 class='pt'>$patient - OTC Meds</th></tr>
<tr><th class='dn'>Drug Name</th><th>Rx #</th><th class='prov'>Provider<p>Department</p></th><th>Dose/Pill</th>
<th>Q/F</th><th>TOD</th><th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr></thead>";
foreach ($regData as $rx) {
if ($rx['type'] == 1) {
}
}
echo "</table>";
echo "<br/><br/>";
} catch (PDOException $e) {
echo "PDOError: {$e->getMessage()}";
die();
} catch (Exception $e) {
echo "ExceptionError: {$e->getMessage()}";
}
}
I'm still working on the tables and such, so please don't worry if you see something stupid in there, I literally copied and pasted the first one multiple times.
So my 'normal' font-size is 1em (with a few exceptions)... If I want it to print at a 0.75 modifier (75% of the original font-size) on ALL items, including those that are at 1.25em and 0.8em - is there a clean way to do that besides re-coding the css (I'm already going to be doing #media print, so please don't think I've forgotten that)?
Also - no need to worry about injection - this is all input on our side, and validated/prepared there.

So my 'normal' font-size is 1em (with a few exceptions)... If I want it to print at a 0.75 modifier (75% of the original font-size) on ALL items, including those that are at 1.25em and 0.8em - is there a clean way to do that besides re-coding the css (I'm already going to be doing #media print, so please don't think I've forgotten that)
I'd suggest the cleanest approach is:
#media print {
:root {
font-size: 16px;
}
body,
body * {
font-size: 0.75rem;
}
}
Explanation:
0.75rem has an advantage in that it remains consistently relative-to-document-root, while both 0.75em and 75% are relative-to-parent.
Further Reading:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems

How to 'extract' css elements from a div (that is forming a grid)

I am trying to build a grid to run directly with hardware connected to a raspberry pi. On the client side, I am trying to have a button that saves the current "frame" of the grid. I'd like for this button to just gather the CSS color values (in hexadecimal form) and form an array with them, but everything I have tried hasn't worked as of yet.
I am aware of the 'style' and 'computedStyles' methods in javascript, and these may be part of the key to the question, but I'm not sure. My hunch is that the issue lies within state.
<div id="palette">
<div
class="pen"
style="background-color: #ffffff;"
onclick="setPenColor('#ffffff')"
></div>
<--- Yadayada more 'pens' -->
<div id="art">
<div class="row">
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<--- Javascript -->
var penColor = 'black';
function setPenColor(pen) {
penColor = pen;
}
function setPixelColor(pixel) {
pixel.style.backgroundColor = penColor;
}
var element = document.getElementById('pixel');
var out = '';
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);
for (prop in elementStyle) {
if (elementStyle.hasOwnProperty(prop)) {
out +=
' ' +
prop +
" = '" +
elementStyle[prop] +
"' > '" +
computedStyle[prop] +
"'\n";
}
}
console.log(out);
<-- CSS -->
#art {
display: table;
border-spacing: 1px;
background-color: black;
border: 5px solid black;
}
.row {
display: table-row;
}
.pixel {
display: table-cell;
background-color: white;
width: 25px;
height: 25px;
}
.pen {
display: inline-block;
width: 35px;
height: 35px;
border: 2px solid black;
border-radius: 50%;
}
My current output just gives me an error message:
Uncaught TypeError: Cannot read property 'style' of null
at grid.js:24
Like I said, I'd like to form an array of the hexadecimal values, but accessing them properly has become my first priority now.
Thanks much for any help! :)

Getting double quotes in Html element name

I'm trying to change visibility of some divs by click.
I'm adding "main" divs and "sub" divs using a php foreach loop on an array.
After that I add events using javascript to the elements having a specific class.
The problem is that the javascript function gets the name of the element with double quotes at the start and in the end.
I could solve by using a "substring" but I'm pretty new to web programming and I need to understand why this happens or I'll never improve my skills.
Below there is all my code.
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
echo '
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
alert (SenderId);
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
alert (SubId);
var SubSH = document.getElementById(SubId);
if (!SubSH){
alert("Empty"); //This is the alert shown!!
}else{
alert(SubSH.name);
}
if (SubSH.style.display == 'none'){
document.getElementById(SubId).style.display = 'block';
}else{
document.getElementById(SubId).style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>

<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
You are using ” (RIGHT DOUBLE QUOTATION MARK) to delimit your attribute values. Only " (QUOTATION MARK) and ' (APOSTROPHE) are allowed.
The RIGHT DOUBLE QUOTATION MARK is, therefore, being treated as data and not as a delimiter.
This code example shows the three characters at a large font size so you can clearly see the difference between them.
body { font-size: 50px; }
”<br>"<br>'
This is often caused by writing HTML using a word processor instead of a text editor.

<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
There you used the wrong quote type ”.
Hope this fixes it.

Css Hover div not working as expected

I want to show a hover card on mouse move over a div class. So I have done the following class in css
#descriptionBox2{
position: absolute;
display: none;
background-color: #EEEEEE;
padding: 7px;
font-size: 20px;
border: 1px solid #EEEEEE;
box-shadow:2px 2px 5px 2px #DDDDDD;
width: 250px;
}
And in the body I have just added the following code..
<div id="descriptionBox2"></div>
and following is the div on which I want to show the hover card
<?php $serial = 1; foreach($readAll as $readOne):?>
<div class="readone" explanation="<?php echo $readOne['explanation'];?>" memorize="<?php echo $readOne['memorize']; ?>">
<span style="font-weight:bold;"><?php echo $serial++. '. ';?></span><?php echo $readOne['question_desc']. '<br><br>';?>
<span style="font-weight:bold;padding-left:30px;">Answer: </span><?php echo $readOne['answer'];?>
</div>
<br><br>
<?php endforeach;?>
</div>
And following is the js
$(document).ready(function(){
$('.readone').mousemove(function(e){
var explanation = "<strong>Explanation : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('explanation') + "</span>";
var memorize = "<strong>Memorizing Tips : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('memorize') + "</span>";
var msg = explanation + "<br><br>" + memorize;
$('#descriptionBox2').html(msg).show();
$('#descriptionBox2').css('top', e.clientY+20).css('left', e.clientX+20);
$(this).css({'background-color':'#98bf21'});
}).mouseout(function(){
$('#descriptionBox2').hide();
$(this).css({'background-color':'#FFFFFF'});
});
});
Everything works fine. But when I scroll down the hover card just get at more distant from mouse pointer. The same code ran well in other places. but why it is not working in this case . ANy idea?

maybe you can use :
position: fixed;
in your #descriptionBox2 declaration

Show hide JS div css

im familiar with php, but a serious learner in js, i have tried 3 methods to achieve my goal and i have seen the method used below that seems the easiest to implement so i can achieve my goal, but for some reason it does not work. I have included only the necessary bits for the specific function that isnt working, this all works inside a while loop based on entries in a db, seperated with a {$page_trackid} to distinguish between each function and link to it.
I understand a 'this' style function could be used, but as i say im so new to js im just trying to achieve the necessary before i extend to getting even more complex.
Is there something im doing totally wrong here?
Cheers
<head>
<style>
.hidden {display:none;}
.visible {display:block;}
.subtext_img {
width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right;
}
.subtext {
padding-left: 10px;
}
.arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; }
</style>
</head>
<body>
<?
$data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC")
or die(mysql_error());
$page_trackid = '1'; //reset page track id
// get a whole bunch of data, track info & user info based on some cross referencing via id
while ($info = mysql_fetch_array($data)) {
$db_trackid = $info['id'];
$username = $info['username'];
//data 2 track info based on db track id
$data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1")
or die(mysql_error());
$info2 = mysql_fetch_array($data2);
//data 3 is user profile data based on db track id
$data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1")
or die(mysql_error());
$info3 = mysql_fetch_array($data3);
//data 4 profile image based on user id, track uploader*
$data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1")
or die(mysql_error());
$info4 = mysql_fetch_array($data4);
echo "
<script>
function showbox(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='visible';
}
function hidestuff(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden';
}
</script>
<div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'>
<h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2>
<p class='subtext'>" . $info3['user_title'] . "</p>
<p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a>
</p>
</div>";
echo "
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a>
</div>";
}
?>
</body>

Separation of concerns: avoid manipulating an element's style directly in javascript. styling belongs with css.
Here's what I would do:
CSS
.hidden {
display: none;
}
Javascript:
// show an element
document.getElementById("my-id").classList.remove("hidden");
// hide an element
document.getElementById("my-id").classList.add("hidden");
classList is not supported in old browsers, so make sure to include the polyfill at https://developer.mozilla.org/en-US/docs/DOM/element.classList

Your issue seems to be that in the HTML you are setting the display property to none, but in the script you are setting the visibility property. They are different things. Set one or the other in both places.