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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts

    Extra spaces, like spacebar spaces, in H2?

    Code:
    <script type="text/javascript">
    			$(document).ready(function(){
    				$('h2').each(function(i, obj) {
    					var string = $(this).text().toLowerCase().replace(/ /gi, '0').split("");
    					alert(string);
    					$(obj).html('');
    					$(string).each(function(n) {
    					var margin_style = '';
    						if (string[n] == 'a' || string[n] == 'p' || string[n] == 't' || string[n] == 'o' || string[n] == 'm' || string[n] == 'w') {
    							margin_style += ' style="margin: 0 -1px;" ';
    						}
    						$(obj).append('<img src="<?php echo $this->themePath('img/letters/')?>'+string[n]+'.png"'+margin_style+'alt="'+string[n]+'" />');
    					});
    				});
    			});
    		</script>
    I use the code above to convert the text into an image depending on the letter, however when used on H2 there seems to be extra spaces (echoing 0 == space). I've checked and tried other elements and they seem to be working fine. Or did I miss something else?

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Anyone? halp pl0x?

    Or is the only workaround here is to use another element? :x

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Can you show it live? Give us a URL?

    We don't have your images to work with, so there's no possible way for us to reproduce your environment.

    You know, it may be as simple as that you *DO* have extra spaces in the text in your <h2>s In HTML, multiple spaces are compressed to a single space, so you'd never see it.

    Let's clean up your code a bit and also convert multiple spaces to a single one:
    Code:
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $('h2').each(
                function(i, obj) 
                {
                    var string = $(this).text().toLowerCase().replace(/\s+/g, '0');
    		$(obj).html('');
    		for ( var n = 0; n < string.length; ++n )
                    {
                        var letter = string.charAt(n);
                        var margin_style =  ( ("aptomw").indexOf(letter) >= 0 )
                                         ? ' style="margin: 0 -1px;" '
                                         : '';
       		   $(obj).append('<img src="<?php echo $this->themePath('img/letters/')?>'+letter+'.png"'+margin_style+'alt="'+letter +'" />');
                    }
                }
            )
        }
    );
    </script>
    If that works, and if you want to then stop converting spaces to "0", just change
    Code:
         replace(/\s+/g, '0')
    to
    Code:
        replace(/\s+/g, ' ')
    And, by the by, if the only reason you have jQuery on your page is this simple chunk of code, then there's no reason to keep the jQuery. Cut your page loading time way down and get rid of it and just use:
    Code:
    <html>
    <body>
    <h2>Something              or other</h2>
    more stuff
    <h2>another    heading</h2>
    
    
    <script type="text/javascript">
    (
      function()
      {
          var h2s = document.getElementsByTagName("h2");
          for ( var h = 0; h < h2s.length; ++h )
          {
              var h2 = h2s[h];
              var string = h2.innerHTML.toLowerCase().replace(/\s+/g, '0'); // or ' '
              var html = "";
              for ( var n = 0; n < string.length; ++n )
              {
                  var letter = string.charAt(n);
                  var margin_style =  ( ("aptomw").indexOf(letter) >= 0 )
                                   ? ' style="margin: 0 -1px;" '
                                   : '';
                  html += '<img src="<?php echo $this->themePath('img/letters/')?>'+letter+'.png"'+margin_style+'alt="'+letter +'" />';
              }
              h2.innerHTML = html;
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    kenshn111 (05-24-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Here, proof that the non JS code works. Changed the <...> of the <img> tags to [ ... ] so you can see it happening.

    And you can see that in both the before and after, the *appearance* of the <h2>s shows multiple spaces as a single one.
    Code:
    <html>
    <body>
    notice the multiple spaces in the h2 contents in the source
    <h2>Something              or                       other</h2>
    but you only see a single space visibly
    <h2>another    heading</h2>
    
    
    <script type="text/javascript">
      function changeThem()
      {
          var h2s = document.getElementsByTagName("h2");
          for ( var h = 0; h < h2s.length; ++h )
          {
              var h2 = h2s[h];
              var string = h2.innerHTML.toLowerCase().replace(/\s+/g, '0'); // or ' '
              var html = "";
              for ( var n = 0; n < string.length; ++n )
              {
                  var letter = string.charAt(n);
                  var margin_style =  ( ("aptomw").indexOf(letter) >= 0 )
                                   ? 'style="margin: 0 -1px;"'
                                   : '';
                  html += '[img src="img/letters/'+letter+'.png" '+margin_style+' alt="'+letter +'" /]<br/>';
              }
              h2.innerHTML = html;
          }
      }
      // delay the change, so you can see it both ways:
      setTimeout( changeThem, 6000 );
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    The H2 tags only have one word, no spaces. But it seems like it's just an issue within the theme, putting spaces before and after the word/s, (I really don't know why) since I've just tested it on another HTML file (which is working). I've tried your code and it's all good now O (Although there are still spaces before and after but they're just single now lol, I'm still wondering why it has spaces.. probably CSS? or how it parses PHP files idk )

    OKAY! It seems like it's because of PHP Tidy! Even though I've disabled it already, damn. (like.. within PHP disabling.. not wamp thiny disabling..)

    Thank you for the code, sir!
    Last edited by kenshn111; 05-24-2013 at 04:27 AM.


  •  

    Posting Permissions

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