dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript with CSS. I know it can be done

  1. #1
    Join Date
    Jun 2012
    Posts
    6

    Javascript with CSS. I know it can be done

    I'm still a total noob. But I am trying something and I was hoping someone could help me. I have a very simple idea. I've been researching it but I am so green that I don't seem to be asking the right questions so I thought I'd come to the experts.

    I want to generate a footer div in my current web project. I want that div to have text in it generated by and external javascript page. I know it can be done but the syntax is off somehow... Here's what I've got so far

    HTML PAGE:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="javaWritingTest01.js"></script>
    </head>
    <body>
    <div class="footer"> </div>
    </body>
    </html>




    JAVAWRITINGTEST02.JS:
    // JavaScript Document
    function footerText()
    {
    $('.footer').html('<p>This is the Footer</p>');
    }




    I thought that the because the html doc (seen above) calls the .js it would automatically (magically) find the footer class and insert the html. Clearly I am wrong. I am looking it up over at w3schools but I would appreciate any enlightenment anyone could offer. Please be kind, I really am new at this...

    thanks,


    Aharon

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Try putting your script call in the body after the div tag with the Class = 'footer'

    May also need an id assignment of 'footer'
    Last edited by JMRKER; 06-24-2012 at 09:21 PM.

  3. #3
    Join Date
    Jun 2012
    Posts
    6

    unintended consequences...

    Is it necessary to have a script call? I assumed that the external style sheet could "find" the div tag based upon class = or id =

    No?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Quote Originally Posted by chartoonz View Post
    Is it necessary to have a script call? I assumed that the external style sheet could "find" the div tag based upon class = or id =

    No?
    It's not a call. I wanted you to move the external reference access.

  5. #5
    Join Date
    Jun 2012
    Posts
    6

    query

    sorry before I should have said external javascript.

    As to your reply (and thanks by the way) I am not sure I follow are you saying I should source the script down in the div and not up in the head? What if I want to eventually grow the script and do other things with it..?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Because you have the external reference in the head tag,
    It is loading before the 'footer' element has been created.

    The error is because it is not available to the script
    Because it has not finished loading the HTML code

    Try moving the whole <script ...> info to after the <div ...> tag
    And before the </body> tag

  7. #7
    Join Date
    Jun 2012
    Posts
    6

    jquery

    yeah I ended up linking in jquery and using the .ready. It's working now.

    Thanks

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Thumbs up

    Quote Originally Posted by chartoonz View Post
    yeah I ended up linking in jquery and using the .ready. It's working now.

    Thanks
    Seems like such a big hammer for so small a nail.
    Good Luck!

  9. #9
    Join Date
    Jun 2012
    Posts
    6

    meh

    overkill wasn't the issue... functionality was. At least I got it working...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles