Forum Moderators: open

Message Too Old, No Replies

jQuery: Expand/Collapse Cookie

         

Surplu

9:34 pm on Aug 28, 2010 (gmt 0)

10+ Year Member



I'm currently working on a new portfolio where I have a pretty sweet expand/collapse area using jQuery, with kind regards to www.adipalaz.com.

I would like the browser to remember whether the area has been collapsed or not from a previous visit, obviously I need to implement a cookie but I'm not sure how with the current script I'm using.

I would appreciate ANY help.

Here's an example of the code...

expand.js

/* ---------------------------------------------
expandAll v.1.3.7
http://www.adipalaz.com/experiments/jquery/expand.html
Requires: jQuery v1.3+
Copyright (c) 2009 Adriana Palazova
Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL (http://www.adipalaz.com/docs/gpl-license.txt) licenses
------------------------------------------------ */
(function($) {
$.fn.expandAll = function(options) {
var defaults = {
state : 'hidden', // null, 'hidden'. If 'hidden', the collapsible elements are hidden by default
initTxt : 'show', // 'show' - if the initial text of the switch is for expanding, 'hide' - if the initial text of the switch is for collapsing
expTxt : '[Expand All]', // the text of the switch for expanding
cllpsTxt : '[Collapse All]', // the text of the switch for collapsing
oneSwitch : true, // true or false - whether both [Expand All] and [Collapse All] are shown, or they swap
ref : '.expand', // the switch 'Expand All/Collapse All' is inserted in regards to the element specified by 'ref'
switchPosition: 'before', //'before' or 'after' - specifies the position of the switch 'Expand All/Collapse All' - before or after the collapsible element
scroll : false, // false or true. If true, the switch 'Expand All/Collapse All' will be dinamically repositioned to remain in view when the collapsible element closes
showMethod : 'slideDown', // 'show', 'slideDown', 'fadeIn', or custom
hideMethod : 'slideUp', // 'hide', 'slideUp', 'fadeOut', or custom
speed : 600, // the speed of the animation in m.s. or 'slow', 'normal', 'fast'
cllpsEl : '.collapse', // the collapsible element
trigger : '.expand', // if expandAll() is used in conjunction with toggle() - the elements that contain the trigger of the toggle effect on the individual collapsible sections
localLinks : null, // null or the selector of the same-page links to which we will apply a smooth-scroll function, e.g. 'a.to_top'
parent : false, // true, false
child : false, // true, false
cllpsLength : null //null, {Number}. If {Number} (e.g. cllpsLength: 200) - if the number of characters inside the "collapsible element" is less than the given {Number}, the element will be visible all the time
};
var o = $.extend({}, defaults, options);

return this.each(function(index) {
var $$ = $(this), $referent, $sw, $cllps, $tr, container, toggleTxt, toggleClass;

// --- functions:
(o.switchPosition == 'before') ? ($.fn.findSibling = $.fn.prev, $.fn.insrt = $.fn.before) : ($.fn.findSibling = $.fn.next, $.fn.insrt = $.fn.after);

// --- var container
if (this.id.length) { container = '#' + this.id;
} else if (this.className.length) { container = this.tagName.toLowerCase() + '.' + this.className.split(' ').join('.');
} else { container = this.tagName.toLowerCase();}

// --- var $referent
if (o.ref && $$.find(o.ref).length) {
(o.switchPosition == 'before') ? $referent = $$.find("'" + o.ref + ":first'") : $referent = $$.find("'" + o.ref + ":last'");
} else { return; }

// end the script if the length of the collapsible element isn't long enough.
if (o.cllpsLength && $$.closest(container).find(o.cllpsEl).text().length < o.cllpsLength) {$$.closest(container).find(o.cllpsEl).addClass('dont_touch'); return;}

// --- if expandAll() claims initial state = hidden:
(o.initTxt == 'show') ? (toggleTxt = o.expTxt, toggleClass='') : (toggleTxt = o.cllpsTxt, toggleClass='open');
if (o.state == 'hidden') { $$.find(o.cllpsEl + ':not(.shown, .dont_touch)').hide().findSibling().find('> a.open').removeClass('open'); }

(o.oneSwitch) ? ($referent.insrt('<p class="switch"><a href="#" class="' + toggleClass + '">' + toggleTxt + '</a></p>')) :
($referent.insrt('<p class="switch"><a href="#" class="">' + o.expTxt + '</a>&nbsp;|&nbsp;<a href="#" class="open">' + o.cllpsTxt + '</a></p>'));

// --- var $sw, $cllps, $tr :
$sw = $referent.findSibling('p').find('a');
$cllps = $$.closest(container).find(o.cllpsEl).not('.dont_touch');
if (o.trigger) {$tr = $$.closest(container).find(o.trigger + ' > a');}

if (o.child) {
$$.find(o.cllpsEl + '.shown').show().findSibling().find('> a').addClass('open').text(o.cllpsTxt);
window.$vrbls = { kt1 : o.expTxt, kt2 : o.cllpsTxt };
}

var scrollElem;
(typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body');

$sw.click(function() {
var $switch = $(this),
$c = $switch.closest(container).find(o.cllpsEl +':first'),
cOffset = $c.offset().top;
if (o.parent) {
var kidTxt1 = $vrbls.kt1, kidTxt2 = $vrbls.kt2,
kidTxt = ($switch.text() == o.expTxt) ? kidTxt2 : kidTxt1;
$switch.parent().nextAll().children('p.switch').find('a').text(kidTxt);
}
if ($switch.text() == o.expTxt) {
if (o.oneSwitch) {$switch.text(o.cllpsTxt).attr('class', 'open');}
$tr.addClass('open');
$cllps[o.showMethod](o.speed);
} else {
if (o.oneSwitch) {$switch.text(o.expTxt).attr('class', '');}
$tr.removeClass('open');
$cllps[o.hideMethod](o.speed);
if (o.scroll && cOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: cOffset},600);}
}
return false;
});
/* -----------------------------------------------
To save file size, feel free to remove the following code if you don't use the option: 'localLinks: true'
-------------------------------------------------- */
if (o.localLinks) {
var localLink = $(container).find(o.localLinks);
if (localLink.length) {
// based on http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:
$(localLink).click(function() {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var tOffset = $target.offset().top;
$(scrollElem).animate({scrollTop: tOffset},600);
return false;
}
});
}
}
/* -----------------------------------------------
Feel free to remove the following function if you don't use the options: 'localLinks: true' or 'scroll: true'
-------------------------------------------------- */
//http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i < argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop() > 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop() > 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
};
return [];
};
/* --- end of the optional code --- */
});};

/* ---------------------------------------------
Toggler - http://www.adipalaz.com/experiments/jquery/expand.html
When using this script, please keep the above url intact.
*** Feel free to remove the Toggler script if you need only the plugin expandAll().
------------------------------------------------ */
$.fn.toggler = function(options) {
var defaults = {
cllpsEl : 'div.collapse',
method : 'slideToggle',
speed : 'slow',
container : '', //the common container of all groups with collapsible content (optional)
initShow : '.shown' //the initially expanded sections (optional)
};
var o = $.extend({}, defaults, options);

var $this = $(this);
$this.wrapInner('<a style="display:block" href="#" title="Expand/Collapse" />');
if (o.initShow) {$(o.initShow).addClass('shown');}
$this.next(o.cllpsEl + ':not(.shown)').hide();
return this.each(function() {
var container;
(o.container) ? container = o.container : container = 'html';
if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); }
$(this).click(function() {
$(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);
return false;
});
});};
/* ---------------------------------------------
Feel free to remove any of the following functions if you don't need it.
------------------------------------------------ */
$.fn.toggleHeight = function(speed, easing, callback) {
return this.animate({height: 'toggle'}, speed, easing, callback);
};
//http://www.learningjquery.com/2008/02/simple-effects-plugins:
$.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
/* --- end of the optional code --- */
})(jQuery);


index.php(in my header)

<script src="./js/jquery-1.4.2.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="js/expand.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(function() {
// --- Using the default options:
$("div.expand").toggler({method: "slideFadeToggle"});
// --- Other options:
//$("div.expand").toggler({method: "toggle", speed: 0});
//$("div.expand").toggler({method: "toggle"});
//$("div.expand").toggler({speed: "fast"});
//$("div.expand").toggler({method: "fadeToggle"});
//$("div.expand").toggler({method: "slideFadeToggle"});
});
//--><!]]>

JAB Creations

2:23 am on Sep 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First off don't rely on jQuery, it's absolutely atrocious and at 70KB you've already alienated dial-up users (there are many more then you think) and jQuery isn't actual JavaScript so you're quickly putting yourself in a position of relying on it. I've had nothing but trouble with jQuery so it's just a fair warning.

Secondly I'm going to guess that you're trying to set cookies with JavaScript? If so don't...it can kind of be done though Safari doesn't like it. You'll want to use AJAX to send the information back to the server and have the server set the cookie and/or save it to a session variable.

- John

Surplu

12:23 pm on Sep 5, 2010 (gmt 0)

10+ Year Member



Thanks for the reply, John. To be honest, my main area is HTML, CSS and PHP, never in my life have I used JavaScript to this level, and I have not touched AJAX at all.

Luckily, I have fixed my problem from my previous post by simply using PHP error checking, I managed to make it look neat and it doesn't matter about cookies and whatnot anymore, although your help is much appreciated.

Once again, thanks a ton!

JAB Creations

9:37 pm on Sep 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem and remember when you program JavaScript that Firefox, IE, Opera, and Safari all have unique uses in their error consoles for JavaScript. You're smart enough to look at error messages from PHP (I log all error messages...all of them ;)) and JavaScript is really easy once you get the momentum. :)

- John

Fotiman

1:23 pm on Sep 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




First off don't rely on jQuery, it's absolutely atrocious and at 70KB

Actually, the production version of jQuery is only 24k minimized and gzipped.