document.createElement???

[TheJoshMan]

Ok, so javascript is DEFINITELY not my strong point... I'm working with a jquery script plugin which takes the "title" text of any image and turns it into a "caption" beneath the image. What I'm trying to do is to tell it to take the title text of one particular image and display it differently than all the rest.

Here is the original line of code which tells it what to do:

var _span = $(document.createElement('span')).addClass('caption');

That works perfectly, but when I try to add in a piece that tells it to getElementById "logo" and THEN create a span and add the class "caption" to it... It breaks.

Here's what I tried:

var _span = $(document.getElementById('logo')).createElement('span').addClass('caption2');

Here's a link to zipped folder including all files necessary to run the demo:
http://www.eight7teen.com/Galleria.zip


I forgot to mention, I "commented out" the section of code that I added that makes it break so that you can see how it's supposed to work when it DOES work... The file is called "jquery.galleria.js" and it's in the folder "trunk". You should find the line of code fairly easily as I put about 15 empty lines on top and bottom of it.

[TheJoshMan]

Since it seems no one wants to download a zipped folder... (understandable)

Here's a live demo WITH an attempted code fix which should be easy to find:
http://www.eight7teen.com/Galleria/demo/Demo.html

[Twey]

The createElement() function is a property of the document, not of individual elements. I presume you intended to make the new element a child of the old. When using jQuery, and especially when writing plugins for it, do not use the '$' alias -- reference it directly as 'jQuery'.

jQuery('#logo').append(jQuery.create('span', {'class' : 'caption'}));

If you want to assign that span to a variable, you have to declare it separately:

var _span;
jQuery('#logo').append(_span = jQuery.create('span', {'class' : 'caption'}));

[TheJoshMan]

Thanks for the reply Twey... I didn't know about not using the "$", I was just mimicking what the script was already using (or trying to anyway).
I used both your examples, but neither of them worked. I keep getting the "Object doesn't support this property or method" error no matter what I try.
Since it's probably pretty hard to figure out a solution based on ONE line of code... The next post will contain the entire script, (it's too long to fit in this post).

[TheJoshMan]

;(function($){

var $$;

$$ = $.fn.galleria = function($options) {

	if (!$$.hasCSS()) { return false; }

	$.historyInit($$.onPageLoad);

	var $defaults = {
		insert      : '.galleria_container',
		history     : true,
		clickNext   : false,
		onImage     : function(image,caption,thumb) {},
		onThumb     : function(thumb) {}
	};

	var $opts = $.extend($defaults, $options);

	for (var i in $opts) {
		$.galleria[i]  = $opts[i];
	}

	var _insert = ( $($opts.insert).is($opts.insert) ) ? 
		$($opts.insert) : 
		jQuery(document.createElement('div')).insertBefore(this);

	var _div = $(document.createElement('div')).addClass('galleria_wrapper');

	var _span = $(document.createElement('span')).addClass('caption');


//Twey's line of "code fix"///////////////////////////////////////
var _span;

jQuery('logo')
    .appendChild(_span = document.createElement('span'))
    .addClass('caption2');
///////////////////////////////////////////////////////////////*/

	_insert.addClass('galleria_container').append(_div).append(_span);
	

	
	return this.each(function(){

		$(this).addClass('galleria');

		$(this).children('li').each(function(i) {

			var _container = $(this);

			var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts;

			_o.clickNext = $(this).is(':only-child') ? false : _o.clickNext;

			var _a = $(this).find('a').is('a') ? $(this).find('a') : false;
			
			// reference the original image as a variable and hide it
			var _img = $(this).children('img').css('display','none');

			var _src = _a ? _a.attr('href') : _img.attr('src');

			var _title = _a ? _a.attr('title') : _img.attr('title');
     
			var _loader = new Image();
			
			// check url and activate container if match
			if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) {
				_container.siblings('.active').removeClass('active');
				_container.addClass('active');
			}

			$(_loader).load(function () {

				$(this).attr('alt',_img.attr('alt'));

				var _thumb = _a ? 
					_a.find('img').addClass('thumb noscale').css('display','none') :
					_img.clone(true).addClass('thumb').css('display','none');
				
				if (_a) { _a.replaceWith(_thumb); }
				
				if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
					var w = Math.ceil( _img.width() / _img.height() * _container.height() );
					var h = Math.ceil( _img.height() / _img.width() * _container.width() );
					if (w < h) {
						_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
					} else {
						_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 });
					}
				} else { // Center thumbnails.
					// a tiny timer fixed the width/height
					window.setTimeout(function() {
						_thumb.css({
							marginLeft: -( _thumb.width() - _container.width() )/2, 
							marginTop:  -( _thumb.height() - _container.height() )/2
						});
					}, 1);
				}
				
				// add the rel attribute
				_thumb.attr('rel',_src);
				
				// add the title attribute
				_thumb.attr('title',_title);
				
				// add the click functionality to the _thumb
				_thumb.click(function() {
					$.galleria.activate(_src);
				});
				
				// hover classes for IE6
				_thumb.hover(
					function() { $(this).addClass('hover'); },
					function() { $(this).removeClass('hover'); }
				);
				_container.hover(
					function() { _container.addClass('hover'); },
					function() { _container.removeClass('hover'); }
				);
				_container.prepend(_thumb);
				_thumb.css('display','block');
				_o.onThumb(jQuery(_thumb));
				if (_container.hasClass('active')) {
					$.galleria.activate(_src);
					//_span.text(_title);
				}
				_img.remove();
				
			}).error(function () {
				
				// Error handling
			    _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');
			
			}).attr('src', _src);
		});
	});
};
$$.nextSelector = function(selector) {
	return $(selector).is(':last-child') ?
		   $(selector).siblings(':first-child') :
    	   $(selector).next();    	   
};
$$.previousSelector = function(selector) {
	return $(selector).is(':first-child') ?
		   $(selector).siblings(':last-child') :
    	   $(selector).prev();
    	   
};

$$.hasCSS = function()  {
	$('body').append(
		$(document.createElement('div')).attr('id','css_test')
		.css({ width:'1px', height:'1px', display:'none' })
	);
	var _v = ($('#css_test').width() != 1) ? false : true;
	$('#css_test').remove();
	return _v;
};

$$.onPageLoad = function(_src) {	
	
	// get the wrapper
	var _wrapper = $('.galleria_wrapper');
	
	// get the thumb
	var _thumb = $('.galleria img[@rel="'+_src+'"]');
	
	if (_src) {
		
		// new hash location
		if ($.galleria.history) {
			window.location = window.location.href.replace(/\#.*/,'') + '#' + _src;
		}
		
		// alter the active classes
		_thumb.parents('li').siblings('.active').removeClass('active');
		_thumb.parents('li').addClass('active');
	
		// define a new image
		var _img   = $(new Image()).attr('src',_src).addClass('replaced');

		// empty the wrapper and insert the new image
		_wrapper.empty().append(_img);

		// insert the caption
		_wrapper.siblings('.caption').text(_thumb.attr('title'));
		
		// fire the onImage function to customize the loaded image's features
		$.galleria.onImage(_img,_wrapper.siblings('.caption'),_thumb);
		
		// add clickable image helper
		if($.galleria.clickNext) {
			_img.css('cursor','pointer').click(function() { $.galleria.next(); })
		}
		
	} else {
		
		// clean up the container if none are active
		_wrapper.siblings().andSelf().empty();
		
		// remove active classes
		$('.galleria li.active').removeClass('active');
	}

	// place the source in the galleria.current variable
	$.galleria.current = _src;
	
}

$.extend({galleria : {
	current : '',
	onImage : function(){},
	activate : function(_src) { 
		if ($.galleria.history) {
			$.historyLoad(_src);
		} else {
			$$.onPageLoad(_src);
		}
	},
	next : function() {
		var _next = $($$.nextSelector($('.galleria img[@rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
		$.galleria.activate(_next);
	},
	prev : function() {
		var _prev = $($$.previousSelector($('.galleria img[@rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
		$.galleria.activate(_prev);
	}
}
});

})(jQuery);


jQuery.extend({historyCurrentHash:undefined,historyCallback:undefined,historyInit:function(callback){jQuery.historyCallback=callback;var current_hash=location.hash;jQuery.historyCurrentHash=current_hash;if(jQuery.browser.msie){if(jQuery.historyCurrentHash==''){jQuery.historyCurrentHash='#'}$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentWindow.document;iframe.open();iframe.close();iframe.location.hash=current_hash}else if($.browser.safari){jQuery.historyBackStack=[];jQuery.historyBackStack.length=history.length;jQuery.historyForwardStack=[];jQuery.isFirst=true}jQuery.historyCallback(current_hash.replace(/^#/,''));setInterval(jQuery.historyCheck,100)},historyAddHistory:function(hash){jQuery.historyBackStack.push(hash);jQuery.historyForwardStack.length=0;this.isFirst=true},historyCheck:function(){if(jQuery.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentDocument||ihistory.contentWindow.document;var current_hash=iframe.location.hash;if(current_hash!=jQuery.historyCurrentHash){location.hash=current_hash;jQuery.historyCurrentHash=current_hash;jQuery.historyCallback(current_hash.replace(/^#/,''))}}else if($.browser.safari){if(!jQuery.dontCheck){var historyDelta=history.length-jQuery.historyBackStack.length;if(historyDelta){jQuery.isFirst=false;if(historyDelta<0){for(var i=0;i<Math.abs(historyDelta);i++)jQuery.historyForwardStack.unshift(jQuery.historyBackStack.pop())}else{for(var i=0;i<historyDelta;i++)jQuery.historyBackStack.push(jQuery.historyForwardStack.shift())}var cachedHash=jQuery.historyBackStack[jQuery.historyBackStack.length-1];if(cachedHash!=undefined){jQuery.historyCurrentHash=location.hash;jQuery.historyCallback(cachedHash)}}else if(jQuery.historyBackStack[jQuery.historyBackStack.length-1]==undefined&&!jQuery.isFirst){if(document.URL.indexOf('#')>=0){jQuery.historyCallback(document.URL.split('#')[1])}else{var current_hash=location.hash;jQuery.historyCallback('')}jQuery.isFirst=true}}}else{var current_hash=location.hash;if(current_hash!=jQuery.historyCurrentHash){jQuery.historyCurrentHash=current_hash;jQuery.historyCallback(current_hash.replace(/^#/,''))}}},historyLoad:function(hash){var newhash;if(jQuery.browser.safari){newhash=hash}else{newhash='#'+hash;location.hash=newhash}jQuery.historyCurrentHash=newhash;if(jQuery.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentWindow.document;iframe.open();iframe.close();iframe.location.hash=newhash;jQuery.historyCallback(hash)}else if(jQuery.browser.safari){jQuery.dontCheck=true;this.historyAddHistory(hash);var fn=function(){jQuery.dontCheck=false};window.setTimeout(fn,200);jQuery.historyCallback(hash);location.hash=newhash}else{jQuery.historyCallback(hash)}}});

I had to remove the giant "legal disclaimer" comment from the top to be able to even fit it into one post.

[TheJoshMan]

anybody have any ideas?

[Twey]

Please don't bump your posts quite so vigorously. It might be worth a bump if nobody's replied after a couple of days, certainly not after only two hours.

Er, your _span variable is already being used there. Would you mind telling me exactly what you're attempting to do, and where the error occurs?

[TheJoshMan]

Well, the idea behind the script is that:

1) It takes every list item of a certain <ul> class and turns the fullsized image into a thumbnail
2)It then wraps the full sized image in a div under the thumbnails and adds "special effects"
3)It reads the "title" text of each image and assigns a span under the full sized image then displays the "title" text as a caption.


What I'm trying to achieve is to make it so that one particular picture's caption can have separate styling from the rest of them. Since the caption is generated along with the span which holds it, I'm trying to duplicate the function which reads the title text and displays it in a span as a caption. This way I could assign a separate class to that caption and style it differently.