Hi there,

I'm just diving into this head first(!).

Was wondering how this site has used XHR / xmlHttpRequest to load in the larger images & text:

http://letskiosk.com/

I can't seem to find the xml file or such like storing the info from which it's loading. Sorry if this is obvious.

I'm basically trying replicate the site to learn how I would implement such features on my own site, but cannot for the life of me figure it out.

Any help much appreciated.


I believe this to be the code making the request: (let me know if you need anymore info)

var l,
t,
relink,
oldhash,
base_url = "http://letskiosk.com/",
settings = {
    gap: 15,
    width: 200,
    easing: 'easeInOutQuart',
    duration: 200,
    speed: 100
};

function sorty(l, prevh, prevw, relink) {

	$(l).empty();
    $(l).animate({
        height: prevh,
        width: prevw
    }, settings.speed, function() {
        $(this).hide();
        $(this).append(relink).delay(settings.duration*4).fadeIn(settings.speed);
    });

    $(l).removeClass('open postwide');

}

function pageload(hash, tn) {

	if (tn===false) { 

	    if (hash) {
	        $("#loader").fadeIn(100);
	        $.ajax({
	            url: base_url+"home/page/" + hash,
	            cache: false,
	            success: function(html) {
	                $("#loader").fadeOut(200, function() {
	                    $("#projectthumbs").append(html);
	                    $("#projectthumbs").css('width',settings.width*3);
	                    $(".project").fadeIn(200);
	                });
	            }
	        });
	    } else {
	        $(t).empty();
	    }

	} else {
	    


	    l = t;
	    t = '#c-' + hash;
	    relink = '<a href="' + oldhash + '" rel="history"><img class="thumbimg" src="' + thumb + '" /></a>';
 //		$(".overlay", t).css('visibility','hidden'); 
		
		h = $(t).height();
		w = $(t).width();
	
	    $(t).prepend('<div class="ploader"></div>');
	    $(t + ' .ploader').css({
	        width: w,
	        height: h
	    });
	
	    if (hash) {
	        $("#loader").fadeIn(100);
	        $.ajax({
	            url: base_url+"home/page/" + hash,
	            cache: false,
	            success: function(html) {
	            	
	                sorty(l, prevh, prevw, relink);
	                prevh = $(t).height();
	                prevw = $(t).width();
	                
	                $("#loader").fadeOut(200, function() {
	                    thumb = $(t).find('img').attr('src');
	                    oldhash = $(t).find('a').attr('href');
	                    $(t).addClass('open postwide');
	                    $(t).append(html);
	                    _height = $("#c-" + hash + ' .project').height() + 30;
	                    $(t).css('height', _height);
	                    
	                    $("#projectthumbs").grid(settings, t, false, true);
	         	      	
 				      	$(".thumbimg").each(function(){
							$(this).fadeTo('slow', 0.3);
						});
						$(t).removeClass('border');
			
	                });
	            }
	        });
	    } else {
	        $(t).empty();
	    }

    }
}

$(function() {

  // on window resize, call again
    var resizeTimer = null;
    $(window).bind('resize', function() {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function(){ 
      		$("#projectthumbs").grid(settings,'',false, true);
      }, 100 );		
    });
    
 
    $(".scrolltopbutton").live("click", function() {

		$('html,body').animate({scrollTop: $(this).attr('id')}, settings.duration, settings.easing);

    });
        
    $(".thumbimg").live("mouseenter", function() {
      $(this).fadeTo('fast', 1);
    }).live("mouseleave", function() {
    	$(this).fadeTo('slow', 0.3);
    });

    settings.animateUpdate = false;
    
    $("#projectthumbs").grid(settings);

    settings.animateUpdate = true;

    $("#menu div > a[rel='history']").live('click', function() {
        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $("#projectthumbs").fadeOut(200, function(){
    						window.location = base_url + hash;
    				});    
    });

    $("#projectthumbs div > a[rel='history']").live('click', function() {
 
        var hash = this.href;
      	hash = hash.replace(/^.*#/, '');
        $.historyLoad(hash);
        //return false;
    });
    $.historyInit(pageload);
});

I would suggest that instead of trying to copy the code and trying to get it to work for you, you should break it down into smaller more manageable pieces.

Figure out how to place images on the page.
Figure out how to do rollover.
Figure out how to do fading.
Figure out how to use XMLHttpRequest.

Once you have an understanding of how to do each thing you can build it yourself without copying someone else's code.

If you just copy someone else's code and don't understand it, then you will continually have problems supporting it.

By XHR.... you mean AJAX?

Look in the jquery code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

	var t, settings = {gap:5, width: 240, easing: 'easeInOutQuart', duration: 500, speed: 50 };
	var nums = [ 300,  600,  250,  100 ];
	var prevh, prevw, h, thumb;


</script>
<script type="text/javascript" src="http://letskiosk.com/lib/js/jquery.metadata.js" charset="utf-8"></script>  
<script type="text/javascript" src="http://letskiosk.com/lib/js/jquery.media.js" charset="utf-8"></script>  
<script type="text/javascript" src="http://letskiosk.com/lib/js/jquery.history.js" charset="utf-8"></script>

<script type="text/javascript" src="http://letskiosk.com/lib/js/jquery.ease.js" charset="utf-8"></script>
<script type="text/javascript" src="http://letskiosk.com/lib/js/grid-a-licious.js" charset="utf-8"></script>
<script type="text/javascript" src="http://letskiosk.com/lib/js/grayscale.js" charset="utf-8"></script>
<script type="text/javascript" src="http://letskiosk.com/lib/js/init.js" charset="utf-8"></script>

<script type="text/javascript">
	var base = "http://letskiosk.com/";
	$(document).ready(function(){
		if (location.href == base) {
			tn = true;	
			var hash = "just-b-productions";
			oldhit = "#c-"+hash;
			pressed = hash;
			tempclass = $(oldhit).attr('class');
			pageload(pressed, tn);	
			$("#projectthumbs").grid(settings);
		}
		
	});

</script>

Redundant post much? http://www.webmaster-talk.com/javasc...-question.html

Originally Posted by smoseley

Redundant post much? http://www.webmaster-talk.com/javasc...-question.html

Merged

Figure out how to place images on the page.
Figure out how to do rollover.
Figure out how to do fading.
Figure out how to use XMLHttpRequest.

I've figured all of this out bar the XMLHttpRequest. I am majorly stumped. Hard. I've also had a massivley close look at tall the jquery code but nothing to show or lead to how or where the XML data is stored. If any.

Even if someone has a good tutorial for this kind of thing they could suggest, it would be good to hear. I've had a search on google (obviously!) but it's hard to know where to start.

Thanks for the suggestions so far.


Ben

but nothing to show or lead to how or where the XML data is stored. If any.

it will be read from:

url: base_url+"home/page/" + hash,

it will be read from:
url: base_url+"home/page/" + hash,

..but theres no physical file here pointing to all the information that its pulling in (several images/text etc). I agree this is where the site is looking for the information, but where IS that file?

This is the sort of information the site is pulling in to load external images directly into the page:

<div class="content nottdance09">

    <div class='project'>
<div class='media'>
<img class="outline" style="visibility: visible; margin-bottom: 10px;" alt="nottdance09" title="nottdance09" src="http://letskiosk.com/content/21__nott09.jpg" width="630" height="452" /><img class="outline" style="visibility: visible; margin-bottom: 10px;" alt="nottdance09" title="nottdance09" src="http://letskiosk.com/content/21__bookspreads.jpg" width="630" height="944" /><img class="outline" style="visibility: visible; margin-bottom: 10px;" alt="nottdance09" title="nottdance09" src="http://letskiosk.com/content/21__nd09-tee2.jpg" width="630" height="390" />
<img class="outline" style="visibility: visible; margin-bottom: 10px;" alt="nottdance09" title="nottdance09" src="http://letskiosk.com/content/21__books+signage.jpg" width="624" height="330" /><object width="630" height="502"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12360543&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12360543&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="630" height="502"></embed></object></div><div class='project-desc'><h2>nottdance09</h2><p>&mdash;</p>Art direction / design of nottdance09, the internationally renowned festival of contemporary dance based in Nottingham, UK. Teaser ident music courtesy of  <a href="http://www.freefarm.co.uk" target="_blank">Freeform</a>. <div class="imageholder"></div><div class="imageholder"></div><div class="imageholder"></div><div class="imageholder"></div><p></div></div>        
    </div>

There must be a file someplace that this information is being drawn from?

Thanks

Ben

Do you understand what the XMLHttpObject actually does?

Do you understand what the XMLHttpObject actually does?

I get the concept. But in practice I'm finding it to be a real mind bender.

Give this question;

There must be a file someplace that this information is being drawn from

the concept may have been a "mind bender" also.

The XMLHttpRequestObject is for reading XML (eXtensible Markup Language) data from a URI via a HTTP (HyperText Transfer Protocol) request (there's clue in the name).

Although in actual fact the data returned does not have to be XML.

This means there does NOT HAVE to be a "file somewhere". The data only needs to be available by accessing a URI that returns a text/html/xml data stream in response to the request, this may be a physical file or it may be the output from a script.