Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

On Apple's site, how was this done?

macaddict23 said:
http://store.apple.com/us/product/M...ac/mac_accessories/audio_speakers&mco=MTI3MDU

If you click on any of the "Read more" links, the text block expands. How was this done? Thanks!
Click to expand...

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.
 
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
 
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.
 
macaddict23 said:
Thanks angelwatt. But how/where exactly do I implement this?
Click to expand...

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.
 
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!
 
macaddict23 said:
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!
Click to expand...

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.
 
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
 
lynneoconnor said:
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
Click to expand...

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
 
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!.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back