SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Hide/show text (jn that order)
-
Apr 8, 2007, 06:38 #1
- Join Date
- Mar 2007
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hide/show text (jn that order)
Hi
Some of my web pages have quite a bulk of content, for examples "interviews" etc and it takes a long time to scroll around trying to find what you want. So I was looking for a way to (on page load) to hide the text (it must be hidden onload), and then hit a "link" to display the hidden content.
Best example I can give is Youtube (Which is what I'm aiming for). On many vidoes there is a brief summary of 10 or so words and then a "More" link, which when you hit it shows (you guessed it) the rest of the text.
I've tried learning from the youtube page source, but lets just say to a newbie like me... after an hour of trying to understand whats going on, I've given up.
I've worked out its a Javascript function, and I think I will need some type of DIV Id, in order to seperate interview's. Any advice or help would be much appreciated.
-
Apr 8, 2007, 06:57 #2
- Join Date
- Feb 2007
- Location
- UK
- Posts
- 591
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have only ever used JS once in my life but I think its something like this:
HTML:
Code:<div class="hide" style="display:none;" onClick="show();">this is hidden at the start</div>
Code:function show() { document.div.hide.display="normal"; }
-
Apr 8, 2007, 11:29 #3
- Join Date
- Mar 2007
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Apr 8, 2007, 11:58 #4
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
If you have make JS hide most of the content onload, the user will see the full content while the page is loading and when the last image has been downloaded (usually the slowest things on a page), then the onload event fires and all the JS magic is done.
YouTube do it like this:
HTML Code:<div id="vidDescDiv"> <span id="vidDescBegin">Dan tries to run up the longest escal...</span> <span id="vidDescRemain">Dan tries to run up the longest escalator in Western Europe the wrong way twice.</span> <span id="vidDescMore" class="smallText"> (<a href="#" class="eLink" onclick="showInline('vidDescRemain'); hideInline('vidDescMore'); hideInline('vidDescBegin'); showInline('vidDescLess'); return false;" rel="nofollow">more</a>)</span> <span id="vidDescLess" class="smallText">(<a href="#" class="eLink" onclick="hideInline('vidDescRemain'); hideInline('vidDescLess'); showInline('vidDescBegin'); showInline('vidDescMore'); return false;" rel="nofollow">less</a>)</span> </div>
You could reduce the extra markup by making the content have overflow:hidden and a short height and then set the height to auto when the link is clicked (and change the link text to 'less'). You would have to work with ems there to make sure the height is always, say, three lines high when minimised:
HTML Code:<div class="interview"> <p>This is a long interview. This is a long interview. This is a long interview.</p> <p>This is a long interview. This is a long interview. This is a long interview.</p> <p>This is a long interview. This is a long interview. This is a long interview.</p> <p>This is a long interview. This is a long interview. This is a long interview.</p> <p>This is a long interview. This is a long interview. This is a long interview.</p> <span class="moreorless">... <a href="#">(more)</a></span> </div>
Code:.interview { line-height:1.5em; height:4.5em; overflow:hidden; position:relative; } .interview .moreorless { position:absolute; right:0; bottom:0; background:#FFF; }
Then with javascript you have to find all the spans with the "moreorless" class and put them in an array. Then loop through them and attach an onclick event to the anchor inside each one that sets the parent div's (the .interview) height to auto and the link itself's text to less. Best way to do this would be by attaching another class to it and then removing it when it's clicked again.
-
Apr 10, 2007, 04:58 #5
- Join Date
- Mar 2007
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ooh thanks Raffles, that looks really good.
Just a bit confuddled by;
Code:<span class="moreorless">... <a href="#">(more)</a></span>
What anchor needs to be put in place of "#" to open the rest of the content???
Also, um does your code need a J script to work???
-
Apr 10, 2007, 06:24 #6
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
You can leave the anchor as it is and you have to of course target it via javascript. What you need javascript for I outlined in the last paragraph of my previous post.
-
Apr 10, 2007, 07:53 #7
- Join Date
- Apr 2007
- Posts
- 813
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
creating javascript tabs, it will be a lot of easier if you use prototype framework
eg.
Code:<div id="vidDescDiv"> <span id="vidDescBegin">a </span> <span id="vidDescRemain">b </span> <span id="vidDescMore" class="smallText">c </span> <span id="vidDescLess" class="smallText">d </span> </div> <div id="vidDescDivContent"> <span id="vidDescBegin-content">Content 1</span> <span id="vidDescRemain-content">Content 2</span> <span id="vidDescMore-content" class="smallText">Content 3</span> <span id="vidDescLess-content" class="smallText">Content 4</span> </div> <script> links = $A($('vidDescDiv').getElementsByTagName('SPAN')) contents = $A($('vidDescDivContent').getElementsByTagName('SPAN')) links.each(function (t) { t.onclick = function () { contents.each(function (tc) { if (tc.id != t.id+'-content') Element.hide(tc); }); $(t.id+'-content').show(); } }); </script>
Bookmarks