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
    408
    Thanks
    17
    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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    assuming that you're developing for mobile, isn't there an onorientationchanged event?

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    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
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why don't you like using CSS Media queries? If it can be done in CSS, why use javascript/jQuery?

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    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
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    IMO, I don't think using numerous media queries is inefficient. That's how Responsive design works.

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 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
    •