Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in ťťn van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

balkje links

Vorige onderwerp Volgende onderwerp Go down

balkje links

Bericht van Miss. Mouse op ma 8 jul 2013 - 22:24

Op mijn forum zou ik graag zo'n balkje (zoals hier) links hebben staan.
Kan iemand me dit uitleggen?

Alvast bedankt,
Miss. Mouse


Laatst aangepast door Miss. Mouse op ma 12 aug 2013 - 21:26; in totaal 1 keer bewerkt

Miss. Mouse
Nieuw Forumlid

Vrouw Aantal berichten : 18
Leeftijd : 17
Taal : NL
Locatie : Belgie
Registratiedatum : 02-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://thisisgonnabeawesome.forumotion.com/
Miss. Mouse is bedankt door de starter van dit topic.

Re: balkje links

Bericht van 10spetter10 op di 9 jul 2013 - 0:22

Op het engelstalige forum vindt je hier een guide voor: show-hide-widgets-script

Kort samengevat:
Beheerderspaneel >>> Modules >>> forum widget beheer

Onderaan klik je op "Create a widget".
Widget name: Top widget
Use a table type: no
Widget title: leeg houden
Widget source:
linkse balk:

Code:
<div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>
rechtse balk:

Code:
<div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>

Plaats nu je zelf gemaakte widget bovenaan de balk.

Nu maak je een 2de widget, noem deze bottom widget, use a table type: no, geen titel en widget source:
balk links:

Code:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>
balk rechts:

Code:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: balkje links

Bericht van Miss. Mouse op do 11 jul 2013 - 22:37

het lukt niet echt...

Miss. Mouse
Nieuw Forumlid

Vrouw Aantal berichten : 18
Leeftijd : 17
Taal : NL
Locatie : Belgie
Registratiedatum : 02-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://thisisgonnabeawesome.forumotion.com/
Miss. Mouse is bedankt door de starter van dit topic.

Re: balkje links

Bericht van 10spetter10 op vr 12 jul 2013 - 20:52

Ik heb gemerkt dat bij al de versies het goed werkt behalve bij phpBB2, dus waarschijnlijk gebruik je die. En aan je profiel te zien ben ik toch wel redelijk juist Wink

Nu heb ik mij toch wel een dagje geamuseerd om me met mijn pro *kuch kuch* skills een javascriptje te maken.



Code:
<html>
   <head>
   </head>
   <body>
      <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i.imgur.com/zVQMs.png); background-position: 0px -13px;"
      onclick="toggleConfirm(); return false">
      </div>
      <script type="text/javascript">
         var width=document.getElementById("left").offsetWidth;
         var left = document.getElementById("left").childNodes;
         function toggleConfirm(){
         if (document.getElementById('left').style.marginTop!="0px"){
            document.getElementById('left').style.marginTop="0px";
            document.getElementById('left').style.width="0";
            expand();
            fadeIn(0);
            document.getElementById('forum-widget').style.backgroundPosition="0px 0px";
            setTimeout(function fadeinforumline(){
               for(var i = 0; i < left.length; i++){
                  if (left[i].nodeType != 1){;continue;}
                  left[i].style.display = "inline-table";
               }
               fadeIn2(0);
            },700);
         }
         else {
            fadeOut2(100);
            setTimeout(function noneforumline(){
               for(var i = 0; i < left.length; i++){
                  if (left[i].nodeType != 1){;continue;}
                  left[i].style.display = "none";
               }
            },700);
            setTimeout(function fadeoutleft(){
               shrink();
               fadeOut(100);
               document.getElementById('forum-widget').style.backgroundPosition="0px -13px";
            },700);
         }
      }
         function hideorshow(){
            if (document.getElementById('left').style.marginTop!="1px"){
               document.getElementById('left').style.marginTop="1px";
               setTimeout(function fadeoutleft(){
                  setTimeout(function fadeoutforumline(){
                     fadeOut2(100);
                     setTimeout(
                     function noneforumline(){
                        for(var i = 0; i < left.length; i++){
                           if (left[i].nodeType != 1){;continue;}
                           left[i].style.display = "none";
                        }
                     },700);
                  },0);
                  setTimeout(function shrinkenfadeout(){
                     fadeOut(100);
                     shrink();
                     document.getElementById('forum-widget').style.backgroundPosition="0px 0px";
                  },1000);
               },0);
            }
            else if (document.getElementById('left').style.opacity="0"){
               setTimeout(function fadeinleft(){
                  expand();
                  fadeIn(0);
                  setTimeout(function fadeinforumline(){
                     setTimeout(function noneforumline(){
                        for(var i = 0; i < left.length; i++){
                           if (left[i].nodeType != 1){;continue;}
                           left[i].style.display = "inline";
                        }
                        fadeIn2(0);
                     },0);
                  },3000);
               },0);
            }
         }
         
         // Copyright 2011 francky: www.developerscorner.nl
         // See http://bliksekaters.nl/tests/foto-carrousel_vs2.php
         // Fading script inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/
         // Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
         // Toegestaan is:
         // † † †kopieren, verspreiden en doorgeven,
         // † † †en bewerking naar eigen smaak; :-)
         // † † †op voorwaarde van opnemen van deze bronvermelding in de broncode;
         // † † †alleen voor niet-commercieel gebruik;
         // † † †verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
         // See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
         // †or: http://creativecommons.org/licenses/by-nc-sa/3.0/ † †(for EN text)
         function setBrowser(opacity) {
            var obj="left";
            document.getElementById(obj).style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
            document.getElementById(obj).style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
            document.getElementById(obj).style.KHTMLOpacity = opacity/100; † † † † † †// Safari<1.2, Konqueror
            document.getElementById(obj).style.MozOpacity = opacity/100; † † † † † † †// older Mozilla and Firefox
            document.getElementById(obj).style.opacity = opacity/100; † † † † † † † † // modern browsers
         }

         function fadeOut(opacity) {
            if ( opacity > 0) {
               opacity -= 5;
               setBrowser(opacity);
               clearTimeout(fadeOut);
               setTimeout("fadeOut("+opacity+")", 50);
            }
            else {
               clearTimeout(fadeOut);
            }
         }
         function fadeIn(opacity) {
            if (opacity < 95) {
               opacity += 5;
               setBrowser(opacity);
               clearTimeout(fadeIn);
               setTimeout("fadeIn("+opacity+")", 50);
            }
            else {
               opacity = 100;
               setBrowser(opacity);
               clearTimeout(fadeIn);
            }
         }
         function setBrowser2(opacity) {
            for(var i = 0; i < left.length; i++){
               if (left[i].nodeType != 1){;continue;}
               left[i].style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
            }for(var i = 0; i < left.length; i++){
               if (left[i].nodeType != 1){;continue;}
               left[i].style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
            }for(var i = 0; i < left.length; i++){
               if (left[i].nodeType != 1){;continue;}
               left[i].style.KHTMLOpacity = opacity/100; † † † † † †// Safari<1.2, Konqueror
            }for(var i = 0; i < left.length; i++){
               if (left[i].nodeType != 1){;continue;}
               left[i].style.MozOpacity = opacity/100; † † † † † † †// older Mozilla and Firefox
            }for(var i = 0; i < left.length; i++){
               if (left[i].nodeType != 1){;continue;}
               left[i].style.opacity = opacity/100; † † † † † † † † // modern browsers
            }
            
         }
         function fadeOut2(opacity) {
            if ( opacity > 0) {
               opacity -= 5;
               setBrowser2(opacity);
               clearTimeout(fadeOut2);
               setTimeout("fadeOut2("+opacity+")", 50);
            }
            else {
               clearTimeout(fadeOut2);
            }
         }
         function fadeIn2(opacity) {
            if ( opacity < 95) {
               opacity += 5;
               setBrowser2(opacity);
               clearTimeout(fadeIn2);
               setTimeout("fadeIn2("+opacity+")", 50);
            }
            else {
               opacity = 100;
               setBrowser2(opacity);
               clearTimeout(fadeIn2);
            }
         }
         function expand(){
            if (document.getElementById('left').offsetWidth<width){
               document.getElementById('left').style.width=document.getElementById('left').offsetWidth+4+"px";
               setTimeout(expand, 9);
            }
            else {
               clearTimeout(expand);
            }
         }
         function shrink(){
            if (document.getElementById('left').offsetWidth>3){
               document.getElementById('left').style.width=(document.getElementById('left').offsetWidth-4)+"px";
               setTimeout(shrink, 9);
            }
            else {
               clearTimeout(shrink);
               document.getElementById('left').style.marginTop="1px";
            }
         }
      
      document.getElementById('left').parentNode.insertBefore(document.getElementById('forum-widget'),document.getElementById('left'));
      </script>
   </body>
</html>

Er zijn natuurlijk wel een paar kleine foutjes die ik er niet uit kreeg, zoals de eerste keer dat je klikt schiet de widget-bar nog snel eens open, waardoor ook de pijl niet meer juist is.
Ook is er nog geen gebruik van cookies als je die nog wilt moet je het maar zeggen, dan hou ik me daar nog eens een dagje mee bezig om het op te zoeken. Wink

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: balkje links

Bericht van Miss. Mouse op zo 28 jul 2013 - 14:13

hum, ja, nu ben ik toevallig niet zo'n codemens, dus kan je nog even zeggen waar dat dan moet staan? ^^"

Miss. Mouse
Nieuw Forumlid

Vrouw Aantal berichten : 18
Leeftijd : 17
Taal : NL
Locatie : Belgie
Registratiedatum : 02-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://thisisgonnabeawesome.forumotion.com/
Miss. Mouse is bedankt door de starter van dit topic.

Re: balkje links

Bericht van 10spetter10 op di 30 jul 2013 - 22:07

Beheerderspaneel >>> Modules >>> forum widget beheer

Onderaan klik je op "Create a widget".
Widget name: Kies maar iets
Use a table type: no
Widget title: leeg houden
Widget source:
Code:
<html>
  <head>
  </head>
  <body>
      <div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i.imgur.com/zVQMs.png); background-position: 0px -13px;"
      onclick="toggleConfirm(); return false">
      </div>
      <script type="text/javascript">
        var width=document.getElementById("left").offsetWidth;
        var left = document.getElementById("left").childNodes;
        function toggleConfirm(){
        if (document.getElementById('left').style.marginTop!="0px"){
            document.getElementById('left').style.marginTop="0px";
            document.getElementById('left').style.width="0";
            expand();
            fadeIn(0);
            document.getElementById('forum-widget').style.backgroundPosition="0px 0px";
            setTimeout(function fadeinforumline(){
              for(var i = 0; i < left.length; i++){
                  if (left[i].nodeType != 1){;continue;}
                  left[i].style.display = "inline-table";
              }
              fadeIn2(0);
            },700);
        }
        else {
            fadeOut2(100);
            setTimeout(function noneforumline(){
              for(var i = 0; i < left.length; i++){
                  if (left[i].nodeType != 1){;continue;}
                  left[i].style.display = "none";
              }
            },700);
            setTimeout(function fadeoutleft(){
              shrink();
              fadeOut(100);
              document.getElementById('forum-widget').style.backgroundPosition="0px -13px";
            },700);
        }
      }
        function hideorshow(){
            if (document.getElementById('left').style.marginTop!="1px"){
              document.getElementById('left').style.marginTop="1px";
              setTimeout(function fadeoutleft(){
                  setTimeout(function fadeoutforumline(){
                    fadeOut2(100);
                    setTimeout(
                    function noneforumline(){
                        for(var i = 0; i < left.length; i++){
                          if (left[i].nodeType != 1){;continue;}
                          left[i].style.display = "none";
                        }
                    },700);
                  },0);
                  setTimeout(function shrinkenfadeout(){
                    fadeOut(100);
                    shrink();
                    document.getElementById('forum-widget').style.backgroundPosition="0px 0px";
                  },1000);
              },0);
            }
            else if (document.getElementById('left').style.opacity="0"){
              setTimeout(function fadeinleft(){
                  expand();
                  fadeIn(0);
                  setTimeout(function fadeinforumline(){
                    setTimeout(function noneforumline(){
                        for(var i = 0; i < left.length; i++){
                          if (left[i].nodeType != 1){;continue;}
                          left[i].style.display = "inline";
                        }
                        fadeIn2(0);
                    },0);
                  },3000);
              },0);
            }
        }
       
        // Copyright 2011 francky: www.developerscorner.nl
        // See http://bliksekaters.nl/tests/foto-carrousel_vs2.php
        // Fading script inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/
        // Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
        // Toegestaan is:
        //      kopieren, verspreiden en doorgeven,
        //      en bewerking naar eigen smaak; :-)
        //      op voorwaarde van opnemen van deze bronvermelding in de broncode;
        //      alleen voor niet-commercieel gebruik;
        //      verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
        // See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
        //  or: http://creativecommons.org/licenses/by-nc-sa/3.0/    (for EN text)
        function setBrowser(opacity) {
            var obj="left";
            document.getElementById(obj).style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
            document.getElementById(obj).style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
            document.getElementById(obj).style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
            document.getElementById(obj).style.MozOpacity = opacity/100;              // older Mozilla and Firefox
            document.getElementById(obj).style.opacity = opacity/100;                // modern browsers
        }

        function fadeOut(opacity) {
            if ( opacity > 0) {
              opacity -= 5;
              setBrowser(opacity);
              clearTimeout(fadeOut);
              setTimeout("fadeOut("+opacity+")", 50);
            }
            else {
              clearTimeout(fadeOut);
            }
        }
        function fadeIn(opacity) {
            if (opacity < 95) {
              opacity += 5;
              setBrowser(opacity);
              clearTimeout(fadeIn);
              setTimeout("fadeIn("+opacity+")", 50);
            }
            else {
              opacity = 100;
              setBrowser(opacity);
              clearTimeout(fadeIn);
            }
        }
        function setBrowser2(opacity) {
            for(var i = 0; i < left.length; i++){
              if (left[i].nodeType != 1){;continue;}
              left[i].style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
            }for(var i = 0; i < left.length; i++){
              if (left[i].nodeType != 1){;continue;}
              left[i].style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
            }for(var i = 0; i < left.length; i++){
              if (left[i].nodeType != 1){;continue;}
              left[i].style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
            }for(var i = 0; i < left.length; i++){
              if (left[i].nodeType != 1){;continue;}
              left[i].style.MozOpacity = opacity/100;              // older Mozilla and Firefox
            }for(var i = 0; i < left.length; i++){
              if (left[i].nodeType != 1){;continue;}
              left[i].style.opacity = opacity/100;                // modern browsers
            }
           
        }
        function fadeOut2(opacity) {
            if ( opacity > 0) {
              opacity -= 5;
              setBrowser2(opacity);
              clearTimeout(fadeOut2);
              setTimeout("fadeOut2("+opacity+")", 50);
            }
            else {
              clearTimeout(fadeOut2);
            }
        }
        function fadeIn2(opacity) {
            if ( opacity < 95) {
              opacity += 5;
              setBrowser2(opacity);
              clearTimeout(fadeIn2);
              setTimeout("fadeIn2("+opacity+")", 50);
            }
            else {
              opacity = 100;
              setBrowser2(opacity);
              clearTimeout(fadeIn2);
            }
        }
        function expand(){
            if (document.getElementById('left').offsetWidth<width){
              document.getElementById('left').style.width=document.getElementById('left').offsetWidth+4+"px";
              setTimeout(expand, 9);
            }
            else {
              clearTimeout(expand);
            }
        }
        function shrink(){
            if (document.getElementById('left').offsetWidth>3){
              document.getElementById('left').style.width=(document.getElementById('left').offsetWidth-4)+"px";
              setTimeout(shrink, 9);
            }
            else {
              clearTimeout(shrink);
              document.getElementById('left').style.marginTop="1px";
            }
        }
     
      document.getElementById('left').parentNode.insertBefore(document.getElementById('forum-widget'),document.getElementById('left'));
      </script>
  </body>
</html>

Dan plaats je die widget bovenaan de linker widget balk. Er staat wel nog steeds geen cookie op. Anders moet je eerst eens kijken op mijn testforum voor het resultaat atm: klik.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: balkje links

Bericht van Miss. Mouse op ma 12 aug 2013 - 21:25

het is gelukt, dankjewel!

Miss. Mouse
Nieuw Forumlid

Vrouw Aantal berichten : 18
Leeftijd : 17
Taal : NL
Locatie : Belgie
Registratiedatum : 02-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://thisisgonnabeawesome.forumotion.com/
Miss. Mouse is bedankt door de starter van dit topic.

Re: balkje links

Bericht van Joost op ma 12 aug 2013 - 23:27

Aanvraag opgelost en gesloten.



† †Veel Voorkomende Problemen | Forum Gereedschap | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | †TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum