The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

can't figure out User_name and user_Avatar_img ?

3 posters

Go down

can't figure out User_name and user_Avatar_img ? Empty can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 2nd 2017, 1: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();
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion July 2nd 2017, 2: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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by SLGray July 2nd 2017, 7:44 am

Username

Code:
{USERNAME}


can't figure out User_name and user_Avatar_img ? Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Guest July 2nd 2017, 8:29 am

For username:
Code:

{USERNAME}

For avatar:
Code:

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


Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 2nd 2017, 10: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
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 3rd 2017, 4:42 pm

bump
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Guest July 3rd 2017, 4:59 pm

You are trying to do this on a custom page?
avatar
Guest
Guest


Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 4th 2017, 9: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
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion July 5th 2017, 5: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);
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 5th 2017, 6: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? (:
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion July 5th 2017, 6:40 pm

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 5th 2017, 7: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 (:
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion July 5th 2017, 7:27 pm

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR July 5th 2017, 7: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 (:
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

can't figure out User_name and user_Avatar_img ? Empty Re: can't figure out User_name and user_Avatar_img ?

Post by Guest July 5th 2017, 8:34 pm

Hi,

Replace the javascript code with this one if you want the avatar to only display when user is logged in:
Code:

$(function(){
if(!_userdata.session_logged_in) return;
  $(".avat").html(_userdata.avatar);
});
avatar
Guest
Guest


Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum