www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with External JavaScript File

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    13

    Help with External JavaScript File

    I'm new to all this and need a little help or handholding.

    I have an external javascript file named links.js which contains the following,

    document.write("<a href='http://www.msn.com'>MSN</a>" );
    document.write("<a href='http://www.google.com'>Google</a>" );
    document.write("<a href='http://www.chicagobears.com'>Chicago Bears</a>" );

    I have the following in the body of my page,

    <script type="text/javascript" src="javascripts/links.js"></script>

    When I load the page I get this,
    MSNGoogleChicago Bears

    How do I make it look like this,
    MSN
    Google
    Chicago Bears

    Also, is there anyway to modify the font attributes like type, size and color?

    Thanks!

  2. #2
    Join Date
    Jul 2013
    Posts
    16
    Put the links inside <p></p> tags.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,292
    Put a <br /> tag to put on individual lines or in a list <li> tag
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Oct 2012
    Posts
    42
    You can use CSS to style these links:
    a) add a class to your links

    document.write("<a class='jsLink' href='http://www.msn.com'>MSN</a>" );
    document.write("<a class='jsLink' href='http://www.google.com'>Google</a>" );
    document.write("<a class='jsLink' href='http://www.chicagobears.com'>Chicago Bears</a>" );

    b) in an external CSS stylesheet or in the head of the page, associate the class with your required text styles
    (in this example, adding CSS styles within the 'head' tag of the page)

    <style type="text/css">
    a.jsLink{
    font-family:arial;
    font-size:90%;
    color:#2f2f2f;
    font-style:italic;
    font-weight:bold;
    text-decoration:underline;
    display:block;
    }
    </style>

    ('a' tags are inline elements by default which explains why the links in your first attempt are flowing horizontally. the 'display:block' property turns them into block elements, so they flow vertically down the page, unless you also add the 'float' property.)

  5. #5
    Join Date
    Mar 2013
    Posts
    13
    Quote Originally Posted by rh_lloydnorthov View Post
    You can use CSS to style these links:
    a) add a class to your links

    document.write("<a class='jsLink' href='http://www.msn.com'>MSN</a>" );
    document.write("<a class='jsLink' href='http://www.google.com'>Google</a>" );
    document.write("<a class='jsLink' href='http://www.chicagobears.com'>Chicago Bears</a>" );

    b) in an external CSS stylesheet or in the head of the page, associate the class with your required text styles
    (in this example, adding CSS styles within the 'head' tag of the page)

    <style type="text/css">
    a.jsLink{
    font-family:arial;
    font-size:90%;
    color:#2f2f2f;
    font-style:italic;
    font-weight:bold;
    text-decoration:underline;
    display:block;
    }
    </style>

    ('a' tags are inline elements by default which explains why the links in your first attempt are flowing horizontally. the 'display:block' property turns them into block elements, so they flow vertically down the page, unless you also add the 'float' property.)

    Thanks I got that working. Couple more things though. Would there be anyway to add some space in between the text? And would it be possible to have the links turn bold when you hover over them.

    Something like this,

    <STYLE>
    A:link {color: maroon; text-decoration:none}
    A:visited {color: maroon; text-decoration:none}
    A:hover {font-weight:bold; color: maroon; text-decoration:none}
    </STYLE>

    Thanks again!

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