[Gerrit]

Hallo,

ich möchte, wenn ich Ebenen ein- und ausblenden das der Status ob auf oder zu in einem Cookie gespeichert wird.
Verfallen kann das (der ?) Cookie mit Ende der Sitzung.
Oder wie wird so etwas gehandhabt?

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    var arrA = $("a[rel='toggle']").each(function(intIndex) {

        // ID des zugehörigen Toggle-Elements ermitteln
        var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);

        var status = {
            'true': 'open',
            'false': 'close'
        };

        // Element verstecken
        if(linkID) {
              $('#'+linkID).hide();
            $.cookie('#'+linkID, 'close');
        }
    
        // Togglefunktion an Link binden
        $(this).toggle(
            function() {
                $('#'+linkID).show(); // Einblenden
                $.cookie('#'+linkID, 'open');
                return false;
              },
              function() {
                $('#'+linkID).hide(); // Ausblenden
                $.cookie('#'+linkID, 'close');
                return false;
              }
          );
    });
});
</script>

 <ul class="iconlist">
        <li class="arrow"><a href="#change" rel="toggle" title="weitere Tabelle einblenden">weitere Tabelle</a></li>
      </ul>

        
      <div style="clear: both;" id="change"><!-- begin: #change -->
        <table class="MyTable" border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>Spalte 1</th>
              <th>Spalte 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Zeile 1</td>
              <td>Zeile 2</td>
            </tr>
            <tr>
              <td>Zeile 1.1</td>
              <td>Zeile 2.2</td>
            </tr>
          </tbody>
        </table>        
      </div><!-- end: #change --> 

Gruß Gerrit

[Basti]

Hi Gerrit.

Scheint so, als würde nurnoch die Funktion fehlen, die Ebenen beim Start auch entsprechend der Cookie-Werte zu setzen.

Vielleicht hilft Dir das:

http://ifohdesigns.com/blog/tutorial...e-with-cookies

Bastian

[Gerrit]

Hi Basti,

blöderweise macht er so garnicht.
Wo muss das hin, das der Cookie nach Sitzungsende verfällt?

<script type="text/javascript">
$(document).ready(function()
{
    var arrA = $("a[rel='toggle']").each(function(intIndex) {
 
        // ID des zugehörigen Toggle-Elements ermitteln
        var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);
 
        var status = {
            'true': 'open',
            'false': 'close'
        };
 
        // Element verstecken
        if(linkID) {
              $('#'+linkID).hide();
            $.cookie('#'+linkID, 'close');
        }
 
        // Togglefunktion an Link binden
        $(this).toggle(
            function() {
                $('#'+linkID).show(); // Einblenden
                $.cookie('#'+linkID, 'open');
                return false;
              },
              function() {
                $('#'+linkID).hide(); // Ausblenden
                $.cookie('#'+linkID, 'close');
                return false;
              }
          );
 
         var linkID = $.cookie(linkID);
         if(status == 'close'){
               $('#'+linkID).hide();
         }
    });
});
</script>

[Basti]

Verwendest Du nicht dieses Cookie-Plugin?

http://plugins.jquery.com/project/Cookie

Dort ist es doch dokumentiert:

http://stilbuero.de/jquery/cookie/jquery.cookie.js

Bastian

[Gerrit]

doch verwende ich, bekomme es aber nicht gebacken.

[Gerrit]

Hallo,

sorry, aber er legt dieses besch... Cookie nicht ab.

<script type="text/javascript">
$(document).ready(function()
{
    var arrA = $("a[rel='toggle']").each(function(intIndex) {
        // ID des zugehörigen Toggle-Elements ermitteln
        var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);
        var status = {
            'true': 'open',
            'false': 'close'
        };
        // Element verstecken
        if(linkID) {
            $('#'+linkID).hide();
            $.cookie(linkID, 'close');
        }
 
        // Togglefunktion an Link binden
        $(this).toggle(
            function() {
                $('#'+linkID).show(); // Einblenden
                $.cookie(linkID, 'open');
                return false;
              },
              function() {
                $('#'+linkID).hide(); // Ausblenden
                $.cookie(linkID, 'close');
                return false;
              }
          );
          var CookieID = $.cookie(linkID, {path: '/'});
          if(CookieID == 'close'){
                $('#'+linkID).hide();
          }
    });
});
</script>

Gerrit

[Basti]

Hallo Gerrit.

Probier das mal:

$(document).ready(function()
{
	$("a[rel='toggle']").each(function(intIndex) {

		var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);
		var panel = $('#' + linkID);
		var cookieOptions = { expires: 0 };
		var cookieValue = $.cookie('toggle.'+linkID);

		if ('open' != cookieValue)
			panel.hide();
 
		$(this).toggle(
			function() {
				panel.show();
				$.cookie('toggle.'+linkID, 'open', cookieOptions);
				return false;
			},
			function() {
				$('#'+linkID).hide();
				$.cookie('toggle.'+linkID, null, cookieOptions);
				return false;
			}
		);
	});
});

Bastian

[Gerrit]

Hallo Basti,

danke, ich konnte es aber erst heute testen

Was mir aber auffällt ist, dass wenn ich eine Box öffne --> Seitenrefresh mache und dann die Box wieder schließen möchte, ich zweimal klicken muss

Aber das was ich wollte, das es im Cookie speichert wird gemacht.

Danke Gerrit,

vielleicht kannst du ja noch mal die Sache mit dem Doppelklicken dir anschauen

[Basti]

Hi Gerrit.

Stimmt, der Status wird nicht gespeichert. Dann würde ich den Status in als Klasse abspeichern und anstatt toggle() click() verwenden, das dann je nach Status (sichtbar oder versteckt) eine von zwei Funktionen aufruft (zeige oder verstecke) :

$(document).ready(function(){

	function showPanel(id) {

		$('#' + id)
			.show()
			.addClass('toggle_visible')
			.removeClass('toggle_hidden');
		$.cookie('toggle.' + id, 'open', { expires: 0 });
	}

	function hidePanel(id) {

		$('#' + id)
			.hide()
			.addClass('toggle_hidden')
			.removeClass('toggle_visible');
		$.cookie('toggle.' + id, null);
	}
	

	$("a[rel='toggle']").each(function(intIndex) {

		var id          = String($(this).attr('href')).substr(1, $(this).attr('href').length);
		var panel       = $('#' + id);
		var cookieValue = $.cookie('toggle.' + id);

		if ('open' != cookieValue) {

			hidePanel(id);

		} else {

			showPanel(id);
		}
 
		$(this).click(
			function() {

				if (panel.hasClass('toggle_visible')) {

					hidePanel(id);

				} else {

					showPanel(id);
				}
				return false;
			}
		);
	});
});

Bastian

[Gerrit]

Hi Basti,

ich hatte mich damals garnicht bedankt bei dir.
Das mit dem Cookie hatte geklappt, danke an dieser Stelle nochmal.

Jetzt wollte ich das Script erweitern, das der Titel der Links noch sich ändern soll:

		$(this).click(
			function() {

				if (panel.hasClass('toggle_visible')) {

					hidePanel(id);
$(this).attr({'title': $(this).html($(this).attr('url')) + ' ausblenden'});

				} else {

					showPanel(id);
$(this).attr({'title': $(this).html($(this).attr('url')) + ' einblenden'});
				}
				return false;
			}
		);

Vielleicht könntest du nochmal schauen, wo das rein muss?
Ist es möglich auch das Script auf fadeIn/fadeOut umzustellen??

beste Grüße Gerrit