On Apple's site, how was this done?

Discussion in 'Web Design and Development' started by macaddict23, May 16, 2008.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
  2. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #2
    Javascript. I know the scriptaculous page says Apple uses their library for something, but I don't know if this is something home-grown.
     
  3. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #3
    It looks like they are using javascript (dojo) to toggle visibility. Check out the page source (do a word find in your browser for "see more") and hit the googles.
    Many will agree that this is the best way to learn.:)
     
  4. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #4
    It is relatively simple JavaScript. Apple did it a bit differently than how I would do it.

    First, they have a list. Each <li> list item is a review. Each review has two parts for text, a <span class = "description"> and one <span class = "more-text"> (or something like that). If the browser does not support javascript, then each comment will display in full (no read more link).

    However, when JavaScript is enabled, Apple uses it to find all <span>s with a class of "more-text". They then, using one method or another (I'm not about to go through the effort of parsing their code), hide the "more-text" and show a "Read more" link.

    Perhaps something like this: (I haven't tested it, so it will likely not work as-is -- I'm particularly concerned about the onclick = function without a proper closure; things like that have bit me before)

    HTML:
    <ol id = 'comments'>
        <li>
            <span class = 'description'>First part of a comment.</span>
            <span class = 'more-text'>
                Second part of a comment.
                If JavaScript is enabled, you won't be able to read this
                until you press "Read More."
            </span>
        </li>
        <li>
            <span class = 'description'>First part of a comment.</span>
            <span class = 'more-text'>
                Second part of a comment.
                If JavaScript is enabled, you won't be able to read this
                until you press "Read More."
            </span>
        </li>
    </ol>
    
    <script type = "text/javascript">
    //get the commentContainer, so we won't fetch ALL spans used in the document
    var commentContainer = document.getElementById("comments");
    
    //get all of the spans
    var spans = commentContainer.getElementsByTagName("span");
    
    //loop through them
    for (var span_index = 0; span_index < spans.length; span_index++)
    {
        //if it is the right kind of span
        if (spans[span_index].className == "more-text")
        {
            //set it to invisible
            spans[span_index].style.display = 'none';
    
    
            //create a link
            var link = document.createElement("a");
            //tell it to go nowhere
            link.href = "#";
    
            //add a new variable to the link so it knows what it is supposed to show
            link.targetSpan = spans[span_index];
    
            //add an onclick (not sure if I did this perfectly)
            link.onclick = function()
            {
                this.targetSpan.style.display = "inline";
                this.offsetParent.removeChild(this);
            };
    
    
            //add link to its parent (li)
            spans[span_index].offsetParent.appendChild(link);
        }
    }
    </script>
    
    Note: Apple probably uses a JavaScript library and thus something much more elegant; perhaps they even use a function like querySelectAll or getElementsByClassName... The above example is not all that elegant.
     
  5. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #5
    I found this via a Google search. It does exactly what I want, except for one thing. I want "Read more" to go away after clicking.

    Code:
    
    Javascript:
    
    <!--
    	function expand(param)
    	{
    		param.style.display=(param.style.display=="none")?"":"none";
    	}
    //-->
    
    HTML:
    
    Texture and lasp net exating end mist. Silk, shast... <a href="javascript:expand(document.getElementById('div1'))">Read more</a>
    	  <div class="dottedBorders" id="div1" width="300px" style="display:none">
                        and lasp net exating end mist of it snooling. Spaff forl isn't cubular but quastic. It has larch to say fan.
    </div
    
    
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    If you add an id attribute (we'll say 'readmore') to the link around 'Read more' then you can do the following JavaScript,
    PHP:
    document.getElementById('readmore').innerHTML '';
    Just add this after the expand.
     
  7. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #7
    Thanks angelwatt. But how/where exactly do I implement this?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Given the snippet from your earlier post I would suggest,
    PHP:
    ... <a href="#" onclick="expand(document.getElementById('div1'));
     this.innerHTML=''; return false;"
    >Read more</a>
    which is a little different than what I offered before, but is more efficient. Note that you won't need to add the id attribute that I mentioned before.
     
  9. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #9
    Thanks angelwatt! Here's what I have:

    Code:
    Texture and lasp net exating end mist of it snooling. Spaff forl isn't cubular 
    but quastic, leam restart that can't prebast. It's tope, this luant chasible. 
    [COLOR="Red"]Silk, shast[/COLOR]<a href="#" onclick="expand(document.getElementById('div1'));
     this.innerHTML=''; return false;">...Read more</a><div id="div1" 
    width="300px" style="display:none">[COLOR="Red"]lasp[/COLOR] net exating end mist of it snooling. 
    Spaff forl isn't cubular but quastic, leam restart that can't prebast. It's tope, this luant chasible. 
    Silk, shast, lape and behast the thin chack. It has larch to say fan. Why? Elesara and order is fay of alm. 
    A card whint not oogum or bont. Pretty simple, glead and tarm.
    
    The hidden copy that starts with "lasp..." breaks to a different line. How do I prevent this?

    Thanks again!
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    If I understand you correctly, then I'd say try changing the 'hidden' div to a span tag. Div tags are block elements, which mean they will start on a new line, and will have a new line at the end of them. Spans on the other hand are inline elements and will not have a new line at the beginning or end.

    So your <div id="div1" ... would become <span id="div1" ... and you can change the id name too of course.
     
  11. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #11
    Dang, I just slapped myself. I should've known that! Thank you soooo much for the help!
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Glad I could be of help.
     
  13. lynneoconnor macrumors newbie

    Joined:
    Jun 12, 2008
    #13
    what about when multiple Read More's are on a page?

    Wow I love this little bit of code that angelwatt and macaddict23 have been hashing out.

    Have I done something wrong if I have multiple Read More's on a page but only one of them works? The first click expands the copy but successive clicks on other Read More links do not expand that paragraph, but the first paragraph with the Read More link. So no matter which Read More link you click, only the first paragraph expands and contracts.

    Any advice would be greatly appreciated!

    Peace,
    Lynne
     
  14. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #14
    It all depends on how it was implemented, however the most likely problem is this....

    Code:
    <a href="#" onclick="expand(document.getElementById('div1'));
     this.innerHTML=''; return false;">Read more</a> 
    the
    document.getElementById('div1')
    you need to change 'div1' to the ID of the div/span tag (whatever you are using) you wish to expand for the respective link
     
  15. lynneoconnor macrumors newbie

    Joined:
    Jun 12, 2008
    #15
  16. HomeBru Studios macrumors member

    HomeBru Studios

    Joined:
    Jun 4, 2008
  17. dmhampton83 macrumors newbie

    Joined:
    Sep 2, 2009
    #17

    I don't like how the read more/less button stays in the middle. Is there a way to make it stay on the bottom.
     
  18. Joined:
    Jun 30, 2009
    #18
    It's not JavaScript alone, it's AJAX. I think it was done using a proprietary framework, but if you'd like to have similar results, have a look over jQuery, Prototype, Dreamweaver's Spry, and, if I'm not confusing anything, Moo!.
     

Share This Page