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

needsomehelp · 11-26-2012, 05:24 PM

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>

VIPStephan · 11-26-2012, 05:44 PM

Please show us the output source code as you see it in the browser. PHP is of no interest for styling issues.

needsomehelp · 11-26-2012, 05:50 PM

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>

VIPStephan · 11-26-2012, 06:04 PM

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.

needsomehelp · 11-26-2012, 06:11 PM

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

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.

VIPStephan · 11-26-2012, 06:21 PM

Well, try it with “inline” instead of “block”. You even have that in the else statement of your function for the button already.

needsomehelp · 11-26-2012, 06:33 PM

Quote:

Originally Posted by VIPStephan

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.