About an incomplete code
2 posters
Page 1 of 1
About an incomplete code
Hello everyone,
I am posting here again (after a long time) for a problem yet to be totally resolved. I was helped on it by Occultist (and I thank him again, he did a lot for my forum), but he probably has no time to finish this problematic piece of code now (which I can understand).
Let's try to cut to it :
I wanted scrollable character sheets, which I got like that thanks to Occultist : https://prnt.sc/s5tybu
As you can see, there is 3 tabs : "Stats" "Bio" and "Inventaire" (which means inventory in french)
Occultist's code, made it possible to display the power, dexterity, will power and so on, stats on the "Stats" tab. And I can't figure out (even months after) how to display the others stats. At the moment, the others tabs just display their names like that : http://prntscr.com/s5u1ry
I would need in the "Bio" tab, the stats called : "Statut"; "Latéralité"; "Taille"; "Poids"; "Date de naissance"
In the tab called "Inventaire", I would need : "Argent"; "Argent" (there is 2); "Inventaire"; "Ceinture"; "Armes"; "Armures"
Here are the javascript for now :
And here is the CSS :
You can connect to the forum with the account :
Name: Guest
Password: conti123
So yep, hope someone can help ! Thanks in advance !
I am posting here again (after a long time) for a problem yet to be totally resolved. I was helped on it by Occultist (and I thank him again, he did a lot for my forum), but he probably has no time to finish this problematic piece of code now (which I can understand).
Let's try to cut to it :
I wanted scrollable character sheets, which I got like that thanks to Occultist : https://prnt.sc/s5tybu
As you can see, there is 3 tabs : "Stats" "Bio" and "Inventaire" (which means inventory in french)
Occultist's code, made it possible to display the power, dexterity, will power and so on, stats on the "Stats" tab. And I can't figure out (even months after) how to display the others stats. At the moment, the others tabs just display their names like that : http://prntscr.com/s5u1ry
I would need in the "Bio" tab, the stats called : "Statut"; "Latéralité"; "Taille"; "Poids"; "Date de naissance"
In the tab called "Inventaire", I would need : "Argent"; "Argent" (there is 2); "Inventaire"; "Ceinture"; "Armes"; "Armures"
Here are the javascript for now :
- JAVASCRIPT:
- var exp=1000*60*60*24, ver=10;
var d=document, q=e=>{
return d.querySelector(e);
}, _q=e=>{
return d.querySelectorAll(e);
}, get=(url, callback)=>{
fetch(url).then(data=>{
return data.text();
}).then(data=>callback(data));
}, wait=(t, f)=>{
return setTimeout(f, t);
}, parser=new DOMParser(), domify=string=>{
return parser.parseFromString(string, "text/html");
};
var ls={
set:(name, data, expiry)=>{
localStorage.setItem(name+"v"+ver, JSON.stringify({
data:data,
expiry:(new Date).getTime()+expiry,
}))
},
get:name=>{
if(!localStorage.getItem(name+"v"+ver)) return null;
var data=JSON.parse(localStorage.getItem(name+"v"+ver));
if(parseInt(data.expiry)>(new Date).getTime()) return data.data;
return null;
}
};
var store=[];
var g=0;
document.addEventListener("DOMContentLoaded", ()=>{
var links=_q(".postprofile-rpg>a"), _ids=Array.from(links).map(e=>parseInt(e.getAttribute("href").match(/\d+/))), len, ids=[];
_ids.forEach(e=>{
if(ids.indexOf(e)==-1) ids.push(e);
});
len=ids.length;
ids.forEach(e=>store[e]=null);
ids.forEach((e, i)=>{
if(store[e]) return;
store[e]=ls.get(e);
if(!store[e]){
g++;
store[e]=1;
wait(100*g, ()=>{
get("/u"+e+"rpgsheet", data=>{
data=domify(data);
data=prep(domify(data.querySelector(".panel").innerHTML));
store[e]=data;
ls.set(e, store[e], exp);
if(i==len-1){
links.forEach((e, i)=>{
e.parentElement.innerHTML=render(store[parseInt(e.getAttribute("href").match(/\d+/))]);
});
evs();
};
});
});
} else {
if(i==len-1){
links.forEach((e, i)=>{
e.parentElement.innerHTML=render(store[parseInt(e.getAttribute("href").match(/\d+/))]);
});
evs();
};
};
});
});
var evs=()=>{
var handlees=_q(".prt-menu>span"), tabs=_q(".prt-tab"), f;
Array.from(handlees).forEach((e, i)=>{
l(e, "click", ()=>{
Array.from(e.parentElement.children).forEach(c=>{
if(c.classList.contains("prt-m-active")) c.classList.remove("prt-m-active");
});
e.classList.add("prt-m-active");
f=e.parentElement.parentElement;
while(!f.classList.contains("prt-tab-active")) f=f.nextSibling;
f.classList.remove("prt-tab-active");
tabs[i].classList.add("prt-tab-active");
});
});
};
var render=data=>{
var html="<div class='prof-rpg-top'><span class='prt-title'>Feuille de personnage</span>"+
"<div class='prt-menu'><span class='prt-m-active'>Stats</span>"+
"<span>Info</span><span>Argent</span><span>Ceinture</span><span>Armes</span><span>Armures</span></div></div>"+
"<div class='prt-tab prt-tab-active'>";
data[0].forEach(e=>{
html+="<div class='field f1'>"+e.img+"<span class='f1-value'>"+e.val+"</span><span class='f1-imgs'>"+e.imgs+"</span></div>";
});
html+="</div><div class='prt-tab'>Info</div><div class='prt-tab'>Argent</div><div class='prt-tab'>Ceinture</div><div class='prt-tab'>Armes</div><div class='prt-tab'>Armures</div>";
return html;
};
var prep=data=>{
var fsets=data.querySelectorAll("fieldset");
var field1=[], dom;
Array.from(fsets[0].children).forEach((e, i)=>{
dom=domify(e.innerHTML);
Array.from(dom.querySelectorAll("dd div img")).forEach((e, i)=>{
if(i==1 || i==2) e.setAttribute("width", parseInt(e.getAttribute("width"))/2);
});
field1.push({
img:dom.querySelector("label img").outerHTML,
imgs:dom.querySelector("dd div").innerHTML,
val:"("+dom.querySelector("dd>div").nextSibling.nodeValue.split("(")[1],
});
});
return [field1, null];
};
And here is the CSS :
- CSS:
- /* RPG FICHE SCROLLABLE */
.inner{
}
.f1-imgs{
display:flex;
transform:scaleX(1.5);
position:relative;
left:30px;
}
.f1-value{
position:relative;
top:-11px;
left:3px;
}
.f1{
padding:5px;
}
.prt-menu>span{
display:inline-table;
padding:10px;
border-bottom:2px solid transparent;
cursor:pointer;
}
.prt-m-active{
border-bottom:2px solid #d1ba88 !important;
}
.prt-tab{
display:none !important;
}
.prt-tab-active{
display:table !important;
}
.postprofile-rpg{
margin-top:2px;
background:rgba(0, 0, 0, .76);
}
.postprofile-rpg:empty{
display:none !important;
}
.prof-rpg-top{
position:sticky;
top:0px;
width:100%;
background:black;
z-index:999;
}
.prt-title{
padding:20px;
}
.postprofile-rpg dl, .postprofile-rpg, .postprofile-rpg>div, .postprofile-rpg .column2 dt, .postprofile-rpg .column2 dd{
display:table;
}
.postprofile-rpg .column2{
position:relative;
width:100% !important;
}
.column1{
border:none !important;
}
.column1 dl, .column2 dl{
display:table !important;
}
.postprofile-rpg label{
width:100%;
}
.postprofile-rpg .column2 dl{
width:100%;
}
.postprofile-rpg .column2 dl>*{
position:relative;
margin:0 !important;
}
.postprofile-rpg .column2 dd{
position:relative;
top:8px;
}
.postprofile-rpg{
display:block !important;
width:100%;
height:250px;
overflow-y:scroll !important;
overflow-x:hidden !important;
}
.postprofile-rpg:empty{
display:none;
}
You can connect to the forum with the account :
Name: Guest
Password: conti123
So yep, hope someone can help ! Thanks in advance !
Re: About an incomplete code
Hello
You are not allowed to open same threads to all supports
Since your forum is in French and you have already opened the same
thread at the French support https://forum.forumactif.com/t402982-code-creant-fiche-de-personnage-scrollable-incomplet this topic will be locked
You are not allowed to open same threads to all supports
Since your forum is in French and you have already opened the same
thread at the French support https://forum.forumactif.com/t402982-code-creant-fiche-de-personnage-scrollable-incomplet this topic will be locked
Similar topics
» When i paste a long code via [code][/code] the page expands
» I add a new Forum widget for my Affiliates code but I want to remove the code that shows there!
» Tech please respond! What is the border color code/script code
» what's the code to customize the quote/code color for phpbb3?
» help in this code . the effect on code > add button to Put under the colored writing
» I add a new Forum widget for my Affiliates code but I want to remove the code that shows there!
» Tech please respond! What is the border color code/script code
» what's the code to customize the quote/code color for phpbb3?
» help in this code . the effect on code > add button to Put under the colored writing
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum