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.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    420
    Thanks
    18
    Thanked 2 Times in 2 Posts

    auto resize text

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

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

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,621
    Thanks
    58
    Thanked 662 Times in 657 Posts
    assuming that you're developing for mobile, isn't there an onorientationchanged event?

  3. #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    420
    Thanks
    18
    Thanked 2 Times in 2 Posts
    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?

  4. #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,079
    Thanks
    0
    Thanked 257 Times in 253 Posts
    Why don't you like using CSS Media queries? If it can be done in CSS, why use javascript/jQuery?

  5. #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    420
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Sorry for the delayed response...

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

  6. #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,079
    Thanks
    0
    Thanked 257 Times in 253 Posts
    IMO, I don't think using numerous media queries is inefficient. That's how Responsive design works.

  7. #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 77 Times in 75 Posts
    I wonder whether your CSS media rules/ queries can be minimized by using other font-size unit, e.g. vw.
    A demo of this however, doesn't work on my IE.8

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


 

Posting Permissions

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