Indexbalkje links
3 plaatsers
Nederlands Ondersteuningsforum : :: Hulp & ondersteuning... :: Het uiterlijk van uw forum beheren :: Het uiterlijk van uw forum beheren Archief
Pagina 1 van 1• Deel
balkje links
van Miss. Mouse 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
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
-
Berichten : 18
Leeftijd : 25
Registratie : 02-07-13
Oprichter : Ja
Templates : Ja
CSS : Ja - 200 berichten of meer gepostJe hebt 200 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Lid sinds +10 jaarU bent al meer dan 10 jaar lidFeestdagen 2023Fijne Feestdagen namens team Actieforum!
-
Re: balkje links
van 10spetter10 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:
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:
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- Superactief Forumlid
-
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja - Lid sinds +10 jaarU bent al meer dan 10 jaar lid1000 berichten of meer gepostJe hebt 1000 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Oud Actieforum MedewerkerDeze gebruiker is een oud Actieforum medewerker.Feestdagen 2023Fijne Feestdagen namens team Actieforum!
Miss. Mouse- Nieuw Forumlid
-
Berichten : 18
Leeftijd : 25
Registratie : 02-07-13
Oprichter : Ja
Templates : Ja
CSS : Ja - 200 berichten of meer gepostJe hebt 200 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Lid sinds +10 jaarU bent al meer dan 10 jaar lidFeestdagen 2023Fijne Feestdagen namens team Actieforum!
-
Re: balkje links
van 10spetter10 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 
Nu heb ik mij toch wel een dagje geamuseerd om me met mijn pro *kuch kuch* skills een javascriptje te maken.
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.
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.
10spetter10- Superactief Forumlid
-
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja - Lid sinds +10 jaarU bent al meer dan 10 jaar lid1000 berichten of meer gepostJe hebt 1000 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Oud Actieforum MedewerkerDeze gebruiker is een oud Actieforum medewerker.Feestdagen 2023Fijne Feestdagen namens team Actieforum!
Re: balkje links
van Miss. Mouse 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
-
Berichten : 18
Leeftijd : 25
Registratie : 02-07-13
Oprichter : Ja
Templates : Ja
CSS : Ja - 200 berichten of meer gepostJe hebt 200 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Lid sinds +10 jaarU bent al meer dan 10 jaar lidFeestdagen 2023Fijne Feestdagen namens team Actieforum!
-
Re: balkje links
van 10spetter10 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:
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.
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.
10spetter10- Superactief Forumlid
-
Berichten : 1222
Leeftijd : 27
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja - Lid sinds +10 jaarU bent al meer dan 10 jaar lid1000 berichten of meer gepostJe hebt 1000 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Oud Actieforum MedewerkerDeze gebruiker is een oud Actieforum medewerker.Feestdagen 2023Fijne Feestdagen namens team Actieforum!
Miss. Mouse- Nieuw Forumlid
-
Berichten : 18
Leeftijd : 25
Registratie : 02-07-13
Oprichter : Ja
Templates : Ja
CSS : Ja - 200 berichten of meer gepostJe hebt 200 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Lid sinds +10 jaarU bent al meer dan 10 jaar lidFeestdagen 2023Fijne Feestdagen namens team Actieforum!
-
Re: balkje links
van Joost ma 12 aug 2013 - 23:27
| Aanvraag opgelost en gesloten. |
Forum Tools | Tutorials | Stijl aanvraag | Forumpromotie goedkeuring | Wachtwoord vergeten?
Geen ondersteuning via PM | Ondersteuningsvraag opgelost? Markeer je topic dan met het icoon
Facebook
Joost- Beheerder
-
Berichten : 5895
Leeftijd : 33
Registratie : 31-08-07
Oprichter : Ja
Templates : Ja
CSS : Ja - 1000 berichten of meer zijn als leuk gemarkeerdWanneer je 1000 of meer likes op je berichten krijgtLid sinds +15 jaarU bent al meer dan 15 jaar lidMedewerker awardJe verdient deze award als je medewerker bent van Actieforum1000 berichten of meer gepostJe hebt 1000 berichten of meer gepostFeestdagen 2022Fijne Feestdagen namens team Actieforum!Feestdagen 2023Fijne Feestdagen namens team Actieforum!
-
Soortgelijke onderwerpen» Tekst Links Hover (Links met een effect)
» Balkje
» Knipperd balkje
» Reclame en onderste balkje.
» zo'n lopend balkje met tekst
» Balkje
» Knipperd balkje
» Reclame en onderste balkje.
» zo'n lopend balkje met tekst
Nederlands Ondersteuningsforum : :: Hulp & ondersteuning... :: Het uiterlijk van uw forum beheren :: Het uiterlijk van uw forum beheren Archief
Pagina 1 van 1
Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum