Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Position Javascript on html page???

    Hi

    I got this code for my coutdown:

    Code:
    <script language="JavaScript">
    TargetDate = "12/31/2020 5:00 AM";
    BackColor = "palegreen";
    ForeColor = "navy";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    FinishMessage = "It is finally here!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    But i don't know how to place it where I want on my html page
    Normaly I use the CSS value position:absolute

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    The first block of JS can be most anywhere on the page *BEFORE* where you want the countdown. I'd suggest putting it in the <head>...</head>

    Since you don't show us a link to where you got that code, and since the URL hashemian.com doesn't seem to exist (which makes me wonder if that script is going to work, if it can't be found!), you *probably* can do something like this:
    Code:
    <div id="ClockHere">
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    </div>
    And then just use <style> to apply CSS to div#ClockHere

    EDIT: I just tried using this on my own page, and it only worked sporadically. First it couldn't find the URL, then it could. You might want to copy the ".js" file to your own server so it will be more reliable.

    The code isn't the best in the world. The fact that it uses language="JavaScript" shows it is a bit on the old-fashioned side. But what the heck, it works.

    I also tried a page just as I describe above, with the second script inside an absolutely positioned <div>, and it worked as predicted.

  • Users who have thanked Old Pedant for this post:

    Emiil (06-23-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi

    Thank you - it works perfectly! - and thank for your advise I have now downloadet the .js file to my own website.

    Do you have any idea if i can change the font-size of the output countdown?

    Best Regards
    Emil

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Look at this line in the code:
    Code:
    function putspan(backcolor, forecolor) {
     document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                    "; color:" + forecolor + "'></span>");
    }
    What *I* would do is change that to simply:
    Code:
    function putspan( ) {
        document.write( '<span id="cntdwn"></span>' );
    }
    And then use CSS <style> to set the color, background color, font, font-size, etc., etc., on that span:
    Code:
    <style type="text/css">
    span#cntdwn { ... your specification here ... }
    </style>

  • Users who have thanked Old Pedant for this post:

    Emiil (06-23-2011)

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have now made this in my stylesheet:
    Code:
    span#cntdwn {
    				background-color:#FFFFFF;
    				color:#333333;
    				font-size:large;
    }
    And changed to this in the countdown.js file as you said:
    Code:
    function putspan( ) {
     document.write( '<span id='cntdwn'></span>' );
    }
    But now i don't see anything, I maybe think that I need to create a link to the stylesheet in the js file, but I don't know how?

    Can you help?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    TCH!!!

    You didn't copy/paste my code!!

    Look *VERY* carefully at my code:
    Code:
    function putspan( ) {
        document.write( '<span id="cntdwn"></span>' );
    }
    Now look very carefully at your code:
    Code:
    function putspan( ) {
     document.write( '<span id='cntdwn'></span>' );
    }
    HINT: I used quote marks where you used apostrophes.

    No, you can *NOT* change *ALL* your apostrophes to quote marks.

  • Users who have thanked Old Pedant for this post:

    Emiil (06-23-2011)

  • #7
    New Coder
    Join Date
    Jun 2011
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    You're right!

    Now it works perfectly - thank you sooo much, it really helped me

    Best regards
    Emil


  •  

    Tags for this Thread

    Posting Permissions

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