Coding-Spot

You are not connected. Please login or register

Coding-Spot » Support Category » Javascript Support

 
 
 

member group legend

Started by -

Message (Page 1 of 1)

#1

novacane.

novacane.
 
Advance Member

Posted August 12th 2013, 11:08 pm

 
hi mark Happy 
http://if.invisionfree.com/topic/5075715/1/
so i saw this on some invisionfree and forumotion forums, so i found the tutorial for if forums, but i can't get it to work on my forum
do you think there's some way for it to work on forumotion?





#2

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 2:00 pm

 
Can't. There are variables used on the script, thus, only available for orig. IPB.



https://coding-spot.darkbb.com


#3

novacane.

novacane.
 
Advance Member

Posted August 13th 2013, 5:10 pm

 
but i also saw on some forumotion forums these kinda of group legends :o
wait i'll try to find the links and i'll edit this post or something Happy

*edit
http://onlyboysinlondon.foroactivo.com/
http://dropdeadearth.foroactivo.com/

these two are the only ones i could find, but they're both forumotion forums and have that group legend Happy





#4

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 5:10 pm

 
Give me more info, also image of so i can check. Tounge 



https://coding-spot.darkbb.com


#5

novacane.

novacane.
 
Advance Member

Posted August 13th 2013, 5:11 pm

 
image of what? Tounge 





#6

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 5:12 pm

 
A similar output of the code.



https://coding-spot.darkbb.com


#7

novacane.

novacane.
 
Advance Member

Posted August 13th 2013, 5:13 pm

 
what do you mean? :o sorry i just woke up and my brain is still sleeping again hehe





#8

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 5:15 pm

 
Nevermind, i saw now the link of the forum, you want to achieve the same with that?



https://coding-spot.darkbb.com


#9

novacane.

novacane.
 
Advance Member

Posted August 13th 2013, 5:16 pm

 
oh okay
yeah i want to have circles or squares of different colors and when you hover over them the name of the group appears Happy 





#10

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 8:18 pm

 
This is the code used:
Code:
<table id="grupos"><tbody><tr>
<td></td>

<td>
<a href="GROUP LINK HERE" class="gb g1">
<span class="tg1 tg"><font color="#666666">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g2">
<span class="tg2 tg"><font color="#0A4559">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g3">
<span class="tg3 tg"><font color="#b89e63">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g4">
<span class="tg4 tg"><font color="#96B863">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g5">
<span class="tg5 tg"><font color="#639db8">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g6">
<span class="tg6 tg"><font color="#7A608A">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g7">
<span class="tg7 tg"><font color="#BD75B2">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g8">
<span class="tg8 tg"><font color="#608A75">GROUP NAME</font></span>
</a>
<a href="GROUP LINK HERE" class="gb g9">
<span class="tg9 tg"><font color="#B3000C">GROUP NAME</font></span>
</a>
</td>

</tr></tbody></table>

<style>
#grupos{
display:block;
width:100%;
}
#grupos td{
display:inline-block;
min-width:190px;
position:relative;
}
.gb{
display:inline-block;
float:left;
height:20px;
margin-left:30px;
width:20px;
}
.tg{display:none;
left:-300px;
margin-right:100px
;position:absolute;
text-align:right;
texttransform:uppercase;
width:300px;
}
.g1{
background:#666;
color:#666;
}
.g2{
background:#0A4559;
color:#0A4559;
}
.g3{
background:#b89e63;
color:#b89e63;
}
.g4{background:#96B863;
color:#96B863;
}
.g5{background:#639db8;
color:#639db8;
}
.g6{
background:#7A608A;
color:#7A608A;
}
.g7{background:#BD75B2;
color:#BD75B2;
}
.g8{
background:#608A75;
color:#608A75;
}
.g9{
background:#B3000C;
color:#B3000C;
}
#grupos td .gb:hover .tg{
display:inline-block;
}
</style>



https://coding-spot.darkbb.com


#11

novacane.

novacane.
 
Advance Member

Posted August 13th 2013, 8:43 pm

 
thank youuu mark :D
if i knew they only used HTML and CSS for it then i'd just do that heheh





#12

Mark

Mark
 
Administrator
Administrator

Posted August 13th 2013, 9:36 pm

 
No problem!
~ Locked! Solve.



https://coding-spot.darkbb.com


#13

Sponsored content


 

Posted

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None