Results 1 to 8 of 8

Thread: document.createElement???

  1. #1
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default document.createElement???

    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:

    Code:
    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:
    Code:
    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.
    Last edited by TheJoshMan; 08-17-2008 at 09:28 PM. Reason: forgot to say:
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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'.
    Code:
    jQuery('#logo').append(jQuery.create('span', {'class' : 'caption'}));
    If you want to assign that span to a variable, you have to declare it separately:
    Code:
    var _span;
    jQuery('#logo').append(_span = jQuery.create('span', {'class' : 'caption'}));
    Last edited by Twey; 08-17-2008 at 11:58 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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).
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Code:
    ;(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.
    Last edited by TheJoshMan; 08-18-2008 at 12:31 AM. Reason: forgot to add the "fix code"
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  6. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    anybody have any ideas?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •