/    Sign up×
Community /Pin to ProfileBookmark

Increase font within a table in a div!

Copy linkTweet thisAlerts:
Sep 15.2009

I have a very basic script that will increase the font size of text within a div using getElementById. However, the script does not increase text in a table cell that is within the div. I need the text within the table cell to increase, but not the text that is in table cells outside of the div tag. What is the best way to accomplish this? Below is what I have:

[code=html]
function increaseFont17() {
document.getElementById(‘content’).style.fontSize = “17px”;
}
[/code]

I know it is probably something easy, but I am working with no sleep. Many thanks in advance.

Steve

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@nathandelaneSep 15.2009 — Your solution should be acceptable assuming that your code appears as this:
<i>
</i>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;div id="content"&gt;
Some text to increas font size.
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


If however your code looks like this:
<i>
</i>&lt;table&gt;
&lt;tr&gt;
&lt;div id="content"&gt;
&lt;td&gt;
Some text to increas font size.
&lt;/td&gt;
&lt;/div&gt;
&lt;/tr&gt;
&lt;/table&gt;


Then it may not work, because this is not valid HTML. Now some browsers may do what you say anyway, but because this is not valid HTML, the browser will probably not render the HTML properly. <table> tags may contain <caption>, <col>, <colgroup>, <tbody>, <tfoot>, <thead>, and <tr> tags. <tr> tags may contain <td> and <th> tags. And finally, <td> tags may contain almost any tag. But placing a <div> outside of <td>..</td> may not render as expected no matter what.

If I am understanding your predicament correctly, then you need to alter your HTML to look more like my first example in order for your font changes to take effect.
Copy linkTweet thisAlerts:
@SJRauthorSep 16.2009 — I apologize for not being a little more clear. Below is how my HTML looks:

[code=html]
<div id="content">
<p>Some text here.</p>
<table>
<tr>
<td>Some more text here that needs to be enlarged as well.</td>
</tr>
</table>
</div>
[/code]

So basically, anything that is inside a DIV tag, I would need to have enlarged with javascript. The code I posted above works for content within the <p> tags but not for anything inside a <table>.

Steve
Copy linkTweet thisAlerts:
@SJRauthorSep 16.2009 — Ah, I figured it out.

[code=html]
function increaseFont17() {
var tables = document.getElementById('content').getElementsByTagName("td");
for(var q=0;q<tables.length;q++) tables[q].style.fontSize = "17px";
document.getElementById('content').style.fontSize = "17px";
}
[/code]
Copy linkTweet thisAlerts:
@Sabrina_Gage2Sep 22.2009 — I think the problem is that you put the <td> tag into the <div> tag .

I has just written a demo like that:

<script>

function increaseFont17()

{

document.getElementById('content').style.fontSize ='17px';

}

</script>

<table>

<tr>

<td>

<div id="conent" onmouseover="increaseFont17();">

this is a test

</div>

</td>

</tr>

</table>
________________
Sabrina Gage

http://www.comm100.com
×

Success!

Help @SJR spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...