SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    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.

  2. #2
    SitePoint Evangelist AlienDev's Avatar
    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>
    JS:
    Code:
    function show() {
    document.div.hide.display="normal";
    }
    Someone who knows JS will be able to help you better than me.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlienDev View Post
    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>
    JS:
    Code:
    function show() {
    document.div.hide.display="normal";
    }
    Someone who knows JS will be able to help you better than me.

    Thanks, but the code is incomplete There is nothing to "Click" to bring it into view to start with, and unsure how I could apply this to mutipity DIV id's....

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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>
    All they're doing is swapping display:none between two spans and two other spans (the content and the less/more links). It's probably the simplest way. You would have to truncate the text on the server side and add the ellipsis at the end of it.

    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;
    }
    If the third line happens to be where a paragraph finishes, that's OK, but if it's in the middle of a paragraph, then the span will cover some of it with the ellipsis and the (more) link. You have to decide if that looks OK.

    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.

  5. #5
    SitePoint Member
    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???

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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.

  7. #7
    SitePoint Guru
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •