liamloveslearning Posted March 3, 2009 Share Posted March 3, 2009 Hey guys. Im currently working on a university project and I've hit a brick wall with part of my code. Basically, I'm creating a mashup website that creates feeds on the fly, from APIs such as LastFM, YouTube, Flickr and Idiomag. The results are then echoed out into a HTML document, to create a unique artist profile. My question is, how is it possible to have a truncated string within the HTML and be able to click "Read More" to display the full string? If you look at this profile, you'll be able to see what I mean: http://cahamilton.at-uclan.com/fyp/query.php?artist=foo+fighters As the biographies aren't generated by myself (Last FM), I have no control over the length of them. Within my PHP coding, I have a truncate function which looks like this: $bio_scrape_large = strip_tags($bio_scrape_large,'<p><br><strong><b><u>'); $bio_scrape_small = substr($bio_scrape_large,0,3000); echo $bio_scrape_small; ?> Basically, I want to be able to click on a link that says "Read Me" (or something along those lines), to which $bio_scrape_large is echoed out into the HTML. Any ideas? Quote Link to comment Share on other sites More sharing options...
waynewex Posted March 3, 2009 Share Posted March 3, 2009 That's more of a JavaScript question I think. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted March 3, 2009 Author Share Posted March 3, 2009 Ah right, fair enough. Is there anyway I can get this moved to the Javascript forum then? Quote Link to comment Share on other sites More sharing options...
phpretard Posted March 3, 2009 Share Posted March 3, 2009 <script> function showHide(inID) { if (document.getElementById(inID).style.display == 'none') { document.getElementById(inID).style.display = 'block'; } else { document.getElementById(inID).style.display = 'none'; } } function Show(inID) { if (document.getElementById(inID).style.display == 'none') { document.getElementById(inID).style.display = 'block'; } else { document.getElementById(inID).style.display = 'block'; } } function Hide(inID) { if (document.getElementById(inID).style.display == 'block') { document.getElementById(inID).style.display = 'none'; } else { document.getElementById(inID).style.display = 'none'; } } </script> Quote Link to comment Share on other sites More sharing options...
phpretard Posted March 3, 2009 Share Posted March 3, 2009 <a href="javascript:void(0)" onclick="Show('somthing')">read more...</a> <a href="javascript:void(0)" onclick="Hide('somthing')">read more...</a> <a href="javascript:void(0)" onclick="showHide('somthing')">read more...</a> <div id='something' style='display: none'>reas more content</div> Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted March 3, 2009 Author Share Posted March 3, 2009 Sorry, I'm not very knowledgeable with JavaScript. And when I say that, I mean I know nothing about it lol. How would I code my PHP into that? Quote Link to comment Share on other sites More sharing options...
phpretard Posted March 3, 2009 Share Posted March 3, 2009 <head> <?php echo" <script> function showHide(inID) { if (document.getElementById(inID).style.display == 'none') { document.getElementById(inID).style.display = 'block'; } else { document.getElementById(inID).style.display = 'none'; } } function Show(inID) { if (document.getElementById(inID).style.display == 'none') { document.getElementById(inID).style.display = 'block'; } else { document.getElementById(inID).style.display = 'block'; } } function Hide(inID) { if (document.getElementById(inID).style.display == 'block') { document.getElementById(inID).style.display = 'none'; } else { document.getElementById(inID).style.display = 'none'; } } </script> "; ?> </head> <body> <?php echo" <a href=\"javascript:void(0)\" onclick=\"Show('somthing')\">read more...</a> <a href=\"javascript:void(0)\" onclick=\"Hide('somthing')\">read more...</a> <a href=\"javascript:void(0)\" onclick=\"showHide('somthing')\">read more...</a> <div id='something' style='display: none'>reas more content</div> "; ?> </body> Quote Link to comment Share on other sites More sharing options...
Yesideez Posted March 3, 2009 Share Posted March 3, 2009 You can set a DIV element up and set it to hidden. substr(text,0,100)<div style="display:hidden">text</div><a href="#" onclick="this.style.display.show">read more</a> Something like that although my Javascript isn't brilliant so you'll need to look up "javascript display" in Google for the correct way of doing it. substr: show the first 100 characters and show all the text in the DIV. Quote Link to comment Share on other sites More sharing options...
phpretard Posted March 3, 2009 Share Posted March 3, 2009 If you change it to "hidden" vs "none" the code will not work Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted March 6, 2009 Author Share Posted March 6, 2009 Hey guys. Cheers for your help. Im kind of half way there with the code now, although still having a few problems. I've managed to get it so that the "bio_large" div is loaded into the page, but can't seem to get it to override the previous "bio_small". Rather than trying to explain it, it maybe easier to show you guys. For example: http://cahamilton.at-uclan.com/fyp/query.php?artist=muse Rather than replacing the div_small, div_large is just added onto the end. So far this is what I have: In the <head> <script> function showHide(bio_large) { if (document.getElementById(bio_large).style.display == 'none') { document.getElementById(bio_large).style.display = 'block'; } else { document.getElementById(bio_small).style.display = 'none'; } } function Show(bio_large) { if (document.getElementById(bio_large).style.display == 'none') { document.getElementById(bio_large).style.display = 'block'; } else { document.getElementById(bio_large).style.display = 'block'; } } function Hide(bio_large) { if (document.getElementById(bio_large).style.display == 'block') { document.getElementById(bio_large).style.display = 'none'; } else { document.getElementById(bio_large).style.display = 'none'; } } </script> In the <body> <?php echo" <div id='bio_small'> $bio_scrape_small<a href=\"javascript:void(0)\" onclick=\"showHide('bio_large')\" class='readmore'>Read More »</a> </div> <div id='bio_large' style='display: none'> $bio_scrape_large<a href=\"#\" onclick=\"Hide('bio_large')\" class='readmore'>« Read Less</a> </div> ";?> Apologies, my knowledge of JavaScript is pretty limited. I'm getting there though and there seems to be some form of functionality to it. Again, thanks for the help so far guys Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted March 6, 2009 Author Share Posted March 6, 2009 Never mind guys, just solved my problem ! Just discovered about multiple onclick states lol. Cheers for your help guys! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.