Code Edit to make random image appear in Boostrap Theme

Code Edit to make random image appear in Boostrap Theme - javascript

I need a simple thing, but I'm a new programmer and if someone could help it would be great! Here's the thing:
I'm giving you the full code below and this is the page. As you can see there are 8 images inside. I need to make them appear in a random order using JavaScript. I can't make this happen, because when I put the script inside body into the Bootstrap component, it doesn't get the CSS style of Bootstrap. How can I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//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="">
<meta name="author" content="">
<title>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<!-- 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]-->
<script type="text/javascript">
var gallery = new Array();
gallery[0] = new Array(new Array ("immagine_prova5.png", "http://www.altervista.org"),
new Array ("immagine_prova6.png", "http://www.ii.org"), new Array
("immagine_prova5.png", "http://www.google.it"), new Array ("module_04.jpg", "#04"));
gallery[1] = new Array(new Array ("module_05.jpg", "#0"), new Array ("module_06.jpg",
"#06"), new Array ("module_07.jpg", "#07"), new Array ("module_08.jpg", "#08"));
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<a href="' + gallery[whichGallery][idx][1] + '"><img src="img/' +
gallery[whichGallery][idx][0] + '"></a>');
}
</script>
</head>
<body>
<script language="javascript">pickImageFrom(1);</script><br /><br />
<p> </p>
<!-- Navigation --><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"><!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-
only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Start
Bootstrap</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse --></div>
<!-- /.container --></nav><!-- Page Content -->
<div class="container"><!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"/><script
async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></a>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2393383294332670"
data-ad-slot="4230127403"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
</div>
<!-- /.row --><hr /><!-- Footer --><footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row --></footer></div>
<!-- /.container -->
<p> </p>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

The images you are adding via js are missing the css-class for your style to work.
Add class="img-responsive" to the images in your js code.
document.write('<a href="' + gallery[whichGallery][idx][1] + '">
<img class="img-responsive" src="img/' + gallery[whichGallery][idx][0] + '"></a>');

Related

mdbootstrap lightbox not working

I am using mdbootstrap lightbox code to open up lightbox on click.
Code is very simple but for some reason it is not working.
Here is my code.
I am using CDN links/urls so anyone can test it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/js/mdb.min.js"></script>
<!-- MDB core JavaScript -->
<script>
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>
When I click on the image it do not show the light box as need it.
I am not sure what is going wrong.Anybody like to check.
Thanks in advance.

Lightbox is a premium component of MDBootstrap. It means you cannot use it with MDB Free

Yes its a paid version and after purchasing it from mdbootstrap you will get required files/folders.
Updated code :
On the other hand
I have done some research on it and I am able to find the possible solution to make it work.
It is bit tricky.
mdb-addons/mdb-lightbox-ui.html
Path must be correct and exact.
For testing purpose : You can download it from here
https://github.com/rushijeware/testGitHub/blob/master/mproj10/src/main/webapp/assets/mdb-addons/mdb-lightbox-ui.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
<link rel='stylesheet' id='compiled.css-css' href='https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/compiled-4.5.7.min.css?ver=4.5.7' type='text/css' media='all' />
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>
<script>
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>
Follow the above page structure and add required JS/CSS to so it will start working easily.
I hope it help someone !

scroll down icon in center of page doesn't work as expected

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;
});
});

Add Class Once Another Class is Added

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>

Angular routing for Bootstrap content

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

Cant make my navigation bar fit all pages

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;
}

We Keep Coding

JavaScript is the programming language of the Web.

Code Edit to make random image appear in Boostrap Theme - javascript

The images you are adding via js are missing the css-class for your style to work. Add class="img-responsive" to the images in your js code. document.write('<a href="' + gallery[whichGallery][idx][1] + '"> <img class="img-responsive" src="img/' + gallery[whichGallery][idx][0] + '"></a>');

Related

mdbootstrap lightbox not working

scroll down icon in center of page doesn't work as expected

Add Class Once Another Class is Added

Angular routing for Bootstrap content

Cant make my navigation bar fit all pages

Categories

Resources