| rdbok |
12-10-2012 11:03 AM |
getScript doesn't load all scripts
So I have this website where I load content from another .html in into a container using ajax. The problem that I have been facing is that the loaded content with a gallery that uses a script called "mosaic.js", isn't working. The weird thing is that the getScript does work for another script.
This is the script that I used for the content replacer.
http://net.tutsplus.com/tutorials/ja...t-with-jquery/
Quote:
$(document).ready(function() {
var hash = window.location.hash.substr(1); var href = $('#nav a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-4)){ var toLoad = hash+'.php #projectcontainer4'; $('#projectcontainer4').load(toLoad) } });
$('#nav a').live('click', function () {
var toLoad = $(this).attr('href')+' #projectcontainer4'; $('#projectcontainer4').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('LOADING...'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
$('#projectcontainer4').empty();
function loadContent() { $('#projectcontainer4').load(toLoad,'',showNewContent) }
function showNewContent() { $.getScript("mosaic.js"); $('#projectcontainer4').show('normal',hideLoader()); }
function hideLoader() { $('#load').fadeOut('normal');
$('html, body').animate({scrollTop : 200},800);
}
return false;
});
});
|
This is the script that doesn't work in the loaded content
Quote:
(function($){
if(!$.omr){
$.omr = new Object();
};
$.omr.mosaic = function(el, options){
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("omr.mosaic", base);
base.init = function(){
base.options = $.extend({},$.omr.mosaic.defaultOptions, options);
base.load_box();
};
// Preload Images
base.load_box = function(){
// Hide until window loaded, then fade in if (base.options.preload){
$(base.options.backdrop, base.el).hide();
$(base.options.overlay, base.el).hide();
$(window).load(function(){
// IE transparency fade fix
if(base.options.options.animation == 'fade' && $(base.options.overlay, base.el).css('opacity') == 0 ) $(base.options.overlay, base.el).css('filter', 'alpha(opacity=0)');
$(base.options.overlay, base.el).fadeIn(200, function(){
$(base.options.backdrop, base.el).fadeIn(200);
});
base.allow_hover();
}); }else{
$(base.options.backdrop, base.el).show();
$(base.options.overlay , base.el).show();
base.allow_hover(); }
};
// Initialize hover animations
base.allow_hover = function(){
// Select animation switch(base.options.animation){
// Handle fade animations
case 'fade':
$(base.el).hover(function () {
$(base.options.overlay, base.el).stop().fadeTo(base.options.speed, base.options.opacity);
},function () {
$(base.options.overlay, base.el).stop().fadeTo(base.options.speed, 0);
});
break;
// Handle slide animations
case 'slide':
// Grab default overlay x,y position
startX = $(base.options.overlay, base.el).css(base.options.anchor_x) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_x) : '0px';
startY = $(base.options.overlay, base.el).css(base.options.anchor_y) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_y) : '0px';;
var hoverState = {};
hoverState[base.options.anchor_x] = base.options.hover_x;
hoverState[base.options.anchor_y] = base.options.hover_y;
var endState = {};
endState[base.options.anchor_x] = startX;
endState[base.options.anchor_y] = startY;
$(base.el).hover(function () {
$(base.options.overlay, base.el).stop().animate(hoverState, base.options.speed);
},function () {
$(base.options.overlay, base.el).stop().animate(endState, base.options.speed);
});
break; };
};
// Make it go!
base.init();
};
$.omr.mosaic.defaultOptions = {
animation : 'fade',
speed : 150,
opacity : 1,
preload : 0,
anchor_x : 'left',
anchor_y : 'bottom',
hover_x : '0px',
hover_y : '67px',
overlay : '.mosaic-overlay', //Mosaic overlay backdrop : '.mosaic-backdrop' //Mosaic backdrop
};
$.fn.mosaic = function(options){
return this.each(function(){
(new $.omr.mosaic(this, options));
});
};
})(jQuery);
|
And this is the script that does actually work when I load it with the same method.
Quote:
// JavaScript Document
$('.ppt li:gt(0)').hide(); $('.ppt li:last').addClass('last'); $('.ppt li:first').addClass('first'); $('#play').hide();
var cur = $('.ppt li:first'); var interval;
$('#fwd').click( function() { goFwd(); showPause(); } );
$('#back').click( function() { goBack(); showPause(); } );
function goFwd() { stop(); forward(); start(); }
function goBack() { stop(); back(); start(); }
function back() { cur.fadeOut( 500 ); if ( cur.attr('class') == 'first' ) cur = $('.ppt li:last'); else cur = cur.prev(); cur.fadeIn( 500 );}function forward() {cur.fadeOut( 500 );if ( cur.attr('class') == 'last' )cur = $('.ppt li:first');else cur = cur.next();cur.fadeIn( 500 );}function showPause() {$('#play').hide();$('#stop').show();}function showPlay() {$('#stop').hide();$('#play').show();}function stop() {clearInterval( interval );}$(function() {start();} );
|
|
