...

View Full Version : Editing JQuery/Ajax Effect



efhx
08-19-2011, 01:56 PM
right now I almost have this script working the way I want it to, here it is:


var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});

$('.workimg a').click(function(){

var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp('slow',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').slideDown('slow',hideLoader);
}
function hideLoader() {
$('#load').slideUp('slow');
}
return false;

});
How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?

DanInMa
08-19-2011, 03:08 PM
you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.




$('#selected').delay(1000).slideDown(1200,hideLoader);



for the other questions you need to use .animate()




$('#selected').animate({
opacity: 1,
height: 'toggle'
}, 1200, function() {
// Animation complete. Do callbacks here
});

DanInMa
08-19-2011, 03:10 PM
also for your clickfucntion you shoudl use preventDefault() and not return false, because sometimes returnign false can add it's own complications.



$('.workimg a').click(function(e){
e.preventDefault();

do stuff
});

efhx
08-19-2011, 03:44 PM
been trying this out for a little bit now.. will post code to make sure i did things right in a minute

efhx
08-19-2011, 04:10 PM
you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.




$('#selected').delay(1000).slideDown(1200,hideLoader);



for the other questions you need to use .animate()




$('#selected').animate({
opacity: 1,
height: 'toggle'
}, 1200, function() {
// Animation complete. Do callbacks here
});


I'm still really new to jQuery so it's alot of trial/error with what I tried to do.

var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});

$('.workimg a').click(function(e){
e.preventDefault();

var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp(1200,loadContent);
$('#load').remove();
$('#work').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').delay(50).animate({
opacity: 1,
height: 'toggle'
}, 1200, function() {
// hideLoader?
});
}
function hideLoader() {
$('#load').fadeOut('10');
}

});

The .animate seems to be working fine, but since the opacity isnt set to 0 before it scrolls down it just looks the same way it did before. How do I fix that? also where do i place the hideLoader function so the loading wheel stops spinning?

DanInMa
08-19-2011, 04:22 PM
changes are in green. this might do it



var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});

$('.workimg a').click(function(e){
e.preventDefault();

var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp(1200,loadContent);
$('#load').remove();
$('#work').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').css("opacity","0");
$('#selected').delay(50).animate({
opacity: 1,
height: 'toggle'
}, 1200, function() {
hideLoader();
});
}
function hideLoader() {
$('#load').hide();
}

});

DanInMa
08-19-2011, 04:23 PM
maybe you should run hideLoader() at the beginning of showNewContent() ?

efhx
08-19-2011, 04:38 PM
How do I get it to jump to the #selected div?

It fades in from 0 opacity now, but is there a way to get it to scroll down first and then fade it in? Right now it does everything at once.

What im pretty much trying to do is use this for a portfolio so I can keep everything on the same page kinda like this website http://www.johnkarlsson.se

DanInMa
08-19-2011, 05:31 PM
oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now

efhx
08-19-2011, 05:33 PM
oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now

I would have to do all that to jump to the #selected div before it executes the rest or to slide it then change the opacity? Or for both?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum