can't figure out User_name and user_Avatar_img ?

by IdaTR July 2nd 2017, 12:32 am

So.. I'm about to make some tabs for my website, and on the first page, i wan't it to show the USER profile AND image.
But those codes I find, aren't working.. so i'm at loss right now.

EDIT: instead of username, then perhaps the possiblity of moving the module login/registrer and Avatar to this tab box?

Heres the HTML for the tabs:

Code:: <body> <div class="tab"> <button class="tablinks" onclick="openSite(event,'start')"> Start </button> | <button class="tablinks" onclick="openSite(event, 'chat')"> Chat </button> | <button class="tablinks" onclick="openSite(event, 'month')"> User of the month </button> </div> <br> <div id="box"> <div id="start" class="tabcontent"><table><tr><td style="padding-right:15px;"><div id="welcome" style="background: url(_userdata["avatar"]); border: 1px solid #9e9e9e; width:250px;height:235px;"><h2>VELKOMMEN<br>TILBAGE<br>{USERNAME}</div></td><td style="padding-right:15px;"><div style="background: url(http://thomaskinkadehq.com/wp-content/uploads/2013/11/partwi.jpg); border: 1px solid #9e9e9e; width:250px;height:35px;"><h2>PLOT</h2> </div><p style="width:250px; font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5; letter-spacing:0.3px;">Vi befinder os i en fiktiv by, kaldet Di Morga, som er beliggen i Frankrig. Dette sted, vrimler med forskellige væsner, hvis eksistens er ukendt for den omgivende verden, der ikke er klar over de mange racer der befinder sig i verdenen udover nogle typiske mere kendte: Vampyrer og Varulve. I denne by lever de forskellige væsner side om side med hinanden. Dette resulterer i forskellige slag imellem disse, som ofte leder til et større tumult i byen. <br><br> Tidsperioden er i vor nutid, placeret i Frankrig.</p></div></td><td style="font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5;letter-spacing:0.3px; width:140px;"><p><center><b>QUCIK LINKS</b></center><br><a href="/f100-regler">REGLER</a> ○ <a href="/f118-character-sheet-face-claims">SHEET & CLAIM</a><br></p></td></tr></table> <div id="chat" class="tabcontent" style="display: none;"> <h3>CHAT</h3> <br> <p>insert CBOX</p> </div> <div id="month" class="tabcontent" style="display: none;"> <h3>USER OF THE MONTH</h3> <br> <p> TEXT </p> </div> </div></body>

CSS:

Code:: body { background: url('http://i.imgur.com/YmGLYRL.png'); background-repeat: x-repeat; } div.tab { overflow: hidden; border: 1px solid #9e9e9e; background-color: #fff; text-align: center; } div.tab button { background-color: inherit; border: none; outline: none; cursor: pointer; padding: 10px 25px; transition: 0.3s; font-size: 11px; text-transform: uppercase; color: #000; letter-spacing: 5px; } div.tab button:hover { background-color: #fff; color: #9e9e9e; text-decoration-line: underline; text-decoration-style: dotted; } div.tab button.active { background-color: #fff; color: #439274; } #box { background-color: #fff; height: 250px; border: 1px solid #9e9e9e; padding: 10px; } h2 { text-shadow: 2px 2px 3px #000; color: #fff; font-size: 12px; letter-spacing: 10px; text-align: center; } #welcome{ margin-top: -5px; }

SCRIPT:

Code:: function openSite(evt, siteName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(siteName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();

by Draxion July 2nd 2017, 1:02 am

Hi there,

If what I read is correct, you are trying to obtain the user's avatar image and their name and display it on there? Please correct me if I am wrong.

by **SLGray** July 2nd 2017, 6:44 am

Username

Code:: {USERNAME}

by Guest July 2nd 2017, 7:29 am

For username:

Code:: {USERNAME}

For avatar:

Code:: <script> $(function(){ $(".avat").html(_userdata.avatar); }); </script> <div class="avat"></div>

by IdaTR July 2nd 2017, 9:06 am

Draxion wrote:Hi there,

If what I read is correct, you are trying to obtain the user's avatar image and their name and display it on there? Please correct me if I am wrong.

Correct (:
Edit: but i want it to work like the login option in the module.

Edit Edit: The code didn't work

by IdaTR July 3rd 2017, 3:42 pm

by Guest July 3rd 2017, 3:59 pm

You are trying to do this on a custom page?

by IdaTR July 4th 2017, 8:05 am

Wolfuryo wrote:You are trying to do this on a custom page?

No, but i got the

Code:: {username}

to work. Only problem now, is the Login option, and seeing your own Avatar in the menu section

by Draxion July 5th 2017, 4:10 pm

The code, @Wolfuryo gave you should work.

Code:: <script> $(function(){ $(".avat").html(_userdata.avatar); }); </script> <div class="avat"></div>

Add this part where you want the avatar to show

Code:: <div class="avat"></div>

And then add this script into your JavaScript via the admin panel. See if that helps if you can't use the full code on the same page.

Code:: $(function(){ $(".avat").html(_userdata.avatar); });

by IdaTR July 5th 2017, 5:38 pm

Draxion wrote:The code, @Wolfuryo gave you should work.
Code:
<script> $(function(){ $(".avat").html(_userdata.avatar); }); </script> <div class="avat"></div>

Add this part where you want the avatar to show
Code:
<div class="avat"></div>

And then add this script into your JavaScript via the admin panel. See if that helps if you can't use the full code on the same page.
Code:
$(function(){ $(".avat").html(_userdata.avatar); });

Aaah now it works :3 I dont think the login will be needed anyway. ^^ But for the future, i'd like to know if its possible? (:

by Draxion July 5th 2017, 5:40 pm

If what is possible? Show the avatar before or after logging in?

by IdaTR July 5th 2017, 6:26 pm

Before logging in.

Like: you have the "Welcome Guest"
And right under you have the login, and when logged in it would change to "Welcome (username)" and show the avatar (:

by Draxion July 5th 2017, 6:27 pm

it should work like that since the JavaScript snags the data whether you are viewing the site as a guest or member.

by IdaTR July 5th 2017, 6:28 pm

But i've already tried that, but i can't get it to work ^^.. But i dont think i need it on this site, but it could be nice for the future if it was needed there (: