Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Need help with CSS JS crossfade script

Started by clarky23 , Jan 22 2009 09:08 AM

  • Please log in to reply

#1
clarky23
Posted 22 January 2009 - 09:08 AM

clarky23

    Member

  • Member
  • PipPip
  • 59 posts
Hello,
If someone can look at a new template for a website I'm developing for a friend. I am trying to put a crossfade effect on pictures on the page. I got the cross fade working, and the rotation of pictures. However, the upcoming picture loads under the current picture, then "jumps" into place when the current picture has "disappeared" in the crossfade. You can see what I'm talking about at http://www.165ny.com/beta_newsite

I am starting to learn about JS and CSS. I borrowed the code (legally I believe) from the following site: http://www.javascrip...eCrossFade.html

Any assistance wil be appreaicated.

Edited by clarky23, 22 January 2009 - 09:09 AM.

  • 0

Advertisements

#2
Major Payne
Posted 22 January 2009 - 06:10 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Before doing ANYTHING, please correct these errors:

CSS
HTML

Might even be surprise and the corrections fix your problem. Doubt it, but it does happen. :)

Update: There are a few mistakes in the file names as given. These changes worked for me:

<link rel="stylesheet" type="text/css" href="xfade2.css" />
<link rel="stylesheet" type="text/css" href="xfade2_o.css" />
<script type="text/javascript" src="xfade.js"></script>

Worked just fine after I made the correct link changes.

Edited by Major Payne, 22 January 2009 - 06:25 PM.

  • 0

#3
clarky23
Posted 22 January 2009 - 07:13 PM

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
Ron,
thank you for your assistance. First, please remember I am a novice (knowing enough to get into trouble). I THINK I made the changes correctly. Please let me know if this is not the case. Still have the problem. What's next providing I did everything right in the first place. Thanks.
  • 0

#4
Major Payne
Posted 22 January 2009 - 09:16 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Did you match up your links given to the actual file names? The site link you got script from had "xfade2_o.css" as "xfade2_0.css". Used a zero (0) and not an "oh". Doesn't matter as long as file names match.

You have this listed: "http://www.165ny.com...pts/xfade2.css"

If you saved the two css files and the JS file, then you need to make the paths correct. Your script isn't working because of that.

Edited by Major Payne, 22 January 2009 - 09:20 PM.

  • 0

#5
clarky23
Posted 31 January 2009 - 10:34 PM

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
Ron,
Thank you for your assistance. Again, I'm still learning this stuff (self-teaching). with that said, i also know I have to figure out a few small validations that needs fixed. The problem I have though is I actually have the crossfade working, and it looks right in Firefox and Opera. However, in IE the image is flush right instead of left. I"m stuck on how this happen. Thoughts and suggestions with definately be appreciated. thanks.
  • 0

#6
Major Payne
Posted 01 February 2009 - 01:22 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
This might help to clear up IE:

1 - Warning: discarding unexpected <!DOCTYPE> Incorrect DocTpe
2 - Warning: discarding unexpected <html> You have TWO "<HTML lang="en">" tags
3 - Warning: discarding unexpected <head> Related to #2
4 - Warning: too many title elements in <head> Related to #2
5 - Info: <head> previously mentioned Related to #2
  • 0

#7
clarky23
Posted 01 February 2009 - 06:39 AM

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
OK, according to W3C Validator, I finally have all the code corrected and are no errors. I still have the problem. Help!
  • 0

#8
Major Payne
Posted 01 February 2009 - 08:55 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You need to remove this from the CSS: 
#content .photowithcaption1 {

	width: 525px;

	height: 407px;

	font: bold 12px arial;

	color: #55290C;

	text-align: center;

	font-style: italic;

	margin: 0 0 0 0;

	padding: 0 0 0 0;

}
That's on the master_style_sheet.css file. You'll have to compensate for the text that will now appear under the images.
  • 0

#9
Major Payne
Posted 04 February 2009 - 10:09 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Are we good to go yet?
  • 0

#10
clarky23
Posted 06 February 2009 - 07:43 AM

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
Ron,
I appreciate your patience. I think I have the crossfade issue fixed. I have to play with the site a little bit more to be sure. Unfortunately I volunteer my time on this site and haven't been able to mess with it for a few days. I will be putting some more time on it this weekend. Again, thank you for your assistance and patience.
Michael
  • 0

Advertisements

#11
Major Payne
Posted 06 February 2009 - 09:31 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
OK. But removing that code I suggested fixed the problem at my end. The JavaScript is already positioning the images and I think it was conflicting with the positioning you were using.
  • 0

#12
clarky23
Posted 07 February 2009 - 02:45 PM

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
Yeah, I removed the code you suggested. I just now have to reposition the text and get the left column to work proper in IE (i hate IE). I am going to work on that this weekend. Your suggestion worked on getting the other issues corrected. I do appreciate the advice. I think you're right with the scripts conflicting.
  • 0

#13
Major Payne
Posted 09 February 2009 - 11:01 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You're welcome. Post back if you still have problems with script.
  • 0

#14
BerlyGirl
Posted 02 March 2011 - 01:42 PM

BerlyGirl

    New Member

  • Member
  • Pip
  • 2 posts
http://www.led-z.com/index.html

Hello,
I'm having an IE positioning and width issue as well, but with a script called crossfade.js... other browsers look great, but IE is shifting and resizing the photo area... I'm afraid it's a conflict with the slider script, but not sure how to fix that (if that is the issue)

Thanks in advance!!!
  • 0

#15
AstraNut
Posted 02 March 2011 - 09:51 PM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 posts
Hi BerlyGirl Posted Image:

You may want to repost with your own thread as Major Payne seems to be retired at GeekstoGo. I would suggest that you validate and correct all your coding problems first before seeing what the problem with IE is:

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3....ri with_options
But it Doesn’t Validate : http://net.tutsplus....oesnt-validate/
  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP