3 Replies - 462 Views - Last Post: 19 February 2014 - 09:41 AM

#1 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 77
  • Joined: 09-December 13

scaling text height jQuery

Posted 18 February 2014 - 10:48 AM

hi everybody,

I would like to know if there is a way to use jQuery to scale text relative to it's parent div

The text I have will be in heading tags and will be wrapped in a container div

The div has a percentage height here's its exact CSS:

	.column-module-header,
	.column-module-footer{ 
		float:left;
		padding:1%;
		width:100%;
		height:7%;
		min-height:35px;
		background-color:#066492;
		border-bottom:2px solid #6699cc;
		text-align:left;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}


I would like the text to have a auto width and a scaling height that will always be 100%

I am putting this under jQuery as I can't seem to find a way of doing it through CSS

Is This A Good Question/Topic? 0
  • +

Replies To: scaling text height jQuery

#2 shintetsu_80  Icon User is offline

  • D.I.C Head

Reputation: 31
  • View blog
  • Posts: 105
  • Joined: 01-July 08

Re: scaling text height jQuery

Posted 18 February 2014 - 12:32 PM

If you want the actual text to scale you should look at the font-size css property. I don't know what environment you're working in (resizable at runtime) but the short answer is yes you can do this with jQuery. Checkout jQuery.css.
Was This Post Helpful? 0
  • +
  • -

#3 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 77
  • Joined: 09-December 13

Re: scaling text height jQuery

Posted 19 February 2014 - 04:12 AM

no the font-sizing doesn't seem to have the outcome I wanted.

here is the CSS I used on the h1:

		.column-module-header h1 {
			float:left;
			color:#fff;
			margin:0px;
			padding:0px;
			font-weight:normal;
			text-height:100%;
			height:100%;
		}


The outcome that I would like is for the h1 height to be 100% relative to its parent(which is a percentage height) and changes with the height of the window.

The thing is I can't seem to get the text itself to scale the height of its tag.

putting the text-height to 100% seems to work but stays at that size when the parent is scaled down causing it to overflow the div.

This post has been edited by typhlosion: 19 February 2014 - 04:15 AM

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 334
  • View blog
  • Posts: 1,215
  • Joined: 15-January 14

Re: scaling text height jQuery

Posted 19 February 2014 - 09:41 AM

Using a percentage for text height typically makes it a percentage of the parent's text height. Same with font size. It sounds like you need to add event handlers for when the page is loaded and when it's resized to get the height of the element you're looking for in pixels, and set the font size to that same height.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1