Forgive me as I ask what is wrong with my JS. I am really new to all of this.
I've been redesigning my portfolio site and have hit a wall trying to put two different JavaScript applications together. I want my site to be just one page and use JS to view all the content. In order to do this I am using two different Jquery apps.
This accordion http://jquery.bassistance.de/accordion/demo/?p=1.1.1
And the jQuery:jqGalScroll v2.1 photo gallery
I brought the two apps together and placed them into my html doc and have no run into an odd problem. With a cleared cache, the first time I view the site the apps work as they should. When I look at my site a second time the content space for my accordion goes on forever. The accordion still works but there is no cap in length for the content area. So basically one code is overriding the other and I'm not sure how to fix it. Any input is greatly appreciated.
Added: the code for the gallery (function($) { $.fn.jqGalScroll = function(options){ return this.each(function(i){ var el = this el.curImage = 0; el.jqthis = $(this).css({position:'relative'}); el.jqchildren = el.jqthis.children(); el.opts = $.extend({}, jqGalScroll, options); el.index = i; el.totalChildren = el.jqchildren.size(); var width,height;
switch(el.opts.direction){
case 'horizontal':
width = el.totalChildren *el.opts.width;
height = el.opts.height;
break;
case 'vertical':
width = el.opts.width;
height = el.totalChildren *el.opts.height;
break;
default:
width = el.totalChildren *el.opts.width;
height = el.totalChildren *el.opts.height;
break;
};
el.container = $('<div id="jqGS'+i+'" class="jqGSContainer">').css({position:'relative'});
el.ImgContainer = $('<div class="jqGSImgContainer" style="height:'+el.opts.height+'px;position:relative;overflow:hidden">')
.css({height:el.opts.height,width:el.opts.width,position:'relative',overflow:'hidden'});
el.jqthis.css({height:height,width:width});
el.jqthis.wrap(el.container);
el.jqthis.wrap(el.ImgContainer);
el.pagination = $('<div class="jqGSPagination">');
el.jqthis.parent().parent().append(el.pagination);
var jqul = $('<ul>').appendTo(el.pagination);
var pos = {x:0,y:0};
el.jqchildren
.each(function(j){
var selected = '';
if(j == 0) selected = 'selected';
var $a = $('<a href="#'+(j)+'" class="'+selected+'">'+(j+1)+'</a>').click(function(){
var href = this.index;//href.replace(/^.*#/, '');
el.pagination.find('.selected').removeClass('selected');
$(this).addClass('selected');
var params = {};
if( el.opts.direction == 'diagonal'){
params = {right:(el.opts.width*href),bottom:(el.opts.height*href)}
}
else if( el.opts.direction == 'vertical'){
params = {bottom:(el.opts.height*href)}
}
else if( el.opts.direction == 'horizontal'){
params = {right:(el.opts.width*href)}
};
el.jqthis.stop().animate(params,el.opts.speed, el.opts.ease);
index = href;
return false;
});
var n = $a.get(0);
n.index = j;
$('<li>').appendTo(jqul).append($a);
if( el.opts.direction == 'diagonal'){
pos.x = j * el.opts.width;
pos.y = j * el.opts.height;
}
else if( el.opts.direction == 'horizontal'){
pos.x = j * el.opts.width;
}
else if( el.opts.direction == 'vertical'){
pos.y = j * el.opts.height;
};
var jqchild = $(this).css({height:el.opts.height,width:el.opts.width,position:'absolute',left:pos.x, top:pos.y});
var jqimg = jqchild.find('img').hide()
if(jqimg.parent().is('a')){
var p = jqimg.parent();
jqimg.get(0).linkHref = p.attr('href');
p.remove();
jqimg.appendTo(jqchild);
};
jqimg.click(function(){
var next = n.index + 1;
if((n.index + 1) == el.totalChildren ){
el.pagination.find('[href$=#0]').click();
}
else{
el.pagination.find('[href$=#'+next+']').click();
}
});
var $loader = $('<div class="jqGSLoader">').appendTo(jqchild);
var $titleHolder = $('<div class="jqGSTitle">').appendTo(jqchild).css({opacity:el.opts.titleOpacity}).hide();
var image = new Image();
image.onload = function(){
image.onload = null;
$loader.fadeOut();
jqimg.css({marginLeft:-image.width*.5,marginTop:-image.height*.5,position:'absolute',left:'50%',top:'50%'}).fadeIn();
var alt = jqimg.attr('alt');
if(typeof alt != 'undefined'){
$titleHolder.text(alt).fadeIn();
}
};
image.src = jqimg.attr('src');
});
}); // end : this.each(function()
}; // end : $.fn.jqGalScroll
jqGalScroll = {
ease: null,
speed:0,
height: 500,
width: 500,
titleOpacity : .60,
direction : 'horizontal' // vertical horizontal diagonal
};
})(jQuery)
The code for the accordion: ;(function($) {
// If the UI scope is not available, add it $.ui = $.ui || {};
$.fn.extend({ accordion: function(options, data) { var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
if (typeof options == "string") {
var accordion = $.data(this, "ui-accordion");
accordion[options].apply(accordion, args);
// INIT with optional options
} else if (!$(this).is(".ui-accordion"))
$.data(this, "ui-accordion", new $.ui.accordion(this, options));
});
},
// deprecated, use accordion("activate", index) instead
activate: function(index) {
return this.accordion("activate", index);
}
});
$.ui.accordion = function(container, options) {
// setup configuration
this.options = options = $.extend({}, $.ui.accordion.defaults, options);
this.element = container;
$(container).addClass("ui-accordion");
if ( options.navigation ) {
var current = $(container).find("a").filter(options.navigationFilter);
if ( current.length ) {
if ( current.filter(options.header).length ) {
options.active = current;
} else {
options.active = current.parent().parent().prev();
current.addClass("current");
}
}
}
// calculate active if not specified, using the first header
options.headers = $(container).find(options.header);
options.active = findActive(options.headers, options.active);
if ( options.fillSpace ) {
var maxHeight = $(container).parent().height();
options.headers.each(function() {
maxHeight -= $(this).outerHeight();
});
var maxPadding = 0;
options.headers.next().each(function() {
maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
}).height(maxHeight - maxPadding);
} else if ( options.autoheight ) {
var maxHeight = 0;
options.headers.next().each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
}).height(maxHeight);
}
options.headers
.not(options.active || "")
.next()
.hide();
options.active.parent().andSelf().addClass(options.selectedClass);
if (options.event)
$(container).bind((options.event) + ".ui-accordion", clickHandler);
};
$.ui.accordion.prototype = { activate: function(index) { // call clickHandler with custom event clickHandler.call(this.element, { target: findActive( this.options.headers, index )[0] }); },
enable: function() {
this.options.disabled = false;
},
disable: function() {
this.options.disabled = true;
},
destroy: function() {
this.options.headers.next().css("display", "");
if ( this.options.fillSpace || this.options.autoheight ) {
this.options.headers.next().css("height", "");
}
$.removeData(this.element, "ui-accordion");
$(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
}
}
function scopeCallback(callback, scope) { return function() { return callback.apply(scope, arguments); }; }
function completed(cancel) { // if removed while animated data can be empty if (!$.data(this, "ui-accordion")) return; var instance = $.data(this, "ui-accordion"); var options = instance.options; options.running = cancel ? 0 : --options.running; if ( options.running ) return; if ( options.clearStyle ) { options.toShow.add(options.toHide).css({ height: "", overflow: "" }); } $(this).triggerHandler("change.ui-accordion", [options.data], options.change); }
function toggle(toShow, toHide, data, clickedActive, down) { var options = $.data(this, "ui-accordion").options; options.toShow = toShow; options.toHide = toHide; options.data = data; var complete = scopeCallback(completed, this);
// count elements to animate
options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
if ( options.animated ) {
if ( !options.alwaysOpen && clickedActive ) {
$.ui.accordion.animations[options.animated]({
toShow: jQuery([]),
toHide: toHide,
complete: complete,
down: down,
autoheight: options.autoheight
});
} else {
$.ui.accordion.animations[options.animated]({
toShow: toShow,
toHide: toHide,
complete: complete,
down: down,
autoheight: options.autoheight
});
}
} else {
if ( !options.alwaysOpen && clickedActive ) {
toShow.toggle();
} else {
toHide.hide();
toShow.show();
}
complete(true);
}
}
function clickHandler(event) { var options = $.data(this, "ui-accordion").options; if (options.disabled) return false;
// called only when using activate(false) to close all parts programmatically
if ( !event.target && !options.alwaysOpen ) {
options.active.parent().andSelf().toggleClass(options.selectedClass);
var toHide = options.active.next(),
data = {
instance: this,
options: options,
newHeader: jQuery([]),
oldHeader: options.active,
newContent: jQuery([]),
oldContent: toHide
},
toShow = options.active = $([]);
toggle.call(this, toShow, toHide, data );
return false;
}
// get the click target
var clicked = $(event.target);
// due to the event delegation model, we have to check if one
// of the parent elements is our actual header, and find that
if ( clicked.parents(options.header).length )
while ( !clicked.is(options.header) )
clicked = clicked.parent();
var clickedActive = clicked[0] == options.active[0];
// if animations are still active, or the active header is the target, ignore click
if (options.running || (options.alwaysOpen && clickedActive))
return false;
if (!clicked.is(options.header))
return;
// switch classes
options.active.parent().andSelf().toggleClass(options.selectedClass);
if ( !clickedActive ) {
clicked.parent().andSelf().addClass(options.selectedClass);
}
// find elements to show and hide
var toShow = clicked.next(),
toHide = options.active.next(),
//data = [clicked, options.active, toShow, toHide],
data = {
instance: this,
options: options,
newHeader: clicked,
oldHeader: options.active,
newContent: toShow,
oldContent: toHide
},
down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
options.active = clickedActive ? $([]) : clicked;
toggle.call(this, toShow, toHide, data, clickedActive, down );
return false;
};
function findActive(headers, selector) { return selector != undefined ? typeof selector == "number" ? headers.filter(":eq(" + selector + ")") : headers.not(headers.not(selector)) : selector === false ? $([]) : headers.filter(":eq(0)"); }
$.extend($.ui.accordion, { defaults: { selectedClass: "selected", alwaysOpen: true, animated: 'slide', event: "click", header: "a", autoheight: true, running: 0, navigationFilter: function() { return this.href.toLowerCase() == location.href.toLowerCase(); } }, animations: { slide: function(options, additions) { options = $.extend({ easing: "swing", duration: 300 }, options, additions); if ( !options.toHide.size() ) { options.toShow.animate({height: "show"}, options); return; } var hideHeight = options.toHide.height(), showHeight = options.toShow.height(), difference = showHeight / hideHeight; options.toShow.css({ height: 0, overflow: 'hidden' }).show(); options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{ step: function(now) { var current = (hideHeight - now) * difference; if ($.browser.msie || $.browser.opera) { current = Math.ceil(current); } options.toShow.height( current ); }, duration: options.duration, easing: options.easing, complete: function() { if ( !options.autoheight ) { options.toShow.css("height", "auto"); } options.complete(); } }); }, bounceslide: function(options) { this.slide(options, { easing: options.down ? "bounceout" : "swing", duration: options.down ? 1000 : 200 }); }, easeslide: function(options) { this.slide(options, { easing: "easeinout", duration: 700 }) } } });
})(jQuery);