We Keep Coding

Want to set show/hide script visible by default

i want to set a show/hide js script that is using localstorage on by default.
$(document).ready(function () {
var sidebarVisible = localStorage.getItem('sidebar') == 'true';
$('#sidebar').toggle(sidebarVisible);
$('.bgcontainer_center').toggleClass('clicked', sidebarVisible);
$("#toggle").click(function () {
$("#sidebar").toggle("slow", function () {
localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
});
$(".bgcontainer_center").toggleClass('clicked');
});
});
This is the link to it https://jsfiddle.net/eo12xw79/67/
I can't seem to find how to set it on by default.

The reason it isn't toggled is because the sidebar key isn't present in the browser's localstorage the first time we visit the page.
There is a very simple solution, just have to check if the sidebar key exists in the localstorage and if not, create it.
$(document).ready(function () {
// BEGIN
if(!localStorage.getItem('sidebar')) {
localStorage.setItem('sidebar', 'true');
}
// END
var sidebarVisible = localStorage.getItem('sidebar') == 'true';
$('#sidebar').toggle(sidebarVisible);
$('.bgcontainer_center').toggleClass('clicked', sidebarVisible);
$("#toggle").click(function () {
$("#sidebar").toggle("slow", function () {
localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
});
$(".bgcontainer_center").toggleClass('clicked');
});
});
EDIT : I think it's useless, why ?
Because you will use the localstorage for a single variable that has no real importance.
After, this is only a personal opinion, it depends on your needs.
DUPLICATE : How to check whether a Storage item is set?

ContentTools - Unable to reactivate with custom Edit button

Im using ContentTools and everything works as expected when using the standard Ignition. However when I instead of using the Blue button add my own to Start editing/Save and Discard changes the Editor is unable to reactivate. This means that the user can Edit, then Save once. All subsequent attempts at reactivation fail silently.
Init code:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.save();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.revert();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});

Instead of using the save() and revert() methods directly I recommend you use stop(true) for save and stop(false) for cancel/revert.
The save and revert methods don't stop the editor (for example save(true) can be used to auto-save content while the user continues to edit). Using stop should allow you to restart the editor, e.g:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.stop(true);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.stop(false);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});

Redefining a jQuery dialog button

In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.
Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.
So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?
My code so far:
function OverrideDialogButtonCallbacks(sDialogInstance) {
oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
console.log(oButtons); // logs the buttons correctly
if(sDialogInstance == 'TestInstance') {
oButtons.Save = function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
}
}
}

$('#dialog').dialog({
'buttons' : {
'Save' : {
id:"btn-save", // provide the id, if you want to apply a callback based on id selector
click: function() {
//
},
},
}
});
Did you try this? to override button's callback based on the need.

No need to re-assign at all. Try this.
function OverrideDialogButtonCallbacks(dialogSelector) {
var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
.find("button:contains('Save')");
button.unbind("click").on("click", function() {
alert("save overriden!");
});
}
Call it like OverrideDialogButtonCallbacks("#dialog");
Working fiddle: http://jsfiddle.net/codovations/yzfVT/

You can get the buttons using $(..).dialog('option', 'buttons'). This returns an array of objects that you can then rewire by searching through them and adjusting the click event:
// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };
See this fiddle for an example: http://jsfiddle.net/z4TTH/2/
If necessary, you can check the text of the button using button[i].text.
UPDATE:
The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:
// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };
$('#dialog').dialog('option', 'buttons', buttons);
See this fiddle: http://jsfiddle.net/z4TTH/3/

Can you try binding your new function code with Click event of Save?
if(sDialogInstance == 'TestInstance') {
$('#'+savebtn_id).click(function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
});
}

How to retain Javascript state on page change

I have an accordion style navigation list set up so that when categories are clicked it opens up to show sub-categories that link to pages.
What I would like to do is have the accordion navigation list keep it's open or closed state when the new page opens.
I've gathered that cookies work to retain the state on refresh, but how do I retain the state when a different page is visited? All the pages have the same accordion navigation list.

Try Web Storage. Store the state of the tabs on page unload, restore the state on the page load event.

I found a solution, it uses the accordian plug-in found here, http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi and the jquery cookie.js plug-in
I added id's to the header anchor tages in the HTNL mark-up like so,
<li>
<a id="m1" class="label" href="#">Sound/Audio Systems</a>
<ul class="acitem">
<li>PA Systems</li>
<li>Loudspeakers</li>
<li>Microphones </li>
<li>DJ Equipment</li>
<li>Sound Processing Equipment</li>
</ul>
</li>
And modified the accordian.js code, I added the lines beginning with $.cookie, and the If statement in the document.ready funciton.
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active'),
currentID = "";
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
}
else {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
});
return false;
}
}
}
);
});
};
$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
var anchor = "",
elementID = $.cookie('menustate');
anchor = document.getElementById(elementID);
$(anchor).addClass('active');
$(anchor).next().show();
}
});
It works nicely, not bad for a beginner, thanks for all the advise.
Rob Fenwick

Cookies "retain state" across the full path and domain for which they are specified. So if you can get them to work for just one page, you should have them work automatically on all pages of your site.

You can still use cookies, you just have to make sure they're not specific to the one page. For example:
document.cookie = 'openitem=5; expires=somedate; path=/';
will be accessible to all pages on the site. More about cookies.

Ok so I took a look at the library you are using, it's a decent library and all but you might find it easier to find solutions to your problems if you use a more standard library like jQuery UI, it has an accordion control http://jqueryui.com/demos/accordion/ and like I mentioned there are so many people using it that the answer to most problems can be found.
But like I mentioned I did take a look at your library. As others have mentioned you would use a cookie to store the value. This library supports 'pre expanding' a particular section of the accordian, to do that you would add the expand class to the element. You can either do that server side or you can do it using JavaScript before initMenu() is called.
The other less elegant option is to trigger the click event on the anchor tag after the call to initMenu. Finally you can use jQuery's show() to show expand the section without animation.
The first thing you have to do is find out which section was clicked on, then you would store that sections name in a cookie. On page load you would get that value and expand the appropriate according section. This is what the code should kinda look like - note this is psuedo code and you have fill in the appropriate parts.
$(function() {
$(".menu.collapsible .label").click(function() {
var accordianSection = $(this).text();
rememberSection(accordianSection);
});
var section = recallSection();
if(section !== undefined) {
expandSection(section);
}
});
The expandSection function can look something like this:
var sectionLink = $(".menu.collapsible .label").filter(function() {
return $(this).text() == section;
});
sectionLink.trigger('click');

Get current state (open, closed) with mootools 1.12 Fx.Slide

I'm using this Fx.Slide script in my site:
var togglers = $$('.toggler'), expanders = $$('.expandable');
togglers.each(function(toggler, index){
var fx = new Fx.Slide(expanders[index]).hide();
toggler.addEvents({
click: function(e){
e = new Event(e);
fx.toggle();
e.stop();
return false;
}
});
});
Which is working just fine. What I wasn't able to do is get the current state of the slide so I can assign some open/closed icons on the toggler element.
Thanks!

Hi you can use the attribue open of the slider:
if(fx.open){
//whatever you need to do
}else{
//whatever you need to do
}
i think you need put the slider in an array to be able to access them later...
hope this helps

You could even store the Fx.Slides in the togglers themselves, if you don't want to keep a separate array.
[...]
togglers.each(function(toggler, index){
var fx = new Fx.Slide(expanders[index]).hide();
expanders[index].store('slide',fx)
toggler.addEvents({
[...]
});
});
Then later you can check the status, like mklfarha said:
if(expanders[index].retrieve('slide').open){
//do some stuff
}