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.

<!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

<!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: 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 ?

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

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.