Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Daniel Halén
608 Pointsmoving pages left or right by clicking on nav.
i have a navigation bar. and i have added a swipe js function. but i want when you press on a menu it should automatic swipe to left to find the new site. and if you click home it should swipe back to home. like a animation. but i cant find the right js for it to work. Here is the coded.
<!DOCTYPE html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" xml:lang="en-gb" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Aleš Trunda alestrunda[at]gmail[dot]com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/reset_css.css" type="text/css">
<link rel="stylesheet" href="styles/basic.css" type="text/css">
<!-- Icon-Font -->
<link rel="stylesheet" href="font-awesome/font-awesome/css/font-awesome.min.css" type="text/css">
<!--[if IE 7]>
<link rel="stylesheet" href="font-awesome/font-awesome/css/font-awesome-ie7.min.css" type="text/css">
<![endif]-->
<link rel="stylesheet" href="swiper/swiper.min.css" type="text/css">
<link rel="stylesheet" href="styles/main.css" type="text/css">
<!--[if IE 8]>
<link rel="stylesheet" href="styles/ie8.css" type="text/css">
<![endif]-->
<script src="js/modernizr-custom.js" type="text/javascript"></script>
<title>Eagleheroes - Coming Soon</title>
</head>
<body>
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript">
//IE11 issue - in modernizr it looks like transitions 3d are supported, but "transform-style: preserve-3d;" is not - https://github.com/Modernizr/Modernizr/issues/762
(function getPerspective(){
var element = document.createElement('p'),
html = document.getElementsByTagName('HTML')[0],
body = document.getElementsByTagName('BODY')[0],
propertys = {
'webkitTransformStyle':'-webkit-transform-style',
'MozTransformStyle':'-moz-transform-style',
'msTransformStyle':'-ms-transform-style',
'transformStyle':'transform-style'
};
body.insertBefore(element, null);
for (var i in propertys) {
if (element.style[i] !== undefined) {
element.style[i] = "preserve-3d";
}
}
var st = window.getComputedStyle(element, null),
transform = st.getPropertyValue("-webkit-transform-style") ||
st.getPropertyValue("-moz-transform-style") ||
st.getPropertyValue("-ms-transform-style") ||
st.getPropertyValue("transform-style");
if(transform!=='preserve-3d'){
html.className += ' no-preserve-3d';
}
document.body.removeChild(element);
})();
</script>
<!--<![endif]-->
<div id="main-content">
<div id="page-loader"></div>
<div id="background">
<div id="background-image"></div>
</div><!-- background -->
<div class="content">
<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#preview">Preview</a>
<a href="#join_us">Join us</a>
<a href="#contact">Contact</a>
<a href="#signup">Sign up</a>
</div>
<div id="swiper" class="swiper-container">
<!-- Slides -->
<div class="swiper-wrapper">
<!--Home-->
<div class="swiper-slide">
<div class="slide-content">
<div class="wrapper">
<div class="slide-head">
<h2>Welcome to Eagle Heroes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis volutpat nulla eu sollicitudin.</p>
<p>In aliquet a lectus sit amet pharetra. Vivamus convallis leo enim, id facilisis purus porttitor at. Donec porttitor sem augue, a tristique risus pretium sit amet. Nulla eleifend eleifend dui nec egestas.</p>
</div><!-- slide-head -->
<div class="counter-placeholder"></div>
<div id="counter">
<div class="counter-item days">
<div class="counter-item-name">days</div>
<div class="counter-item-value">
<div class="days-val prev"></div>
<div class="days-val current"></div>
<div class="days-val next"></div>
</div>
</div><!-- counter-item -->
<div class="counter-item hours">
<div class="counter-item-name">hours</div>
<div class="counter-item-value">
<div class="hours-val prev"></div>
<div class="hours-val current"></div>
<div class="hours-val next"></div>
</div>
</div><!-- counter-item -->
<div class="counter-item minutes">
<div class="counter-item-name">minutes</div>
<div class="counter-item-value">
<div class="minutes-val prev"></div>
<div class="minutes-val current"></div>
<div class="minutes-val next"></div>
</div>
</div><!-- counter-item -->
<div class="counter-item seconds">
<div class="counter-item-name">seconds</div>
<div class="counter-item-value">
<div class="seconds-val prev"></div>
<div class="seconds-val current"></div>
<div class="seconds-val next"></div>
</div>
</div><!-- counter-item -->
</div><!-- counter -->
<div class="slide-bottom">
<div class="margin-25"></div>
<p>Have any questions? Please feel free to contact us.</p>
</div><!-- slide-bottom -->
</div><!-- wrapper -->
</div><!-- slide-content -->
</div><!-- swiper-slide -->
<!--About-->
<div class="swiper-slide">
<div class="slide-content">
<div class="wrapper">
<div class="slide-head">
<h1>About Eagleheroes</h1>
<p>Eagleheroes is a free-to-play mmorpg thats currently in alfa, but our goal is to have a beta release in December 2019. The whole idea behind the game is to make the most realistic mmorpg ever made, we don´t just mean things like great graphics and realistic characters, we are going all the way with unique character movement details, a costum made weather system, realistic in real life happenings and much more. </p>
<p>The characters can choose their own path in life and create a reputation in the various cities, do you wanna fight with the good and become a hero or fight with the bad to become a villain ? Everything is determined by youre chooses in life, and remember you only live once.</p>
</div><!-- slide-head -->
</div><!-- wrapper -->
</div><!-- slide-content -->
</div><!-- swiper-slide -->
<!--Join us-->
<div class="swiper-slide">
<div class="slide-content">
<div class="wrapper">
<div class="slide-head">
<h2>Contact</h2>
<form class="full-form has-return-msg" id="send-message" action="send_email.php" method="post" data-success-msg="Email successfully sent." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address." data-name-not-set-msg="Please enter your name." data-message-not-set-msg="Please enter the message." data-all-fields-required-msg="All fields are required.">
<div class="clearfix">
<div class="columns-two">
<input class="left-side" name="name" type="text" placeholder="name">
</div>
<div class="columns-two">
<input class="right-side" name="email" type="text" placeholder="email">
</div>
</div>
<div class="margin-10"></div>
<textarea name="message" placeholder="message"></textarea>
<div class="margin-10"></div>
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg"></div>
</form>
</div><!-- slide-head -->
<div class="counter-placeholder"></div>
<div class="slide-bottom">
<p>RSS subscribe</p>
<div class="form-email-container">
<form class="has-return-msg" id="rss-subscribe" action="save_email.php" method="post" data-opening-error-msg="Email was not added - error here." data-success-msg="Email successfully added." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address.">
<input name="email" type="text" placeholder="email">
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg tooltip-trigger"></div>
</form>
</div>
</div><!-- slide-bottom -->
</div><!-- wrapper -->
</div><!-- slide-content -->
<!--Contact-->
<div class="swiper-slide">
<div class="slide-content">
<div class="wrapper">
<div class="slide-head">
<h2>Contact</h2>
<form class="full-form has-return-msg" id="send-message" action="send_email.php" method="post" data-success-msg="Email successfully sent." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address." data-name-not-set-msg="Please enter your name." data-message-not-set-msg="Please enter the message." data-all-fields-required-msg="All fields are required.">
<div class="clearfix">
<div class="columns-two">
<input class="left-side" name="name" type="text" placeholder="name">
</div>
<div class="columns-two">
<input class="right-side" name="email" type="text" placeholder="email">
</div>
</div>
<div class="margin-10"></div>
<textarea name="message" placeholder="message"></textarea>
<div class="margin-10"></div>
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg"></div>
</form>
</div><!-- slide-head -->
<div class="counter-placeholder"></div>
<div class="slide-bottom">
<p>RSS subscribe</p>
<div class="form-email-container">
<form class="has-return-msg" id="rss-subscribe" action="save_email.php" method="post" data-opening-error-msg="Email was not added - error here." data-success-msg="Email successfully added." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address.">
<input name="email" type="text" placeholder="email">
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg tooltip-trigger"></div>
</form>
</div>
</div><!-- slide-bottom -->
</div><!-- wrapper -->
</div><!-- slide-content -->
</div><!-- swiper-slide -->
<!--Sign up-->
<div class="swiper-slide">
<div class="slide-content">
<div class="wrapper">
<div class="slide-head">
<h2>Contact</h2>
<form class="full-form has-return-msg" id="send-message" action="send_email.php" method="post" data-success-msg="Email successfully sent." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address." data-name-not-set-msg="Please enter your name." data-message-not-set-msg="Please enter the message." data-all-fields-required-msg="All fields are required.">
<div class="clearfix">
<div class="columns-two">
<input class="left-side" name="name" type="text" placeholder="name">
</div>
<div class="columns-two">
<input class="right-side" name="email" type="text" placeholder="email">
</div>
</div>
<div class="margin-10"></div>
<textarea name="message" placeholder="message"></textarea>
<div class="margin-10"></div>
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg"></div>
</form>
</div><!-- slide-head -->
<div class="counter-placeholder"></div>
<div class="slide-bottom">
<p>RSS subscribe</p>
<div class="form-email-container">
<form class="has-return-msg" id="rss-subscribe" action="save_email.php" method="post" data-opening-error-msg="Email was not added - error here." data-success-msg="Email successfully added." data-ajax-fail-msg="Ajax could not contact the script." data-email-not-set-msg="Please enter a valid email address.">
<input name="email" type="text" placeholder="email">
<input type="submit" value="Send">
<div class="ajax-loader"></div>
<div class="return-msg tooltip-trigger"></div>
</form>
</div>
</div><!-- slide-bottom -->
</div><!-- wrapper -->
</div><!-- slide-content -->
</div><!-- swiper-wrapper -->
</div><!-- swiper -->
</div><!-- content -->
<div id="socials">
<a href="#"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
</div><!-- socials -->
<div id="footer">
<div> <p>Eagleheroes © 2016 - 2017 All Rights Reserved</p></div>
</div>
</div><!-- footer -->
</div><!-- main-content -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/placeholder-fallback.js" type="text/javascript"></script>
<script src="swiper/swiper.jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>
```
1 Answer
Cory Harkins
16,500 PointsThis is a bit complicated as there are a few ways to go about it.
Important to understand outside of THE code, is how you want to structure it.
So, what I mean is that you can a) import the page on click via php/js, b) structure the index.html in a way that holds the extra pages, but hides the divs off-screen, or c) some other manner of toggle data visible/hidden
In this particular instance, it doesn't look as though the site is too complex/big, I would build a separate js file that holds a template for the HTML document, and possibly "templatize" the whole site. I'm assuming you haven't dug into React.
Filepath:
Root dir-->js- -->(all js dependencies jQuery, yadda yadda) -->index.js (this holds a function that with populate your main page content, anything that isn't shared) -->additionalPage.js (secondary page content) -->main.js (handles click events for sliding the components in and out)
Some good resources are comparing JS to PHP with Partials, or investigating React Components.
I'm certain that it can be done better with PHP or JSX, but it isn't impossible.
Daniel Halén
608 PointsDaniel Halén
608 Pointssomething like this side: https://www.berriart.com/sidr/ but insted it should go left and right.