...

View Full Version : Inserting Javascript in css page (no tables)



hunter
05-22-2005, 03:58 PM
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.

mark87
05-22-2005, 04:02 PM
It's hard for people to help without seeing the code, or the page...

hunter
05-22-2005, 05:06 PM
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 -

_Aerospace_Eng_
05-22-2005, 06:07 PM
change this

<form name="news">
<textarea name="news2" cols=40 rows=4 wrap=virtual></textarea>
</form>
to this

<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.

hunter
05-22-2005, 08:25 PM
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.

_Aerospace_Eng_
05-22-2005, 09:01 PM
change this

<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

<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>

hunter
05-22-2005, 09:09 PM
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?

_Aerospace_Eng_
05-22-2005, 09:13 PM
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.

hunter
05-22-2005, 09:21 PM
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...

_Aerospace_Eng_
05-22-2005, 09:30 PM
Okay it was the form margins causing the problem. Try this

<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>

hunter
05-22-2005, 10:12 PM
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?

_Aerospace_Eng_
05-22-2005, 10:13 PM
cols are horizontal, its the rows that you should change.

hunter
05-22-2005, 11:04 PM
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.

_Aerospace_Eng_
05-23-2005, 06:05 AM
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.

hunter
05-23-2005, 03:32 PM
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

_Aerospace_Eng_
05-23-2005, 04:03 PM
What browser are you seeing the scrollbar on? I've checked in Internet Explorer and Firefox for Win/PC and there is no scrollbar mainly because overflow is set to hidden. The only problem I see in IE/PC is the content div and the right div seem to wide to fit into the containing div. You might want to float the side divs left, along with the content div and the right div will fall into place if there is enough space for it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum