The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

can't figure out User_name and user_Avatar_img ?

View previous topic View next topic Go down

can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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();
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1350
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

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

Username

Code:
{USERNAME}


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

avatar
SLGray
Administrator
Administrator

Male Posts : 39134
Reputation : 2625
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Wolfuryo on 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
Wolfuryo
Forumember

Posts : 349
Reputation : 92
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

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

bump
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Wolfuryo on July 3rd 2017, 4:59 pm

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

Posts : 349
Reputation : 92
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion on 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);
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1350
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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? (:
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

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

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1350
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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 (:
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Draxion on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1350
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by IdaTR on 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 (:
avatar
IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: can't figure out User_name and user_Avatar_img ?

Post by Wolfuryo on 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
Wolfuryo
Forumember

Posts : 349
Reputation : 92
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

View previous topic View next topic Back to top


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