We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 3
[ C ] Another cool thing.
Topic Started: Jan 19 2015, 06:25 AM (2,646 Views)
beastboybrown
Member Avatar
Member
[ *  * ]
Hey I love the way the banner stuff and all is but from the way the forum is set up people sometimes get lost on major topics like the saga. Now I was scolling through sites to advertise on (Dont judge me) XD and well 1 cought my eye more then ever. It was a proboards site. Now in my day I have advertised on many many sites. This one was special. Seeing the site is another site like mine in a competitive RP field I wont place it here it unless needed.

If I could get a coding I would like it to be similar to this.

Ill show an image.

Spoiler: click to toggle


In the first image here it shows a cruddy banner with a click me symbol. (The banner is not what impressed me)

When you click on it then it shows stuff from the "Important updates" "Saga Description" "Welcome" to other fan bases. "Links" to important places "Staff members"



Only real problem I see is that my forums banner is smaller then theres but I can work threw the problem.

As for what I want to do. For the coding when you click on it then it shows stuff from the "Important updates"
I will place stuff like Sagas and Mini-sagas. New rule passings/ Updates and generally what I am doing.

"Saga Description"
Will describe whats going on in the saga in general so more can actually focus on that.

"Welcome" Will describe our forum and everything generally about it.

"Links" Will lead anywhere I need basically.

"Staff members" I would like for it to show a list of staff members. Pictures arent needed. I would just like a list with names that do something like this: beastboybrown and other members. If the names are to long for it. I will use nicknames. Like I am called BB a LOT.... or B3.. beast... and even Brown. I have to many nicknames.

Either way let me know what you can do :D
Offline Profile Goto Top
 
Replies:
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this to produce the 'updates' block:

HTML:
Code: HTML
 
<div id="latest" class="portal_box">
<h2>Title</h2>
<div class="portal_content">
<table>
<tbody>
</tbody>
</table>
</div>
</div>
JavaScript:
Code:
 
<script type="text/javascript">
//<![CDATA[
$.get(main_url + 'search/?c=5&force_ads', function(data) {
$('#search_results_topics + table.forums tr[class*="row"]', data).each(function() {
var tText = $(this).find('td.c_cat-title:eq(0) > a').text();
var tLink = $(this).find('td.c_cat-title:eq(0) > a').attr('href');
var tInfo = $(this).find('td.c_cat-lastpost').html();
$('#latest tbody').append('<tr><td><a href="' + tLink + '">' + tText + '</a></td><td>' + tInfo + '</td></tr>');
});
});
//]]>
</script>
Add this to the Javascripts wrapper, changing the number signs to the number of pixels you want the portal blocks max-width and height to be:
Code:
 
<style type="text/css">
#slider div.portal_box {
max-width: #px;
}

#slider div.portal_content {
max-height: #px;
overflow: auto;
}
</style>
Links work fine for me, you need to use HTML:
Code: HTML
 
<a href="URL">TEXT</a>
If you need to insert a portal block on a new line, use <br /> for a line-break.
Offline Profile Goto Top
 
beastboybrown
Member Avatar
Member
[ *  * ]
Yeah I got the last part from a friend that knew a bit about coding.

When I place toughs 2 codes in Javascript my browser crashes. Is there maybe another code I could use? I place the code under both Javascipts and above the board and it just makes my computer crash terribly.

(EDIT: Also it caused all my themes to stretch the heck out O.o What should I do to fix that? I had to remove the whole code to fix it D: . Is that a way I could get the code but it won't stretch my board?

Here is the way the code was.... And it was placed Above the Board

Code:
 
<div id="slider" class="meta_box" style="position: absolute; border-bottom-right-radius: 10px; margin: 0">
<div id="none" style="cursor: pointer; display: inline-block; width: 60px; height: 20px">Click Here</div>
<div id="contents" style="display: none; margin-top: -20px">
<div id="portal">

<div id="latest" class="portal_box">
<h2>Welcome</h2>
<div class="portal_content">Hello there, this is DBZ World Strongest Fandom RPG game, we are a textbased RP that is revolved around the players and focuses on fighting and combat. With this said you probably have many questions. The first and farmost being how and where to go in the RP/RPG. Well you want to shoot to gain PL. When your in a topic playing your character your PL goes up by each post meaning a you grow stronger and get tougher you can start to play with the big boys. Each person you beat and each memory you make on the way will develop your character into the ultimate warrior. An in this game you can evetually do what you want with your PL. Destroy planets/ Take them over. Defend planets or save the weak. Its your life you choose it :D !
<table>
<tbody>
</tbody>
</table>
</div>
</div>

<div class="portal_box">
<h2>The Saga Coming Up</h2>
<div class="portal_content">War of Worlds! Mutiple years ago a planet attacked Earth and failed but Earth had found the planet was spying on them and decided to slaughter the planet sending in its best men from the hero list and drafting others that are included to fight this planet. And there not alone, they joined with New Vegeta and now all hell is gonna brake loose!</div>
<table>
<tbody>
</tbody>
</table>
</div>
</div>

<div class="portal_box">
<h2>Links</h2>
<div class="portal_content">
<a href="http://w11.zetaboards.com/DBZ_RPG/topic/8390159/1/#new">Character Sheet</a></div>
<table>
<tbody>
</tbody>
</table>
</div>
</div>

<div class="portal_box">
<h2>Rules</h2>
<div class="portal_content">
<a href="http://w11.zetaboards.com/DBZ_RPG/topic/8763875/1/#new">Rules</a></div>
<table>
<tbody>
</tbody>
</table>
</div>
</div>

</div>
</div>
</div>

</div>
</div>
</div>

<script type="text/javascript">
$(function() {
var pos = $('#logo').position();
$('#slider').css('top', pos.top + 'px');
$('div.portal_box:eq(0)').css('margin-left', '75px');
$('div.portal_box').css('display', 'inline-block');

$('#none').click(function() {
if ($(this).next('#contents').css('display') === 'none') {
var width = parseInt($('#logo').width() - ($('#logo').css('margin-right').split('px')[0] * 2), 10);
var height = parseInt($('#logo').height() - ($('#slider').css('padding-top').split('px')[0] * 2), 10);
$('#contents').show();

$(this).parent('#slider').css('border-radius', '0').animate({
width: width + 'px',
height: height + 'px'
}, 1500);
} else {
$('#contents').hide();

$(this).parent('#slider').css('border-bottom-right-radius', '10px').animate({
width: '60px',
height: '20px'
}, 1500);
}
});
});
</script>
Edited by beastboybrown, Mar 2 2015, 07:37 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here's the code with the HTML errors fixed:
Code:
 
<div id="slider" class="meta_box" style="position: absolute; border-bottom-right-radius: 10px; margin: 0">
<div id="none" style="cursor: pointer; display: inline-block; width: 60px; height: 20px">Click Here</div>
<div id="contents" style="display: none; margin-top: -20px">
<div id="portal">

<div id="latest" class="portal_box">
<h2>Welcome</h2>
<div class="portal_content">Hello there, this is DBZ World Strongest Fandom RPG game, we are a textbased RP that is revolved around the players and focuses on fighting and combat. With this said you probably have many questions. The first and farmost being how and where to go in the RP/RPG. Well you want to shoot to gain PL. When your in a topic playing your character your PL goes up by each post meaning a you grow stronger and get tougher you can start to play with the big boys. Each person you beat and each memory you make on the way will develop your character into the ultimate warrior. An in this game you can evetually do what you want with your PL. Destroy planets/ Take them over. Defend planets or save the weak. Its your life you choose it :D !
</div>
</div>

<div class="portal_box">
<h2>The Saga Coming Up</h2>
<div class="portal_content">War of Worlds! Mutiple years ago a planet attacked Earth and failed but Earth had found the planet was spying on them and decided to slaughter the planet sending in its best men from the hero list and drafting others that are included to fight this planet. And there not alone, they joined with New Vegeta and now all hell is gonna brake loose!
</div>
</div>

<div class="portal_box">
<h2>Links</h2>
<div class="portal_content">
<a href="http://w11.zetaboards.com/DBZ_RPG/topic/8390159/1/#new">Character Sheet</a>
</div>
</div>

<div class="portal_box">
<h2>Rules</h2>
<div class="portal_content">
<a href="http://w11.zetaboards.com/DBZ_RPG/topic/8763875/1/#new">Rules</a>
</div>
</div>

</div>
</div>
</div>

<script type="text/javascript">
$(function() {
var pos = $('#logo').position();
$('#slider').css('top', pos.top + 'px');
$('div.portal_box:eq(0)').css('margin-left', '75px');
$('div.portal_box').css('display', 'inline-block');

$('#none').click(function() {
if ($(this).next('#contents').css('display') === 'none') {
var width = parseInt($('#logo').width() - ($('#logo').css('margin-right').split('px')[0] * 2), 10);
var height = parseInt($('#logo').height() - ($('#slider').css('padding-top').split('px')[0] * 2), 10);
$('#contents').show();

$(this).parent('#slider').css('border-radius', '0').animate({
width: width + 'px',
height: height + 'px'
}, 1500);
} else {
$('#contents').hide();

$(this).parent('#slider').css('border-bottom-right-radius', '10px').animate({
width: '60px',
height: '20px'
}, 1500);
}
});
});
</script>
As for the stretching, you never took this step: http://i.imgur.com/v0fwcDF.png
Offline Profile Goto Top
 
Roby
Member Avatar
#27

Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 3