Code-Bin #725

untitled HTML Code
Posted by: russell | July 1, 2010 @ 12:49pm

HTML Code

/* Carousel:controls */	
		#sw_denver_content #d_carousel .control		{ background:url('/landing/den/images/sw-denver/sprite_bg_scrollarrows.png') no-repeat; display:block; height:48px; margin-top:-26px; position:absolute!important; top:50%; width:50px;}
		#sw_denver_content #d_carousel .next		{ background-position:-64px -47px; right:10px;}
		#sw_denver_content #d_carousel .next:hover	{ background-position:-64px 0; }
		#sw_denver_content #d_carousel .prev		{ background-position:0 -47px;  left:10px; }
		#sw_denver_content #d_carousel .prev:hover	{ background-position:0 0; }
		#sw_denver_content #d_carousel .close		{ background:url('/landing/den/images/sw-denver/btn_close.png') no-repeat 0 -33px;  height:33px; width:33px; margin:0; top:auto; bottom:25px; right:25px; z-index:5; }
		#sw_denver_content #d_carousel .close:hover	{ background-position: top left; }
			
</style>

<div class="window">
<div class="scene">
	<ul class="clearfix">
	<li class="person1 current">
		<a href="#" class="person png_bg imgReplacement" title="Paul"><span>Paul</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p>
					With Southwest Airlines, your first two bags are taken care of. They're free! And that means our love will save you up to $120 every roundtrip. There's no better reason to say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> to Southwest.
					</p> 
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person2">
		<a href="#" class="person png_bg imgReplacement" title="Calvin"><span>Calvin</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p>
					With 133 convenient flights every day and more destinations than you could ever dream of, we can honeymoon whenever and wherever you want to. Just be sure to tell us <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> first.
					</p> 
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person3">
		<a href="#" class="person png_bg imgReplacement" title="Lydia"><span>Lydia</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p class="p1">
					We're offering you everything we have to give - from loving smiles and low fares to ontime flights and no change fees<sup>1</sup>. And to really prove our dedication, we're offering you a chance to win two free flights<sup>2</sup> just for saying <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a>
					</p>
					<p class="p2">
					For 2008 among all carriers that report as part of the Air Travel Consumer Report. From September 1987 through February 2010, Southwest Airlines has maintained the best cumulative ontime performance among all Major U.S. airlines according to the Air Travel Consumer Report.
					</p>
					<div class="disclaimer">
						<p><sup>1</sup> Applicable fare difference may apply.</p>
						<p><sup>2</sup> September 11th Security Fee applies.</p>
					</div>
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person4">
		<a href="#" class="person png_bg imgReplacement" title="Tyrone"><span>Tyrone</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p class="p1">
					Whether traveling for business or just for fun, you deserve to be one of the  first to board, have plenty of room for your carryon and have a drink onboard. That's why we offer our Business Select Fare.
					</p>
					<p class="p2">
					Upgrade today, and enjoy your travel experience even more.
					<br/><br/>
					<span class="hint">Seats limited. Fly By at participating airports.</span> 
					</p>
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person5">
		<a href="#" class="person png_bg imgReplacement" title="John"><span>John</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p class="p1">
					At Southwest Airlines, you get to choose your seat. We'll lock in your boarding position when you check in online, so you can sit back, relax and recharge until your group is called. That's how much we care about you, and it's just another reason to say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> to Southwest.
					</p>
					<p class="p2">
					Online checkin may not be available for all fares.
					</p>
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person6">
		<a href="#" class="person png_bg imgReplacement" title="Kate"><span>Kate</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p class="p1">
					Saying <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> is just the beginning. We want to see you at least once a week and on special occasions. <a href="http://www.southwest.com/specialoffers/signup.html">Sign up for Click 'n Save e-mails</a> to get deals on flights, cars, hotels, and more delivered to your inbox.
					</p>
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	<li class="person7">
		<a href="#" class="person png_bg imgReplacement" title="Randi"><span>Randi</span></a>
		<div class="details png_bg">
			<div class="content png_bg">
			<div class="space">
				<div class="title imgReplacement"><span>quote goes here</span></div>
				<div class="text clearfix">
					<p class="p1">
					Southwest loves you so much that we sponsor everything from the Red Rocks Amphitheatre to the Metro Sports Commission. Volunteering in Denver is one of our favorite things to do. Check out the difference we're making at the moment. 
					</p>
					<p class="p2">
					<strong>Southwest Airlines Denver Rescue Mission</strong>
					<br/>
					A group of Denver Employees volunteer regularly at the Denver Rescue Mission preparing meals for the local homeless community.
					<br/><br/>
					Say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> and we'll keep giving you all the attention you deserve, Denver.
					</p>
				</div>
				<a href="#close" class="control close png_bg"></a>
			</div>
			</div>
		</div>
	</li>
	</ul>
</div>
</div>

</span>

//checks for the beginning of the carousel
		if (cur <= 1) {
			$.log("your at the beginning");			
			$btn_prev.hide();
			curSlide = 1;
		} else {
			$btn_prev.show();
			curSlide = cur;
		}
		
		//check if the details are not showing, and if we have reached the last element - 2
		if( cur+2 >= numSlides && $carousel.hasClass("view_collapsed")) {
			$.log("setCurrentSlide::if( cur+2 >= numSlides && $carousel.hasClass('view_collapsed'))");
			$btn_next.hide();
			curSlide = cur;
		} else if(cur >= numSlides && $carousel.hasClass("view_expanded")){
			$.log("setCurrentSlide::else if(cur >= numSlides && $carousel.hasClass('view_expanded'))");
			$btn_next.hide();
			curSlide = numSlides;
		} else {
			curSlide = cur;
			$btn_next.show();
		}
		
		//set current object in DOM
		$('.current').removeClass('current');
		
		return $scene.find('li:eq('+(cur-1)+')').addClass('current').animatePerson();
		
	}
	
	// open targeted person's detail (like .show() for this project)
	jQuery.fn.animatePerson = function(){
		//cache elements
		var $personContainer = $(this);
		var $thisPerson = $personContainer.find(".person");		
		var $details = $personContainer.find(".details");
		var detailWidth = 630;
		
		//move to current person
		setTimeout( function(){
			$window.stop().scrollTo( $personContainer, 800, {queue:false});
		}, 200);

//check if details already are open
		if ( !$details.is(':visible') && $carousel.hasClass('view_expanded') ) {
				
			$thisPerson.css({ 'margin': '0' });
			
			//expand this scene's item and move the target to the left-most corner
			$personContainer.css({
				'text-align':'left'
			}).animate({'width': 849}, { duration:200, queue:true });
			
			//show the details
			setTimeout( function(){
				if ($.browser.msie) {
					$details.show();
					$details.animate({'width': detailWidth}, {duration:500});
					
					setTimeout(function(){
						$details.find('.space').fadeIn(500);
					},400);
				} else {
					$details.css({'width': 60});
					$details.fadeIn(400, function(){
						setTimeout(function(){
							$details.animate({'width': detailWidth}, {queue:false});
							
							setTimeout(function(){
								$details.find('.space').fadeIn(500);
							},400);
							
						}, 200);
					});
				}
			}, 800);
			
		}
	}
	
	//close any expanded sections and scroll to the current item(like .hide() for this project)
	jQuery.fn.closeAll = function(){
		//cache elements
		var $personContainer = $(this).closest('li');
		var $thisPerson = $personContainer.find('.person')
		var $details = $personContainer.find(".details");
		$carousel.removeClass('view_expanded').addClass('view_collapsed');
		
	//====FIRST HIDE ALL DETAILS FOR PEOPLE YOU ARENT CURRENTLY LOOKING AT
		//first hide all people text, then shrink the width down to 40px
		$carousel.find('.details .space').not( $details )
			.hide()
			.parent().parent().css({ 'width': 40, 'display': 'none' });
		$carousel.find('.person').not( $('.current').find('.person') )
			.find('.open').removeClass('open');
		$scene.find('li').not( $('.current') ).css({ 'width': 280 });
		
		//move to the current person so we can see the close animation
		$window.scrollTo( $('.current') , 10 );
		
	//====NOW ANIMATE THE PERSON YOU ARE LOOKING AT AND SCROLL TO THE PERSON
		//hide the details
		$details.find('.space').stop().show().fadeOut(500);
		$details.animate({ 'width': 40 }, {duration:500, queue:false});
			
		currentIndex = $scene.find('ul li').index( $scene.find('.current') );
		$.log("current INDEX: ");
		$.log( currentIndex );
		
		setTimeout( function(){ 
			$details.hide();
			$carousel.find('.current .open').removeClass('open');
			//reset the containers widths
			$scene.find('.current').animate({
				'width': 280
				}, {
					duration:500, 
					queue:true 
			});
			
			//reset the text alignment and scroll to the element
			setTimeout( function(){
				$scene.find('li').css({'text-align':'center'});
				
				if ( currentIndex > 4 ) {
					$.log("special close case");
					setCurrentSlide( 5 );
					$btn_next.hide();
				} else {
					setTimeout( function(){ 
						setCurrentSlide( $scene.find('ul li').index( $('.current') ) + 1 );
					},200);
				}
			}, 300);
		}, 300);
	}
	
/**== 	Actions for clicking the a control button
 * 		Action Taken on click: depends on the anchor link
==**/
	$btn_controls.live("click", function(e){
		
		//perform actions for specific button click(next,prev,close)
		if( $(this).hasClass('next') ){
			$.log("$btn_controls click::next");
			setCurrentSlide(  curSlide + 1 ); 
		}else if( $(this).hasClass('prev') ){
			$.log("$btn_controls click::prev");
			setCurrentSlide( curSlide - 1 ); 
		}else if( $(this).hasClass('close') ) {
			$.log("$btn_controls click::close");
			$carousel.closeAll();
			return false;
		}
		
		/* If the details have been expanded on any container, expand the details 
		 * of the next object and scroll to it, otherwise just scroll to the element
		 */
		if( $carousel.hasClass('view_expanded') ){
			$carousel.find('.current .person').trigger("click");
		}else{
			//$window.stop().scrollTo( '.current', 800 );
		}
		
		return false;
		
	});
	
	
/**==
 * Actions performed when clicking on a person's image(or '.person') 
==**/
	$peopleTargets.live('click', function(e){
		//indicate to the carousel that one of the sections is open
		$carousel.addClass('view_expanded').removeClass('view_collapsed');
		//animate the opening of a person's details
		$(this).addClass('open clicked');
		
		cur = $scene.find('ul li').index( $(this).parent() ) + 1;
		$.log("$peopleTargets click: cur = "+cur)
		setCurrentSlide( cur );
		
		//do not follow anchor
		return false;
	});	
	
	/* Actions for clicking the yes button
	 * Action Taken on click: show the sign-up form
	 */
	$('#sw_denver_content .btn_yes').openDOMWindow({ 
		borderSize:0,
		borderColor:'transparent',
		height:544, 
		width:827, 
		positionType:'absolute', 
		positionTop:100, 
		positionLeft:($(window).width()/2 - 408), 
		eventType:'click', 
		loader:1, 
		loaderImagePath:'/landing/den/images/sw-denver/loading.gif', 
		loaderHeight:16, 
		loaderWidth:17,
		windowPadding:0,
		windowSource:'ajax', 
		windowHTTPType:'get' 
	});
	
});
</script>

Syntax Highlighting

[Open in new window]

Author Comments

none

Rating

4.49 / 8
72 Votes