Search jQuery

jQuery Forum

making ajax content load and scroll into view

in Using jQuery UI • 12 years ago

Hi.

I am trying to develop a part of a site that requires ajax content to be loaded onto it via a server. I have made the content load and scroll up into view but for some reason the footer goes with it so instead I just had it fade in from display hidden. Here is the link.

http://www.markdunbavan.co.uk/dev/OS

The other problem I am facing is I want the about button to be able to do exactly the same thing as the contact button does but at the min its really complicated. Here is the code I used;

$(document).ready(function(){
$('.log').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
});
$('#contactbutton').click(function() {
$('.result').load('pages/index.html');
$('#contactcontent').delay(600).fadeIn(1400);
$('#contactcontent').fadeIn(1400).animate({
overflow: 'hidden',
opacity: '1.0',
marginTop: '0px',
}, {
duration: 1000,
specialEasing: {
top: 'easeInOutQuad'
},
});
$('#folio').animate({
top: '-900px',
opacity: '0.2',
overflow: 'hidden'
}, {
duration: 1000,
specialEasing: {
top: 'easeInOutQuad'
},
});
});
});
$(document).ready(function(){
/*next ajax loader section for about page also*/
$('.log2').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
});
$('#aboutscrollbutton').click(function() {
$('.result2').load('pages/about.html');
$('#aboutcontent2').delay(600).fadeIn(1400);
$('#aboutcontent2').fadeIn(1400).animate({
overflow: 'hidden',
opacity: '1.0',
marginTop: '0px',
}, {
duration: 1000,
specialEasing: {
top: 'easeInOutQuad'
},
});
$('#folio').animate({
top: '-900px',
opacity: '0.2',
overflow: 'hidden'
}, {
duration: 1000,
specialEasing: {
top: 'easeInOutQuad'
},
});
});
});

I am having trouble making this work. Would anyone know how to do this sort of thing?

regards

Mark Dunbavan

Replies(2)

kbwood.au

Re: making ajax content load and scroll into view

12 years ago

You can extract and parameterise the common code:

$(function() { // Shorthand for $(document).ready(function() {
$('.log').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
});
$('#contactbutton').click(function() {
loadContent('.result', 'pages/index.html', '#contactcontent');
});
/*next ajax loader section for about page also*/
$('.log2').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
});
$('#aboutscrollbutton').click(function() {
loadContent('.result2', 'pages/about.html', '#aboutcontent2');
});
});
function loadContent(result, source, content) {
$(result).load(source);
$(content).delay(600).fadeIn(1400).animate(
{overflow: 'hidden', opacity: 1.0, marginTop: '0px'},
{duration: 1000, specialEasing: {top: 'easeInOutQuad'}});
$('#folio').animate(
{top: '-900px', opacity: 0.2, overflow: 'hidden'},
{duration: 1000, specialEasing: {top: 'easeInOutQuad'}});
}

markdunba..

Re: making ajax content load and scroll into view

12 years ago

Hi Kbwood.

Thank you for your response. Would it be easy for me to have a function so that when I click the other button
the new page that has been loaded slides down away a bit like the portfolio slide. I know there is a clear function
but this seems to clear the whole thing for the session and not for that one time.

I am basically trying to load all pages on the site in this way a bit like this site below. You may have seen this before, I think it is a wonderful site and so simple but obviously the development is extremely complex though.

http://www.imagemechanics.com.au

I know I am doing my development miles apart from this but using the structure you advised on would it give the same effect as this?

Thanks for the help so far on this

Mark

Top Reply

Response title

Attachments

jQuery Forum

making ajax content load and scroll into view

Replies(2)

Re: making ajax content load and scroll into view

Re: making ajax content load and scroll into view

Statistics

Tags

Actions