www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with XML parsing and jQuery Random Script

  1. #1
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33

    Problem with XML parsing and jQuery Random Script

    I am trying to grab some content from an XML file, have it appended to a div, and have that content displayed randomly. Everything seems to work when I have the content I wanted randomized put inside the div container and not in the xml file, but when I put the content I want randomized in the xml file, then have it parsed and appended to the primary div container, the primary div container has display: none put on it, thus nothing is shown, and the content does not seemed to be getting randomly shown according to what I see with Firebug.

    My code is below. Any help is greatly appreciated.

    Thanks


    The XML
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    
    <quotes>
    	<quote>
    		<quotetext>We've been relying on Jack and the ScriptsConnect team for years for those situations when we need professional help. They come quickly. The problem is resolved. We are back in business. What more could you ask for?</quotetext>
    		<quoteauthor>Russ Polansky</quoteauthor>
    		<quoteauthorposition>Associate Publisher</quoteauthorposition>
    		<quotecompany>Test Company</quotecompany>
    	</quote>
    	<quote>
    		<quotetext>An easy to work with, technology advanced team, that is willing to tackle any computer problem.</quotetext>
    		<quoteauthor>Scott Mitchells</quoteauthor>
    		<quoteauthorposition>President</quoteauthorposition>
    		<quotecompany>Test Company</quotecompany>
    	</quote>
    	<quote>
    		<quotetext>CoreTechs has been working with us in database development for many years and we're extremely happy with their service and responsiveness.</quotetext>
    		<quoteauthor>Jan Dachemka</quoteauthor>
    		<quoteauthorposition>President</quoteauthorposition>
    		<quotecompany>Test Company</quotecompany>
    	</quote>
    	<quote>
    		<quotetext>Lorem ipsum dolor sit abend se dolum.</quotetext>
    		<quoteauthor>Jan Dvorak</quoteauthor>
    		<quoteauthorposition>President</quoteauthorposition>
    		<quotecompany>Test Company</quotecompany>
    	</quote>
    	<quote>
    		<quotetext>An easy to work with, technology advanced team, that is willing to tackle any computer problem.</quotetext>
    		<quoteauthor>John Williams</quoteauthor>
    		<quoteauthorposition>President</quoteauthorposition>
    		<quotecompany>Test Company</quotecompany>
    	</quote>
    </quotes>
    Everything else, which I've put in the html file:
    Code:
    <html>
    <head>
    
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    (function( $ ){
    	$.fn.contentRotator = function(options){
    		
    		// set default config options
    		var defaults = {
    			wrapper_class: 'home_quotes_column',
    			group_size: 3,
    			random: true,
    			duration_in: 300,
    			duration_out: 300,
    			delay: 2000,
    			pause_on_rollover: true
    		};
    		
    		// set methods
    		var methods = {
    			
    			// this method will switch to the next option
    			next: function(ob){					
    				
    				// if the size of the content array is 0, reset
    				if(content.length < 1){
    					content = showed;
    					showed = [];
    				}
    				// if the sizeof the overall content array is less then the group size, but still greater than 0
    				if(content.length < opts.group_size){
    					// if the showed size is > 0
    					var tosize = (opts.group_size > showed.length) ? showed.length : opts.group_size;
    					for(i=content.length; i < tosize; i++){
    						if(opts.random == true){
    							add_entry = Math.floor(Math.random() * showed.length);
    						}
    						else{
    							add_entry = 0;
    						}
    						content.push(showed[add_entry]);
    						showed.splice(add_entry,1);
    					}				
    				}
    			
    				// grab the group to show
    				var current = [];
    				for(i=0; i<opts.group_size;i++){
    					
    					// determine the index of the image
    					if(opts.random == true){
    						current_entry = Math.floor(Math.random() * content.length);
    					}
    					else{
    						current_entry = 0;
    					}
    					
    					// update arrays to reflect the pulled image
    					current[i] = content[current_entry];
    					showed.push(content[current_entry]);
    					content.splice(current_entry,1);
    				}
    				
    				// transition to the new group
    				ob.fadeOut(opts.duration_out, function(){
    					ob.find('.' + opts.wrapper_class).remove();
    					for(i=0; i < current.length; i++)
    					{
    						ob.append(current[i]);
    					}
    					ob.fadeIn(opts.duration_in);
    				});
    			}
    		};
    		
    		// placeholder for interval
    		var interval;
    		
    		// update options to include arguments
    		var opts = $.extend(defaults, options);
    
    		// array of initialized content groups
    		var content = [];
    		var showed = [];
    		
    		// handle the stuff
    		return this.each(function(){
    			
    			// make reference to THIS
    			$this = $(this);
    			
    			// hide all images
    			//$this.find('.' + opts.wrapper_class).hide();
    			
    			// throw them all in the groups array
    			$.extend(content,$this.find('.' + opts.wrapper_class));
    			
    			$this.find('.' + opts.wrapper_class).remove();
    			
    			// start rotating (if we have anything to show
    			if(content.length > 0){
    				methods.next($this)
    				interval = setInterval(function(){	methods.next($this)}, opts.delay);
    				if(opts.pause_on_rollover == true){
    					$this.mouseover(function(){
    						clearInterval(interval);
    					});
    					$this.mouseout(function(){	
    						interval = setInterval(function(){	methods.next($this)}, opts.delay);
    					});
    				}
    			}
    		});		
    	};
    })(jQuery);
    $(document).ready(function(){
        
    	$.ajax({
    		url: 'quotes.xml',  							// name of file with our data
            dataType: 'xml',    								// type of file we will be reading
            success: corequotes,     						// name of function to call when done reading file
            error: loadfail     								// name of function to call when failed to read
        });
    	
    	function loadfail(){
            //alert("Error: Failed to read file!");
    		$('#quotes_scroller').append('<div id="quotes_error_container" style="text-align: center;"><div style="padding-top: 90px;">XML file not found.</div><div class="clear"></div>');
        }
    	
    	// CoreTechs Quotes
        function corequotes(document){
            $(document).find("quote").each(function(){
    			
    			$('#quotes_scroller').append('<div class="home_quotes_column"><div class="home_quotes_text"><img class="home_quote_icon" src="<?php echo SITE_ROOT; ?>/images/icon_quotes_red.png" alt="" />' + $(this).find('quotetext').text() + '</div><div class="home_quotes_author">&mdash;' + $(this).find('quoteauthor').text() + '<br/>' + $(this).find('quoteauthorposition').text() + '<br/>' + $(this).find('quotecompany').text() + '</div><div class="clear"></div></div>');
    			
    		});
        }
    });
    
    $(document).ready(function(){
    	var cache = [];
    	var itemCount = $('#quotes_scroller img').length -1;
    	$('#quotes_scroller').hide();
    	$('#quotes_scroller img').each(function(i){
    		var cacheItem = document.createElement('img');
    		cacheItem.src = $(this).attr('src');
    		cache.push(cacheItem);
    		if(i == itemCount){
    			$('#quotes_scroller').contentRotator({
    				wrapper_class: 'home_quotes_column',
    				group_size: 3,
    				random: true,
    				duration_in: 300,
    				duration_out: 300,
    				delay: 8000,
    				pause_on_rollover: true
    			});
    		}
    	});
    });
    </script>
    </head>
    <body>
    
    <div id="quotes_scroller"></div>
    
    </body>
    </html>
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    if you don't want the display:none, what's this line doing?
    Code:
    $('#quotes_scroller').hide();
    or am I missing the point?

  3. #3
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    That line initially hides the container, but then is set to display block when the child elements are displayed randomly. Something is wrong, which causes the parent to remain hidden.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  4. #4
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    Problem is solved. Thanks.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles