Widget balk

Hoihoi,

Ik heb via het engelse forum een code gevonden dat als je je muis tegen de linker rand van het forum houd, er een balk 'uitschuift' met daarop widgets.

Nu is mijn vraag of het ook mogelijk is dat de widget balk van bovenaan het forum naar onderen 'uitklapt' en zo ja, welke code ik hiervoor moet gebruiken.

Heb een phpbb2 forum (http://dummies.forumactie.com/forum = testforum)

Voorbeeld 1:

Voorbeeld 2:

Ik heb een andere manier geprobeerd waarbij ik javascript gebruik. Je moet juist een nieuwe widget maken met deze code in:

Code:

<div id="toggler" style="background:url(http://i63.tinypic.com/2zdx3dv.png); width: 180px; height: 81px;">
</div><script>
jQuery(function() {
jQuery('#left').after(jQuery('#toggler'));
jQuery('#left #toggler').remove();

jQuery('#toggler, #left').on('mouseover', function () {
jQuery('#left').addClass('hover');
});
jQuery('#toggler, #left').on('mouseout', function () {
jQuery('#left').removeClass('hover');
});
});
</script><style>
#left {
  height: auto;
  max-height: 0px;
  overflow: hidden;
  transition: 1s;
}
#left.hover {
  max-height: 2500px;
  overflow: hidden;
}
</style>

Zet 'use a table type : ' maar op 'nee' zodat je die randen niet meer ziet.

Op mijn testforum lijkt deze dan wel te werken maar het kan zijn dat ik nog wat ga moeten aanpassen zodat het ook goed werkt op jouw forum.

Code:

#left:hover {
  top: 0;
  overflow-y: auto !important;
}
#left {
  /* background: rgba(150, 150, 150, 0.200); */
  /* border-right: 1px solid #55DBD0; */
  position: fixed;
  padding: 6px;
  width: 180px !important;
  top: -710px;
  bottom: 0;
  overflow: hidden !important;
  transition: 300ms;
}

Hiervoor moet je wel je css die je nu had voor die widgetbalk wegdoen.

Aha hij komt nu idd van boven naar beneden :-)

Maar het plaatje van het 'logo' staat nu ergens links van mijn menu balk:
En ook blijft ie staan als de balk naar beneden komt.

Voorbeeld:

Pas als ik mijn muis daar op houd, komt de balk naar beneden.

Is de bedoeling dat die afbeelding bovenaan het forum staat :-)

Ook komt de balk over mijn header heen naar beneden terwijl hij mooier zou staat als hij meer aan de linker rand zou zitten:

Zo is hij:

Zo is mooier:

Hij blijft aan t begin ook een soort hangen

Zou je even de sneeuw op je testforum willen uitzetten? Ik kan namelijk niets proberen doordat alles heel de tijd refresht met die sneeuw :/

Staat nu uit

Probeer eens of het met deze code wel goed is.

Code:

<div id="toggler" style="background:url(http://i63.tinypic.com/2zdx3dv.png); width: 180px; height: 81px;">
</div><script>
jQuery(function() {
jQuery('#left').after(jQuery('#toggler'));
jQuery('#left #toggler').remove();

jQuery('#toggler, #left').on('mouseover', function () {
jQuery('#left').addClass('hover');
});
jQuery('#toggler, #left').on('mouseout', function () {
jQuery('#left').removeClass('hover');
});
jQuery('#left').parent().addClass('widget_cont');
});
</script><style>
.widget_cont {
  position: absolute;
  left: 15px;
  top: 0px;
}
#left {
  height: auto;
  max-height: 0px;
  overflow: hidden;
  transition: 1s;
  background-image: url(http://i67.tinypic.com/2h5tr1u.png);
  background-color: #19111F;
  background-repeat: repeat-y;
}
#left.hover {
  max-height: 2500px;
  overflow: hidden;
}
</style>

Hij staat op de goeie plek!! :-) Naisss

Zijn nog 2 dingetjes die niet helemaal kloppen denk ik.
Hij blijft nog steeds een soort van 'hangen' (zie linker afbeelding van voorbeeld hieronder)
Als ik mn muis daarna verder beweegt gaat de balk pas weer verder naar beneden.

Ook staat er nu een soort dubbele balk onder hetgene wat uitklapt (dit kan je op de linkse en rechtse afbeelding zien op het voorbeeld hieronder)

EDIT: Die 'dubbele balk' heb ik nu zelf weg gekregen.
Hij blijft wel nog een soort van hangen

Edit 2: Op het originele forum krijg ik een soort witte balk eronder als de balk uitschuift. Dit is alleen bij het lezen van een topic, niet op de home pagina etc.

Ik heb nu de CSS code wat aangepast hierdoor is geloof ik die witte balk weg
Hij blijft wel nog steeds een soort van hangen.

Heb het idee dat het de communicatie is tussen de CSS en de speciale widget om die balk uit te laten schuiven.
Heb namelijk ook even die widget gedeactiveerd, en toen bleef die niet ha ngen (maar stond ie weer niet op goede plek)

Heb de CSS nu aangepast naar dit om die witte achtergrond weg te halen:

Code:

#left:hover {
  top: 0;
  overflow-y: auto !important;
}
#left {
  background-color:transparent;
  /* border-right: 1px solid #55DBD0; */
  position: fixed;
  top: -710px;
  padding: 0px;
  width: 180px !important;
  bottom: 0;
  overflow: hidden !important;
  transition: 300ms;
}

Voor die dubbele vex zou het beter zijn dat je de eerste weg doet, degene die je onderaan je leden-widget hebt geplaatst.
Dan zou je ook nog de fixed van je #left moeten weg doen, anders blijft de vex bovenaan staan.
Verder moet je ook terug de achtergrond kleur en afbeelding ( background: #19111f url(https://2img.net/h/oi67.tinypic.com/2h5tr1u.png); ) op #left instellen zodat je niet door de widget balk kijkt. Volgens mij zou die het dan moeten doen.

Die witte balk zou ik op het forum zelf moeten zien maar ik vermoed dat het een vulling gaat zijn. De witte kleur zou dan weg moeten zijn wanneer je de achtergrond op #left opnieuw instelt.

Die witte balk heb ik zelf weg gekregen :-)
Heb die RGBA weg gehaald en daar background-color transparent gezet.

Hij werkt nu aardig... heel erg bedankt!

Enige wat ik nu nog zie is een scroll balk als ie uitschuift terwijl de balk niet te lang is
Als de balk uitgeklapt is, is die ook weg je ziet hem alleen tijdens het omlaag klappen

Voorbeeld:

Oeps, die was ik heel de tijd vergeten weg te doen. Normaal zou het opgelost zijn als je in de css die ik je gaf volgende lijn weg doet:

Code:

#left:hover {
  top: 0;
  /*overflow-y: auto !important;  --  Deze lijn weg */
}

Hij is weg

Heel erg bedankt weer !!!