Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-03-2011, 03:48 PM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Same Jquery fadeIn() across multiple pages

Hello again.

I'm using Jquery to do some simple fades of various divs ... it all seems to work fine on the home page but not on the "Services" page ... which is currently the only other page I have live. For some reason the same fades don't work there.

I should point out that the divs on the "About" page all have different ids ... but I reflected that (I think) in my script.js file ... the code of which, is below

// JavaScript Document
Code:
// image fading $(document).ready(function() { // home-about page hide() $('#bodyTabsAbout').hide(); $('#aboutCopyContainer').hide(); // services page hide() $('#bodyTabsServices').hide(); $('#sectionHeader').hide(); $('#servicesCopy').hide(); // home-about page fadeIn() $('#bodyTabsAbout').fadeIn(1000); $('#aboutCopyContainer').fadeIn(2500); // services page fadeIn() $('#bodyTabsServices').fadeIn(1000); $('#sectionHeader').fadeIn(2500); $('#servicesCopy').fadeIn(2500); });
Granted that's some pretty ham fisted Jquery code right there ... so if there's any way to tighten that up, I'm all ears ... mainly I just want it function.

Thanks!

Test site URL
http://www.savagepixels.com/testSite/index.html

Last edited by HTMLBasicTutor; 05-03-2011 at 08:27 PM.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 05-04-2011, 01:19 AM
nemrod's Avatar
nemrod nemrod is offline
v7n Mentor
 
Join Date: 12-21-10
Location: Sweden
Posts: 463
iTrader: 0 / 0%
Problem is you're loading a different version of jQuery on services, resulting in a 404.

Also you can use the selectors in jQuery just like you would in CSS, i.e. you can separate them with a comma if you want to do the same thing to several elements ($('#sectionHeader, #servicesCopy').fadeIn(2500) for example)

edit: a tip on how to find these errors - use Google Chrome and press ctrl+shift+j when on a page to bring up the developer tools and any JS errors will show up.
 
Reply With Quote
  #3  
Old 05-04-2011, 09:57 AM
scgroove's Avatar
scgroove scgroove is offline
Contributing Member
 
Join Date: 01-17-11
Location: Chicago
Posts: 57
iTrader: 0 / 0%
Bingo!

Nice. The devil is in the details they say. That was exactly the problem.

I also replaced the code with what's below ... much better. Thanks Nemrod!
Code:
// image fading $(document).ready(function() { // hide() $('#bodyTabsAbout, #aboutCopyContainer, #bodyTabsServices, #sectionHeader, #servicesCopy').hide(); // fadeIn(1000) $('#bodyTabsAbout, #bodyTabsServices').fadeIn(1000); // fadeIn(2500) $('#aboutCopyContainer, #sectionHeader, #servicesCopy').fadeIn(2500); });

Last edited by HTMLBasicTutor; 05-04-2011 at 07:29 PM.
 
Reply With Quote
  #4  
Old 05-04-2011, 10:00 AM
nemrod's Avatar
nemrod nemrod is offline
v7n Mentor
 
Join Date: 12-21-10
Location: Sweden
Posts: 463
iTrader: 0 / 0%
Quote:
Originally Posted by scgroove View Post
Nice. The devil is in the details they say. That was exactly the problem.

I also replaced the code with what's below ... much better. Thanks Nemrod!

// image fading
$(document).ready(function() {
// hide()
$('#bodyTabsAbout, #aboutCopyContainer, #bodyTabsServices, #sectionHeader, #servicesCopy').hide();

// fadeIn(1000)
$('#bodyTabsAbout, #bodyTabsServices').fadeIn(1000);

// fadeIn(2500)
$('#aboutCopyContainer, #sectionHeader, #servicesCopy').fadeIn(2500);
});
You're welcome.

Another way to write that would be
Code:
$('#bodyTabsAbout, #bodyTabsServices').hide().fadeIn(1000); $('#aboutCopyContainer, #sectionHeader, #servicesCopy').hide().fadeIn(2500);
I think, anyway. x)
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Simple jquery image fadeIn() scgroove Coding Forum 3 04-09-2011 10:24 PM
One or Multiple Pages Bart SEO Forum 6 02-20-2009 02:56 AM
Splitting content in multiple pages DirLite Coding Forum 1 11-03-2008 03:55 AM
Anchor Text value in no multiple pages tdd1984 SEO Forum 2 01-21-2007 08:29 PM
Help with changes to multiple pages EnterDaMatrix Web Design Lobby 12 07-13-2004 07:20 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 05:29 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC