At 01:35 PM 8/9/2006, Christian Heilmann wrote: >>Have another programming quandary that I'm hoping I can get the list's help >>on...I'm not even sure what the technique is called so I'm not coming up >>with much so far by Googling for tutorials. >> >>Basically, we need some way to code a "Show More" function that would allow >>us to take a long piece of text, shorten it to X maximum lines, then have a >>"Read more" link that when clicked would display the rest of the text on >>the page below the first half. > >There is no obvious CSS-only solution (cssplay.co.uk has one though) >but in terms of browser compatibility and usabilty (keyword enabling >for starters), this should be done with a mix of CSS and JS. I will >create a demo in a moment. The snag you will run into though is that >there is no such thing as "after x lines", as with different font >sizes, there'll be more or less lines. > >-- >Chris Heilmann
Thanks, Chris. I look forward to seeing your demo. I managed to find one tutorial on hierarchical menus using a mix of CSS and JS (http://www.oreillynet.com/pub/a/javascript/2002/02/22/hierarchical_menus.html), and I wonder if I should apply this method for my page? But he says that style.display is not compatible across all browsers (at least at the time of the article's publication in 2002) so "make sure you start your script by using browser detection to redirect users with non-compliant browsers"? Here is a copy of his script: <script language="JavaScript"> <!-- var plusImg = new Image(); plusImg.src = "./images/plus.png" var minusImg = new Image(); minusImg.src = "./images/minus.png" function hideLevel( _levelId, _imgId ) { var thisLevel = document.getElementById( _levelId ); var thisImg = document.getElementById( _imgId ); thisLevel.style.display = "none"; thisImg.src = plusImg.src; } function hideAll() { hideLevel("chapters", "chapImg"); hideLevel("projectlinks", "projImg"); hideLevel("interestlinks", "intsImg"); } function showLevel( _levelId, _imgId ) { var thisLevel = document.getElementById( _levelId ); var thisImg = document.getElementById( _imgId ); if ( thisLevel.style.display == "none") { thisLevel.style.display = "block"; thisImg.src = minusImg.src; } else { hideLevel( _levelId, _imgId); } } // --> </script> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
