Wątek przeniesiony 2024-05-15 13:55 z JavaScript przez Riddle.

Pewna ciekawostka związana z wyświetlaniem

0

Witam, czy to normalne, że przeglądarka mi wyświetliła obiekt w taki sposób ?

screenshot-20240512095952.png
chodzi o ten drobiazg blisko paska adresu

screenshot-20240512100038.png
Jakoś wysoko

Można sprawdzić samemu kopiując ten kod

<script src="personal_data.js"></script>
<script src="EBSetupEx.js"></script>
<script src="EBScrollableElementList.js"></script>
<script defer>
class myApp{
constructor(){
ElementBuilder.setWorkplace();
// we create new SetContainer object - look at SDN for parameters overview
this.my_new_scroll_box = new SetContainer(this, document.body ,0,"display:flex;flex-direction:column;position:absolute;position:absolute;justify-content:center;align-items:center;","1%","9%");
// setting display style of each object
var tmp,tmp1,tmp2,tmp3;
this.style_list = [];
this.style_list.push("display:flex;align-items:center;justify-content:center;height:8%;width:70%;background: linear-gradient(to right, #C1FFC1, #008000);color:white;font:italic 20px arial,serif;margin-bottom:6px;border:2px solid white;");
//this.style_list.push("display:flex;align-items:center;justify-content:center;height:8%;width:70%;");
// adding new object to container
for(let i = 0; i <30 ; i++){
var tmp = Math.floor(Math.random() * 2);
if(tmp==0){tmp1=male_names[Math.floor(Math.random() * 390)];tmp2=female_surnames[Math.floor(Math.random() * 50)];tmp3="male";}
else{tmp1=female_names[Math.floor(Math.random() * 390)];tmp2=male_surnames[Math.floor(Math.random() * 50)];tmp3="female";}
this.my_new_scroll_box.add_item("<div><label style='display:flex;margin-right:1%;width:10%;'>"+tmp1+"</label><label style='display:flex;margin-right:10%;width:10%;'>"+tmp2+"</label><label style='display:flex;margin-right:1%;width:10%;'>"+tmp3+"</label></div>",this.style_list);
this.my_new_scroll_box.reload();
this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].pName = this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].querySelectorAll("LABEL")[0];
this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].pSurname = this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].querySelectorAll("LABEL")[1];
this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].pSex = this.my_new_scroll_box.ItemList[this.my_new_scroll_box.ItemList.length-1].querySelectorAll("LABEL")[2];}
window.top.pp=this.my_new_scroll_box;
window.top.tmp_button = ElementBuilder.createElement("BUTTON","display:flex;align-items:center;justify-content:center;width:15%;height:13%;position:fixed;left:42%;top:0%;","my_button",this,document.documentElement,true)
.setInnerText("MBoxExFixedOut")
.setAttribute("onClick","ElementBuilder.MBoxExFixedOut(\"0\",\"<label></label><label></label><label></label><button  onClick=\'this.topNode.ups();\'>Up</button><button  onClick=\'this.topNode.downs();\'>Down</button>\",\"42%\",\"0%\",\"40%\",\"40%\",window.top.pp).run(\"this.getValue=function(ind,par){this.obj.ItemList[ind].scrollIntoView();return this.obj.ItemList[ind].querySelectorAll(\'LABEL\')[par].innerText;};this.index=0;this.inp=[this.querySelectorAll(\'LABEL\')[0],this.querySelectorAll(\'LABEL\')[1],this.querySelectorAll(\'LABEL\')[2]];this.ups=function(){if(this.index<30){this.index++;this.inp[0].innerText=this.getValue(this.index,0);this.inp[1].innerText=this.getValue(this.index,1);this.inp[2].innerText=this.getValue(this.index,2);this.childNodes[0].innerText=this.index;}};this.downs=function(){if(this.index>0){this.index--;this.childNodes[0].innerText=this.index;this.inp[0].innerText=this.getValue(this.index,0);this.inp[1].innerText=this.getValue(this.index,1);this.inp[2].innerText=this.getValue(this.index,2);}};this.childNodes[1].style.flexDirection=\'row\';for(let i=0;i<2;i++){this.querySelectorAll(\'BUTTON\')[i].topNode=this;this.querySelectorAll(\'BUTTON\')[i].setAttribute(\'style\',\'display:flex;background-color:darkBlue;color:white;width:9%;height:20.8%;font:italic bold 16px arial,serif;align-items: center;justify-content: center;cursor:pointer;border-radius:3px;opacity:0.8;\');};for(let i=0;i<3;i++){this.querySelectorAll(\'LABEL\')[i].setAttribute(\'style\',\'display:flex;border:2px solid black;width:30%;height:20%;color:black;align-items:center;justify-content:center;\');};this.inp[0].innerText=this.getValue(0,0);this.inp[1].innerText=this.getValue(0,1);this.inp[2].innerText=this.getValue(0,2);var l=\'flex\';this.childNodes[2].attributes[1].value+=\'window.top.tmp_button.style.display=\'+String.fromCharCode(34)+l+String.fromCharCode(34);window.top.tmp_button.style.display=\'none\';\");").element;
}}setTimeout(function(){my_new_shining_app = new myApp();},300);
</script>

i wkleić do kompilatora na

https://infinityhost.ct8.pl/index_const.php

0

Masz problem w “EBSetupEx.js”. Tam jest wymuszone height:92%, więc nic dziwnego, że masz puste obszary. Jednym słowem – to jest nie przemyślane globalnie. Jeśli miałoby być zrobione lepiej, to być może korzystałoby z klas styli oraz umożliwiało zmianę rozmiaru okna.

0
overcq napisał(a):

Masz problem w “EBSetupEx.js”. Tam jest wymuszone height:92%, więc nic dziwnego, że masz puste obszary. Jednym słowem – to jest nie przemyślane globalnie. Jeśli miałoby być zrobione lepiej, to być może korzystałoby z klas styli oraz umożliwiało zmianę rozmiaru okna.

Tak, mi chodziło o to , że okno komunikatu wyjeżdża dziwnie wysoko - aż do belki adresu.

0

Sprawdź sobie, co oblicza static fitWindow(obj,win).
I do czego przydaje się formatowanie kodu, by później móc poprawiać…

1 użytkowników online, w tym zalogowanych: 0, gości: 1