Page 1 of 1
Expand contract text for items on a list.
Posted: Mon Jun 03, 2013 8:44 pm
by kwdamp
I'm trying to devise the best possible way to expand/contract text items (between 1 line and possibly up to a few hundred lines) on a list. The list is generated from data stored in a mysql database and compiled using php code in real time for each pageview.
Has anyone done this using some php coding to set checks? Other ideas?
I know how to do this using javascript, but I'm not happy with that solution for a couple reasons. 1. Since the number of items on each list is not standard, and neither is the size of the text, it takes some complicated javascript (from what I devised anyways). 2. I know a lot of browsers turn javascript off by default now or at bare minimum give a security warning. I don't want my pages to be associated with that.
My best strategy at this point is to run a loop for each item on the list to check to see if it needs to be expanded or contracted (which php code to use). The issue I have with that is it requires the page to be refreshed and unless I also use anchors the visitor will be taken back to the top of the page (I believe).
I know this is half a php question and half an html question but I've been battling with this all afternoon because I both need it to work correctly, but also to be somewhat efficient when scaled up to thousands of pageviews per day.
Any help would be much appreciated.
Re: Expand contract text for items on a list.
Posted: Mon Jun 03, 2013 9:18 pm
by Christopher
kwdamp wrote:1. Since the number of items on each list is not standard, and neither is the size of the text, it takes some complicated javascript (from what I devised anyways).
It sounds like you need a standard accordion that shows one line and then expands to the full site of the text.
http://jqueryui.com/accordion/
kwdamp wrote:2. I know a lot of browsers turn javascript off by default now or at bare minimum give a security warning. I don't want my pages to be associated with that.
I don't know any browsers that turn off Javascript by default.
Re: Expand contract text for items on a list.
Posted: Mon Jun 03, 2013 9:43 pm
by kwdamp
Thanks Christopher. I'll take a look at what you have.
I had been testing with the following, and IE explorer shows the standard "Internet explorer prohibits this page from running scripts or Active X controls" message on both my machines. It works fine in Firefox. My browser is a couple versions old, but I never changed the settings, so this leads me to believe the default does (or did) block scripts?
Code: Select all
Javascript text hide/show
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Toggle Test</title>
<style type="text/css">
#ToggleTarget {
display: none;
}
</style>
<script type="text/javascript">
function Toggle() {
var el = document.getElementById("ToggleTarget");
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
</script>
</head>
<body>
<div id="ToggleTarget">All mimsy were the borogoves,<br />And the mome raths outgrabe.</div>
<p><a href="javascript:Toggle();">Toggle me...</a></p>
</body>
</html>
Re: Expand contract text for items on a list.
Posted: Mon Jun 03, 2013 9:51 pm
by kwdamp
Unfortunately the accordion isn't what I need.
I couldn't find the javascript source code, but it looks like that is meant to run manipulating layers to select one entry at a time.
I'm looking for the ability to expand or contract multiple items, on an item by item basis.
Something like:
George Washington was the first president of the United States [+ More]
Barack Obama was the first African American president [+ More]
Etc, etc.
So, each individual item on the list needs to expand and contract independently of the others. Not work as say a navigation menu that selects one section at a time.
Re: Expand contract text for items on a list.
Posted: Mon Jun 03, 2013 10:57 pm
by kwdamp
I think what I'm trying to do is more like this subroutine wordpress uses:
http://codex.wordpress.org/Customizing_ ... e_More_Tag
But, the source code is a 500 line mess, and there are parts I don't understand because I don't know (or perhaps I should say understand) exactly how their classes and styles are defined.
Re: Expand contract text for items on a list.
Posted: Fri Jun 07, 2013 11:06 pm
by Tiancris
For an Open/Close effect, this could work:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<script>
function toggle(link)
{
var id = link.name;
var text = document.getElementById(id);
if (text.style.display == "none") {
text.style.display = "block";
link.innerHTML = "[close]";
} else {
text.style.display = "none";
link.innerHTML = "[open]";
}
}
</script>
</head>
<body>
<p>
<strong>Title 1</strong> <a name="text1" href="#" onclick="toggle(this)">[open]</a>
<div id="text1" style="display:none">full text here...</div>
</p>
<p>
<strong>Title 2</strong> <a name="text2" href="#" onclick="toggle(this)">[open]</a>
<div id="text2" style="display:none">full text here...</div>
</p>
</body>
</html>