Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Need help with CSS JS crossfade script


  • Please log in to reply

#1
clarky23

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

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

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

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

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

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

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

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

Major Payne

    Retired Staff

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

#10
clarky23

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

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

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

Major Payne

    Retired Staff

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

#14
BerlyGirl

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

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 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






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP