Misbehaving Textscrollers

Report · Feb 28, 2022

Hello Team

I have 2 textbox scroller boxes that when tested locally function correctly (Please see Image 1)

When I publish to the Web the textbox scrollers appear on the top left of the screen very small (Plese see Image 2).

The following is the code for generating the textscrollers:

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

var d = document.createElement("div");

d.id = id;

d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

d.innerHTML = html;

canvas.parentNode.appendChild(d);

}

mkDiv2 = function(id, x, y, w, h, html, css) {

var e = document.createElement("div");

e.id = id;

e.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

e.innerHTML = html;

canvas.parentNode.appendChild(e);

}

// Remove an element by ID name

rmDiv = function(id) {

try {

var elem = document.getElementById(id);

elem.parentNode.removeChild(elem);

}

catch(e) {}

}

mkDiv("mydiv", 10, 30, 125, 125, "A 35-year-old man presents to the emergency department with severe back pain. He states he has been feeling badly for a few weeks. He has lost 15 pounds in that interval due to poor appetite. He has noted fever to 101 almost daily for the last 3 days for which he has taken acetaminophen, an antipyretic. He has also noted enlargement of his abdominal which has occurred over the last few days and increasing shortness of breath. He denies pleuritic symptoms. The back pain is localized to the lower back without sciatic radiation.Medical History: UnremarkableFamily History: Parents are alive. Mother, 62, with type 2 diabetes on oral agents; father, 65, with hypertension and h/o MI.Medications: None except for over-the-counter (OTC) acetaminophen. Allergies: No known drug allergies (NKDA)Social History: Lives with partner. Works as a graphic designer. No children. No recent travel. ROS: No rash, no cough, no alteration of bowel habits, + lower back painPhysical Examination:Vital signs: BP 110/62, pulse 110, temperature 102 °F , O2 saturation 98%General: ill appearing, in distress secondary to painHEENT: No icterus, dry mucous membranesNeck: No adenopathy in the neck, axilla, or inguinal regions.Cardiovascular: Tachycardia, but no murmursPulmonary: Chest with diminished breath sounds at the bases, no rales, wheezes, or rhonchi, absent tactile fremitusAbdomen: Abdomen is distended with large easily palpable mass in the mid abdomen, not moveable.Extremities: Mild LE edemaBack: Percussion tenderness over mid lumbar vertebraeNeuro: Normal strength and sensation. No sensory level", "font-family:Arial; font-size: 4px; color:black");
mkDiv2("mydiv2", 149, 30, 125, 115, "Laboratory Tests/Radiology:CBC: Hemoglobin 10 gm/dl, Hematocrit 30%, WBC 8000/mm3 with normal differential, platelets 550,000Electrolytes WNL, creatinine 1.9, calcium 9.7, bilirubin 1.2, alkaline phosphatase 145, ALT 34, AST 42, LDH 2000.Chest x-ray with bilateral effusions, no parenchymal infiltratesComputerized tomography of chest abdomen pelvis demonstrates a large retroperitoneal mass which displaces intraabdominal structures to the periphery. Mild bilateral hydronephrosis. Lytic lesions of the lumbar vertebrae. Bilateral pleural effusions and small posterior mediastinal lymphadenopathy.Prior to working with your small group to complete questions 1-2, work individually for a few minutes and write your thoughts on the provided index card. Pass your index card to your closest neighbor to kick off the small group discussion.Small group: ~10-15 minLarge group answer discussion: ~10-15 min1. Develop a differential diagnosis.2. What ancillary studies should be obtained? ", "font-family:Arial; font-size: 4px; color:black");

Any help os greatly appreciated

Report · Mar 08, 2022

neither textfield should appear normal with font-sizes of 4 px. and having a relatively (to the text length) small width/height may not be what you want, either.

(and patient 1 has a serious problem and needs oncology and, most likely, surgical consults.)

Report · Mar 18, 2022

Hello Kglad

Thank you.

You have been supporting my learning efforts since Flash.

Glad to still see you around sharing your knowledge.

And so sorry for the "patient" 🙂

I will play with the font sizes.

Take care

Edwin

Report · Mar 18, 2022

Increasing the font size makes the text mmore legible but I am concerned for different screen sizes and devices.

Even with size 12 it appears small and not properly located.

When you say "small width/height"" do you mean the textboxes themselves.

Would you know why it appears fine running it locally but totally different when I publish it to the Web? How could I make them remain withing the red box? (please see attachement)

Regards

Edwin

Report · Mar 18, 2022

the x, y, w, h of mkDiv determine the x,y of the textfield with width w and height h.

the first textfield's params should be

x1 = this.redbox.x;

y1 = this.redbox.y;

w1 = anything reasonable less then this.redbox.width/2+margin

h1 = anything less than this.redbox.height

the 2nd should be

x2 =x1+w1 (from above)+margin

y2 = y1

w2 = w1

h2 = h1

font size is a design decision (which means no one knows what it should be, especially if you use the same web page for mobile and non-mobile devices. generally, 16px corresponds to the standard 12 pt printed font so it's a good starting point. here's more info, Best font size for websites: How to pick the right one for great UX (impactplus.com)

Report · Mar 18, 2022

Awesome KGlad.

Thank you so much!

Edwin

Report · Mar 18, 2022

you're welcome.