Jump to content
Stef's Coding Community
Woody

jQuery Cycle Plugin

Recommended Posts

Hello again oh Wizards of the Web!

 

I'm trying to use the jQuery Cycle Plugin on a new page of my website (view at www.todaystruth.com/NewBSPage.html). I haven't yet linked the rest of the site to this page. The plugin functions as advertised. My problem is that the paragraphs I am cycling are not picking up the CSS I assigned to their respective classes. Am I missing something here? I admit I am a bit new to jQuery. Thanks for any help/advice.

Share this post


Link to post
Share on other sites

Firebug is not showing the class for your p tags at all, so declare them as p.1stBox instead of just .1stBox.

Share this post


Link to post
Share on other sites

I don't believe you can use a number as the first character in a class name. Validate your document -- I'm pretty sure that will be an error that the validator will point out. You'll need to change your class names in such a way that a number is not the first character of the class.

Share this post


Link to post
Share on other sites
I don't believe you can use a number as the first character in a class name. Validate your document -- I'm pretty sure that will be an error that the validator will point out. You'll need to change your class names in such a way that a number is not the first character of the class.

 

Correct. Instead of class 1stBox, use Box1, that should do the trick :D

Share this post


Link to post
Share on other sites

Thanks Ya'll! Actually I remember that I can't use a number as the first character in the classname...but now I remember it MORE!

 

Now the paragraphs are properly formatted, but not positioned as the CSS calls for. They won't center in the div. I'll try a few more things...but if anyone has a suggestion...??

 

Thanks again.

Share this post


Link to post
Share on other sites

Because they are position: absolute; top: 0; left: 0;

So they are showing where they have been placed. The text-align: center; is only making the text align in the center of the paragraph it does not place the paragraph within the center of the div.

Share this post


Link to post
Share on other sites

Where are the paragraphs positioned top:0;left:0;? The position:absolute; applies to the div bSRotaBox, but that positions the DIV, not it's contents, right? And it is positioned at top:510;left:82; I haven't had this problem before. The text-align:center; has always centered the text in the div. What am I missing here? Sorry to be so dense, but I AM just learning. And I AM enrolled in KillerSites Univ. Does the jQuery Cycle Plugin affect the placement?

Share this post


Link to post
Share on other sites

Thanks virtual! That last one did it! the width:560px; worked...now could you tell me why? The paragraphs center perfectly in DW CS4...even without the added width attribute.

Share this post


Link to post
Share on other sites

I think the size of the p tag was being generated by the JS as it was showing 316px and you had not specified a width in the CSS. However I am no JS genius. Glad you got it fixed though.

Share this post


Link to post
Share on other sites

Missed you other post. I looked in the JS and there is a section which calculates the width and height of images if none is specified. So it would place the image in the top left hand corner. The position absolute for BsRotabox is for the slide container not for the contents.

Share this post


Link to post
Share on other sites

You need to add some padding to your boxes too, and maybe adjust the width a little. The text is jammed up at the top and is a little off center.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...