EZPA55
January 12, 2011, 5:58am
21
Here you go. Took me a minute to upload as there are a number of files.
http://www.imiworldwide.com/kaes/portfolio.html
I am using the script you wrote with the switch action. As you can see it just loads and loads.
Let me know
Thanks too for sticking with this
obj.attr('class').toLowerCase()
Problem: obj has no attr method, as obj is an HTMLLIElement
Try using one of these instead:
$(obj).attr('class').toLowerCase()
or
obj.className.toLowerCase()
or elsewhere:
getURL($(this))
My fault again, work is making me really tired lately. Try this
switch($(obj).attr('class').toLowerCase()){
EZPA55
January 12, 2011, 4:03pm
24
That works! Thanks so much.
The fadein isn’t working though.
EZPA55
January 12, 2011, 4:19pm
25
Can you also tell me why I cannot put all the scripts into one document.ready?
The problem with using .html() and .fadeIn() together is that .html() triggers a hide/show event which doesn’t allow for animations to continue. Try the code below and see if it works
$("#projectnav").html(ajax_load).load(getURL(this), function(response){
$(this).hide().fadeIn(1000, function(){
$(this).text(response);
});
});
As for not been able to add multiple instances of code into the document ready method i have no clue about that one as it should work find unless theres errors in your script.
EZPA55
January 13, 2011, 3:52am
27
Where would I use this? There is no click function? Or is this separate from that?
Can you add it in to this code block
$(document).ready(function(){
// Loading image
var ajax_load = "<div class='loader'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
// Setup the ajax methods
$.ajaxSetup({
cache: false
});
// Returns the URL based on the class given
var getURL = function(obj){
switch($(obj).attr('class').toLowerCase()){
case "identity":
return "navs/identity_nav.html";
break;
case "web":
return "navs/web_nav.html";
break;
case "print":
return "navs/print_nav.html";
break;
case "package":
return "navs/package_nav.html";
break;
default:
return;
}
};
$(".identity, .web, .print, .package").click(function(){
$("#projectnav").html(ajax_load).load(getURL(this), function(){
$(this).html().fadeIn(1000);
});
return false;
});
// END DOCUMENT READY
});
EZPA55
January 13, 2011, 3:55am
29
It does work but after it fades in the whole pages mark up loads after.
EZPA55
January 13, 2011, 3:57am
30
You the MAN! I removed the text part (response) and it works great.
Can you explain why there is a return false as this doesn’t look or act like a loop that needs to be stopped. I know very little JS but I thought that is what Return false was for.
EZPA55
January 13, 2011, 4:07am
31
Ok I am trying to implement this fadein to the rest of the scripts and am having trouble with the projects loading in.
Try clicking through http://kenaesthetic.com/portfolio.htm
$(document).ready(function(){
// Loading image
var ajax_load = "<div class='loader_display'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
// Setup the ajax methods
$.ajaxSetup({
cache: false
});
// Returns the URL based on the class given
var getURL = function(obj){
switch($(obj).attr('class').toLowerCase()){
case "romare":
return "projects/romare.html";
break;
case "eyce":
return "projects/eyce.html";
break;
case "elund":
return "projects/elund.html";
break;
default:
return;
}
};
$(".romare, .eyce, .elund").click(function(){
$("#container").html(ajax_load).load(getURL(this), function(response){
$(this).hide().fadeIn(1000);
});
return false;
});
// END DOCUMENT READY
});
</script>
It is the same and should work as the scripts do the same thing? What is wrong here?
You don’t need it there but in the past for browser compliance and for the sake of it been there i like using it to stop the page from continuing if an error occurs.
EZPA55
January 13, 2011, 4:07pm
33
How about why the fadein doesn’t work for the actual projects? I am using the same code but not getting the same results.
I couldn’t find any [B]fadeIn/B methods in your code except for in the initial HTML loader code
EZPA55
January 13, 2011, 10:39pm
35
The code for the project is embedded in the nav files that are loaded in initially. I pasted the code above.
I looked directly at the files and found that they are not all the same when animating. Double check your project files and i think you will find the answer
EZPA55
January 14, 2011, 3:00am
37
I’m stuck. The fadein lines are the same in both areas the only differeece is the container the files are loaded into.
This is the project container code
$(".intervention, .mlccc, .pti").click(function(){
$("#container").html(ajax_load).load(getURL(this), function(response){
$(this).hide().fadeIn(1000);
});
This is the nav container code
$(".identity, .web, .print, .package").click(function(){
$("#projectnav").html(ajax_load).load(getURL(this), function(response){
$(this).hide().fadeIn(1000);
});
I’m afraid I can’t see the problem. Any ideas?
EZPA55
January 14, 2011, 3:11am
38
It is the last function(response) on the top code block that doesn’t seem to be working. I also noticed the fadein doesn’t work at all in safari and IE8.
You can see they are exactly the same the bottom one works with the nav but the top one doesn’t with the projects.
What else could be the fault?