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.
Expand contract text for items on a list.
Moderator: General Moderators
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: Expand contract text for items on a list.
It sounds like you need a standard accordion that shows one line and then expands to the full site of the text.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).
http://jqueryui.com/accordion/
I don't know any browsers that turn off Javascript by default.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.
(#10850)
Re: Expand contract text for items on a list.
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?
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.
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.
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.
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.
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.
- Tiancris
- Forum Commoner
- Posts: 39
- Joined: Sun Jan 08, 2012 9:54 pm
- Location: Mar del Plata, Argentina
Re: Expand contract text for items on a list.
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>