Tabbladen in een Announcement

Hoi hoi ~

Ik zag laatst op twee fora dat ze tabbladen hadden in een Annoucement en ik vond het eigenlijk wel leuk. Gezien het feit dat hier al een tutorial over was over hoe je het op een portal widget moest doen, dacht ik dat ik gewoon die codes moest pakken: maar dat ging dus niet goed. De tekst blijft niet in het tabblad, om de een of andere reden.
De fora waar ik het op had gezien zijn Warrior Cats en Winterbourne ^^

Ik vroeg me dus af of iemand me kon helpen hiermee. Nja, bedankt voor het lezen en hopelijk is het duidelijk wat ik bedoel ;p

Love&Rockets,
Guardian.

Heb jij de link naar het forum die het had en ook een link naar de tutorial voor me?

Ja zekers ^^

Warrior Cats: http://warriorcats.bigforumpro.com/
Winterbourne: http://winterbourne.actieforum.com/

En het tutorial: https://ondersteun.actieforum.com/t3239-tabbladen-binnen-de-pagina-tutorial

Sorry voor de dubbelpost, maar wordt hier nog naar gekeken?
Want ik kom er zelf echt niet uit D:

Het kan best dat Joost hier nog niet aan toegekomen is, aangezien het nog maar drie dagen geleden zijn. Ik zou even persoonlijk contact zoeken met Joost en vragen of hij er al mee bezig is geweest.

Dit heb ik nog nooit eerder gemaakt misschien dat VJ hier beter kan uitleggen, ik wil best wel even testen op een test forum van me maar vandaag niet want ik voel me niet heel erg lekker op het moment.

Nou ik bedoelde het meer in de trans van: niemand reageerde erop.
En op andere fora heb je meestal wel meerdere personen die op een probleem reageren.
Ik wil niemand opjutten, maar ik vroeg me het gewoon af. Dat kan toch ^^ ?

Wat bedoel je met een Announcement? Is dat niet gewoon een bericht?

Administration Panel -> General -> Messages and e-mails -> Annoucements

Het is geen gewoon bericht. En ik heb gezien dat het mogelijk moet zijn op die andere twee fora ^^
En de codes uit dat tutorial pakte hij ook, maar verwerkte ze niet correct.

Kun je misschien de code hier neerzetten die je in het announcement had geplakt??

Nou, ik had niet echt een duidelijk code erin gezet... Want iedere keer werkte het niet dus delete ik het: kan je er wel eentje geven van de code die ik in een portal widget gebruikte - met die tabbladen - en die heb ik er al eens eerder ingezet en toen ging het dus niet goed c:

Doe maar.
Ik kijk er morgen naar

Hopelijk word je er een beetje wijs uit XD
Het is nogal een lang... Iets ^^;
Maar ik weet niet eens waar de fout zit. Dus tja.

Code:

<ul id="tabs">
  <li><a href="#welcome">WELCOME</a></li>
  <li><a href="#count">COUNT</a></li>
  <li><a href="#team">TEAM</a></li>
  <li><a href="#spotlights">SPOTLIGHTS</a></li>
  <li><a href="#partners">PARTNERS</a></li>
  <li><a href="#credits">CREDITS</a></li>
</ul><div id="welcome" class="tabContent"><blockquote><center><img src="http://i986.photobucket.com/albums/ae345/tomomochi/welkom.png"></center><br>Het is alweer een paar maanden geleden dat alle volwassen en kinderen boven de 17 in het kleine kust plaatsje Perdido Beach aan de west kant van California zijn verdwenen. Zomaar opeens weg, geen geluid, geen flits helemaal niets. Poefen, zo noemden de kinderen het. “Ze zijn gepoeft.” Het was een kwestie van tijd, de dag dat je 17 werd verdween je. Toch kon je het ook overleven, diegene die het hadden doorstaan vertelden er over, een smekende stem vroeg je bij hem te komen. Als je de stem kon weerstaan overleefde je de poef. Maar er was meer aan de hand, op het moment dat alle verantwoordelijke gepoeft waren stond er ‘poef’ een grote koepel om Perdido Beach en haar naaste streken. De muur, gezichtsbedrog, als een sterke truc van een illusionist. Wanneer je hem aanraakte kreeg je immense pijnen. Erdoorheen kijken was onmogelijk, eruit ontsnappen was onmogelijk. De ruim 250 kinderen van Perdido Beach zaten gevangen in een ramp. <a href="http://survivorss.actieforum.com/t8-het-verhaal#18">Lees verder…</a></blockquote></div><div id="count" class="tabContent"><center><img src="http://tickers.TickerFactory.com/ezt/d/2;14;466/st/20120411/n/The+FAKZ/k/ea0d/age.png" class="imgop"></center></div><div id="team" class="tabContent"><center><a href="http://survivorss.actieforum.com/privmsg?mode=post&u=1"><img src="http://i986.photobucket.com/albums/ae345/tomomochi/juud1.png" onmouseover="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/juud2.png'" onmouseout="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/juud1.png'" border="0" alt="admin ceras" class="imgno"></a><br><br>
<a href="http://survivorss.actieforum.com/privmsg?mode=post&u=2"><img src="http://i986.photobucket.com/albums/ae345/tomomochi/ro1-1.png" onmouseover="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/ro2.png'" onmouseout="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/ro1-1.png'" border="0" alt="admin ceras" class="imgno"></a><br><br>
<a href="http://survivorss.actieforum.com/privmsg?mode=post&u=23"><img src="http://i986.photobucket.com/albums/ae345/tomomochi/no1.png" onmouseover="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/no2.png'" onmouseout="this.src='http://i986.photobucket.com/albums/ae345/tomomochi/no1.png'" border="0" alt="admin ceras" class="imgno"></a></center>
</div><div id="spotlights" class="tabContent"><center><img src="http://i986.photobucket.com/albums/ae345/tomomochi/oktober-2.png"></center>
</div><div id="partners" class="tabContent"><center><a href="http://boundless.actieforum.com"><img src="http://gickr.com/results3/anim_9bd28bfc-85a8-fad4-5118-fe63a0623449.gif" class="imgop"></a> <a href="http://sweettears.actieforum.com/"><img src="http://oi45.tinypic.com/6ylaih.jpg" class="imgop"></a> <a href="http://anotherfairytale.actieforum.com/"><img src="http://i47.tinypic.com/30w7dpd.gif" class="imgop"></a>
<br><br>
<strong>Eigen banners</strong><br>
<a href="http://survivorss.actieforum.com"><img src="http://img850.imageshack.us/img850/7070/banner1bx.gif" class="imgop"></a><br><br>
<small>Het is mogelijk om linkpartners met ons te worden. Dit doet u door een kleine banner (max. 130 x 60 pixels groot), met de link van de site erbij, naar <a href="http://survivorss.actieforum.com/privmsg?mode=post&u=23">Austin</a> te sturen via een PB. Plaatst u onze banner op uw site, dan komt uw banner ook op onze site te staan.</small></center></div><div id="credits" class="tabContent"><blockquote>Survivors is opgericht door <strong>Kid</strong> en <strong>Perrie</strong>, wat hun de eigenaars maakt van dit forum. Het wordt ondersteund door actieforum en de codering is te danken aan <strong>Austin</strong>. Het onderwerp van Survivors is gebaseerd op een boekenserie, geschreven door Michael Grant, met als eerste deel het boek getiteld Gone.<br>
Al de afbeeldingen behoren tot hun rechtmatige eigenaars. Wij zijn er niet van gediend als gehele posten, karakters of/en verhaallijnen worden overgenomen van de site zonder enige toestemming, eveneens als sommige afbeeldingen die door het team zelf zijn gemaakt.<br>
Natuurlijk moeten wij, het team, de leden van het forum ook heel erg bedanken. Zonder leden is een forum niets en uiteindelijk zijn zij diegene die het forum maken tot wat het is: de sfeer, de gezelligheid en de activiteit. Dat hadden we in ons uppie niet voor mekaar kunnen krijgen. Dus bedanken we daarbij ook onze leden.<br>
<br>
<i>De layout van Survivors wordt het beste weergegeven in de webbrowser Chrome.</i></blockquote>
</div>
<style>
ul#tabs {
 font-family: georgia;
 font-style: italic;
 font-size: 0.8em;
 list-style-type: none;
 margin: 10px 0 0 0;
 padding: 0;
 width: 580px;
 text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
}

ul#tabs li {
 float: left;
 padding: 0;
 margin: 0 px 0 0;
}

ul#tabs li a {
 color: #FFFFFF;
 margin: 0px;
 padding: 5px 18.43px;
 background-color: #BABABA;
 text-decoration: none;
 display: block;
}

ul#tabs li a:hover {
 color: #FFFFFF;
 text-decoration: none;
}

ul#tabs li a.selected {
 color: #FFFFFF;
 background-color: #BABABA;
 text-decoration: none;
}

div.tabContent {
 font-family: Verdana;
 font-size: 0.7em;
 width: 554px;
 clear: left;
 background-color: #505A66;
 padding: 10px;
 margin: 0;
 text-shadow: black 0.1em 0.1em 0.2em;
}


div.tabContent.hide {
 display: none;
}</style>

<script>
var tabLinks = new Array();
    var contentDivs = new Array();

    onload = function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }</script>

Zet de volgende code eens in een nieuw javascript in het Javascript management (Modules>>>Javascript Management)

Code:

var tabLinks = new Array();
    var contentDivs = new Array();

    onload = function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

En dan?... Want het heeft niet echt verschil.

Ik heb het zelf uitgevonden - eindelijk.
Dus hier kan een slotje op (;

Bedankt voor de tijd en moeite ~