Hallo,
Mijn doel deze keer is de widget-bar van mijn forumotion forum open of dicht te laten schuiven wanneer er op de knop gedrukt wordt.
Bij het dicht schuiven zouden eerst de groene kaders moeten uit faden en daarna op display: none komen. Hierna moet de gele balk smaller worden en uit faden en de rode balk breeder worden.
Bij het open gaan het omgekeerde.
Tot slot zou dit ook nog d.m.v een cookie moeten onthouden worden zodat het ook wordt toegepast op volgende paginas of de volgende keer als je op het forum komt.
Mijn testpaginaatje:
Het is bijna allemaal gelukt enkel nog die cookie instellen, ik heb hier al wat over gelezen en geprobeerd maar het lijkt me niet te lukken.
Ook is er nog één minpuntje als je de eerste keer op de knop drukt schuift de bar open ook al staat die open, ik weet dat dit komt omdat er 'if (.style.marginTop!=0)' staat maar ik weet niet direct een andere manier om het open/dicht schuiven te controleren.
Als iemand me met een van bovenstaande zaken kan helpen,
Alvast bedankt, en eventuele tips om het scriptje handigere/compacter te maken zijn altijd welkom. Ik ben maar een prutser met die codes
Mijn doel deze keer is de widget-bar van mijn forumotion forum open of dicht te laten schuiven wanneer er op de knop gedrukt wordt.
Bij het dicht schuiven zouden eerst de groene kaders moeten uit faden en daarna op display: none komen. Hierna moet de gele balk smaller worden en uit faden en de rode balk breeder worden.
Bij het open gaan het omgekeerde.
Tot slot zou dit ook nog d.m.v een cookie moeten onthouden worden zodat het ook wordt toegepast op volgende paginas of de volgende keer als je op het forum komt.
Mijn testpaginaatje:
Code:
<html>
<head>
<style type="text/css">
div#left{
background: #ffff00;
width: 180px;
height: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</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><br />
<table height="500px">
<tr><td><div id="left"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" id="calendar_container"><tbody><tr><td class="catLeft" height="25"><span class="genmed module-title"><strong>juli 2013</strong></span></td></tr><tr align="center"><td valign="top" class="row1"><table cellpadding="3" cellspacing="1" border="0" class="forumline" style="border:0;"><tbody><tr><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">ma</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">di</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">wo</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">do</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">vr</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">za</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">zo</th></tr><tr><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">1</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">2</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">3</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">4</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">5</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">6</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">7</span></td></tr><tr><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">8</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">9</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">10</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">11</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">12</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">13</span></td><td class="quote" align="center" style="padding-left:0;padding-right:0;"><span class="gen">14</span></td></tr><tr><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">15</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">16</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">17</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">18</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">19</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">20</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">21</span></td></tr><tr><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">22</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">23</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">24</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">25</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">26</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">27</span></td><td class="row2" align="center" style="padding-left:0;padding-right:0;"><span class="gen">28</span></td></tr><tr><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">29</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">30</span></td><td class="row1" align="center" style="padding-left:0;padding-right:0;"><span class="gen">31</span></td><td class="row3" align="center" style="padding-left:0;padding-right:0;"><span class="gen"> </span></td><td class="row3" align="center" style="padding-left:0;padding-right:0;"><span class="gen"> </span></td><td class="row3" align="center" style="padding-left:0;padding-right:0;"><span class="gen"> </span></td><td class="row3" align="center" style="padding-left:0;padding-right:0;"><span class="gen"> </span></td></tr><tr><td class="catBottom" colspan="7" align="center"><span class="genmed"><a href="/calendar?start=20130701" title="Kalender" class="genmed"><img src="http://illiweb.com/fa/subsilver/icon_calendar.gif" border="0" align="top" hspace="5" alt="Kalender" title="Kalender">Kalender</a></span></td></tr></tbody></table></td></tr></tbody></table>
<div style="height:4px"></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="catLeft" height="25"><span class="genmed module-title">Meest bekeken onderwerpen</span></td></tr><tr><td><table summary="Meest bekeken onderwerpen" width="100%" style="table-layout:fixed;overflow:hidden;"><tbody><tr><td class="row2 genmed"><a href="/t1-your-first-subject" title="Your first subject - 81 Bekeken">Your first subject</a></td></tr><tr><td class="row1 genmed"><a href="/t2-test-test-123" title="test test 123 - 59 Bekeken">test test 123</a></td></tr><tr><td class="row2 genmed"><a href="/t4-handige-codes" title="handige codes - 55 Bekeken">handige codes</a></td></tr><tr><td class="row1 genmed"><a href="/t3-formulier-test" title="formulier test - 31 Bekeken">formulier test</a></td></tr></tbody></table></td></tr></tbody></table>
</div></td><td width="100%" style="background: #ff0000;"></td><td></td></tr>
</table>
<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);
setTimeout("fadeinforumline()",700);
document.getElementById('forum-widget').style.backgroundPosition="0px 0px";
}
else {
fadeOut2(100);
setTimeout("noneforumline()",700);
setTimeout("fadeoutleft()",700);
document.getElementById('forum-widget').style.backgroundPosition="0px -13px";
}
}
function fadeinforumline(){
for(var i = 0; i < left.length; i++){
if (left[i].nodeType != 1){;continue;}
left[i].style.display = "inline";
}
fadeIn2(0);
}
function noneforumline(){
for(var i = 0; i < left.length; i++){
if (left[i].nodeType != 1){;continue;}
left[i].style.display = "none";
}
}
function fadeoutleft() {
shrink();
fadeOut(100);
}
// 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";
}
}
</script>
</body>
</html>Ook is er nog één minpuntje als je de eerste keer op de knop drukt schuift de bar open ook al staat die open, ik weet dat dit komt omdat er 'if (.style.marginTop!=0)' staat maar ik weet niet direct een andere manier om het open/dicht schuiven te controleren.
Als iemand me met een van bovenstaande zaken kan helpen,
Alvast bedankt, en eventuele tips om het scriptje handigere/compacter te maken zijn altijd welkom. Ik ben maar een prutser met die codes
Laatst bewerkt:
