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
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts

    onclick to show more is not showing text next to previous text

    Can anyone tell me why they think the following code is not showing the text beside the rest of the text.

    What I was after is to have the visitor click the 'show more' link which opens up the rest of the text, but it is not showing it next to the text already there, it is breaking the text up with a new line. how can I get it so the text is all together, but at all times centered.

    Code:
    <!DOCTYPE HTML><html><head><title>Untitled Document</title><? echo('<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">'); ?>
    
    <style>
    .more { display: none; }
    a.showLink, a.hideLink { text-decoration: none; color: #36f; padding-left: 8px; /*background: transparent url(down.gif) no-repeat left;*/ }
    a.hideLink { /*background: transparent url(up.gif) no-repeat left;*/ }
    a.showLink:hover, a.hideLink:hover { border-bottom: 1px dotted #36f; }
    </style>
    <script type="text/javascript">
    function showHide(shID) {
       if (document.getElementById(shID)) {
          if (document.getElementById(shID+'-show').style.display != 'none') {
             document.getElementById(shID+'-show').style.display = 'none';
             document.getElementById(shID).style.display = 'block';
          }
          else {
             document.getElementById(shID+'-show').style.display = 'inline';
             document.getElementById(shID).style.display = 'none';
          }
       }
    }
    </script>
    
    </head><body>
    <div style="width: 100px; font-size: 0.5em;">
    <h1 style="text-align: center;"><?
    												$resultsTitle = "a very long title for the products as i need to know if this will wrap properly";
    															if (strlen($resultsTitle) < 30) { $top_desc = $resultsTitle; $more_desc = "";
    															} else {
    															//$top= strpos($resultsTitle." ", " ", 30);
    															$top_desc = substr($resultsTitle, 0, 30);
    															$more_desc = substr($resultsTitle, 30);
    															} ?>	
    													<span style="float: left;"><? echo ($top_desc);
    															if ($more_desc != "") {
    															?><a href="#" id="textbox<? echo $results['itemid'];?>-show" class="showLink" onclick="showHide('textbox<? echo $results['itemid'];?>');return false;">.... See more</a><?
    															}
    													?></span><?
    																if ($more_desc != "") {
    																?><span style="float: left;" id="textbox<? echo $results['itemid']; ?>" class="more"><? echo ($more_desc);
    																?><br><a href="#" id="textbox<? echo $results['itemid']; ?>-hide" class="hideLink" onclick="showHide('textbox<? echo $results['itemid']; ?>');return false;">Hide this content</a><?
    																?></span><?
    																}
    												?></h1>
    </div>
    </body></html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Please show us the output source code as you see it in the browser. PHP is of no interest for styling issues.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    before:

    a very long title for the prod.... See more

    after:

    a very long title for the products as i need to know if this will wrap properly

    Hide this content


    Code:
    <!DOCTYPE HTML>
    <html>
      
      <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <style>
          .more {
            display: none;
          }
          a.showLink, a.hideLink {
            text-decoration: none;
            color: #36f;
            padding-left: 8px;
            /*background: transparent url(down.gif) no-repeat left;*/
          }
          a.hideLink {
            /*background: transparent url(up.gif) no-repeat left;*/
          }
          a.showLink:hover, a.hideLink:hover {
            border-bottom: 1px dotted #36f;
          }
        </style>
        <script type="text/javascript">
          function showHide(shID) {
            if (document.getElementById(shID)) {
              if (document.getElementById(shID + '-show').style.display != 'none') {
                document.getElementById(shID + '-show').style.display = 'none';
                document.getElementById(shID).style.display = 'block';
              } else {
                document.getElementById(shID + '-show').style.display = 'inline';
                document.getElementById(shID).style.display = 'none';
              }
            }
          }
        </script>
      </head>
      
      <body>
        <div style="width: 100px; font-size: 0.5em;">
          	<h1 style="text-align: center;">	
    		  <span style="float: left;">a very long title for the prod<a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">.... See more</a></span>
              <span style="float: left;" id="textbox" class="more">ucts as i need to know if this will wrap properly<br>
              <a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a></span>
            </h1>
        </div>
      </body>
    </html>
    Last edited by VIPStephan; 11-26-2012 at 05:57 PM. Reason: formatted source code for better overview

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I took the liberty to format your code so it’s easier to see where an element starts and ends.

    One of the two issues is this, I guess:
    Code:
    document.getElementById(shID).style.display = 'block';
    If you display an element as block-level element it invokes a line break before and after itself.
    Secondly, if you want centered text, don’t float it. text-align: center is only working on inline content and not on elements that are floated, because these are basically behaving as block elements.

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Ah I think I understand what you mean. What method should I be using to achieve this effect. What is the correct way to hide/show the elements so I do not get the line-break ?


    Quote Originally Posted by VIPStephan View Post
    I took the liberty to format your code so it’s easier to see where an element starts and ends.

    One of the two issues is this, I guess:
    Code:
    document.getElementById(shID).style.display = 'block';
    If you display an element as block-level element it invokes a line break before and after itself.
    Secondly, if you want centered text, don’t float it. text-align: center is only working on inline content and not on elements that are floated, because these are basically behaving as block elements.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Well, try it with “inline” instead of “block”. You even have that in the else statement of your function for the button already.

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by VIPStephan View Post
    Well, try it with “inline” instead of “block”. You even have that in the else statement of your function for the button already.
    just playing around with the code and done that, also removed the float and seems to got it working.

    thank you for the clue/help on this.


  •  

    Posting Permissions

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