We Keep Coding

How to not Open Accordion by default

Ok I do not know javascript so much, so I have created a accordion by searching in google. but the problem is the first item of the accordion is always open up, even if I do not use "toggle-active" class. The accordion works perfectly though, I mean if I use this "toggle-active" class in item number 3 for an example, then the item number 3 is open up at default.
but my problem is I have only one item & I want to open the accordion item, when it clicks only, not open by default. How can I do it?
here is the code guys:
jQuery(".toggle-item").each(function() {
jQuery(this).find('.toggle-active').siblings('.toggle-inner').slideDown(300);
});
jQuery(".toggle-item").on("click", ".toggle-title", function() {
var thisItem = jQuery(this);
var parentdiv = thisItem.parent('div').parent('div');
var active = thisItem.parent('div').find('.toggle-inner').css('display');
if (jQuery(parentdiv).attr('class') === 'accordion') {
if (active !== 'none' ) {
jQuery(parentdiv).find('.toggle-item .toggle-inner').slideUp(300);
thisItem.toggleClass('toggle-active');
} else {
jQuery(parentdiv).find('.toggle-item .toggle-inner').slideUp(300);
jQuery(parentdiv).find('.toggle-item .toggle-title').removeClass('toggle-active');
thisItem.toggleClass('toggle-active');
thisItem.siblings('.toggle-inner').slideDown(300);
}
} else {
thisItem.toggleClass('toggle-active');
thisItem.siblings('.toggle-inner').slideToggle(300);
}
return false;
});

Use http://api.jqueryui.com/accordion/#option-collapsible
This is a jquery accordion widget that you can use.
$( ".toggle-item" ).accordion("option", {
collapsible: true,
active: false
});

jQuery Modal and FancySelect Plugin

I have the jQuery FancySelect plugin installed. Works fine. Now I am trying to call it in a modal popup, but it does not work. This is the code in the parent window:
<script src="/js/fancySelect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.fancyselect').fancySelect();
var repoName = 'fancyselect'
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
}
else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
Adding class="fancyselect" to any select in the parent works. However, does not work if added to modal popup select.

Just speculating here as you did not show the HTML or the JS logic that is dealing with the popup creation. Are the elements where you wan to apply the FancySelect method, from the popup plugin already on the page when you call the:
$('.fancyselect').fancySelect();
?
If the elements are added after the page load they won't be picked up by that statement. When displaying the popup you would do somehting like
$('#popupcontainer .fancyselect').fancySelect();
So they will all the required code will be applied on that elements as well.
Update:
Following the update give in your original post, you can add something like: [not tested]
onLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
$(wrap).find('.fancyselect').fancySelect();
}
This should be triggered after the popup has been populated.

put html in a custom javascript message box

How can I put HTML in custom JavaScript message box? I have an HTML file and I want to load its content (not its code) in a message box. In front of my var I can write HTML code and it works good, but I want to load HTML with a lot of code in a separate file. Here is my JS code:
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
};

I am assuming you are able to use your custom js box as mentioned in description,
I am just providing you option to get data from html via ajax and append to your target div.
I am not sure about click event handler, but you need to handle in this way, this is just example code provided by you.
Sample code is as below
var showreadylist = function(element) {
var div = //any code that i could load my html here ! ;
$.get("htmlfile", function(data){
div = data;
div.click(function(event) {
$(".vote-notification").fadeOut("fast", function() { $(this).remove(); });
});
var where = where || 'parent';
if (where == 'parent'){
element.parent().append(div);
}
else {
element.after(div);
}
div.fadeIn("fast");
});
};

Alternatively you could use bootstrap modals
http://getbootstrap.com/javascript/#modals
Or JQuery Ui's dialog box
http://jqueryui.com/dialog

Exclude ID in Twitter Bootstrap Scrollspy

I have a Twitter Bootstrap site with a main menu full of links. I have Scrollspy setup to target that menu and works great.
However, I need scrollspy to exclude the last link in the menu. Is there any easy option or attribute to do this? Each link has an ID.
To note, the last menu item is called, "Login" has an ID and clicking it opens a Twitter Modal. However since the modal is in the code even when not loaded it's affecting the scrollspy.
So just need a way to tell exclude an ID so something hypothetically like:

I suggest you extend ScrollSpy with that desired functionality, like this https://stackoverflow.com/a/13460392/1407478
ScrollSpy extension with excludeable ID's :
// save the original function object
var _superScrollSpy = $.fn.scrollspy;
// add a array of id's that need to be excluded
$.extend( _superScrollSpy.defaults, {
excluded_ids : []
});
// create a new constructor
var ScrollSpy = function(element, options) {
_superScrollSpy.Constructor.apply( this, arguments )
}
// extend prototypes and add a super function
ScrollSpy.prototype = $.extend({}, _superScrollSpy.Constructor.prototype, {
constructor: ScrollSpy
, _super: function() {
var args = $.makeArray(arguments)
// call bootstrap core
_superScrollSpy.Constructor.prototype[args.shift()].apply(this, args)
}
, activate: function (target) {
//if target is on our exclusion list, prevent the scrollspy to activate
if ($.inArray(target, this.options.excluded_ids)>-1) {
return
}
this._super('activate', target)
}
});
// override the old initialization with the new constructor
$.fn.scrollspy = $.extend(function(option) {
var args = $.makeArray(arguments),
option = args.shift()
//this runs everytime element.scrollspy() is called
return this.each(function() {
var $this = $(this)
var data = $this.data('scrollspy'),
options = $.extend({}, _superScrollSpy.defaults, $this.data(), typeof option == 'object' && option)
if (!data) {
$this.data('scrollspy', (data = new ScrollSpy(this, options)))
}
if (typeof option == 'string') {
data[option].apply( data, args )
}
});
}, $.fn.scrollspy);
For the example at http://twitter.github.com/bootstrap/javascript.html#scrollspy, and if you want the ScrollSpy to prevent showing #mdo, it should be initialized like this
$(".scrollspy-example").scrollspy({
excluded_ids : ['#mdo']
});
you could try to place the code in a separate file, scrollspy-addon.js, include it and initialize your scrollspy with
$("#your-scrollspy-id").scrollspy({
excluded_ids : ['#login']
});

I'm not aware of any "easy" fix for your situation. However you can use the "activate" event to check for the ID and act upon it:
$('#myscrollspyID li').on('activate', function(){
var id = $(this).find("a").attr("href");
if (id === "#yourlastID"){
//do something, i.e. remove all active classes from your scrollspy object, so none are shown as active
}
}
P.S: this i pretty rough code, but I modified some code I am using myself. I use the active event to check the ID of the active item, and change the background color of the navigator bar to the color corresponding to the active item :-)

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');