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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inserting Javascript in css page (no tables)

    I'm trying to place some javascript (text scroller) into a sidenav <div> on a page that's designed with CSS (there are no tables/table cells). There is other text there, which displays as it should.

    The javascript bumps over to the middle of the page, for some reason, into the next <div>.

    I have tried inserting it without the formatting specs, and still no luck. The whole script is going straight into the page html. All code looks correct to me.

    Any ideas would be welcome - thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's hard for people to help without seeing the code, or the page...

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apologies. Not having had much to do with JS before, I thought it might be more a rhetorical question.

    Here is an example page. The JS is embedded in the html, and commented.

    http://www.ponyteamusa.com/js_page.html

    I'd like this to take the place of the text in the "Latest News" section in the left column (which is a <div> called "#news").

    Thanks -

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    change this
    Code:
    <form name="news">
    <textarea name="news2" cols=40 rows=4 wrap=virtual></textarea>
    </form>
    to this
    Code:
    <form name="news">
    <textarea name="news2" cols="10" rows="10" style="width:160px;overflow:hidden;border:0;" wrap="hard"></textarea>
    </form>
    Adjust the width to your liking.

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks - unfortunately, it's still not "living" where I'd like it to (still displaying over the photo area).

    Any other ideas? I've reposted the page revised with your changes.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    change this
    Code:
              <h4 class="nomargins"><strong>Latest News</strong></h4>
              <img src="i/dots.gif" alt="" /> 
              <p><a href="http://www.hoefnet.com/pages-eng/index_eng.html" target="_blank">
    		  Check out the Windsor (England) CDE results online at Hoefnet.com</a></p>
    		  
    		  <!-- javascript begin -->
    
    		  <form name="news">
    <textarea name="news2" cols="10" rows="10" style="width:160px;overflow:hidden;border:0;" wrap="hard"></textarea>
    </form>
    to this
    Code:
              <h4 class="nomargins"><strong>Latest News</strong></h4>
              <img src="i/dots.gif" alt="" /> 
              <p><a href="http://www.hoefnet.com/pages-eng/index_eng.html" target="_blank">
    		  Check out the Windsor (England) CDE results online at Hoefnet.com</a><!-- javascript begin -->
    
    		  <form name="news">
    <textarea name="news2" cols="10" rows="10" style="width:160px;overflow:hidden;border:0;clear:left;" wrap="hard"></textarea>
    </form></p>

  • #7
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Again, thanks - but it continues to be awkward. (Reposted page, with your new revisions).

    Something is causing it to "escape" the <div>...it can't be the <form> element, so is it the JS stuff?

    I wonder if it would be happier to call the code (if I only remembered how to set that up!) than have it embedded?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read my revisions closer, you will see that i put the form within the paragraph that has the link in that says 'Check out the Windsor (England) CDE results online at Hoefnet.com'. You simply just put paragraph tags around the form, that is NOT what I did.

  • #9
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I didn't see where that would make any difference, as long as they were both enclosed in <p> tags.

    I've copied and pasted from your post, and unfortunately still the scrolling text displays over the photo...

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay it was the form margins causing the problem. Try this
    Code:
              <p><a href="http://www.hoefnet.com/pages-eng/index_eng.html" target="_blank">
    		  Check out the Windsor (England) CDE results online at Hoefnet.com</a><!-- javascript begin -->
    
    		  <form name="news" style="margin:0;">
    <textarea name="news2" cols="10" rows="10" style="width:160px;overflow:hidden;border:0;" wrap="hard"></textarea>
    </form></p>

  • #11
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bingo! You got it. (So what is default for form margins? Must be huge...)

    Here's another weird thing:
    I moved some of the inline styles over to the stylesheet. The height of that "#news" <div> was excessive, so I reduced the inline "cols=10" to "cols=6", and now get a horizontal scrollbar appearing at the end of the messages (at the bottom).

    Any ideas as to how to reduce the height of the textarea while not having the scrollbar appear?

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    cols are horizontal, its the rows that you should change.

  • #13
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right - that's what I meant, just typed the wrong thing.

    I've tried changing both rows and cols with no luck (if cols # is reduced much, scrollbars show up sooner). Tried changing the width of <textarea>, adding right margin, no luck. It seems that the <textarea> *has* to be a certain width or the horiz scrollbars will appear (and it may be a wider value than will work in this situation), as I changed the width to half of what it was, and get scrollbars all the time. Doesn't seem to matter if "wrap" is specified as "hard" or "virtual".

    I know nothing about JS, but it doesn't look like there's any width specified anywhere.

    Mystery to me. I may investigate another scroller.

    Thanks for your help.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay look in the examples I gave you previously. Do you notice something in them that you don't have currently in your textarea? There is a style="blah" that declares the width, hides the scrollbars, and the borders. Adapt it to your textarea.

  • #15
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As I mentioned earlier, I moved most of that information to my stylesheet (the rest was left inline), so it wasn't missing.

    Nevertheless, I have copied and pasted that early code, and as you can see, the horizontal scrollbars still show up at the end of the next-to-last and the last message.

    Thanks


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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