PDA

View Full Version : auto resize text



turpentyne
Sep 16th, 2013, 03:58 PM
I'm trying to find a way/suggestion to simplify the resizing of text in a horizontal navigation. I've seen a script online for this (fit text js), but it doesn't work with my layout. Right now, I've got a tedious @media solution for different screen sizes. Is there any way to turn that into a jquery/javascript solution, that I can use for this?

I'm trying to avoid all these media queries, like this:



<style>
#nav-container {
height:70px;
float:left;
width: 58%;

}

#navigation-1a {
font-family: 'Archivo Narrow', sans-serif;
position:relative;
top:30%;
}


.nav-li {
float:left;
padding:0px 5px 0px 5px;
}

@media (max-width: 1200px) {
#nav-container{
font-size:.8em;
}
}

@media (max-width: 1000px) {
#nav-container{
font-size:.7em;
}
}

@media (max-width: 920px) {
#nav-container{
font-size:.6em;
}
}
// etcetera...
</style>


The navigation is like this:



<div id="nav-container">
<img src="images/logo-divider.png" style="float:left;">
<ul id="navigation-1a">
<li class="nav-li nav-text"><a href="starting-out.php">STARTING OUT</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
<li class="nav-li nav-text"><a href="products.php">PRODUCTS</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
<li class="nav-li nav-text"><a href="about-monex.php">ABOUT</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
<li class="nav-li nav-text"><a href="merchant-support.php">MERCHANT SUPPORT</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
<li class="nav-li nav-text"><a href="resources.php">RESOURCES</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
<li class="nav-li nav-text"><a href="contact.php">CONTACT</a></li>
<li class="nav-li"><img src="images/nav-divider.gif"></li>
</ul>
</div>
</div>

xelawho
Sep 16th, 2013, 04:05 PM
assuming that you're developing for mobile, isn't there an onorientationchanged event?

turpentyne
Sep 16th, 2013, 04:44 PM
hmmm... Yes, there would be. At a certain size, I would do other style changes to change the layout. Maybe there's no silver bullet for the text?

glenngv
Sep 16th, 2013, 10:43 PM
Why don't you like using CSS Media queries? If it can be done in CSS, why use javascript/jQuery?

turpentyne
Sep 18th, 2013, 02:43 PM
Sorry for the delayed response...

I have no problem at all with media queries. Just a problem with numerous media queries. It seems inefficient.

glenngv
Sep 18th, 2013, 04:44 PM
IMO, I don't think using numerous media queries is inefficient. That's how Responsive design works.

hdewantara
Sep 19th, 2013, 03:20 PM
I wonder whether your CSS media rules/ queries can be minimized by using other font-size unit, e.g. vw.
A demo (http://css-tricks.com/examples/ViewportTypography/) of this however, doesn't work on my IE.8 :o

Article: http://css-tricks.com/viewport-sized-typography/
Compatibility: http://caniuse.com/viewport-units