I am using a Framework 7 to develop a web app, and in it, I have it so the menu is a left panel that opens from a menu button. When the menu is open, the body has the class .with-panel-left-cover. I have been trying to add a class to another part of the document when this occurs, so I can add styling. Below is the code and what I am trying to use right now.
if ( $('body').hasClass('with-panel-left-cover') ) {
$('.views').addClass( "overlay" );
}
And the html (with filler text)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>My App</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="links/font-awesome-4.4.0/css/font-awesome.min.css">
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="dist/css/framework7.ios.min.css">
<link rel="stylesheet" href="dist/css/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="links/css/my-app.css">
<script src="phonegap.js"></script>
</head>
<body>
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover" style="background:lightgray">
<div class="content-block">
<p> <a class="button button-big color-blue button-fill panel-close" href="#index"><i class="fa fa-home fa-lg fa-fw"></i> Step 1</a> </p>
<p> <a class="button button-fill button-big panel-close" href="#about"><i class="fa fa-info fa-lg fa-fw"></i> Step 2/a> </p>
<p> <a class="button button-fill button-big panel-close" href="#form"><i class="fa fa-file fa-lg fa-fw"></i> Step 3</a> </p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<!-- Navbar inner for Index page-->
<div data-page="index" class="navbar-inner" style="background-color:white">
<!-- We have home navbar without left link-->
<div class="center sliding"><strong>Phone App</strong></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class--> <i class="icon icon-bars"></i>
</div>
</div>
<!-- Navbar inner for About page-->
<div data-page="about" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>How it works</strong></div>
</div>
<!-- Navbar inner for Services page-->
<div data-page="services" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding">Services</div>
</div>
<!-- Navbar inner for Form page-->
<div data-page="form" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>Submissions</strong></div>
</div>
</div>
<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Index Page-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content" style="background-color: #ed1c24" >
<img src="images/Filler.png" alt="" class="ri">
<!--<h1 style="font-size: 3em;
color: ghostwhite;
text-shadow: red -2px -1px 1px;"> Flash <i class="fa fa-bolt" style="color: white; text-shadow: yellow -1px 2px 25px;"></i> News </h1>
<h2 style="color:ghostwhite;text-shadow: red -2px -1px 1px;">Please swipe to the right or use the above button to navigate the app!</h2>-->
</div>
</div>
<!-- About Page-->
<div data-page="about" class="page cached">
<div class="page-content" style="padding-top:0px; padding-bottom:0px">
<div class="content-block" style="padding:0; margin:0px">
<div class="content-block-title"></div>
<div class="one" style="background-image:url(images/8-People.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="two" style="background-image:url(images/12370-NOAIKP.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="three" style="background-image:url(images/10895-NN6QH9.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Page-->
<div data-page="form" class="page cached">
<div class="page-content">
<iframe src="http://www.filler.com" style="width: 100%;height: 100%;border: 0;"></iframe>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="links/js/my-app.js"></script>
</body>
</html>
Related
I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.
I have a portfolio / landing page with a scroll down icon / link in center of page; however, the effect when the page scrolls down is not working as intended. if I click on any link on the top navbar I get the scroll up effect I want. If someone can point out what I'm missing. This was done using bootstrap framework. here's the link to the page
http://techgeorge.org/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="portfolio, projects, Information Technology, Web Development, Android Development">
<meta name="author" content="George Louis">
<title>Techgeorge - This is my portfolio. A list of some of my projects. Web Development, and Android Development</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Tech</span>George
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#myCarousel">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#map">Map</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 id="sub-heading"><span class="light">Tech</span>George</h2>
<img src="img/mypic.png" class="mypic" alt="Smiley face" height="100" width="100">
<p>Here you'll find a list of my projects!</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-youtube left fa-fw"></i> <span class="network-name">Youtube</span>
</li>
</ul>
<!-- scroll down button -->
<a href="#myCarousel" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<br>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">My Projects
<small>Web Development & Android Applications</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/sohotechnology.png" alt="">
</a>
<h3>sohotech</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/techgeorge.org.png" alt="">
</a>
<h3>
techgeorge
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/calculator.png" alt="">
</a>
<h3>
Web Calculator
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/simon-game.png" alt="">
</a>
<h3>
Simon Game
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/clock.png" alt="">
</a>
<h3>
Pomodoro Clock
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/tictactoe.png" alt="">
</a>
<h3>
Tic Tac Toe
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="img/netDroid.png" alt="">
<h3>
Android: Netdroid
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/jlanscan.png" alt="">
</a>
<h3>
JLanScan
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/wiki-search.png" alt="">
</a>
<h3>
Wiki Search
</h3>
</div>
</div>
<!-- /.row -->
<hr>
<!-- /.row -->
</div><!-- /.carousel -->
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<img src="img/me.png" alt="Smiley face" height="100" width="100">
<h2>About Me</h2>
<p>My name is George and I'm a long time IT and Developer who venture in many areas of Information Technology. I am a certified Front End Web Developer from freecodecamp.org. And I hold several certification from Microsoft. I spend my days developing apps, making youtube video tutorials youtube channel, and writing for my blog PCtechtips.org</p>
<p>I have experience in Information Technology and Developing Web and Mobile Apps. You can contact me # georgelouis825#gmail.com</p>
<p>This site was developed using Bootstrap framework. And all pictures are mine!</p>
</div>
</div>
</section>
<!-- Download Section
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
Visit Download Page
</div>
</div>
</div>
</section> -->
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © techgeorge.org 2017</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=true"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</body>
</html>
I gave an extra class to the icon and removed href
<a class="btn btn-circle js-scroll-trigger scroll-down">
<i class="fa fa-angle-double-down animated"></i>
</a>
After that i wrote this JS
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('#myCarousel').offset().top }, 'slow');
return false;
});
});
I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:
----------------- main.js ----------------------------
var architectApp = angular.module("architectApp");
architectApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'indexCtrl'
}).
when('/detail', {
templateUrl: 'detail_zerohouse.html',
controller: 'detailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
-------------- indexCtrl.js ----------------------------
architectApp.controller('indexCtrl', function($scope){
});
-------------- detailCtrl.js --------------------------
architectApp.controller('detailCtrl', function($scope){
});
-------------------------- root.html ---------------------
<!DOCTYPE html>
<html lang="en" ng-app="architectApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS Root</title>
<!-- AngularJS-->
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="js/main.js"></script>
<script src="js/indexCtrl.js"></script>
<script src="js/detailCtrl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Google Roboto Font-->
<link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<!-- Main user stylesheet-->
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Media helper Fancybox-->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<!-- Thumbs helper Fancybox-->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- SmoothScroll JS-->
<script src="js/smooth-scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize SmoothScroll
smoothScroll.init();
// set Fancybox properties
$(".fancybox").fancybox({
// fitToView : false, opens the image already in fullscreen
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
closeClick : true,
hideOnOverlayClick : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
</head>
<body class="container-fluid" ng-view>
</body>
</html>
------------------------ index.html ------------------------
<nav class="nav navbar-default" id="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="detail.html">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
----------------------- detail.html ------------------------------
<nav class="nav navbar-default navbar-top-offset" id="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="index.html#navigation">
<div class="col-md-2 tile logoTile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/7thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8text.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8plan.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-md-2 tile">
<img src="img/zerohouse/11thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/12thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/10thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/9thumb.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
Thanks for any help, I've tried everything I could think of but got nowhere.
/
-/css
-/fancybox
-/helpers
-/img
-/js
-detailCtrl.js
-indexCtrl.js
-main.js
-detail_zerohouse.html
-index.html
-root.html
All .html files are directly in the root folder
I think that you forgot the ngRoute dependency:
var architectApp = angular.module("architectApp",['ngRoute']);
Also to go to detail you should use
<a href="#/detail">
instead of
<a href="detail.html">
Also what you need to rename your file: root.html should be renamed index.html and index.html to root.html.
You need to have the index.html as your landing main page.
got it working, the links now work like '/#/detail'. Can somebody help where to link the fancybox.js? It does not work now. Missing [ ] braces
I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems).
I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. Here is CSS:
#homepageframex > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
And here is the HTML that connects to this CSS which works fine:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<p>Fade In</p>
<div id="homepageframex">
<div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
<script type="text/javascript">
(function( $ ) { // closure to prevent JQuery conflicts
$('.fadein-link').click(function(){
$('#homepageframex div h1').fadeIn(3000);
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
Now this works fine. The problem is when I try to implement this same code into a very complicated Bootstrap layout:
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! Does anyone know why?
<script type="text/javascript">
(function( $ ) { // closure to prevent
$('.fadein-link').click(function(){
$('#homepageframex div div div h1').fadeIn(3000);
});
})(jQuery);</script>
#homepageframex > div > div > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
Can anyone help and let me know why this is not working for me? What is it that is conflicting?
Thanks.
And here is the complete code of page that is not working:
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
<div class="container" style="background-color: #FFFFFF;">
<div class="row">
<div class="col-xs-10 text-center"></div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">About</p>
</div>
<div class="col-xs-1 text-center">
<p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p>
</div>
</div>
</div>
</div>
<!-- END NAV BAR -->
<!-- BEGIN HEADER -->
<!-- <header> -->
<!-- BEGIN container for HEADER DIV -->
<!-- BEGIN DIV for top header DIVs -->
<div id="headerdivs" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<span class="logotop"><img src="images/logo.png" height="200" width="168" alt="" /></span>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p>Fade In</p>
</div>
</div>
</div>
</div>
<!-- END DIV for top header DIVs -->
<!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down1 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage1" class="col-xs-12 text-center">
<img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text here also
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down2 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage2" class="col-xs-12 text-center">
<img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
<p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text three
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down3 -->
<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe4 -->
<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down4 -->
<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe5 -->
<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe7 -->
<!-- BEGIN FOOTER -->
<footer>
<!-- BEGIN container for NEWSLETTER DIV -->
<div class="container">
<!-- BEGIN DIV Newsletter -->
<div id="newsletterX" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>
</div>
<div class="col-sm-12 text-center" style="color: red;">
<form class="form-horizontal">
<!-- BEGIN DIV for Form Group Line 2 -->
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
<span><input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
<div class="col-xs-1">
<input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
</div>
<div class="col-xs-2">
</div>
</div>
<!-- END DIV for Form Group Line 2 -->
</form>
</div>
</div>
</div>
</div>
<!-- END DIV Newsletter section -->
</div>
<!-- END container for NEWSLETTER DIV -->
</footer>
<!-- END FOOTER -->
<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->
<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();
MTFontIds.push("693341"); // Gill Sans® W01 Light
MTFontIds.push("692628"); // Gill Sans® W01 Roman
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->
<script type="text/javascript">
(function( $ ) {
$('.fadein-link').click(function(){
$('#content').fadeIn(3000);
//$('#c div').css({
// width:1000,
// height:1000,
});
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
I just set up a bootply with your code - Bootply - and it's working after removing the
'closure to prevent' comment from
(function( $ ) { // closure to prevent
I've added a <div class="fadein-link">fade in</div> to trigger the fade-in.
Update:
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>.
Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. It could be necessary to use 2 different jQuery versions. e.g. if included plugins would only work with a specific version, but this doesn't seem to be the case. Removing one of the jquery.js includes didn't solve the issue.
If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of e.g. additional closing )}; which was already removed.
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console
Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments. It's possible to move such an extending discussion from the comments to chat, but it's necessary to have at least 20 reputation for that. Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too).
on my navigation bar i have 5pages Home,About US,Recently Passed,Areas,Contact
The contact seems to go underneath.
i have tried making the font smaller but i still haven thad any lucky would someone pleas ebeable to help me out.
here is the link to the website for a preview - http://leetaxi.webuda.com/index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Graduate School Of Motoring</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/scripts.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
<!-- Change Color Stylesheet Here -->
<link rel="stylesheet" href="css/colors/default.css">
<!-- TEMPLATE STYLESHEETS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/layout.css">
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt ie 7]>
<p class="browsehappy">you are using an <strong>outdated</strong> browser. please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="preloader"><i class="fa fa-spinner spin"></i></div>
<!-- SLIDER -->
<div class="slider-wrapper">
<div class="rev-slider">
<ul>
<!-- SLIDE #1 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-1.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-2.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #2 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-3.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #3 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-4.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
</ul>
</div><!-- End .rev-slider -->
</div><!-- End .slider-wrapper -->
<div class="header">
<div class="container">
<!-- LOGO -->
<a href="index.html" class="logo">
<img src="img/logo.png" width="70" alt="Horizon">
</a>
<ul id="sn" class="main_menu">
<li><a class="current" href="index.html">Home</a></li>
<li>About</li>
<li>Recently Passed</li>
<li>Areas</li>
<li>Contact</li>
</ul><!-- End .main-menu -->
</div><!-- End .container -->
</div><!-- End .header -->
<!-- ABOUT -->
<section id="about" class="sect-1">
<div class="container">
<div class="section-title">
<h1 class="title">About Us</h1>
<p class="description">These are some of the services we offer
</li></div></p>
<div align="center"><ul class="features">
<p>At Graduate School of Motoring, we have been providing quality driving instruction to all abilities for over 20 years.</p>
<p>We have both male and female instructors to make you feel comfortable and at ease at all times during your learning experience. Our lessons are always challenging, fun and kept at a pace to suit you. At Graduate School of Motoring, we understand how important it is to have a driving instructor that matches your personality.</p>
<p>This is why we have male and female instructors available, and all our instructors are friendly and patient. We know how unnerving driving a car can be, so we always work with you, instantly recognising your strengths and working on the weaknesses.</p>
<p>We also have refresher lessons available for all ages.</p>
<p>Why choose Graduate School of Motoring?<br>
Incredibly quick pass rate<br>
Male and female instructors available<br>
Long serving company with bags of experience<br>
Great block deals<br>
Refresher lessons available<br>
Friendly and patient instructors<br>
1st lesson is free of charge<br>
All ages welcome<br>
Pass plus available</p>
</ul>
</div>
</div><!-- End .container -->
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="portfolio-wrapper sect-2">
<div class="container">
<div class="section-title">
<h1 class="title">Recent Passes</h1>
<p class="description">These are some of our pupils that have recently passed.</p>
</div>
<!-- CATEGORIES -->
<ul class="filter-menu">
<li class="selected" data-cat="*">All</li>
</ul><!-- End .filter-menu -->
</div><!-- End .container -->
<!-- HOOK FOR PROJECT VIEWER -->
<div class="project-wrapper"></div>
<div class="container">
<div class="portfolio clearfix">
<!-- ITEM 1 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-1.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">James Youells</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 2 -->
<div class="port-item showme" data-cat="photography">
<div class="port-overlay">
<img src="img/portfolio/port-2.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project-full.html"><i class="fa fa-search"></i> </a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Lisa Jones</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 3 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-3.jpg" alt="Portfolio Image">
<a class="lightbox-btn" data-pp="prettyPhoto" href="img/portfolio/port-3.jpg"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Sam Smith</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 4-->
<div class="port-item showme" data-cat="art">
<div class="port-overlay">
<img src="img/portfolio/port-4.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Samantha Tom</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ROW 2 -->
<!-- ITEM 5 --><!-- End port item -->
<!-- ITEM 6 --><!-- End port item -->
<!-- ITEM 7 --><!-- End port item -->
<!-- ITEM 8--><!-- End port item -->
<!-- ROW 3 -->
<!-- ITEM 9 --><!-- End port item -->
<!-- ITEM 10 --><!-- End port item -->
<!-- ITEM 11 --><!-- End port item -->
<!-- ITEM 12 --><!-- End port item -->
</div><!-- End .portfolio -->
</div><!-- End .container -->
Load more
</section>
<!-- CALLOUT -->
<section id="services" class="sect-1">
<div class="container">
<div class="callout">
<h3 class="title">We can help you if you are in: </h3>
<p> </p>
<h3 class="title">Call Us </h3>
</div><!-- End .callout -->
<ul class="feature-imgs">
<li class="one-third animated" data-animate="flipInY">
<div class="feature-hex">
<img src="img/features/features-1.jpg" alt="feature image 1" />
</div>
<h4 class="title">Gravesend<br>Dartford<br>Swanscombe<br>Darenth</h4>
<p> </p>
</li>
<li class="one-third animated middle" data-animate="flipInY" data-animate-delay="1500">
<div class="feature-hex">
<img src="img/features/features-2.jpg" alt="feature image 2" />
</div>
<h4 class="title">Medway Towns<br>New Ash Green<br>Borough Green<br>Wrotham</h4>
</li>
<li class="one-third animated last" data-animate="flipInY" data-animate-delay="2000">
<div class="feature-hex">
<img src="img/features/features-3.jpg" alt="feature image 2" />
</div>
<h4 class="title">Sevenoak<br>Sidcup<br>Erith<br>Belverdere</h4>
</li>
</ul>
</div><!-- End .container -->
</section>
<!-- TESTIMONIALS --><!-- CLIENTS -->
<div class="clients"><!-- End .container -->
</div><!-- End .clients -->
<!-- TEAM -->
<section class="sect-2">
<div class="container">
<div class="section-title">
<h3 class="title">OUR DRIVERS</h3>
</div>
<ul class="team">
<li class="one-fourth animated" data-animate="flipInY">
<div class="img-wrap">
<img src="img/team/team-1.jpg" alt="Team Member">
<i class="fa fa-camera"></i>
</div>
<span class="team-name">John Green</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1000">
<div class="img-wrap">
<img src="img/team/team-2.jpg" alt="Team Member">
<i class="fa fa-tint"></i>
</div>
<span class="team-name">Peter Brown</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1500">
<div class="img-wrap">
<img src="img/team/team-3.jpg" alt="Team Member">
<i class="fa fa-coffee"></i>
</div>
<span class="team-name">Jane Red</span>
<span class="team-job">r</span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth last animated" data-animate="flipInY" data-animate-delay="2000">
<div class="img-wrap">
<img src="img/team/team-4.jpg" alt="Team Member">
<i class="fa fa-rocket"></i>
</div>
<span class="team-name">Richard Blue</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
</ul><!-- End .team -->
</div><!-- End .container -->
</section>
<!-- OUR SKILLS -->
<section id="skills" class="sect-1"></section>
<!-- CAllOUT --><!-- End .image-callout -->
<!-- PRICING --><!-- RECENT POSTS --><!-- CONTACT -->
<div class="section-title">
<h3 class="title">Contact Us</h3>
<p class="description">Please use the contact form below to email us.</p>
</div>
<form method="post" action="php/send_message.php" class="contact-form">
<div class="one-half animated" data-animate="fadeInDown">
<span>
<input type="text" name="name" id="name" placeholder="name">
</span>
<span>
<input type="email" name="email" id="email" placeholder="email">
</span>
<span>
<input type="text" name="subject" id="subject" placeholder="subject">
</span>
</div><!-- End .one-third -->
<div class="one-half last animated" data-animate="fadeInDown" data-animate-delay="1000">
<span>
<textarea name="message" id="message" placeholder="message"></textarea>
</span>
</div><!-- End .one-half -->
<button id="submit" type="submit" class="contact-button animated" data-animate="fadeInDown" data-animate-delay="1000">Send Message</button>
</form>
</div><!-- End .container -->
</section>
<!-- MAP -->
<div class="map-button">
<i class="fa fa-map-marker"></i> LOCATE US ON THE MAP
</div>
<div class="map-wrapper">
<div id="google-map"></div>
</div><!-- End .map-wrapper -->
<!-- MAP LOCATION WINDOW -->
<div id="content">
<div id="siteNotice">
</div>
<h2 id="firstHeading" class="firstHeading">Graduate School Of Motoring</h2>
<div id="bodyContent">
<p>This is us, drop by sometime.</p>
</div>
</div><!-- End #content -->
<section class="footer">
<img class="footer-logo" src="img/logo.png" width="50" alt="">
<div class="address">
Tel: 01474 332225</div><!-- End .address -->
<ul class="social-icons">
</ul>
<div class="copy">© 2014 Gradute School Of Motoring</div>
</section>
<!-- JQUERY -->
<script src="js/vendor/jquery.min.js"></script>
<!-- PLUGINS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/scripts.js"></script>
<script src="js/plugins.js"></script>
<!-- THEME SCRIPT -->
<script src="js/main.js"></script>
Thanks a lot
In your case, just make the <ul> with a width wide enough to place all tabs in one line.
Simply add width: 90%; and text-align: center; to your .main_menu CSS class.
u can remove display: inline-block; and float: right; from .main_menu class and add margin-left to the list with at last the width of the logo, plus text-align: right; if u want menu positions aligned to the right.
so this:
.main_menu {
display: inline-block;
float: right;
font-size: 12px;
margin-top: 0;
position: relative;
}
now looks like this:
.main_menu {
font-size: 12px;
margin-top: 0;
position: relative;
background: red;
margin-left: 150px; /* logo width + some padding from it */
text-align: right;
}