不要让我为索引创建一个新的嵌入页面

时间：2016-07-13 01:16:51

标签： html

问题和解释：所以我正在努力将页面嵌入索引html页面，并使Home和Calendar页面正常工作。但是，实时帮助似乎不起作用。其他一切都很好，除了Live Help按钮似乎没有做任何事情。如何解决此问题并将实时帮助按钮转换为嵌入到索引html页面中的可操作页面。

以下是代码（index.html + script.js）： 

/*
••••••••••••••••••••••••

Powered by Type & Grids™
www.typeandgrids.com

••••••••••••••••••••••••
*/

jQuery.easing.def = "easeOutQuad";

$(document).ready(function()
{
	
	// Make enlarge buttons inactive if no onClick event
	$(".enlargeButton").each(function() {
        if ( $(this).attr("onClick") == undefined )  {
            $(this).addClass("projectNavInactive");
        };
    });
	
	// For fluid video embedding
	$(".video").fitVids();
	
	// Hide project info
	$(".projectInfo").css("display", "none");
	// Don't hide video info
	$(".videoInfo").css("display", "inline");
	
	// Move projects to second column
	$(".project:odd").appendTo("#col2");
		
	// Project thumbnail hover
	$(".projectThumbnail").on("mouseenter", function(e)
	{
		$(this).children(".projectThumbnailHover").fadeIn(300);
		
		$(this).children(".projectThumbnailHover").find("h4").css("display", "block");
		$(this).children(".projectThumbnailHover").find("h4").css("opacity", "0");
		$(this).children(".projectThumbnailHover").find("h4").delay(200).animate({left: '30', opacity: 1}, 200);
		
		$(this).children(".projectThumbnailHover").find("h5").css("display", "block");
		$(this).children(".projectThumbnailHover").find("h5").css("opacity", "0");
		$(this).children(".projectThumbnailHover").find("h5").delay(350).animate({left: '30', opacity: 1}, 200);
	})
	
	$(".projectThumbnail").on("mouseleave", function(e)
	{
		$(this).children(".projectThumbnailHover").fadeOut(200);
		$(this).children(".projectThumbnailHover").find("h4").animate({left: '0', opacity: 0}, 0);
		$(this).children(".projectThumbnailHover").find("h5").animate({left: '0', opacity: 0}, 0);
	})
	
	// Hide hover effect on touch devices
	if (Modernizr.touch) {
		$(".projectThumbnailHover").css("display", "none");
		$(".projectThumbnailHover").css("visibility", "hidden");
		$(".projectThumbnail").unbind("mouseenter");
		$(".projectThumbnail").unbind("mouseleave");	
	}
	
	// Page navigation
	var isWorkCurrentPage = true;
	var isAboutCurrentPage = false;
	
	$("#logoDetailView").click(function()
	{
		window.location = "../../index.html";
	});
	
	$("#workPage, #logo").click(function()
		{
			if(!isWorkCurrentPage)
			{
				isWorkCurrentPage = true;
				isAboutCurrentPage = false;
				$("#workPage").attr("class", "currentPage");
				$("#aboutPage").removeClass("currentPage");
				
				$("#about").fadeOut(500, function()
				{
					$("#work").fadeIn(500);
				});
			}
		});
	
	$("#aboutPage").click(function()
		{
			if(!isAboutCurrentPage)
			{
				isAboutCurrentPage = true;
				isWorkCurrentPage = false;
				$("#aboutPage").attr("class", "currentPage");
				$("#workPage").removeClass("currentPage");
				
				$("#work").fadeOut(500, function()
				{
					$("#about").fadeIn(500);
				});
			}
		});
	
	// Make Work page current page
	$("#workPage").attr("class", "currentPage");
	
	// Hide About page
	//$("#about").css("display", "none");
	$("#about").fadeOut(0);
	
	// For site fade site in
	$(".container").css("display", "none");
	
});

// Remove site preloader after site is loaded
$(window).load(function() {
	$('#sitePreloader').delay(200).fadeOut(500, function() {
		$(this).remove();
	});
	
	// Fade site in
	$(".container").delay(700).fadeIn(500);
});

// Portfolio slider setup
jQuery(document).ready(function($) {
	var sliderProps = {
		autoScaleSlider: true,
	   	autoScaleSliderWidth: 460,
	   	autoScaleSliderHeight: 284,
	   	captionShowEffects: '',
	   	controlNavEnabled: false,
	   	keyboardNavEnabled: true,
	   	directionNavEnabled: false,
	   	startSlideIndex: 0,
	   	imageScaleMode: 'fill' },
		openedProjectInfo,
		isAnimating = false,
		currOpenProject;

	function closeOpenedProject(el) {
		openedProjectInfo.slideUp(900);
		openedProjectInfo.parent().find('.portfolioSlider').fadeOut();
		openedProjectInfo = false;
		if(el && el.length) {
			el.css('visibility', 'visible');
		}
	}

	$(".projectThumbnail").click(function(e) {
		if(isAnimating) {
			return;
		}
		isAnimating = true;
		
		var firstImgLoaded = false,
			projectEl = $(this).parent('.project'),
			projectNav = projectEl.find('.projectNav'),
			
			//
			projectInfo = projectEl.find('.projectInfo'),
			//
			
			newOpenProjectInfo = projectEl.find(".projectInfo"),
			currEl = $(this).find(".thumbnailImage");
				
		if( !projectEl.data('slider-inited') ) {
			var portfolioSliderData = projectEl.find('.portfolioSliderData'),
				imgPreloaderOverlay;
		
			if(portfolioSliderData.length > 0) {
				imgPreloaderOverlay = $('<div class="first-img-preloader"><div class="preloader-graphics"></d</div>');
				projectEl.append(imgPreloaderOverlay);

				portfolioSliderData
					.addClass('portfolioSlidesContainer')
					.wrap($('<div class="portfolioSlider"></div>'))
					.find('li').addClass('portfolioSlide');
			
				var sliderEl = projectEl.find('.portfolioSlider');
				currEl.clone().addClass('portfolioImage myImage').appendTo(sliderEl.find('li').eq(0).removeAttr('data-src'));
				var imgLoadCounter = 0;
				
				var sliderInstance = sliderEl.portfolioSlider(sliderProps).data('portfolioSlider');
				var numSlides = sliderInstance.numSlides;
				
				// Fixes bug when resizing window on About page
				$("#logo, #workPage").click(function() {
					function bugFix() {
						sliderInstance.updateSliderSize();
						$(".projectThumbnailHover").fadeOut(800);
					}
					setTimeout(bugFix, 710);
				});
				
				//var currItemCounter = projectNav.find('.projectNavCounter'),
				var currItemCounter = projectInfo.find('.projectNavCounter'),
					arrowNext = projectNav.find('.projectNavButtons .next'),
					arrowPrev = projectNav.find('.projectNavButtons .prev'),
					arrowPrevBlocked = false,
					arrowNextBlocked = false;

				function updateNextPrevButtons() {
					if(sliderInstance.currentSlideId <= 0) {
						arrowPrev.addClass('projectNavInactive');
						arrowPrevBlocked = true;
					} else {
						arrowPrev.removeClass('projectNavInactive');
						arrowPrevBlocked = false;
					}

					if(sliderInstance.currentSlideId >= numSlides - 1) {
						arrowNext.addClass('projectNavInactive');
						arrowNextBlocked = true;
					} else {
						arrowNext.removeClass('projectNavInactive');
						arrowNextBlocked = false;
					}
				}

				sliderInstance.settings.beforeSlideChange = function() {
					currItemCounter.text( (sliderInstance.currentSlideId + 1) + ' of ' + numSlides );
					updateNextPrevButtons();
				};
				
				arrowNext.click(function() {
					if(!arrowNextBlocked) {
						sliderInstance.next();
					}
				});
				arrowPrev.click(function() {
					if(!arrowPrevBlocked) {
						sliderInstance.prev();
					}
				});

				sliderInstance.settings.beforeSlideChange.call();
				updateNextPrevButtons();
				projectEl.data('slider-inited', true);
				
				imgPreloaderOverlay.css({
					width: currEl.width(),
					height: currEl.height()
				}).fadeIn();

				sliderInstance.settings.imgLoadComplete = function() {
					imgLoadCounter++;

					if(imgLoadCounter >= 2) {
						sliderInstance.settings.imgLoadComplete = false;
						setTimeout(function() {
							//sliderInstance.updateSliderSize()
							sliderInstance.goTo(1);
							isAnimating = false;
							currEl.css('visibility', 'hidden');
							imgPreloaderOverlay.stop().fadeOut();
						}, 400);
					}
					
				};

			} else {
				if(projectNav.length > 0) {
					var currItemCounter = projectInfo.find('.projectNavCounter'),
					arrowNext = projectNav.find('.projectNavButtons .next'),
					arrowPrev = projectNav.find('.projectNavButtons .prev'),
					arrowPrevBlocked = false,
					arrowNextBlocked = false;
					arrowNext.addClass('projectNavInactive');
					arrowPrev.addClass('projectNavInactive');
				}
				projectEl.data('slider-inited', true);
				isAnimating = false;
			}
		} else {
			var sliderEl = projectEl.find('.portfolioSlider');
			if(sliderEl.length > 0) {
				sliderEl.data('portfolioSlider').goToSilent(0);
				imgPreloaderOverlay = projectEl.find('.first-img-preloader');
				imgPreloaderOverlay.css({
					width: currEl.width(),
					height: currEl.height()
				}).fadeIn();

				setTimeout(function() {
					sliderEl.show();
					
					setTimeout(function() {
						currEl.css({'visibility': 'hidden'});
						imgPreloaderOverlay.stop().fadeOut();
						sliderEl.data('portfolioSlider').isAnimating = false;
						sliderEl.data('portfolioSlider').goTo(1);
						isAnimating = false;
					}, 400);
					
				}, 450);
				
			} else {
				isAnimating = false;
			}
			
		}

		if(openedProjectInfo) {
			if(newOpenProjectInfo.is(openedProjectInfo)) {
				closeOpenedProject(currOpenProject.find(".thumbnailImage"));
				currOpenProject.find(".projectThumbnailHover").fadeOut(800, function(){currOpenProject.find(".projectThumbnailHover").css("visibility", "visible")});
				return false;
			} else {
				closeOpenedProject(currOpenProject.find(".thumbnailImage"));
				currOpenProject.find(".projectThumbnailHover").fadeOut(800, function(){currOpenProject.find(".projectThumbnailHover").css("visibility", "visible")});
			}
		}
		currOpenProject =projectEl;
		openedProjectInfo = newOpenProjectInfo.stop().delay(200).slideDown(900).data('project-open', true);
		currOpenProject.find(".projectThumbnailHover").fadeOut(200, function(){currOpenProject.find(".projectThumbnailHover").css("visibility", "hidden")});
	});
	
	$(".closeButton, #aboutPage, #logo").click(function() {
		
		// Add a delay to fix weird issue with resizing About page
		function closeSlider() {
			closeOpenedProject(currOpenProject.find(".thumbnailImage"));
			currOpenProject.find(".projectThumbnailHover").css("visibility", "visible");
		}
		//setTimeout(closeSlider, 400);
		setTimeout(closeSlider, 1);
		
	});
	
});
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">

<!--
••••••••••••••••••••••••

Powered by Type & Grids™
www.typeandgrids.com

••••••••••••••••••••••••
-->

<title>West Torrance High School's AP Physics</title>
<meta name="description" content="The website of WHS Physics">
<meta name="author" content="West Torrance High School's AP Physics">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================================================================= -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/themes/type_05.css">
<link rel="stylesheet" href="css/themes/color_06.css">

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Favicons
================================================================================================= -->
<link rel="shortcut icon" href="images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">

<!-- JS
================================================================================================= -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/jquery.easing.1.3.min.js"></script>
<script src="js/libs/jquery.fitvids.js"></script>
<script src="js/script.js"></script>

</head>
<body>

<!-- Write preloader to page - this allows the site to load for users with JS disabled -->
<script type="text/javascript">
	document.write("<div id='sitePreloader'><div id='preloaderImage'><img src='images/site_preloader.gif' alt='Preloader' /></div></div>");
</script>

<div class="container">
	
	<!-- Header begins ========================================================================== -->
	<header class="sixteen columns">
		<div id="logo">
			<h1>West Torrance High School's AP Physics</h1>
			<h2>2016-2017</h2>
			<!--
			<img src="images/logo.png" width="275" height="35" alt="Logo" />
			-->
		</div>
		<nav>
			<ul>
				<li><button id="workPage">Home</button></li>
				<li><button id="aboutPage">Calendar</button></li>
				<li><button id="chickenPage">Live Help</button></li>
				<!--<li><a href="http://wordpress.org" target="_blank">Blog</a></li>-->
			</ul>
		</nav>
		<hr />
	</header>
	
	<div id="work">
	
		<div id="overview" class="sixteen columns">
			<h3>? days till the AP TEST!</h3>
			<hr />
		</div>
			
			<h3>Announcements</h3>
			
			<p> Hello world. </p>
	
	</div>

	<div id="about">
		
		<!-- Column 1 begins ==================================================================== -->
		<div class="eight columns">
			
			<iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;ctz=America%2FLos_Angeles" style="border-width:0" width="940" height="600" frameborder="0" scrolling="no"></iframe>			
			
		</div>
		<!-- Column 2 ends ====================================================================== -->
				
	</div>
	
	<div id="chicken">
	
	
	</div>

	
	
	<!-- About page ends ======================================================================== -->
	
	<!-- Footer begins ========================================================================== -->
	<footer class="sixteen columns">
		<hr />
		<ul id="footerLinks">
			<li>&copy; 2016 Julian Rachman. All rights reserved.</li>
			<li><a href="mailto:jmrachman@gmail.com">jmrachman@gmail.com</a></li>
		</ul>
	</footer>
	<!-- Footer ends ============================================================================ -->
		
</div><!-- container -->
</body>
</html>

谢谢。 （P.S.，从stackoverflow运行代码是我的代码的错误再现）

0 个答案:

没有答案
相关问题
最新问题