• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71

// meclabs catalog test

$(function(){

	// hide masthead
	$('.content').hide();

	// hide "your way to [language]" section
	$('.blocktwo').hide();

	// get rid of old margins, width, etc
	$('.blockprodinfo').removeClass('maxwidth control-exp');

	// get rid of old product info
	$('.blockprodinfo').eq(0).hide();

	// get rid of negative top margins on product description
	$('.spo-description-wrap, .lastblock').css({'margin-top':'0px'});

	// make sure container's z-index isn't dragging down popups
	$('.lastblock').css({'z-index':'auto'});


	// content to insert
	var content = '<!-- begin meclabs test html --> <style type="text/css"> .meclabs_nov_2016{ font-size: 20px; font-family: gothambook, sans-serif; color: #432; } /********************************* HEADER **********************************/ .meclabs_nov_2016_header{ background: #314510; background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_nov_2016/assets/esp_bg_tile.jpg\'); background-attachment: fixed; color: #fff; padding: 44px 20px; text-align: center; font-family: gothamlight; border-bottom: 3px solid #a00; position: relative; overflow: hidden; } .meclabs_nov_2016_header:before{ content: \'\'; background-image: radial-gradient( ellipse at 39% 30%, rgba(255,255,150,0.3) 0%, rgba(255,255,255,0) 50% ); position: absolute; left: 0px; top: -25%; width: 100%; height: 150%; } .meclabs_nov_2016_title, .meclabs_nov_2016_subtitle{ position: relative; } .meclabs_nov_2016_title{ font-size: 44px; padding-bottom: 12px; } .meclabs_nov_2016_title span{ color: #ecc004; text-transform: uppercase; } .meclabs_nov_2016_subtitle{ font-size: 24px; } .meclabs_nov_2016_subtitle span{ font-family: gothambold; display: inline-block; } .meclabs_nov_2016_subtitle img{ height: 30px; vertical-align: middle; padding: 0px 0px 4px 0px; } /********************************* PRODUCT INFO **********************************/ .meclabs_nov_2016_wrapper{ max-width: 1100px; /*border: 1px dotted green;*/ margin: auto; padding: 20px; text-align: center; } .meclabs_nov_2016_product_text{ display: inline-block; vertical-align: middle; width: 48%; text-align: left; } .meclabs_nov_2016_bullets{ color: #0098db; line-height: 1.3; padding: 0px 20px; list-style: disc; } .meclabs_nov_2016_bullets li{ margin: 20px 0px; } .meclabs_nov_2016_bullets span{ color: #432; } .meclabs_nov_2016_learn_more{ font-family: gothambold; color: #0098db; text-transform: uppercase; font-size: 70%; text-decoration: none; } .meclabs_nov_2016_learn_more:hover{ color: #1ae; } /* col 2 (product image) */ .meclabs_nov_2016_product_img{ display: inline-block; vertical-align: middle; width: 45%; margin-left: 2%; text-align: center; /*border: 1px dotted green;*/ padding: 20px 0px; } .meclabs_nov_2016_product_img img{ max-width: 98%; } /********************************* REVIEW STARS **********************************/ .meclabs_nov_2016_review_star_container{ /*margin: 10px 0px;*/ } .hollow_stars{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; color: #fdba3d; } .filled_stars{ position: absolute; left: 0px; top: 0px; overflow: hidden; white-space: nowrap; width: 92%; color: #fdba3d; } .meclabs_nov_2016_review_star_text{ font-size: 14px; display: inline-block; vertical-align: bottom; } /********************************* MECLABS MODALS **********************************/ .meclabs_nov_2016_modal_container{ position: fixed; z-index: 100; top: 0px; left: 0px; width: 100%; height: 100%; font-family: gothamlight, sans-serif; overflow: scroll; display: none; } .meclabs_nov_2016_overlay{ position: fixed; background: rgba(255,255,255,0.8); top: 0px; left: 0px; width: 100%; height: 100%; overflow: scroll; } .meclabs_nov_2016_modal{ position: relative; max-width: 800px; margin: 30px auto; text-align: right; } .meclabs_nov_2016_close_modal{ text-decoration: none; color: #333; font-size: 22px; text-transform: uppercase; display: inline-block; margin-bottom: 10px; } .meclabs_nov_2016_close_modal span{ vertical-align: middle; } .meclabs_nov_2016_svg{ vertical-align: middle; } .meclabs_nov_2016_modal_box{ background-color: #333; padding: 40px; color: #fff; box-shadow: 0px 2px 5px 0px #333; background-size: cover; background-position: center top; display: none; } .meclabs_speak_modal_bg{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_nov_2016/assets/meclabs_speak_modal_bg.jpg\'); } .meclabs_method_modal_bg{ background-image: url(\'http://www.rosettastone.com/lp/spo/meclabs_nov_2016/assets/meclabs_method_modal_bg.jpg\'); color: #000; } .meclabs_method_modal_bg .meclabs_nov_2016_modal_title:after{ border-color: #07b; } .meclabs_nov_2016_modal_text{ width: 50%; text-align: left; display: inline-block; } .meclabs_nov_2016_modal_title{ font-size: 24px; margin: 10px 0px; } .meclabs_nov_2016_modal_title:after{ content: \'\'; display: block; width: 35px; border-top: 3px solid #fdba3d; margin-top: 15px; margin-left: 1px; } .meclabs_nov_2016_modal_text p{ font-size: 16px; line-height: 1.3; margin: 15px 0px; } </style> <!--******************************** MECLABS PRODUCT DESCRIPTION *********************************--> <div class="meclabs_nov_2016"> <!-- header --> <div class="meclabs_nov_2016_header"> <div class="meclabs_nov_2016_title"><span>Learn <span class="js_langname">a language</span></span></a> with Rosetta&nbsp;Stone<sup>&reg;</sup></div> <div class="meclabs_nov_2016_subtitle">PC Magazine\'s Editors\' Choice Winner for the last 4 years: <span>best language learning software <img src="http://www.rosettastone.com/lp/spo/meclabs_nov_2016/assets/award_ribbon.png" alt=""></span></div> </div> <!-- product info --> <div class="meclabs_nov_2016_wrapper"> <div class="meclabs_nov_2016_product_text"> <ul class="meclabs_nov_2016_bullets"> <li><span>Trusted by millions worldwide for 20+ years, including educational institutions and corporate clients such as NASA and the US State Department.</span></li> <li><span>The only language platform that helps you improve pronunciation and build confidence through speech recognition software and native tutors. <a class="meclabs_nov_2016_learn_more js_meclabs_learn_more" data-modal="speak" href="#">Learn&nbsp;More</a></span></li> <li><span>Fully immersive curriculum, sequenced to introduce new skills in a way that stimulates your brain\'s natural language learning ability. <a class="meclabs_nov_2016_learn_more js_meclabs_learn_more" data-modal="method" href="#">Learn&nbsp;More</a></span></li> </ul> </div> <div class="meclabs_nov_2016_product_img"> <img src="http://www.rosettastone.com/lp/spo/meclabs_nov_2016/assets/nov_2016_devices.png" alt=""> <div class="meclabs_nov_2016_review_star_container"> <div class="hollow_stars"> &#9734; &#9734; &#9734; &#9734; &#9734; <div class="filled_stars"> &#9733; &#9733; &#9733; &#9733; &#9733; </div> </div> <div class="meclabs_nov_2016_review_star_text">(239 Reviews)</div> </div> </div> </div> </div> <!--******************************** MECLABS MODALS *********************************--> <div class="meclabs_nov_2016_modal_container"> <!-- overlay --> <div class="meclabs_nov_2016_overlay js_close_meclabs_modal"></div> <!-- modal --> <div class="meclabs_nov_2016_modal"> <!-- x close --> <a href="#" class="meclabs_nov_2016_close_modal js_close_meclabs_modal"> <!-- x in circle --> <svg class="meclabs_nov_2016_svg" width="30" height="30" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"><![CDATA[ .meclabs_nov_2016_svg line, .meclabs_nov_2016_svg circle{ stroke:#333; stroke-width:0.6; stroke-linecap:round; fill:transparent; } ]]></style> <circle cx="5" cy="5" r="4.5"></circle> <line x1="3.5" y1="3.5" x2="6.5" y2="6.5"></line> <line x1="3.5" y1="6.5" x2="6.5" y2="3.5"></line> </svg> <span>Close</span> </a> <!-- speak like a native --> <div class="meclabs_nov_2016_modal_box meclabs_speak_modal_bg" data-modal="speak"> <div class="meclabs_nov_2016_modal_text"> <div class="meclabs_nov_2016_modal_title"> Speak like a native </div> <p>Gain confidence and perfect your pronunciation with Rosetta Stone’s pioneering speech recognition technology, which compares your speech to that of thousands of native speakers, so that you can correct and improve.</p> <p>Then practice what you’ve learned and master the art of conversation with live tutoring sessions from actual native speakers, available 24 hours a day, 7 days a week.</p> </div> </div> <!-- method --> <div class="meclabs_nov_2016_modal_box meclabs_method_modal_bg" data-modal="method"> <div class="meclabs_nov_2016_modal_text"> <div class="meclabs_nov_2016_modal_title"> An award-winning method that works </div> <p>Designed by linguists and trusted by millions, our unique language programs teach you another language the way you learned your first: through immersion.</p> <p>Forget dry and boring memorization—with Rosetta Stone, you’ll learn <span class="js_langname"></span> naturally, through engaging activities that captivate and entertain, making your new language feel like your native tongue.</p> </div> </div> </div> </div> <!-- end meclabs test html -->';


	// insert new content
	// document.querySelector('.blockprodinfo').innerHTML = content;
	$('.topblock').before(content);



	// close modal window
	$('.js_close_meclabs_modal').on('click', function(){
		// fade out modal container
		$('.meclabs_nov_2016_modal_container').fadeOut(function(){

			// hide modals (because user might choose different modal)
			$('.meclabs_nov_2016_modal_box').hide();
		});
		return false;
	});


	// open modal window
	$('.js_meclabs_learn_more').on('click', function(){
		var modal = this.getAttribute('data-modal');
		// prepare correct modal
		$('.meclabs_nov_2016_modal_box[data-modal='+modal+']').show();
		
		// fade in whole overlay
		$('.meclabs_nov_2016_modal_container').fadeIn();
		return false;
	});



	// get lang name from learn-[language] in url path
	function getLangName(pathname){
		var langname = (pathname.match(/learn-([^\/-]+)/) || [])[1] || 'a language';
		langname = langname.replace(/^.(?! language)/,function(v){
			return v.toUpperCase();
		});
		return langname;
	}

	// show lang name everywhere
	$('.js_langname').html(getLangName(window.location.pathname));

});