5 Replies - 1614 Views - Last Post: 08 April 2008 - 05:15 PM

#1 orangebulb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

javascript/css & loading different background colors on change

Posted 08 April 2008 - 02:29 PM

link to code: http://www.radford.e...2/webbooks.html

ok, I'm working on an assignment for class and we have a javascript that runs and in a certain instance a special section will appear. According to our assignment, our special section has to have a different background color than the rest of the page. The special section will appear when someone has entered a valid first name, last name, zip code, and selects 2 or more books to order. The javascript is working correctly (meaning it displays when it's supposed to) but none of my css will show up on that section. At least not a background color or positioning. Right now it's in a paragraph class. I've tried doing it in a div class and I've also tried using an inline style. None of them have made the background color show up! I know my javascript function is working right since it's visible when it's supposed to be, but I have to have the background color and I just can't get it! Any ideas why? I know background-color is an attribute of both a paragraph and div, so I just don't know why it isn't showing up.

any and all help would be GREATLY appreciated!!! :) :)

I've been trying to figure it out for a couple hours now and it's getting very frustrating! lol

Is This A Good Question/Topic? 0
  • +

Replies To: javascript/css & loading different background colors on change

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5554
  • View blog
  • Posts: 14,560
  • Joined: 18-April 07

Re: javascript/css & loading different background colors on change

Posted 08 April 2008 - 03:24 PM

The trick is that H3 and other header tags won't fit inside a P tag. This causes them to fall out of the P tag and thus the P tag is there, but all squished up and thus you can't see its color. This not only causes the H3 tag to fall out, but all the text after it as well. So if you were to make the H3 tag down inside of the bonus paragraph into something like a span tag, you will then see the color because then the P tag would stretch around the title and all its text.

It goes back to the old days of how browsers treat the heading tags. They treat them as block elements and should not be inside other lesser elements like P tags. After all, why would you have a header inside a paragraph? Usually paragraphs follow the header (so the early designers thought).

But no worries, you can change your H3 tag to a span tag and simply stylize it back into looking like a header.

Understand? You should now have the day officially saved by a member of DIC. Congrats.

:)
Was This Post Helpful? 0
  • +
  • -

#3 orangebulb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

Re: javascript/css & loading different background colors on change

Posted 08 April 2008 - 03:49 PM

Thank you sooooo much!!! =)
Was This Post Helpful? 0
  • +
  • -

#4 orangebulb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

Re: javascript/css & loading different background colors on change

Posted 08 April 2008 - 04:00 PM

now for some reason when I click on the radio buttons on the choose your free gift section, it doesn't actually select it when you click on it. Any ideas???

I thought I had it all working and ready to turn in :(
Was This Post Helpful? 0
  • +
  • -

#5 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5554
  • View blog
  • Posts: 14,560
  • Joined: 18-April 07

Re: javascript/css & loading different background colors on change

Posted 08 April 2008 - 04:06 PM

Almost there my friend... just give each <input radio> element a name attribute.

<input type="radio" id="pquickref" name="quickref" value="">FREE -- Perl Quick Reference</br>
<input type="radio" id="jquickref" name="quickref" value=""> FREE -- Javascript Quick Reference</br></br>



Notice how we put a name attribute called "quickref" and they are BOTH THE SAME as to let the browser know these radio buttons are part of a group. That way they can only select one or the other.

:)
Was This Post Helpful? 0
  • +
  • -

#6 orangebulb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

Re: javascript/css & loading different background colors on change

Posted 08 April 2008 - 05:15 PM

thank you again! so much!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1