SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i want to make this. i new in whole ajax thing

    hello frnds n experts ,




    see it working here

    ###.apple.com/trailers/#section=justadded&page=2

    i want to start making shorting module box for my site ... how to start with any suggestion will be help full

    Thanks
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That looks interesting. I'll put together something about that tonight.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Instead of copying the code from what apple have done, I'll create a working demo independently, that performs the poster/list technique.

    I used the menu with rollover images as the base design for the icon selection.
    http://css-tricks.com/css-menu-with-rollover-images/

    Code html4strict:
    <div id="view"> 
    	<ul> 
    		<li id="poster"><a href="#view-poster">Poster</a></li> 
    		<li id="list"><a href="#view-list">List</a></li> 
    	</ul> 
    </div>

    The image that I used has all six icons. Poster icon on the left and list icon on the right, with the inactive icon at the top, the hover icon in the middle, and the selected icon at the bottom.

    The css to create the rollover image technique is this:

    Code css:
    #view { display: block; position: relative; width: 56px; }
    #view ul { list-style-type: none; width: 56px; }
    #view li { display: block; float: left; height: 21px; width: 28px; }
    #view a, #view a:visited { display: block; background: url(listtype.jpg); background-color: transparent; color: black; height: 21px; text-indent: -9999px; line-height: 21px; text-decoration: none; width: 28px; }
    #view a:hover { color: white; line-height: 21px; overflow: hidden; }
    #view #poster a, #view #poster a:visited { background-position: left top; }
    #view #poster a:hover { background-position: left center; }
    #view #poster a:active, #view #poster a.selected { background-position: left bottom; }
    #view #list a, #view #list a:visited { background-position: right top; }
    #view #list a:hover { background-position: right center; }
    #view #list a:active, #view #list a.selected { background-position: right bottom; }

    Much of the width and height parameters are to ensure cross-browser compatibility.

    Then we need to allow the icon to keep its state when you visit the page, and after you've clicked an icon to set it to that state and remove it from the others. For that I'll use a "selected" class.

    This is the code that sets the first icon to be selected by default when the page loads.

    Code javascript:
    document.getElementById('view').getElementsByTagName('a')[0].className = 'selected';

    Be sure to run the script code after the page has loaded. The best way is to place the script at the end of the body so that it runs as soon as the DOM is ready. If you need to run it from the head then you'll also need to use some kind of window.onload technique.

    When people click on each icon, we want that "selected" class to move to that icon, so we'll walk through each icon removing the class name, and set it only on the one that was clicked.

    We also want to set the classname of the trailers list to represent how we want them to be displayed.

    And finally, when we do click we don't want the link itself to take us anywhere, so we'll return false from the function.

    Code javascript:
    document.getElementById('view').onclick = function (evt) {
    	evt = evt || window.event;
    	var targ = evt.target || evt.srcElement,
    		trailerList = document.getElementById('trailers').getElementsByTagName('ul')[0],
    		els = this.getElementsByTagName('a'),
    		el,
    		i;
    	for (i = 0; i < els.length; i += 1) {
    		el = els[i];
    		if (el === targ) {
    			el.className = 'selected';
    		} else {
    			el.className = '';
    		}
    	}
    	trailerList.className = targ.parentNode.id;
    	return false;
    }

    With the list of trailers, we don't need any javascript at all, bar for the little bit above which sets the class name.

    The html for the trailers is as follows:

    Code html4strict:
    <div id="trailers">
    	<ul class="poster">
    		<li>
    			<img src="renthotticket.jpg">
    			<h2>Rent: Hot Ticket</h2>
    			<p>Posted September 1, 2008</p>
    		</li>
    		<li>
    			<img src="ghosttown.jpg">
    			<h2>Ghost Town <span class="type"><img src="hd.jpg"></span></h2>
    			<p>Posted August 29, 2008</p>
    		</li>
    		<li>
    			<img src="realtime.jpg">
    			<h2>Real Time <span class="type"><img src="hd.jpg"></span></h2>
    			<p>Posted August 29, 2008</p>
    		</li>
    		<li>
    			<img src="mommasman.jpg">
    			<h2>Momma's Man <span class="type"><img src="hd.jpg"></span></h2>
    			<p>Posted August 29, 2008</p>
    		</li>
    		<li>
    			<img src="allahmademefunny.jpg">
    			<h2>Allah Made Me Funny <span class="type"><img src="hd.jpg"></span></h2>
    			<p>Posted August 29, 2008</p>
    		</li>
    	</ul>
    </div>

    And the css to make it look as we want is this:

    Code css:
    #trailers { clear: left; }
    #trailers  li { list-style-type: none; }
    #trailers li img { padding: 0.5em; }
    #trailers li h2 { color: skyblue; font-size: smaller; margin: 0; padding: 0; }
    #trailers li p { color: smaller; margin: 0; padding: 0 0 1em; }
    #trailers .poster li { float: left; }
    #trailers .poster li h2 span { display: block; }
    #trailers .poster li p { display: none; }
    #trailers .list img { display: none; }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •